Reputation: 4591
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
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
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