标签：item 动态加载 ace 添加 快速 实现 ext1 官方 doc
在使用Ext的GridPanel时候，有时候需要面板不用重新加载而去更新Store或者Toolbar，Store的方法有很多，例如官方api给我们提供的Store.load(),Store.reLoad()，等方法都可以对数据进行重新加载，在这篇博文中，主要来阐述如何动态加载Toolbar。
实现动态的加载Toolbar，首先必须知道，Toolbar是加载在panel上的，可以根据，重新加载Panel来进行增加，但是，不管是对于性能或者是代码的维护上来说，这种方式肯定都是不可取的。
接下来进入正题，实现Toolbar的动态加载，在官方的文档中建立一个Toolbar给出了如下的方法：
Ext.create(‘Ext.toolbar.Toolbar‘, { renderTo: document.body, width : 500, items: [ { // xtype: ‘button‘, // 默认的工具栏类型 text: ‘按钮‘ }, { xtype: ‘splitbutton‘, text : ‘分割按钮‘ }, // 使用右对齐容器 ‘->‘, // 等同 { xtype: ‘tbfill‘ } { xtype : ‘textfield‘, name : ‘field1‘, emptyText: ‘输入搜索词‘ }, // 添加工具栏项之间的垂直分隔条 ‘-‘, // 等同 {xtype: ‘tbseparator‘} 创建 Ext.toolbar.Separator ‘text 1‘, // 等同 {xtype: ‘tbtext‘, text: ‘text1‘} 创建 Ext.toolbar.TextItem { xtype: ‘tbspacer‘ },// 等同 ‘ ‘ 创建 Ext.toolbar.Spacer ‘text 2‘, { xtype: ‘tbspacer‘, width: 50 }, // 添加一个50像素的空格 ‘text 3‘ ] });
根据上面的代码我们可以很快速的建立一个Toolbar，我们在上面的代码中应主要关注一下items属性，接下来就把上面的代码进行一些改变。
var A = {text: ‘A‘, handler: func1}; var B = {text: ‘B‘, handler: func2}; var C = {text: ‘C‘, handler: func3}; var D = {text: ‘D‘, handler: func4}; var E = {text: ‘E‘, handler: func5}; var toolbar = Ext.create(‘Ext.toolbar.Toolbar‘, { autoShow:true, items: [ A,B,C,D,E ] });
在上述的代码中，text的值为我们的按钮，其中具体的方法在handler中，变量toolbar共加载了5个按钮ABCDE。
用一个方法举例，当点击A按钮后出发func1函数，函数代码如下：
function findNotProcessed() { toolbar.removeAll(); //清除所有按钮 toolbar.add([C,D,E]);//添加CDE按钮 store.load();//重新加载，要是数据没有变化可不要这一步骤 }
标签：item 动态加载 ace 添加 快速 实现 ext1 官方 doc
原文地址：http://www.cnblogs.com/DonaHero/p/6159895.html
