Ext动态加载Toolbar

Posted 2020-08-22 DonaHero

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