Javascript 在ExtJs网格面板中按自定义列类型排序

我在Ext.grid.Panel中指定了以下列：

{text: 'Home Country', dataIndex: 'homeCountryId', width: 250, xtype: 'country-column'},

xtype

是“国家/地区列”，定义为：

Ext.define("RateManagement.view.Columns.CountryColumn", {
    extend: 'Ext.grid.column.Column',   
    xtype: 'country-column',    
    text: 'Country',
    editor: { xtype: 'country-combo', allowBlank: false, blankText: 'Country is required.'},
    renderer: function(val) {
        var locationStore = Ext.data.StoreManager.lookup('RateManagement.store.CountryStore');
        var index = locationStore.findExact('value', val);
        if (index != -1) {
            var record = locationStore.getAt(index).data;
            return record.label;
        }
    },
    sortable: true
});

当我单击网格中的列标题（“母国”）时，它根本不会排序

如何按

记录进行排序。标签

按字母顺序排序

编辑：以下是我如何更改模型的：

{name:'homeLocationId', type: 'string'}, 
{name:'homeLocation', type: 'string', convert: function (newValue, model) { 
        // homeCountryId is appened for uniqueness and additional sort
        return (newValue ? newValue : '' ) + '_' + model.get('homeLocationId');
    }
}, 

这是我的网格列：

{text: 'Home Location', dataIndex: 'homeLocationId', width: 250, xtype: 'location-column'},

---

您可以将标签设置为dataIndex，并将渲染器附加为显示“本国” 以下是工作示例：

---

我不确定您指的是

dataIndex:'label'，

，我也不确定您指的

渲染器显示“母国”

是什么意思。如果你有时间的话，请你举例说明一下，好吗？我已经改变了我的答案）谢谢你的努力，但是我在工作上遇到了一些困难。我有母国、受访国、母国位置和受访国位置，因此我是否必须为每个国家/地区创建单独的标签？我更改了您的示例，只使用HomeCountryName作为

数据索引

，它似乎有效；但是，如果我在我的上这样做，该列就会显示为空白。这是更新后的JSFIDLE。如果将HomeTSCountryName设置为dataIndex，则排序将不是按标签，而是按HomeCountryName。定义函数myConvert（newValue，model）{return（newValue？newValue:''）+''+'model.get（'homeCountryId'）；}并在每个字段中设置如下“convert:myConvert”我尝试过它（我的代码在原始问题中已更新），但它仍然不能为我排序。我做错了吗？

// Monel
Ext.define('CountryModel', {
    extend: 'Ext.data.Model',
    fields: [
       {   name:'homeCountryId', type:'int'},
       {   name:'HomeCountryName', type:'string'},
       {   name:'label', type:'string',
           convert: function (newValue, model) { 
               // homeCountryId is appened for uniqueness and additional sort
               return (newValue ? newValue : '' ) + '_' + model.get('homeCountryId');
         }
       }
    ]
});

// store
Ext.create('Ext.data.Store', {
    storeId:'simpsonsStore',
    fields:['homeCountryId', 'HomeCountryName', 'label'],
    data:{'items':[
Ext.create('CountryModel',{ homeCountryId: 1, HomeCountryName: 'Australia', label:'nnnn' }),
Ext.create('CountryModel',{ homeCountryId: 2, HomeCountryName:'Germany',  label:'bbbb' }),
Ext.create('CountryModel',{ homeCountryId: 3, HomeCountryName:'Russia',  label:'aaaa' }),
Ext.create('CountryModel',{ homeCountryId: 4, HomeCountryName:'United States', label:'zzzz' })
    ]},
    proxy: {
        type: 'memory',
        reader: {
            type: 'json',
            root: 'items'
        }
    }
});

// gridpanel
Ext.create('Ext.grid.Panel', {
    title: 'Countries',
    margin: 5,
    frame: true,
    store: Ext.data.StoreManager.lookup('simpsonsStore'),
    columns: [
        { 
            text: 'HomeCountryName', 
            dataIndex: 'label', 
            flex: 1,
            renderer: function(value, column, record){
                return record.data.HomeCountryName;
            }
        }
        //,{ text: 'homeCountryId',  dataIndex: 'homeCountryId' } // uncomment if need
        //,{ text: 'display label', dataIndex: 'label' }
    ],
    height: 200,
    width: 400,
    renderTo: Ext.getBody()
});