Ext_工具栏组件_Ext.Toolbar
工具栏常用配置：
/* 工具栏常用元素表: Ext.Toolbar.Button 可加入工具栏的按钮组件 Ext.Toolbar.Fill 用于充满工具条的空白元素 Ext.Toolbar.Item 基类，为其子类提供工具栏基本功能 Ext.Toolbar.Separator 工具栏分割符 Ext.Toolbar.SplitButton 菜单按钮 Ext.Toolbar.TextItem 文本元素 工具栏常用方法表: addButton() Object/Array config 添加一个或多个Ext.Toolbar.Button/SplitButton对象 addElement() Mixed el 添加Element元素 addField() Ext.form.Field 添加表单组件 addFill() 添加用于充满工具条的空白元素 addSeparator() 添加工具栏分隔符 addText() String text 添加字符串 add() Mixed arg1,Mixed arg2,Mixed etc 向工具栏添加元素，支持变长参数比爱哦，可一次加入多个工具栏元素 */
1.只包含按钮的简单工具栏
<mce:style type="text/css"><!-- /*只包含按钮的简单工具栏，定义按钮图标^-^*/ .newIcon{ background-image:url(../extjs2.0/resources/images/custom/new.jpg) !important; } .openIcon{ background-image:url(../extjs2.0/resources/images/custom/open.jpg) !important; } .saveIcon{ background-image:url(../extjs2.0/resources/images/custom/save.jpg) !important; } --></mce:style>
<mce:script type="text/javascript"><!-- /* 只包含按钮的简单工具栏 调用格式： addButton(Object/Array config) Ext.Toolbar.Button配置项目表: handler Function 函数，按钮在单击后调用 iconCls String 样式表，提供在按钮上显示图标 menu Mixed 可是一菜单对象或菜单对象id，也可是以有效菜单配置对象 text String 按钮上显示文字 可能的参数形式如下: 单配置对象：{ text:'新建',handler:onButtonClick,iconCls:'newIcon' } 配置对象数组:[{ text:'新建' },{ text:'修改' }] */ Ext.onReady(function(){ var config = { renderTo:'simpleToolBar', width:300 } //创建工具栏 var toolBar = new Ext.Toolbar(config); config = [ { text:'新建', //按钮上显示文字 handler:onButtonClick, //单击按钮的处理函数 iconCls:'newIcon' //按钮上显示图标 }, { text:'打开', handler:onButtonClick, iconCls:'openIcon' }, { text:'保存', handler:onButtonClick, iconCls:'saveIcon' } ] //向工具栏添加按钮 toolBar.addButton(config); function onButtonClick(btn) { alert(btn.text); } }); // --></mce:script>
2.包含多种元素的复杂工具栏
<mce:script type="text/javascript"><!-- /* 包含多种元素的复杂工具栏，2种实现方式： 1.调用不同方法加入不同元素 2.调用一次方法加入不同元素(add(...)) */ //调用不同方法加入不同元素 Ext.onReady(function(){ var config = { renderTo:'complexToolBar1', width:400 } var toolBar = new Ext.Toolbar(config); config = [ {text:'新建'}, {text:'打开'}, {text:'保存'} ] toolBar.addButton(config); //加入按钮 toolBar.addSeparator(); //加入分隔符 toolBar.addField(new Ext.form.TextField({width:100})); //加入文本框 toolBar.addFill(); //加入一个可充满工具栏的空白元素 toolBar.addElement(Ext.get('a1')); toolBar.addSeparator(); toolBar.addText('静态文本 '); //加入一静态文本 }); //调用一次方法加入不同元素(add(...)) /* 调用格式: add( Mixed arg1, Mixed arg2, Mixed etc. ) 参数说明: 向工具栏加元素，支持一可变长参数表，主要包括: 1.Ext.Toolbar.Button:工具栏按钮 2.HtmlElement:任何标准HTML元素 3.Field:表单字段 4.String:字符串 5.'->':用于充满工具条的空白元素 6.'separator' or '-':工具栏分隔符 */ Ext.onReady(function(){ var config = { renderTo:'complexToolBar2', width:400 } var toolBar = new Ext.Toolbar(config); toolBar.add( {text:'新建'}, {text:'打开'}, {text:'编辑'}, {text:'保存'}, //加入按钮 '-', //加入工具栏分隔符 new Ext.form.TextField({width:100}), //加入表单元素 '->', //加入一充满工具栏的空白元素 document.getElementById('a2'), //加入一Element元素 '-', '静态文本'); //加入一字符串 }); // --></mce:script>