`
liss
  • 浏览: 851292 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

Ext.widgets-toolbar

EXT 
阅读更多

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

分享到:
评论

相关推荐

    extjs学习资源

    - **菜单和工具栏**: `Ext.menu.Menu`和`Ext.Toolbar`提供了创建上下文菜单和工具栏的功能。 #### 四、总结 - 以上内容详细介绍了Extjs的核心API及其应用场景,对于初学者来说是一份非常宝贵的学习资料。通过对...

    EXT_JS实用开发指南

    其中,基本组件包括Box、Button、ColorPalette、Component、Container等,工具栏组件如Toolbar、TBButton,而表单及元素组件则涉及Editor、EditorGridPanel等。 EXT JS的强大之处在于它丰富的组件库和高度可定制性...

    extjs核心api详解

    八、Ext.menu.Menu与Ext.Toolbar 这两部分分别介绍了extjs的菜单组件和工具栏组件。它们提供了丰富的api来创建多级菜单和工具栏,支持图标、文本、分隔符、快捷键等特性,极大地增强了用户界面的功能性和可用性。 ...

    Extjs的学习资料

    - `Ext.Toolbar`:提供顶部或底部的工具栏,可以放置按钮、分割线、菜单等元素。 - `Ext.widgets.form`:涉及表单组件,如TextField、ComboBox、CheckboxGroup等,用于用户输入。 - `Ext.widgets.grid`:关于网格...

    ext教程1.pdf

    - **工具栏组件**:`Ext.Toolbar`(工具栏)、`Ext.SplitButton`(可分裂的按钮)等。 - **表单及元素组件**:`Ext.Editor`(编辑器)、`Ext.grid.EditorGridPanel`(可编辑的表格)等。 EXTJS 的强大之处在于它...

    Ext 2-使用Widgets

    8. **使用工具(Tools)**:可能涉及到Ext JS提供的工具条(Toolbar)和工具按钮(Tool),这些小图标通常位于组件头部,提供额外的功能操作。 9. **最佳实践**:分享一些在开发过程中提高性能、代码可维护性和用户...

    EXT 中文手册内具实例代码

    - **Widgets**:是 Ext 提供的一系列预定义的 UI 控件,如按钮、文本框、下拉列表等。 - **消息框 MessageBox**:提供了一个简单的方式来显示提示信息、警告或确认对话框。 - 示例:`Ext.MessageBox.alert('标题', ...

    EXT 中文手册.pdf

    - **组件介绍**:EXT提供了多种内置组件(Widgets),这些组件可以用来构建复杂的用户界面。常见的组件包括消息框(MessageBox)、网格(Grid)、Tab面板等。 - **消息框(MessageBox)**:用于弹出对话框,可以显示...

    ExtJS 3.2的中文参考手册

    - **分页栏 (Toolbar)**: 可以通过配置Grid的底部工具栏来实现分页功能,例如:`grid.bbar = new Ext.PagingToolbar({ store: store, displayInfo: true, displayMsg: '显示 {0} - {1} 条记录,共 {2} 条记录', ...

    Ext框架简介.ppt

    控件,或称作小部件(widgets),是EXT中的可视化组件,如窗口、面板、表格等,它们构成了EXT应用的主体。实用工具 Utils 包含各种辅助函数,帮助开发者更高效地编写代码。 EXT的核心组件包括但不限于以下几种: 1. ...

    extjs核心api详解.doc

    7. **Ext.widgets**:EXTJS的组件库是其另一大亮点。这里包含了各种用户界面元素,如按钮(Button、SplitButton、CycleButton)、表单组件(form上下两部分)、菜单(Menu)、工具栏(Toolbar)等。这些组件提供了...

    ext js 中文手册

    Ext JS支持多种类型的菜单项,如文本菜单项、分隔符、复选框菜单项等,并且支持将菜单项添加到工具栏(Toolbar)中。 模板(Templates)是Ext JS用来处理HTML内容的机制,它允许开发者在JavaScript中编写HTML代码,...

    EXT_JS实用开发指南_个人整理笔记.docx

    - **控件(widgets)**:提供各种可视化组件,如面板、表格、树、窗口等,它们构建在底层API之上,位于`widgets`子目录中。 - **实用工具(Utils)**:包含各种便利的工具函数,如数据格式化、JSON处理、日期管理...

    EXT_JS实用开发指南_个人整理笔记

    - **控件(Widgets)**:EXT_JS提供了丰富的可视化组件,如面板、表格、树、窗口等,它们基于底层API构建。 - **实用工具(Utils)**:提供了数据处理、JSON编码解码、日期管理、Ajax请求、Cookie管理等辅助功能。...

    EXTJS讲解个人项目经历

    - **控件(widgets)**:EXTJS提供了大量的可视化组件,如面板、表格、树、窗口等,它们都基于底层API构建。 - **实用工具(Utils)**:EXTJS提供了各种实用工具,如数据处理、JSON操作、Ajax请求、日期和数组管理...

    extjs4.0技术

    #### 六、UI Widgets Extjs4.0 提供了大量的UI组件,包括但不限于按钮、面板、表格等。 #### 七、布局管理 1. **Fit 布局**: - 子元素会自动填充满父容器的空间。 - 适用于需要响应式设计的情况,例如一个 ...

    EXTJS实用开发指南

    - 工具栏组件:Toolbar、TBBUTTON、TBFill、TBItem、TBSeparator等。 - 表单及元素组件:Editor、EditorGridPanel、GridPanel、PagingToolbar、Panel、ProgressBar、SplitButton、TabPanel、TreePanel、Viewport、...

    EXTJS实用开发指南_个人整理笔记.pdf

    2. 工具栏控件:Toolbar、Toolbar.Button、Toolbar.Fill、Toolbar.Item等。 四、高级EXTJS应用 EXTJS提供了许多高级功能,如: 1. 数据绑定:EXTJS提供了数据绑定的功能,可以将数据绑定到控件上。 2. 事件处理:...

    gxt 相关资料

    - ext-gwt-widgets-nnn.jar:可选的额外组件库,包含更多特定用途的控件。 nnn代表版本号,例如3.0.1。确保所有jar包与你的GWT版本兼容。 三、GXT组件讲解 GXT提供了丰富的组件库,包括但不限于: 1. 表格组件...

Global site tag (gtag.js) - Google Analytics