如何在 ExtJS 中启用排序？答案

【问题标题】：How to enable sorting in ExtJS?如何在 ExtJS 中启用排序？
【发布时间】：2017-10-26 10:01:25
【问题描述】：

我正在寻找一种在属性网格上启用排序的方法。我试图在某些地方将一些“可排序”和“默认排序”设置为 true，但没有任何反应。通常在 ExtJS 中 sortable 是默认的，为什么它对我不起作用。

columns: [

        { header: 'Sample Name',  dataIndex: 'sample_name',flex: 1,sortable: true,
            editor: {
                allowBlank: true
            } },
        { header: 'Sample Type', dataIndex: 'sample_type',flex: 1,sortable: true,
            editor: {
                allowBlank: false
            } },
        { header: 'Text Code', dataIndex: 'text_code',flex: 1,sortable: true,
            editor: {
                allowBlank: false
            } },
]

【问题讨论】：

把小提琴放在一起。
Grid 有默认排序可用，无需应用属性。你可以在这里我的sencha fiddle。你试过sortableColumns属性吗？。
是的，我知道它具有默认排序属性，但我不知道为什么它对我不起作用。
我现在将使用 sortableColumns 属性
sortableColumns 也不起作用

标签： extjs grid extjs4.2

【解决方案1】：

您需要使用 Ext.grid.Panel。默认 sortableColumns 为 true，见documentation

在小提琴中试试这个代码：

Ext.application({
    name : 'Fiddle',

    launch : function() {
        Ext.create('Ext.data.Store', {
            storeId:'simpsonsStore',
            fields:['name', 'email', 'phone'],
            data:{'items':[
                { 'name': 'Lisa',  "email":"lisa@simpsons.com",  "phone":"555-111-1224"  },
                { 'name': 'Bart',  "email":"bart@simpsons.com",  "phone":"555-222-1234" },
                { 'name': 'Homer', "email":"home@simpsons.com",  "phone":"555-222-1244"  },
                { 'name': 'Marge', "email":"marge@simpsons.com", "phone":"555-222-1254"  }
            ]},
            proxy: {
                type: 'memory',
                reader: {
                    type: 'json',
                    root: 'items'
                }
            }
        });

        Ext.create('Ext.grid.Panel', {
            title: 'Simpsons',
            store: Ext.data.StoreManager.lookup('simpsonsStore'),
            columns: [
                { text: 'Name',  dataIndex: 'name' },
                { text: 'Email', dataIndex: 'email', flex: 1 },
                { text: 'Phone', dataIndex: 'phone' }
            ],
            height: 200,
            width: 400,
            renderTo: Ext.getBody()
        });
    }
});

【讨论】：