`

[转载]EXT核心API详解Ext.Toolbar(十八)

    博客分类:
  • EXT
EXT 
阅读更多

构造

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'
         }]
     })
     })
);
分享到:
评论

相关推荐

    EXT核心API详解

    EXT核心API详解 1、Ext类 ………………………………… 2 2、Array类 …………………………… 4 3、Number类 …………………………… 4 4、String类 …………………………… 4 5、Date类 ……………………………… 5 ...

    extjs核心api详解.doc

    EXTJS核心API详解是一系列详细解析EXTJS框架中关键组件和功能的文档。EXTJS是一个基于JavaScript的富客户端开发框架,用于构建交互式、数据驱动的Web应用。它提供了丰富的UI组件、强大的数据管理和网络通信机制,...

    extjs核心api详解

    标题:extjs核心api详解 描述:本文旨在深入解析extjs的核心api,通过全面的中文解释,帮助读者更好地理解和掌握extjs的各个组件与功能。extjs是一个强大的JavaScript框架,用于构建复杂的前端应用程序,其核心api...

    ext2.0 详解和API

    7. **菜单和工具栏**:如Ext.menu.Menu和Ext.toolbar.Toolbar,提供下拉菜单和顶部工具栏功能。 8. **工具提示**:如Ext.tip.ToolTip,用于显示浮动的提示信息。 **EXT2.0的Demos** "Demos_Ext2.0.rar"可能包含了...

    extjs帮助文档pdf版

    ### ExtJS核心API详解 #### 1. Ext 类 (P.2) - **概述**:`Ext` 是 ExtJS 的核心命名空间,包含了全局的方法和属性。 - **用途**:提供了一个统一的入口来访问 ExtJS 库的功能,如创建组件、管理事件等。 - **常用...

    Ext js Xtype

    如`Ext.Toolbar`,`Ext.Toolbar.Button`(已废弃,建议使用`button`),`Ext.Toolbar.Fill`,`Ext.Toolbar.Separator`等。 - **Form Components**: 用于构建表单的组件,如`Ext.FormPanel`,`Ext.form.Checkbox`,`...

    Ext组件描述,各个组件含义

    ### Ext组件概述与详解 #### 一、Ext基础组件 **1.1 Box Component (Ext.BoxComponent)** - **xtype**: `box` - **功能描述**:Box Component 是一个非常基本的 Ext 组件,主要用于定义具有边框和其他布局属性的...

    Extjs的学习资料

    7. **EXT核心API详解Ext.widgets(十八)-grid(1)**: 可能详细阐述了Grid组件的各种高级用法,如行编辑、行选择模式、拖放排序等。 通过上述资料,你可以系统地学习ExtJS的基本概念、核心API以及实际开发中的应用...

    extJs4 toolbar工具条

    tbar: Ext.create('Ext.toolbar.Toolbar', { items: [ // 工具栏项目定义 ] }) ``` #### 三、工具栏项目定义 工具栏项目可以是任意类型的 `ExtJS` 组件,如按钮、文本框等。在提供的代码示例中,可以看到以下几...

    Ext-window属性

    【Ext.Window属性详解】 在Ext JS中,`Ext.Panel`是一个强大的组件,它可以用来创建各种复杂的用户界面。当Panel被用作窗口时,它通常会继承或包含`Ext.window.Window`的一些属性。以下是对`Ext.Panel` API中与`...

    分页EXT分页EXT

    EXTJS中的分页组件称为`Ext.picker.Paging`或`Ext.toolbar.Paging`,它通常与`Ext.grid.Panel`(表格组件)一起使用,以处理大量数据。分页工具栏包含上一页、下一页、跳转到指定页和显示每页条目数量的选项。 3. ...

    Ext中文帮助文档(Ext常见界面源码,及类库方法详解)

    这个“Ext中文帮助文档”涵盖了ExtJS 2.1版本的核心类库和常见界面元素,为开发者提供了详尽的源码解析和方法解释。 一、ExtJS 2.1核心组件 在ExtJS 2.1中,主要的组件包括: 1. 表格(Grid):用于展示数据,支持...

    精通JS脚本之ExtJS框架.part1.rar

    5.4.1 Ext.Toolbar简介 5.4.2 只包含按钮的简单工具栏 5.4.3 包含多种元素的复杂工具栏 5.4.4 Ext.menu.Menu简介 5.4.5 最简单的菜单栏 5.4.6 创建三级或多级菜单 5.4.7 具有选择框的菜单 第6章 页面元素与...

    4.0Ext 类系统

    【4.0 Ext 类系统详解】 ExtJS 4.x 的重大变革之一是引入了全新的类系统,这是一项历史性的重构,旨在为开发者提供一个更为稳定、高效和易于维护的开发框架。新类系统成为了所有 ExtJS 4.x 类的基础,因此在开始...

    精通JS脚本之ExtJS框架.part2.rar

    5.4.1 Ext.Toolbar简介 5.4.2 只包含按钮的简单工具栏 5.4.3 包含多种元素的复杂工具栏 5.4.4 Ext.menu.Menu简介 5.4.5 最简单的菜单栏 5.4.6 创建三级或多级菜单 5.4.7 具有选择框的菜单 第6章 页面元素与...

    快意编程:Ext JS Web开发技术详解

    2. **组件系统**:Ext JS的核心在于其组件系统,涵盖各种控件,如表格(Grid)、面板(Panel)、表单(Form)、菜单(Menu)、工具栏(Toolbar)等。学习如何创建和配置这些组件,以及如何通过布局(Layouts)来调整...

    ext4.2学习之路

    #### 三、Ext JS 4.2核心文件详解 - `ext-all.js`:压缩后的Ext JS核心文件,适用于生产环境,减小了文件大小,提高了加载速度。 - `ext-all-debug.js`:未压缩的开发版本,包含调试信息,适合开发阶段使用。 - `...

    Ext JS 提示消息的 函数

    **Ext.MessageBox.confirm方法详解** `Ext.MessageBox.confirm`是Ext JS库中用于显示带有确认按钮的消息框的方法。此方法接受三个参数: - 第一个参数为**对话框标题**(string类型)。 - 第二个参数为**显示的...

    ext.net安装说明

    ### Ext.NET 安装与配置详解 #### 一、Ext.NET 概述 Ext.NET 是一组为 ASP.NET WebForms 和 MVC 架构设计的开源组件集合。它基于 Ext.js 库构建,提供了超过 100 种工具,包括 TextBox、ComboBox、Button、ToolBar...

    Ext组件说明 Ext组件概述

    ### Ext组件概述与初学者指南 #### 一、Ext组件概览 Ext是一个功能丰富的JavaScript框架,用于构建桌面级Web应用程序。它提供了大量的组件和工具,使得开发者能够快速且高效地构建用户界面。对于初学者而言,理解...

Global site tag (gtag.js) - Google Analytics