Question

我有一个网格，我想用RowExpander插件显示额外的信息。当用户单击cross时，json数组应该在扩展行中可用。我尝试了一切，但没有成功展示扩展的内容。

当我点击十字架时，我可以在控制台中看到json数组运行良好。但是，阵列内容在模板中不可用。

你能帮助我，我做错了吗？

JSON ARRAY（普通网格数据）

[{"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（扩展内容）

[{"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

我假设您正在使用ExtJS 3.x，因为这是您的编码所反映的。如果你在ExtJS 3.x中需要帮助，我对你帮助不大，我更习惯于ExtJS 4.x编码方式，所以我会用它来解释这个。

我正在努力实现这样的嵌套网格，并且刚刚完成了这个过程：

基本上你需要使用rowexpander插件配置你的主网格，你已经完成了（下面就是我这样做的方式）：

plugins: [{
     ptype: "rowexpander",
     rowBodyTpl: ['<div id="SessionInstructionGridRow-{ClientSessionId}" ></div>']    
}],

然后在您的控制器中，您只需设置要在expandbody rowexpander事件发生的事件：

this.control({
    'gridview' : {
        expandbody : this.onGridExpandBody
    }
});

最后，您将脚本编写到您在<div>插件模板中创建的rowexpander标记中：

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') });
    }
}

阅读：Nested grid with extjs 4了解更多信息。

在Rowexpander插件中循环Json数组

1 个答案: