ExtJs 4 - Display a value instead of it's id inside a combobox within a grid

Question

my first question on StackOverflow, don't blame me too much ;)

I've got to do an interface that shows a grid with content loaded from and ajax request.

At this point, nothing difficult, I managed to create a model, a store and a proxy in order to get values from my php/mysql script and show them on the grid.

But in the returned data, I have some IDs that should be translated to their equivalent values stored in another MySQL table.

And at this point I'm stuck and after searching for hours, I still don't understand how to remap the id value I have to a label from another store/model.

Here is the code :

Panel view :

Ext.define('Audiotel.views.TimeRangePanelView', {
extend : 'Ext.grid.Panel',
config : {
    columns : [{
        header : 'Start date',
        dataIndex : 'slo_time_start',
        editor : {
            xtype : 'timefield',
            format : 'H:i:s',
            increment : 60 // In minutes
        },
        renderer : function(value, metaData, record, rowIndex, colIndex, store, view) {
            return value;
        }
    }, {
        header : 'End Date',
        dataIndex : 'slo_time_end',
        editor : {
            xtype : 'timefield',
            format : 'H:i:s',
            increment : 60 // In minutes
        },
        renderer : function(value, metaData, record, rowIndex, colIndex, store, view) {
            return value;
        }
    }, {
        header : 'Days',
        dataIndex : 'slo_valid_days',
        editor : Ext.create('Ext.form.field.ComboBox', {
            typeAhead : true,
            triggerAction : 'all',
            selectOnTab : true,
            store : [['Everyday', 'Everyday'], ['WE and holiday', 'WE and holiday'], ['Week', 'Week']],
            lazyRender : true,
            listClass : 'x-combo-list-small'
        })
    }, {
        header : 'Range',
        dataIndex : 'slo_hou_id',
        editor : Ext.create('Ext.form.field.ComboBox', {
            selectOnTab : true,
            store : [['1', 'Peak'], ['2', 'Offpeak'], ['3', 'Night']],
            listClass : 'x-combo-list-small',
        }),
        renderer : function(value, metaData, record, rowIndex, colIndex, store, view) {
            return value;
        }
    }],
    height : 400,
    width : '100%',
    store : Audiotel.stores.StoreBuilder.factory('TimeRange').createStore('getDefaultTimeRange'),
    renderTo : "range_table_div",
    frame : true
},

constructor : function() {
    this.callParent()
}
});

Store builder (use a proxy) :

Ext.define('Audiotel.stores.StoreBuilder', {

statics : {
    instance: null,
    factory: function(name) {
        if(!this.instance){
            this.instance = new this({storeName: name});
        }
        return this.instance;
    }
},

storeName: null,

config: {
    storeName: ''
},

constructor: function(config){
        this.initConfig(config);
},

applyStoreName: function(name){
    if(!name){
        throw new Error('['+ Ext.getDisplayName(arguments.callee) +'] Name of store to create.');
    }
    return name;
},


createStore: function(proxyMethod, proxyParams){
    var modelName = Audiotel.utils.AppUtils.BASE_PATH+'.'+Audiotel.utils.AppUtils.MODEL_PATH+'.'+this.getStoreName()+'Model';
    Ext.Loader.syncRequire(modelName);  
    return Ext.create('Ext.data.Store', {
            autoLoad: true,
            proxy: Ext.create('Audiotel.proxies.AudiotelProxyWrapper', {method: proxyMethod, params: proxyParams}).getWrappedProxy(),
            model:  modelName,
            storeId:    this.getStoreName()+'Store'
        });
}
});

Model :

Ext.define('Audiotel.models.TimeRangeModel', {
extend : 'Ext.data.Model',
alias : 'TimeRange',
fields : [{
    name : 'slo_time_start',
    type : 'string'
}, {
    name : 'slo_time_end',
    xtype : 'string'
}, {
    name : 'slo_valid_days',
    type : 'string'
}, {
    name : 'slo_hou_id',
    type : 'string'
}]
});

The value I want to translate is the "slo_hou_id" wich still shows '1' instead of 'Peak'.

Thanks in advance for any help!

ps : I'm very new to ExtJS...

edit :

I created a new store for my other table values :

Ext.define('Audiotel.models.HoursModel', {
extend : 'Ext.data.Model',
alias : 'Hours',
fields : [{
    name : 'hou_id',
    type : 'int'
}, {
    name : 'hou_label',
    xtype : 'string'
}]
});

And I've loaded data into it :

[{"hou_id":"1","hou_label":"Heures pleines"},{"hou_id":"2","hou_label":"Heures creuses"},{"hou_id":"3","hou_label":"Heures nuit"}]

But when I try to search for values, it seems to fail :

var hours = Audiotel.stores.StoreBuilder.factory('Hours').createStore('getHoursValues');

console.log(hours.getById(1));
console.log(hours.findRecord('hou_id', 1));

All returns null... :(

Answer 1

You have 2 options:

1. First option is that you return what you want from MySQL, instead of doing the "join" in Javascript: so, from MySQL/PHP, return "Peak" instead of "1".
2. Use "Store.find*" functions to map "1" to "Peak". Something like other_store.findRecord('slo_hou_id', 1).attribute_you_want .