Extjs Grid 带有来自 json 对象的数据并进行排序

Posted

技术标签:

【中文标题】Extjs Grid 带有来自 json 对象的数据并进行排序【英文标题】:Extjs Grid with data from json object with sorting 【发布时间】:2013-07-15 10:06:52 【问题描述】:

我正在尝试显示一个网格。在这种排序中不起作用。这是我的代码。

    <div id="grid-sample"></div>
    <script type="text/javascript">
        Ext.create('Ext.data.Store', 
            storeId:'cstore',
            fields:['user', 'age', 'place'],
            data: [
                        "user":"joe","age":27,"place":"sydney",
                        "user":"abel","age":29,"place":"delhi",
                        "user":"fin","age":18,"place":"san jose"
                    ]

        );

        Ext.create('Ext.grid.Panel', 
            title: 'Sample grid',
            store: Ext.data.StoreManager.lookup('cstore'),
            autoCreateViewPort: false,
            layout: 'fit',
            columns: [
                 text: 'Name', xtype: 'templatecolumn', tpl: 'user' ,sortable : true ,
                 text: 'Age', xtype: 'templatecolumn', tpl: 'age' ,sortable : true ,
                 text: 'Place', xtype: 'templatecolumn', tpl: 'place',sortable : true  
            ],
            width: 750,
            renderTo: 'grid-sample'
        );
    </script>

【问题讨论】:

【参考方案1】:

如果 dataIndex 不应该引用一个字段而是一个对象的属性会怎样?所以上面的数据可能是

data: ["user":"joe",userName:"Joeschmoe","age":27,"place":"sydney",
"user":"Jane",userName:"Jany","age":29,"place":"delhi",
"user":"Mary",userName:"mary123","age":18,"place":"san jose"
]

【讨论】:

我猜没有人回答这个:(【参考方案2】:

您需要添加 dataIndex 才能使 排序 工作。

所以你的列看起来像,

 columns: [
    text: 'Name', xtype: 'templatecolumn',tpl: 'user',dataIndex: 'user' ,sortable : true ,
    text: 'Age', xtype: 'templatecolumn', tpl: 'age',dataIndex: 'age' ,sortable : true ,
    text: 'Place',xtype: 'templatecolumn', tpl: 'place', dataIndex :'place',sortable : true  ]

dataIndex 的值应与商店中的字段名称匹配。

【讨论】:

以上是关于Extjs Grid 带有来自 json 对象的数据并进行排序的主要内容,如果未能解决你的问题,请参考以下文章

ExtJs5.1.1使用中问题集锦

ExtJS Grid JSON 存储代理错误

无法通过 json 数据加载 Extjs Grid

Extjs 3.4 自定义 JSONReader

Extjs Grid - 单击带有搜索条件的下一页按钮

EXTJS-简单的ajax请求,带有回调和json到对象的反序列化