Changing a normal grid into a grid with RowExpander

Question

So I have the working view here that creates my grid just fine.

Ext.define('AM.view.user.List' ,{
    extend: 'Ext.grid.Panel',
    alias: 'widget.userlist',
    title: '<center>Results</center>',
    store: 'User', 
    dockedItems: [{
        xtype: 'toolbar',
        dock: 'bottom',
        items: [
            { xtype: 'tbtext',  text: 'Loading...', itemId: 'recordNumberItem'  },
            '->',
            { text: 'Print', itemId: 'print' },
            '-',
            { text: 'Export', itemId: 'export' }
        ]
    }],
    initComponent: function() {
        this.columns = [
            {header: 'Name',  dataIndex: 'name', flex: 4, tdCls: 'grid_cell'},
            {header: 'ID', dataIndex: 'ID', flex: 2, tdCls: 'grid_cell'},
            {header: 'Mid Name', dataIndex: 'mid_name', flex: 3, tdCls: 'grid_cell'},
            {header: 'Last Name', dataIndex: 'last_name', flex: 4, tdCls: 'grid_cell'},
            {header: 'Address', dataIndex: 'adress', flex: 3, tdCls: 'grid_cell'}
        ];
        this.callParent(arguments); //Calls the parent method of the current method in order to override 

        var store = this.getStore(); //Retrieving number of records returned
            textItem = this.down('#recordNumberItem');
            textItem.setText('Number of records: ' + store.getCount());

            //var val = Ext.getCmp('criteria_1').getValue();
            //store.filter('ID', val); 

    }   
});

I want to transform each row in the grid to be expandable and collapsable, like shown here in the Sencha Docs under Row Expander: http://docs.sencha.com/extjs/4.2.1/#!/example/build/KitchenSink/ext-theme-neptune/

I have tried adding plugins but cannot get it to work. Any ideas?

you should include the plugins code that you tried and explain what "cannot get it to work" means. unexpected behavior? throws exception? — Andrea, Aug 07 '13 at 19:28

score 3 · Answer 1 · edited May 23 '17 at 12:32

3

Use the plugins config like so:

Ext.define('AM.view.user.List',{
   extend: 'Ext.grid.Panel',
   //other configs
   plugins: [{
      ptype: 'rowexpander',
      rowBodyTpl: ['{field}']
   }]
});

See a working example on jsFiddle. Also, Sencha Docs provides a "Code Preview" panel on the right that shows the code they used.

I read in this answer that you can't configure plugins within initComponent, though that was for ExtJS 4.1 when rowexpander was still ux. I'm not sure of its relevance in 4.2.

edited May 23 '17 at 12:32

Community

1
1

answered Aug 07 '13 at 19:26

Andrea

1,057
1
20
49

i need in second grid row rowBodyTpl please help me – RaviPatidar Feb 11 '15 at 08:58

score 2 · Answer 2 · answered Aug 31 '16 at 20:42

This is super late, but for anyone that needs another row:

Ext.define('AM.view.user.List',{
   extend: 'Ext.grid.Panel',
   //other configs
   plugins: [{
      ptype: 'rowexpander',
      rowBodyTpl: ['<p><b>Field 1:</b> {field1}</p><br>',
                   '<p><b>Field 2:</b> {field2}</p>']
  }]
});

Changing a normal grid into a grid with RowExpander

2 Answers2