[英]Sort by custom column type in ExtJs Grid Panel
我在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'},
您可以将标签设置为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()
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.