Nested grid in ExtJS 4.1 using Row Expander

Question

On the front-end I have a Calls grid. Each Call may have one or more Notes associated with it, so I want to add the ability to drill down into each Calls grid row and display related Notes.

On the back-end I am using Ruby on Rails, and the Calls controller returns a Calls json recordset, with nested Notes in each row. This is done using to_json(:include => blah), in case you're wondering.

So the question is: how do I add a sub-grid (or just a div) that gets displayed when a user double-clicks or expands a row in the parent grid? How do I bind nested Notes data to it?

I found some answers out there that got me part of the way where I needed to go. Thanks to those who helped me take it from there.

yuяi yuяi · Accepted Answer · 2013-03-27T19:13:01

I'll jump straight into posting code, without much explanation. Just keep in mind that my json recordset has nested Notes records. On the client it means that each Calls record has a nested notesStore, which contains the related Notes. Also, I'm only displaying one Notes column - content - for simplicity.

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>'
      ]
   }]
});

Nested grid in ExtJS 4.1 using Row Expander

1 Answers