Sort by custom column type in ExtJs Grid Panel

Question

I have the following column specified in my Ext.grid.Panel:

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

The xtype is "country-column" which is defined as:

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

When I click the column header in the grid ("Home Country"), it doesn't sort at all.

How can I make it sort by the record.label to sort alphabetically?

Edit: Here is how I have changed my model:

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

Here is my grid column:

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

Boris Gappov Boris Gappov · Accepted Answer · 2014-02-21T17:25:14

You can set label as dataIndex and attach renderer with display 'Home Country' Here is working sample: http://jsfiddle.net/KLX5q/

enter image description here

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

Sort by custom column type in ExtJs Grid Panel

1 Answers