Question

在使用远程数据存储区和分页条的ExtJS 3.x网格面板中的

有一个重新加载按钮，当从商店重新加载数据时，该按钮将更改为微调器动画。但是在ExtJS4中，重新加载按钮现在似乎没有这样做，无论是在sencha.com的示例中还是在我自己的应用程序的网格中。是否删除了此功能，还是必须以某种方式启用它？

Answer 1

这是我提出并将使用的解决方法，希望暂时只是：

将以下规则添加到CSS中以使用spinner的iconCls（在Ext的样式表中找不到它）：

.x-reset .x-tbar-wait { background-image: url(../ext4/resources/themes/images/gray/grid/loading.gif);}

您可能需要修改图片网址路径，具体取决于您的css文件相对于您的ext目录所在的位置。

然后为网格商店的“beforeload”和“load”事件添加一个监听器：

store.on("beforeload", function() {
    //get the refresh button component in the grid's paging bar(s) and set its iconCls to the spinner icon
    //the string you pass to getDockedComponent might be different depending on the itemId you give to your paging bars in your grid's dockedItems config
    grid_panel.getDockedComponent("bottom_paging").getComponent("refresh").setIconCls("x-tbar-wait");
    grid_panel.getDockedComponent("top_paging").getComponent("refresh").setIconCls("x-tbar-wait");
});

store.on("load", function() {
    //get the refresh button component in the grid's paging bar(s) and set its iconCls back to the default icon
    grid_panel.getDockedComponent("bottom_paging").getComponent("refresh").setIconCls("x-tbar-loading");
    grid_panel.getDockedComponent("top_paging").getComponent("refresh").setIconCls("x-tbar-loading");
});

Answer 2

将我的修复程序重新编写为网格面板插件，使其更清晰，更模块化：

Ext.define('Cls.grid.plugin.PagingRefreshSpinner', {
    alias: 'plugin.pagingrefreshspinner',
    extend: 'Ext.AbstractPlugin',
    pluginId: 'pagingRefreshSpinner',

    init: function(grid) {
        var docked = grid.getDockedItems('pagingtoolbar'),
            btns = [],
            setIcon = function(buttons, cls)
            {
                Ext.each(buttons, function(b){
                    if(Ext.isFunction(b.setIconCls)) b.setIconCls(cls);
                });
            };

        Ext.each(docked, function(cmp) {
            var btn = cmp.getComponent('refresh');
            if(btn) btns.push(btn);
        });

        if(btns.length < 1) return;
        grid.getStore().on('beforeload', function() {
            setIcon(btns, 'x-tbar-wait');
        });
        grid.getStore().on('load', function() {
            setIcon(btns, 'x-tbar-loading');
        });
    }
});

在您的网格配置中，只需将{ptype: 'pagingrefreshspinner'}添加到其plugins数组中。就像我之前的回答中提到的那样，不要忘记将此规则添加到CSS中：

.x-reset .x-tbar-wait { 
    background-image: url(ext4_dir/resources/themes/images/gray/grid/loading.gif);
}

ExtJS4网格面板分页栏 - 重新加载按钮微调动画？

2 个答案: