Sorting by the rendered value in an ExtJS 3 EditorGridPanel

Question

I am new to Ext so I apologize in advance if my question is not clear enough/too basic...

I have an Ext.grid.EditorGridPanel with an Ext.data.Store and an Ext.data.JsonReader.

I have the following problem:

I would like to make the columns in my grid sortable but the value returned from my store is not the value I'd like to sort by (the value returned is an ID and I'd like to sort by the string this ID maps to).

I have a render function that converts between this ID and the string value but I don't know how to integrate this into my code.

I have found this post:

http://www.sencha.com/forum/showthread.php?45324-Grid-column-sorting-on-rendered-value

which looked similar to my need but when I tried adding:

{name: 'my_field', sortType: my_render_function}

to my JsonReader it did not work.

Where do I get it wrong?

Thanks.

---

For Pater's request:

var my_render = function(val, metaData, record, rowIndex, colIndex, store){
   if (val == null) 
       return '';
   var n = another_store.getById(val);
   if (n == null) 
       return '';
   return n.data.name;
};

var my_reader = new Ext.data.JsonReader({
   root: 'my_root',
   id: 'tissue_num',
   }, [{
   name: 'tissue_num',
   type: 'int'
   }, 'tissue_desc', 'organ']
);

var my_store = new Ext.data.Store({
url: request_url,
baseParams: {
    _state: request_state,
    _action: 'get_conditions'
},
sortInfo: {
    field: 'tissue_num',
    direction: "ASC"
},
reader: my_reader,
pruneModifiedRecords: true
});

Answer 1

Since you want something more than just display transformation, I'd not use a renderer here and instead convert the data in the record definition.

val convertName = function(val, rec) {
   // val will always be null since there's no field named 'name'
   var id = rec.data.tissue_num;
   if (id == null) 
       return '';
   var n = another_store.getById(id);
   if (n == null) 
       return '';
   return n.data.name;
};

var my_reader = new Ext.data.JsonReader({
   root: 'my_root',
   id: 'tissue_num',
   }, [{
   name: 'tissue_num',
   type: 'int'
   }, {name: 'name', convert: convertName},
   'tissue_desc', 'organ']
);

This will give you a record with data in the name field that you can do anything you'd do with actual data you got from the server — sorting, filtering, display, etc. Easier than trying to suss out the rendered value every time you need it.