Tutorial 11 - Tab/Stack/Button View Programming

[steven]

Everybody feels interesting at the first sight of this title. Why do you, Steven , put Stacks/Tabs/Button Views together. Well, that's because they are same.If you have took a look of hierarchy chat, you will find Stack/Button View inherit from Tabs. A a result, you could use same functions/properities to deal with any of them. The following code will take Stack for example, but it can apply to Tab/Button View. I assume you have dragged a Stack to the design area. By default, it has four items('a','b','c','d').

How to add a new item to stack danymically?
this.stacks1.insertItems([{id:"e",caption:"New Tab"}],"d", false);
You could use insertItems to add one or more items. Code above will add a new item with caption "New Tab" after item "d". If you would like new item appears before "d", set third parameters to true. You could also add two items by
this.stacks1.insertItems([{id:"e",caption:"New Tab1"},   {id:"f",caption:"New Tab2"}],"d", false);

How to delete a specified item danymically?
this.stacks1.removeItems(['a','b']);
You could use removeItems to remove one or more items. Note that you need do
this.stacks1.removeItems(['a']);
intead of
this.stacks1.removeItems('a');
to remove one item. The first parameter must be an array.

How to update one item of stack danymically?
stacks1.updateItem('a', {closeBtn:true,caption:"another caption"});
Code above use updateItem to danymically change item 'a'. Code will add a close button and chage caption to "another caption";

How to append a new grid to stack danymically?
var g = (new linb.UI.TreeGrid).host(this,"treegrid2")   .setHeader([{"id":"col1", "width":80, "type":"label", "caption":"col1"}])   .setRows([["aaa"],["bbb"]]); this.stacks1.append(g, 'a');
Code above will create a new grid with two rows and put grid into item a.