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

Question

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

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

xtype 是“country-column”，定义为：

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
});

当我单击网格中的列标题（“本国”）时，它根本没有排序。

如何使它按record.label 排序以按字母顺序排序？

编辑：这是我更改模型的方式：

{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'},

Answer 1

您可以将标签设置为 dataIndex 并附加带有显示“本国”的渲染器 这是工作示例：http://jsfiddle.net/KLX5q/

// 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()
});