CODEWITHSUNDEEP
extjs4.1
yuяi
yuяi

Reputation: 2715

Nested grid in ExtJS 4.1 using Row Expander

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.

Upvotes: 2

Views: 4052

Answers (1)

yuяi
yuяi

Reputation: 2715

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

Upvotes: 4

Related Questions