排序ExtJS的網格面板中的自定義字段類型

Question

我有以下列在我的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 
}); 

當我單擊網格中的列標題（「本國」）時，它根本不排序。

如何按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() 
});