CODEWITHSUNDEEP
extjsgridpanel
Clay Banks
Clay Banks

Reputation: 4591

Changing a normal grid into a grid with RowExpander

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?

Upvotes: 0

Views: 8287

Answers (2)

Deacon Wolfwood
Deacon Wolfwood

Reputation: 99

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

Upvotes: 2

Andrea
Andrea

Reputation: 1057

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.

Upvotes: 3

Related Questions