在使用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 : ,
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像素的空格
'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();//重新加载，要是数据没有变化可不要这一步骤
}