[size=small]工具栏,使用起来很简单,add已准备好的元素就行
[color=red]方法[/color]
[b]Toolbar( Object/Array config )[/b]
构造
[b]add( Mixed arg1, Mixed arg2, Mixed etc. ) : void[/b]
增加元素
可以是
1:Ext.Toolbar.Button 相当于addButton
2:HtmlElement 相当于addElement
3:Field 相当于addField
4:Item 相当于addItem
5:String 相当于addText
6:'separator'或'-' 相当于addSeparator
7:'' 相当于addSpacer
8:'->' 相当于addFill
[b]addButton( Object/Array config ) : Ext.Toolbar.Button/Array[/b]
添加Ext.Toolbar.Button/SplitButton对象,其实因为Ext.Toolbar.Button和Ext.Button用起来没什么区别,而且Toolbar两者都支持,我实验时没发现使用上有什么不同
[b]addDom( Object config ) : Ext.Toolbar.Item[/b]
添加DOM节点
[b]addElement( Mixed el ) : Ext.Toolbar.Item[/b]
添加Element对象
[b]addField( Ext.form.Field field ) : Ext.ToolbarItem[/b]
添加Ext.form.Field对象
[b]addFill() : Ext.Toolbar.Fill[/b]
添加一个撑满工具条的空白元素
[b]addItem( Ext.Toolbar.Item item ) : Ext.Toolbar.Item[/b]
添回Ext.Toolbar.Item对象
[b]addSeparator() : Ext.Toolbar.Item[/b]
添加一个分隔元素,相当于addItem(new Ext.Toolbar.Separator());
[b]addSpacer() : Ext.Toolbar.Spacer[/b]
添加一个空白元素,相当于addItem(new Ext.Toolbar.Spacer());
[b]addText( String text ) : Ext.Toolbar.Item[/b]
添加文本元素,相当于addItem(new Ext.Toolbar.TextItem(text));
[b]insertButton( Number index, Object/Ext.Toolbar.Item/Ext.Toolbar.Button button ) : Ext.Toolbar.Button/Item[/b]
在第index个元素之前插入button对象
[color=red][b]Ext.Toolbar.Item[/b][/color]
工具栏元素基类
[b]Toolbar.Item( HTMLElement el )[/b]
构造
[b]destroy() : void[/b]
销毁
[b]disable() : void
enable() : void[/b]
可用/禁用
[b]focus() : void[/b]
得到焦点
[b]getEl() : HTMLElement[/b]
得到当前DOM对象
[b]setVisible( Boolean visible ) : void
show() : void
hide() : void[/b]
显示隐藏
[color=red][b]Ext.Toolbar.Separator[/b][/color]
继承自item,工具栏分隔符
[u][color=red][b]Ext.Toolbar.Spacer[/b][/color][/u]
继承自item,工具栏空白元素
[color=red][b]Ext.Toolbar.TextItem[/b][/color]
继承自item,工具栏文本元素
[[u]color=red][b]Ext.Toolbar.Fill[/b][/color][/u]
继承自Spacer,工具栏空白元素,撑满工具栏
[color=red]简单的示例[/color]
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('右边结束');[/size]
[color=red]方法[/color]
[b]Toolbar( Object/Array config )[/b]
构造
[b]add( Mixed arg1, Mixed arg2, Mixed etc. ) : void[/b]
增加元素
可以是
1:Ext.Toolbar.Button 相当于addButton
2:HtmlElement 相当于addElement
3:Field 相当于addField
4:Item 相当于addItem
5:String 相当于addText
6:'separator'或'-' 相当于addSeparator
7:'' 相当于addSpacer
8:'->' 相当于addFill
[b]addButton( Object/Array config ) : Ext.Toolbar.Button/Array[/b]
添加Ext.Toolbar.Button/SplitButton对象,其实因为Ext.Toolbar.Button和Ext.Button用起来没什么区别,而且Toolbar两者都支持,我实验时没发现使用上有什么不同
[b]addDom( Object config ) : Ext.Toolbar.Item[/b]
添加DOM节点
[b]addElement( Mixed el ) : Ext.Toolbar.Item[/b]
添加Element对象
[b]addField( Ext.form.Field field ) : Ext.ToolbarItem[/b]
添加Ext.form.Field对象
[b]addFill() : Ext.Toolbar.Fill[/b]
添加一个撑满工具条的空白元素
[b]addItem( Ext.Toolbar.Item item ) : Ext.Toolbar.Item[/b]
添回Ext.Toolbar.Item对象
[b]addSeparator() : Ext.Toolbar.Item[/b]
添加一个分隔元素,相当于addItem(new Ext.Toolbar.Separator());
[b]addSpacer() : Ext.Toolbar.Spacer[/b]
添加一个空白元素,相当于addItem(new Ext.Toolbar.Spacer());
[b]addText( String text ) : Ext.Toolbar.Item[/b]
添加文本元素,相当于addItem(new Ext.Toolbar.TextItem(text));
[b]insertButton( Number index, Object/Ext.Toolbar.Item/Ext.Toolbar.Button button ) : Ext.Toolbar.Button/Item[/b]
在第index个元素之前插入button对象
[color=red][b]Ext.Toolbar.Item[/b][/color]
工具栏元素基类
[b]Toolbar.Item( HTMLElement el )[/b]
构造
[b]destroy() : void[/b]
销毁
[b]disable() : void
enable() : void[/b]
可用/禁用
[b]focus() : void[/b]
得到焦点
[b]getEl() : HTMLElement[/b]
得到当前DOM对象
[b]setVisible( Boolean visible ) : void
show() : void
hide() : void[/b]
显示隐藏
[color=red][b]Ext.Toolbar.Separator[/b][/color]
继承自item,工具栏分隔符
[u][color=red][b]Ext.Toolbar.Spacer[/b][/color][/u]
继承自item,工具栏空白元素
[color=red][b]Ext.Toolbar.TextItem[/b][/color]
继承自item,工具栏文本元素
[[u]color=red][b]Ext.Toolbar.Fill[/b][/color][/u]
继承自Spacer,工具栏空白元素,撑满工具栏
[color=red]简单的示例[/color]
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('右边结束');[/size]
本文介绍了Ext Toolbar的基本使用方法,包括构造方法及各种添加元素的方法,如按钮、分隔符、填充等。并通过一个示例展示了如何创建并渲染一个包含多种元素的工具栏。
1976

被折叠的 条评论
为什么被折叠?



