Question

在前端我有一个Calls网格。每个Call可能有一个或多个与之关联的Notes，因此我想添加深入查看每个Calls网格行并显示相关Notes的功能。

在后端我正在使用Ruby on Rails，而Calls控制器返回一个Calls json记录集，每行都有嵌套的Notes。这是使用 to_json（：include =＆gt; 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>'
      ]
   }]
});

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

1 个答案: