Looping Json array in Rowexpander plugin - extjs

Question

I have a grid which I would like to show extra information with RowExpander plugin. When user click the cross, the json array should available in extended row. I tried everything but didn't successed to show the expanded content.
When I click the cross, I can see json array in console which is working well. But, the array content does not available in template.
Could you please help me, what I am doing wrong?
JSON ARRAY ( normal grid data )
[{"FORM_ID":"1","SUPPLIER_NO":"678456","SUPPLIER_NAME":"PINAR UNLU MAMÜLLER","RECORD_DATE":"12.06.2012","DELIVERY_NO":"215554","GRAND_TOTAL":"573","DRIVER_NAME":"Oğuz Çelikdemir","LICENSE_PLATE":"34 OGZ 6520"},{"FORM_ID":"2","SUPPLIER_NO":"75655463","SUPPLIER_NAME":"PINAR ET VE ET ÜRÜNLERİ","RECORD_DATE":"15.06.2012","DELIVERY_NO":"215556","GRAND_TOTAL":"619","DRIVER_NAME":"Murat Kayın","LICENSE_PLATE":"34 NES 7896"},{"FORM_ID":"3","SUPPLIER_NO":"32645668","SUPPLIER_NAME":"ÜLKER BİSKÜVİ","RECORD_DATE":"19.06.2012","DELIVERY_NO":"4563657","GRAND_TOTAL":"657","DRIVER_NAME":"Metin Yılmaz","LICENSE_PLATE":"06 ANK 6500"}]
JSON ARRAY ( expanded content )
[{"PRODUCT_NAME":"İÇECEK","QUANTITY":"2.00","SAS":"100","UNIT_ID":"1","UNIT_PRICE":"34.92","TOTAL":"70"},{"PRODUCT_NAME":"ŞARKÜTERİ","QUANTITY":"4.00","SAS":"100","UNIT_ID":"1","UNIT_PRICE":"34.92","TOTAL":"140"},{"PRODUCT_NAME":"KURU GIDA","QUANTITY":"1.00","SAS":"250","UNIT_ID":"1","UNIT_PRICE":"34.92","TOTAL":"35"},{"PRODUCT_NAME":"DETERJAN","QUANTITY":"5.00","SAS":"100","UNIT_ID":"1","UNIT_PRICE":"34.92","TOTAL":"175"},{"PRODUCT_NAME":"MEYVE SEBZE ve ET","QUANTITY":"3.00","SAS":"250","UNIT_ID":"1","UNIT_PRICE":"34.92","TOTAL":"105"}]
EXTJS
var formStore = new Ext.data.JsonStore({
url: 'form-data.php',
root: 'fdata',
idProperty: 'FORM_ID',
remoteSort: true,
fields: ['FORM_ID', 'SUPPLIER_NO', 'SUPPLIER_NAME', 'RECORD_DATE', 'DELIVERY_NO', 'DRIVER_NAME', 'LICENSE_PLATE',
{ name: 'GRAND_TOTAL', type: 'float'}]
});
formStore.setDefaultSort('RECORD_DATE', 'asc');
var checkboxSel = new Ext.grid.CheckboxSelectionModel();
var rowExpander = new Ext.grid.RowExpander({});
rowExpander.on('beforeexpand', function(rowexpander, record, body, rowindex) {
Ext.Ajax.request({
url: 'form-details.php' + '?fid=' + record.get('FORM_ID'),
method: 'GET',
success: function ( result, request ) {
var jsonData = Ext.util.JSON.decode(result.responseText);
tpl.overwrite(body, jsonData);
},
failure: function ( result, request ) {
Ext.MessageBox.alert('Failed', result.responseText);
return false;
}
});
return true;
});
var tpl = new Ext.Template(
'<p>URUN ADI : {PRODUCT_NAME}</p><br/>',
'<p>TOPLAM : {QUANTITY}</p>'
);
Ext.onReady(function() {
var grid = new Ext.grid.GridPanel({
title: 'ME.117.10 - Hammaliye Formu',
store: formStore,
sm: checkboxSel,
columns: [
checkboxSel, rowExpander,
{ header: "ID",
width: 40,
dataIndex: 'FORM_ID',
sortable: false
},
{ header: "Satıcı No",
id: 'form-id',
dataIndex: 'SUPPLIER_NO',
width: 40,
sortable: false
},
{ header: "Satıcı Firma",
dataIndex: 'SUPPLIER_NAME',
width: 290,
sortable: true
},
{ header: "Kayıt Tarihi",
width: 80,
dataIndex: 'RECORD_DATE',
sortable: true
},
{ header: "İrsaliye No",
width: 80,
dataIndex: 'DELIVERY_NO',
sortable: false
},
{ header: "Tutar",
width: 80,
dataIndex: 'GRAND_TOTAL',
sortable: false
}
],
autoExpandColumn: 'form-id',
renderTo: document.getElementById('form-results'),
width: 750,
height: 500,
loadMask: true,
columnLines: true,
plugins: rowExpander
});
formStore.load();
});

Answer 1

I assume you're using ExtJS 3.x as that's what your coding reflects. If you need help doing it in ExtJS 3.x I cannot help you much, I'm more used to the ExtJS 4.x way of coding, so that's what I'll use to try to explain this.
I am working to implement a nested grid just like this and have just been through this procedure:
Basically you need to config your main grid with a rowexpander plugin, which you have already done (below is the way I did it):
plugins: [{
ptype: "rowexpander",
rowBodyTpl: ['<div id="SessionInstructionGridRow-{ClientSessionId}" ></div>']
}],
Then in your controller you will just have to set up an event to happen on expandbody which is a rowexpander event:
this.control({
'gridview' : {
expandbody : this.onGridExpandBody
}
});
And then finally you write your script to the <div> tag you created in rowexpander plugin template:
onGridExpandBody : function(rowNode, record, expandbody) {
var targetId = 'SessionInstructionGridRow-' + record.get('ClientSessionId');
if (Ext.getCmp(targetId + "_grid") == null) {
var sessionInstructionGrid = Ext.create('TS.view.client.SessionInstruction', {
renderTo: targetId,
id: targetId + "_grid"
});
rowNode.grid = sessionInstructionGrid;
sessionInstructionGrid.getEl().swallowEvent(['mouseover', 'mousedown', 'click', 'dblclick', 'onRowFocus']);
sessionInstructionGrid.fireEvent("bind", sessionInstructionGrid, { ClientSessionId: record.get('ClientSessionId') });
}
}
Read: Nested grid with extjs 4 for more info.