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.