Ext.widgets-toolbar

简介: Ext.Toolbar工具栏,使用起来很简单,add已准备好的元素就行方法Toolbar( Object/Array config )构造add( Mixed arg1, Mixed arg2, Mixed etc.

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(
' 右边结束 ' );

 

目录
相关文章
|
7天前
toolbar的使用
toolbar的使用
6 1
|
6月前
关于 cl_gui_alv_grid 的 toolbar 事件
关于 cl_gui_alv_grid 的 toolbar 事件
20 0
|
API 开发工具 UED
Using JavaFX UI Controls 12 Table View
原文链接地址:http://docs.oracle.com/javafx/2/ui_controls/table-view.htm#CJAGAAEE
186 0
Using JavaFX UI Controls 12 Table View
|
XML Android开发 数据格式
Toolbar的正确使用姿势
前言 Toolbar是谷歌在2014年Google IO 大会上推出的一套全新的设计规范Material Design。它的出现规范了Android开发者APP标题栏的设计风格,极大地提高了开发效率,而且Material Design设计规范也越来越多出现在我们常用的APP中。
1098 0
|
XML Android开发 数据格式
ToolBar控件详解
ToolBar控件详解 在Activity中添加ToolBar 1.添加库 dependencies { .
1082 0