0

我有一个网格，我想用 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();
});
4

1 回答 1

0

我假设您使用的是 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') });
    }
}

阅读：使用 extjs 4 的嵌套网格以获取更多信息。

于 2012-06-12T15:31:34.120 回答