ExtJS 4.1 中使用行扩展器的嵌套网格

Question

在前端我有一个呼叫网格。每个通话可能有一个或多个与之关联的注释，因此我想添加向下钻取到每个通话网格行并显示相关注释的功能。

在后端，我使用 Ruby on Rails，Calls 控制器返回一个 Calls json 记录集，每行都有嵌套的 Notes。这是使用 to_json(:include => blah) 完成的，以防您想知道。

所以问题是：如何添加当用户双击或展开父网格中的一行时显示的子网格（或只是一个 div）？如何将嵌套的 Notes 数据绑定到它？

我在那里找到了一些答案，这些答案让我找到了我需要去的地方。感谢那些帮助我从那里得到它的人。

Answer 1

我将直接发布代码，无需过多解释。请记住，我的 json 记录集有嵌套的 Notes 记录。在客户端，这意味着每个 Calls 记录都有一个嵌套的 notesStore，其中包含相关的 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>'
      ]
   }]
});