ExtJS4 Grid Panel Paging Bar - 重新加载按钮微调器动画？答案

【问题标题】：ExtJS4 Grid Panel Paging Bar - reload button spinner animation?ExtJS4 Grid Panel Paging Bar - 重新加载按钮微调器动画？
【发布时间】：2012-01-06 09:06:41
【问题描述】：

在使用远程数据存储和分页栏的 ExtJS 3.x 网格面板中，有一个重新加载按钮，当从存储重新加载数据时，该按钮会变为微调器动画。然而，在 ExtJS4 中，无论是在 sencha.com 的示例中还是在我自己的应用程序的网格中，重新加载按钮现在似乎都没有这样做。此功能是否已删除，还是必须以某种方式启用？

【问题讨论】：

标签： gridview extjs extjs4 reload

【解决方案1】：

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

将以下规则添加到您的 CSS 以使用作为微调器的 iconCls（在 Ext 的样式表中找不到）：

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

您可能需要根据您的 css 文件相对于 ext 目录的位置来修改图像 url 路径。

然后为网格存储的“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");
});

【讨论】：

【解决方案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);
}

【讨论】：