gridview - ExtJS: insert value to added columns in a grid -

i have grid panel 3 columns ['name', 'email', 'phone'], , it's model has 5 fields

['name', 'email', 'phone','property','value'].

what i'm looking insert columns grid panel dynamically based on number of items in 'property' field , values 'value' field.

the sample code i'm working here.

my problem don't know how fill in data new columns each row.

here how grid should in end.

there several things , there room improvements. don't want teach (or blame) you, here working example based on fiddle. added comments guide whats happening there.

{     text: 'add column',     handler: function() {         // setup columns, including default ones         var newcolumns = [             { header: 'name',  dataindex: 'name' },             { header: 'email', dataindex: 'email', flex: 1 },             { header: 'phone', dataindex: 'phone' }         ];          // iterate through store items         ext.array.each(ext.data.storemanager.lookup('simpsonsstore').data.items, function(storeitem) {              // create array given strings in property/value fields             var columns = storeitem.get('property') ? storeitem.get('property').split(' ').join('').split(',') : null;             var columnvalues = storeitem.get('value') ? storeitem.get('value').split(' ').join('').split(',') : null;              // iterate through columns array             for(var = 0; < columns.length; i++) {                 // create new column                 var col = {                     header: columns[i],                      dataindex: columns[i]                 };                  // check if column added in newcolumns array                 var found = false;                 ext.array.each(newcolumns, function(column) {                     if (column.dataindex == col.dataindex)                         found = true;                 });                  // add column object if not found                 if (!found) {                     newcolumns.push(col);                 }                  // edit current store item add given value                 storeitem.set(columns[i], columnvalues[i]);             }         });          // reconfigure columns on grid         ext.getcmp('gridpanel').reconfigure(ext.data.storemanager.lookup('simpsonsstore'), newcolumns);      } } 

result: