Ext.widgets-toolbar

Ext.Toolbar
工具列,使用起來很簡單，add已準備好的元素就行

方法
Toolbar( Object/Array config )
構造

add( Mixed arg1, Mixed arg2, Mixed etc. ) : void
增加元素
可以是
1:Ext.Toolbar.Button            相當於addButton
2:HtmlElement                相當於addElement
3:Field                    相當於addField
4:Item                    相當於addItem
5:String                相當於addText
6:'separator'或'-'            相當於addSeparator
7:''                    相當於addSpacer
8:'->'                    相當於addFill

addButton( Object/Array config ) : Ext.Toolbar.Button/Array
添加Ext.Toolbar.Button/SplitButton對象,其實因為Ext.Toolbar.Button和Ext.Button用起來沒什麼區別,而且Toolbar兩者都支援，我實驗時沒發現使用上有什麼不同

addDom( Object config ) : Ext.Toolbar.Item
添加DOM節點

addElement( Mixed el ) : Ext.Toolbar.Item
添加Element對象
addField( Ext.form.Field field ) : Ext.ToolbarItem
添加Ext.form.Field對象

addFill() : Ext.Toolbar.Fill
添加一個撐滿工具條的空白元素

addItem( Ext.Toolbar.Item item ) : Ext.Toolbar.Item
添回Ext.Toolbar.Item對象

addSeparator() : Ext.Toolbar.Item
添加一個分隔元素,相當於addItem(new Ext.Toolbar.Separator());

addSpacer() : Ext.Toolbar.Spacer
添加一個空白元素,相當於addItem(new Ext.Toolbar.Spacer());

addText( String text ) : Ext.Toolbar.Item
添加文本元素,相當於addItem(new Ext.Toolbar.TextItem(text));

insertButton( Number index, Object/Ext.Toolbar.Item/Ext.Toolbar.Button button ) : Ext.Toolbar.Button/Item
在第index個元素之前插入button對象

Ext.Toolbar.Item
工具列元素基類

Toolbar.Item( HTMLElement el )
構造

destroy() : void
銷毀

disable() : void
enable() : void
可用／禁用

focus() : void
得到焦點　

getEl() : HTMLElement
得到當前DOM對象

setVisible( Boolean visible ) : void
show() : void
hide() : void
顯示隱藏

Ext.Toolbar.Separator
繼承自item,工具列分隔字元

Ext.Toolbar.Spacer
繼承自item,工具列空白元素

Ext.Toolbar.TextItem
繼承自item,工具列文本元素

Ext.Toolbar.Fill
繼承自Spacer,工具列空白元素,撐滿工具列

簡單的樣本

var tb = new Ext.Toolbar(...{width:400});
//在add之前先render,必要,不然會報錯//在add之前先render,必要
tb.render(Ext.getBody());


tb.addText('請選擇時間');
tb.add( new Ext.form.DateField(...{ //DateField
    fieldLabel:'DateField',
    format:'Y-m-d',
    disabledDays:[0,6]
    })
);
tb.addButton(
    new Ext.Toolbar.Button(...{
    text:'button',
    handler:function(item)...{
        Ext.MessageBox.alert("toolbar","您點擊了"+item.text)
    }
    })
);
tb.addSpacer();
tb.addSeparator();
tb.addFill();
tb.add(new Ext.SplitButton(...{
    handler: function(item)...{
        Ext.MessageBox.alert("點擊事件",String.format("您選擇了{0}",item.text));
        },
    arrowTooltip : "更多",
    text:'按我',
    menu:new Ext.menu.Menu(...{
        id: 'mainMenu',
       
        items: [
        ...{
            text: '功能表項目1'
        },
        ...{
            text: '功能表項目2'
        }]
    })
    })
);
tb.add('右邊結束');