如果网格为空,Extjs 4 禁用排序

Posted

技术标签:

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

你好 *** 社区,

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

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

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

【问题讨论】:

【参考方案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 是否未定义。

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

【讨论】:

以上是关于如果网格为空,Extjs 4 禁用排序的主要内容,如果未能解决你的问题,请参考以下文章

ExtJs 4.1 网格的分组功能启用和禁用问题

Extjs 4.2 可排序网格,一条记录的位置固定

如果过滤器变量为空,GraphQL 禁用过滤

如何在 ExtJS 4.1 中禁用网格中的某些行

Extjs4-在加载网格后为列提供默认排序

如何禁用 ExtJS 网格中的控件?