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

コーディングが反映しているので、ExtJS3.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') });
    }
}

読む：詳細については、extjs4を使用したネストされたグリッド。

于 2012-06-12T15:31:34.120 に答える