如果网格为空，Extjs 4 禁用排序答案

【问题标题】：Extjs 4 disable sort if grid is empty如果网格为空，Extjs 4 禁用排序
【发布时间】：2014-02-06 12:55:08
【问题描述】：

你好 stackoverflow 社区，

是否有可能在某个条件下为每一列禁用网格中的排序机制？像... 如果网格没有加载任何数据，排序应该被禁用，否则启用。

我的问题是，如果没有数据并且您单击要排序的列，则远程排序机制将开始加载整个数据并对其进行排序... 不需要或不希望这种行为，所以我想禁用排序的可能性。

感谢您的帮助。提前致谢，祝您有美好的一天。

【问题讨论】：

标签： sorting extjs4.2 gridpanel

【解决方案1】：

这是一个黑客攻击的一位，但似乎工作确定： P>

http://jsfiddle.net/q43HC/6/

var data = [{
    data1: 'test',
    data2: 'test'
}, {
    data1: 'test2',
    data2: 'test2'
}];

var store = Ext.create('Ext.data.Store', {
    fields: ['data1', 'data2'],
    data: data
});

Ext.define('SampleGrid', {
    extend: 'Ext.grid.Panel',
    store: store,
    height: 250,
    width: 400,
    title: 'My Window',
    columns: [{
        text: 'test',
        dataIndex: 'data1'
    }, {
        text: 'test2',
        dataIndex: 'data2'
    }],
    bbar: [{
        text: 'Clear Store',
        handler: function() {
            store.removeAll();
            var grid = this.up('grid'),
                cols = grid.query('gridcolumn'),
                i = 0,
                len = cols.length;
            for (; i < len; i++) {
                cols[i].doSort(null);
                cols[i].__toggleSortState = cols[i].toggleSortState;
                cols[i].toggleSortState = function() {};
            }
        }
    }, {
        text: 'Reload Store',
        handler: function() {
            store.loadData(data);
            var grid = this.up('grid'),
                cols = grid.query('gridcolumn'),
                i = 0,
                len = cols.length;
            for (; i < len; i++) {
                if (cols[i].__toggleSortState) {
                    cols[i].toggleSortState = cols[i].__toggleSortState;
                }
            }
        }
    }],
    renderTo: Ext.getBody()
});

Ext.onReady(function() {
    var grd = new SampleGrid();
});

当数据，以便被去除，以去除任何当前排序然后用空代替toggleSortState功能，从而点击头不会排序列我只是更改排序的状态。当重装我把功能回到店里。您将有这个适应你的项目，但可以创建一个类似的逻辑商店意识到格。 P>

【讨论】：

非常感谢。我的应用程序是不是真的工作，我没有别的东西。您可以在下面的响应中找到它。再次感谢你，因为你使我的正确途径。 :)

【解决方案2】：

您可以通过覆盖 Ext.data.Store.sort 方法全局执行此操作。我正在使用的系统使用remoteSort，因此每次用户单击列标题进行排序时都会点击服务器，即使网格本身是空的，这与您的问题几乎相同。

这是您只需在单个位置（即您的 ext-overrides 文件或公共文件）而不是在每个网格中声明的代码：

Ext.define('Ext.overrides.data.Store', {
    override: 'Ext.data.Store',
    sort: function() {
        //prevents the grid from submitting a request if store is empty, for remote sort
        if (this.count() > 0) { 
            this.callParent(arguments);
        }
    }    
});

【讨论】：

【解决方案3】：

我编写了以下函数来实现相同的解决方案：

 function disableColumnSorting(disable){
 var grid = Ext.getCmp('billRecordGrid'),
     cols = grid.query('gridcolumn'),
     colLength = cols.length,
     i = 0;


     for(i; i < colLength; i++) {
         if (disable) {
             cols[i].sortable= false;
         } else {
             cols[i].sortable= true;
         }
     }
}

感谢draw630，你给了我一个有用的提示，所以我可以自己解决我的问题。

【讨论】：

【解决方案4】：

如果您不希望在网格为空时发生任何事情，您可以将其放在网格的存储中：

listeners: {
            beforeload: function() {
                return false when my conditions is met.;
            }
        }

这样您的商店将不会加载，也不会发生任何事情。当您在网格上有一个寻呼机组件以及您的服务器期望的位置时，这也很方便，例如尚未设置的 extraParams。如果您期望 extraParams，并且尚未设置，则用户单击寻呼机上的刷新，您最终会遇到异常。但是通过此检查，如果条件不满足，您可以阻止对后端的调用。

我有时将我的 api.read URL 设置为未定义，（在商店需要尚未设置的 extraParams 的情况下）并且仅当这些参数可用时，我还设置 URL（在商店本身中调用url 已经设置好了，例如 activateRead()。在加载前，我会测试 api.read 是否未定义。

希望对您有所帮助。问候劳伦德

【讨论】：