`
meganlee
  • 浏览: 87844 次
  • 性别: Icon_minigender_2
  • 来自: 北京
社区版块
存档分类
最新评论

Ext.Toolbar

阅读更多
方法
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('右边结束');
分享到:
评论
1 楼 ningwuyu 2011-09-05  
写的很好?我也正在用那个,以后要多多发表啊!

相关推荐

    EXT核心API详解

    65、Ext.Toolbar.Separator类 ……… 56 66、Ext.Toolbar.Spacer类 …………… 56 67、Ext.Toolbar.TextItem类 ……… 56 68、Ext.Toolbar.Fill类 ……………… 56 69、Ext.grid.ColumnModel类 ……… 58 70、Ext....

    ext Panel+toolbar+button 实作带注释

    ext Panel+toolbar+button 实作带注释 Tom 实作实例,推荐入门学习,不带Ext js lib,请自行加入

    ExtJS入门教程(超级详细)

    65、Ext.Toolbar.Separator类 ……… 56 66、Ext.Toolbar.Spacer类 …………… 56 67、Ext.Toolbar.TextItem类 ……… 56 68、Ext.Toolbar.Fill类 ……………… 56 69、Ext.grid.ColumnModel类 ……… 58 70、Ext....

    ExtJs4_笔记.docx

    第十二章 Ext.toolbar.Toolbar 工具栏、Ext.toolbar.Paging 分页栏、Ext.ux.statusbar.StatusBar 状态栏 103 一、Ext.toolbar.Toolbar 103 二、Ext.toolbar.Paging 115 三、Ext.ux.statusbar.StatusBar 122 第十三章...

    Ext Js权威指南(.zip.001

    Ex4.0共2个压缩包特性,《ext js权威指南》 前 言 第1章 ext js 4开发入门 / 1 1.1 学习ext js必需的基础知识 / 1 1.2 json概述 / 3 1.2.1 认识json / 3 1.2.2 json的结构 / 3 1.2.3 json的例子 / 4 1.2.4 ...

    Ext JS 删除的代码

    var system_add_rent = new Ext.Toolbar({ border : false, items : [{ text : "添加月租金", iconCls : "add10", listeners : { click : function() { add_rent.show(); } ...

    ExtJSWeb应用程序开发指南(第2版)

    3.4.1 认识Ext.toolbar.Toolbar 3.4.2 只包含按钮的简单工具栏 3.4.3 包含多种元素的复杂工具栏 3.4.4 启用和禁用工具栏 3.4.5 认识Ext.menu.Menu菜单 3.4.6 最简单的菜单栏 3.4.7 创建二级或多级菜单 3.4.8 ...

    精通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章 页面元素与...

    精通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章 页面元素与...

    ExtjsBreadCrumbs:我快速而肮脏地尝试制作 Extjs 面包屑扩展

    Extjs面包屑添加一名作者我快速而肮脏地尝试制作 Extjs 面包屑扩展。 使用 Extjs 4.1.0 测试这里它运行在 jsfiddle.net 注意:这是为了在我正在从事的项目中具有我想要的功能而量身定制的。 所以我认为它的功能不像...

    ExtJS-3.4.0系列目录

    一、基础篇 1、Ext JS下载及配置 2、基本功能  2.1、Ext.MessageBox消息框  2.2、Ext.window.MessageBox 3、工具栏和菜单栏  3.1、Ext.toolbar.Toolbar工具栏  3.2、Ext.menu.Menu菜单栏 4、表单

    ext 列表页面关于多行查询的办法

    首先在Ext.grid.GridPanel中必须要有tbar对象 然后要增加listeners: { ... //add three tbar } } 可以看到这里有bbar2这样就可以增加很多bar了 代码如下:this.bbar2 = new Ext.Toolbar({ renderTo: grid.tbar, items

    Ext JS 提示消息的 函数

    function process(){ Ext.MessageBox.confirm('确认提示', '你确定要导出Excel吗?... window.open(_url, '_self','width=1,height=1,toolbar=no,menubar=no,location=no'); msgTip.hide(); } }) }

    sencha touch 模仿tabpanel导航栏TabBar的实例代码

    代码如下:/**模仿tabpanel导航栏*/Ext.define(‘ux.TabBar’, { alternateClassName: ‘tabBar’, extend: ‘Ext.Toolbar’, xtype: ‘tabBar’, config: { docked: ‘bottom’, cls: ‘navToolbar’, ...

    extjs4.0 实现了主页面框架 动态菜单 例子 表单 ajax

    extjs4.0 实现了主页面框架(主框架使用Ext.Viewport,banner使用Ext.panel.Panel,通过toolbar来放置按钮),包括左侧动态菜单实现(采用Ext.tree.Panel)动态从数据库加载数据来显示菜单(后台代码也在了通过json...

    NVKindEditor3.5.4面向对象版(修改)

    this.KE.toolbar.disable(this.tid, []); this.KE.readonly(this.tid); this.KE.g[this.tid].newTextarea.disabled = true; }, onEnable: function () { this.KE.toolbar.able(this.tid, []); this.KE....

    Extjs学习笔记之四 工具栏和菜单

    下面是一个例子: 代码如下: [removed] Ext.onReady(function() { var tb = new Ext.Toolbar({ renderTo: document.body, width: 600, height: 100, items: [ { // xtype: ‘button’, // default for Toolbars, ...

    学习ExtJS Panel常用方法

    xtype:在EXTJS的可视化组件部署中的一种机制,即通过指定xtype的值,来告诉容量如何初始化所包含的级件,如xtype:”textfiled”,表示使用Ext.form.TextFile来进行初始化当前组件。 xtype Class ————- ————...

    ExtAspNet_v2.3.2_dll

    ExtAspNet - ExtJS based ASP.NET Controls with Full AJAX Support ExtAspNet是一组专业的Asp.net控件库,拥有原生的AJAX支持和丰富的UI效果, 目标是创建没有ViewState,没有JavaScript,没有CSS,没有...

    ExtJS_Designer(安装程序与破解补丁)

    * Enhanced Button and Toolbar components * ARIA/Section 508 accessibility improvements * CSS updates for reset style scoping and easier custom theming * Update the Ext event registration model * Ext....

Global site tag (gtag.js) - Google Analytics