工具欄,使用起來很簡單,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'
}]
})
})
);ExtJS教程-
Hibernate教程-
Struts2 教程-
Lucene教程