View Full Version : [4.1.0] Very special construction of column model for grid from a store

31 May 2012, 12:46 PM
Hello everybody,

I want to build the column model (for several grid and one treegrid) from data in database and I add manual columns. (For example : the columns "car", "cycle", "total" and the columns "car" and "cycle" comes from a table in database, and total from my own code).

Then, I load the store that includes the futures columns. And next I do :

store.on('load', function(store, records,...){
var columnArray = new Array(); //for the grid's field "column"

var fieldsArray = new Array(); // for the store model

var nbData = store.getTotalCount();
fieldsArray.push({name : "otherclassInJava"});
var nbValueToTest = records.data.otherclassInJava.length;//?

columnArray.push({name:records[i].libelle, dataIndex: records.index, ... renderer: function(value,..){

return records.data.otherclassInJava[z].value;





But here, in the renderer function, I can't access to the data from the store loaded before the construction of the grid's columnModel.
Indeed, in the grid's store, the field that I want to display is in another field.

For example, the value for the cell "car", is the field "value" in the following json that the grid's store receives after :

{...."libelle" : "bob's garage", "otherclassInJava" : "[{"id":"2", "value": "37"}]"...

I precise that I use too the rowEditing but I don't write this in order to simplify my problem...
In my JAVA server code, I have a class that contains the "value", and I put an object from this class in another class that contains the "libelle" value (bob's garage in the previous example).

My main difficulty is that I can't define the dataIndex or the renderer function in order to display the right data in the right cell... Yes, the big problem is to use the two variable 'records' in the definition of 'renderer'... very bad code... sorry !

At the end, I want to obtain this grid :


bob's garage


I have already all of the structure of the grid, but I can't put the value in the cell...
How can I solve this problem ?

(I'm sorry for my bad english!)

31 May 2012, 1:01 PM
You can use convert to create a calculated field as shown:

Ext.onReady(function () {

Ext.define('TestResult', {
extend: 'Ext.data.Model',
fields: [
{ name: 'month1', type: 'int' },
{ name: 'month2', type: 'int' },
name: 'total', type: 'int',
convert: function(val,row) {
return row.data.month1 + row.data.month2;

Ext.create('Ext.grid.Panel', {
width: 500,
height: 140,
renderTo: document.body,
features: [{
ftype: 'summary'
store: {
model: 'TestResult',
data: [{
student: 'Row 1',
month1: 100,
month2: 50
student: 'Row 2',
month1: 200,
month2: 100
student: 'Row 3',
month1: 300,
month2: 150
columns: [{
dataIndex: 'student',
text: 'Name',
summaryType: 'count',
summaryRenderer: function(value, summaryData, dataIndex) {
return Ext.String.format('{0} row{1}', value, value !== 1 ? 's' : '');
}, {
dataIndex: 'month1',
text: 'Month1',
summaryType: 'sum'
}, {
dataIndex: 'month2',
text: 'Month2',
summaryType: 'sum'
}, {
dataIndex: 'total',
text: 'total',
summaryType: 'sum'


If this does not help, please explain in more details.


31 May 2012, 1:08 PM
I will test that and I will tell you if it's solves my problem!
Thank you !

31 May 2012, 10:20 PM
No, it doesn't work.
Indeed, in row.data I don't have my field : "row.data.month1 is undefined".


31 May 2012, 10:38 PM
This is not the value "total" that is my problem, this is to access the right value in my store, when I build the columnModel and the fields model for the store.
In my future store, I have : ..."libelle":"theLibelleValue", "garages" : ["fieldToFind":"valueToTest", "value" : "theValueToDisplayInGrid"]...

My columnModel construction (columnArray) (fieldsArray for the model store construction) : (better code retranscription than in the first post)

fieldsArray.push({name : "garages"});
for(i=0;i<nbData;i++){var valueToFind = records.[i].raw.id;
columnArray.push({text:records[i].libelle, dataIndex: records[i].index, ... renderer: function(value,..){for(z=0;z<records.raw.garages.length;z++){
return records.raw.garages[z].value;

7 Jun 2012, 12:04 AM
The solution was :

Adding the config "mapping : " in the field Array of the store.

{name : "thename", type : "thetype", mapping : "otherobject.field"})

Then it's works ! :)