Панель пейджинга ExtJS4 Grid Panel - перезагрузить спиннер анимации? - PullRequest
Новая
       19

Панель пейджинга ExtJS4 Grid Panel - перезагрузить спиннер анимации?

0 голосов
/ 25 ноября 2011

в панелях сетки ExtJS 3.x, в которых использовалось удаленное хранилище данных и пейджинговые панели, была кнопка перезагрузки, которая при смене данных из хранилища переключалась бы на анимацию вращения.Однако в ExtJS4 кнопка перезагрузки теперь, похоже, не делает этого ни в примерах sencha.com, ни в сетках моего собственного приложения.Эта функциональность была удалена, или она должна быть как-то включена?

Ответы [ 2 ]

0 голосов
/ 07 декабря 2011

Переписал мое исправление как плагин панели сетки, чтобы сделать его немного чище и более модульным: 

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);
}
0 голосов
/ 05 декабря 2011

Вот обходной путь, который я нашел и буду использовать, надеюсь, просто временно:

Добавьте следующее правило в ваш CSS, чтобы использовать iconCls счетчика (не смог найти его в таблице стилей Ext):

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

Возможно, вам придется изменить путь к URL-адресу изображения в зависимости от того, где находится ваш 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");
});
...