使用行擴展器在ExtJS 4.1中嵌套網格

在前端有一個Calls網格。每個呼叫可能有一個或多個與其關聯的註釋，因此我想添加向下鑽取到每個呼叫網格行並顯示相關注釋的功能。使用行擴展器在ExtJS 4.1中嵌套網格

在後端我使用Ruby on Rails，Calls控制器返回一個Calls json記錄集，並在每行中嵌套Notes。這是使用to_json（：include => blah），以防萬一你想知道。

所以問題是：如何添加一個子網格（或只是一個div），當用戶在父網格中雙擊或展開一行時顯示？我如何將嵌套的Notes數據綁定到它？

我發現了一些答案，讓我成爲了我需要去的地方的一部分。感謝那些幫助我從那裏拿走它的人。

2013-03-27 yuяi

我會直接跳到發佈代碼，沒有太多的解釋。請記住，我的json記錄集嵌套了Notes記錄。在客戶端，這意味着每個呼叫記錄都有一個嵌套的筆記商店，它包含相關的註釋。另外，爲了簡單起見，我只顯示一個Notes列 - 內容。

Ext.define('MyApp.view.calls.Grid', { 

    alias:        'widget.callsgrid', 
    extend:       'Ext.grid.Panel', 

    ... 

    initComponent:      function(){ 

    var me = this; 

    ... 

    var config = { 

     ... 

     listeners:     { 
      afterrender: function (grid) { 
       me.getView().on('expandbody', 
        function (rowNode, record, expandbody) { 
         var targetId = 'CallsGridRow-' + record.get('id'); 
         if (Ext.getCmp(targetId + "_grid") == null) { 
          var notesGrid = Ext.create('Ext.grid.Panel', { 
           forceFit: true, 
           renderTo: targetId, 
           id: targetId + "_grid", 
           store: record.notesStore, 
           columns: [ 
            { text: 'Note', dataIndex: 'content', flex: 0 } 
           ] 
          }); 
          rowNode.grid = notesGrid; 
          notesGrid.getEl().swallowEvent(['mouseover', 'mousedown', 'click', 'dblclick', 'onRowFocus']); 
          notesGrid.fireEvent("bind", notesGrid, { id: record.get('id') }); 
         } 
        }); 
      } 
     }, 

     ... 

     }; 

     Ext.apply(me, Ext.apply(me.initialConfig, config)); 
     me.callParent(arguments); 
    }, 

    plugins: [{ 
     ptype:    'rowexpander', 
     pluginId:    'abc', 
     rowBodyTpl:   [ 
     '<div id="CallsGridRow-{id}" ></div>' 
     ] 
    }] 
});

來源

2013-03-27 19:13:01

使用行擴展器在ExtJS 4.1中嵌套網格

回答

相關問題