为什么我的ExtJS 4.2网格面板排序不起作用?

时间:2014-01-10 02:05:32

标签: sorting extjs4 gridpanel

不确定为什么我的排序不适用于此网格面板。

我设置了分拣机属性,我相信是正确的。

我也设置了sortOnLoad属性。

不确定为什么这个简单的案例不起作用。

在这种情况下,我认为我不需要进行远程排序,因此不确定为什么这不起作用。

Ext.onReady(function() {
    Ext.define('com.myCompany.MyGridModel', {
        extend : 'Ext.data.Model',
        fields : [{
            name : 'name',
            type : 'string'
        }, {
            name : 'address',
            type : 'string'
        }, {
            name : 'type',
            type : 'string'
        }]
    });
    var store = Ext.create('Ext.data.Store', {
        model: 'com.myCompany.MyGridModel',
        proxy: {
            type: 'ajax',
            url: 'centers.json',
            reader: {
                type: 'json',
                root: 'centers'
            },
            sortOnLoad: true,
            sorters: { property: 'name', direction : 'ASC' }
       }
    });
    store.load();
    var grid = Ext.create('Ext.grid.Panel', {
        layout: 'fit',
        store: store,
        columns: [{
            text: 'Name',
            dataIndex: 'name',
            name: 'name'
        }, {
            text: 'IP Address',
            dataIndex: 'address',
            name: 'address'
        }, {
            text: 'Type',
            dataIndex: 'type',
            name: 'type'
        }],
        renderTo: Ext.getBody(),
    });
    grid.getView().refresh();
});

{
  "centers": [
    {
      "name": "South Test Center",
      "address": "30.40.50.60",
      "type": "TestType2"
    },
    {
      "name": "East Test Center",
      "address": "50.60.70.80",
      "type": "TestType1"
    },
    {
      "name": "West Test Center",
      "address": "40.50.60.70",
      "type": "TestType3"
    },
    {
      "name": "North Test Center",
      "address": "20.30.40.50",
      "type": "TestType4"
    }
]
}

1 个答案:

答案 0 :(得分:2)

sortOnLoad和sorters配置选项应直接放在商店上,而不是放在模型上。

请参阅此处的Ext.data.Store文档:

http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.data.Store-cfg-sorters http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.data.Store-cfg-sortOnLoad