PDA

View Full Version : Extended Grig with Ext.ux.RowExpander plugin and groupingFeature



cmd03
22 Dec 2011, 4:23 AM
Hi everyone!
I got a problem, can anybody help me, please?
my code:



Ext.define('TasksGroupingGrid', {
extend:'Ext.grid.Panel',
groupingFeature:null,
tasksStore:null,

requires: [
'ISM.TaskManager.Models.Task',
'Ext.grid.*',
'Ext.data.*',
'Ext.ux.RowExpander'
],

constructor:function(config){
config = Ext.apply({
layout: 'fit',
border:false,
bodyBorder:false
}, config);
this.callParent(arguments);
},


initComponent: function() {

this.tasksStore = Ext.create('Ext.data.Store', {
fields: [
{name:'id', type:'int'},
{name:'title', type:'string'},
{name:'manager', type:'string'},
{name:'executer', type:'string'},
{name:'expiration', type:'date'},
{name:'state', type:'string'},
{name:'priority', type:'string'},
{name:'description',type:'string'}
],
autoLoad: false,
groupField :'expiration',
data:[
{id:1,title:'Task1',manager:'Den',executer:'Klim',expiration:'2012-12-12',state:'completed',priority:'middle', description:'asd'},
{id:2,title:'Task1',manager:'Eline',executer:'Klim',expiration:'2012-12-12',state:'relevant',priority:'low', description:'asd234234'},
{id:3,title:'Task2',manager:'Mike',executer:'Klim',expiration:'2012-11-12',state:'delayed',priority:'low', description:'asdas asd asd'},
{id:4,title:'Task2',manager:'Den',executer:'Klim',expiration:'2012-12-11',state:'relevant',priority:'high', description:'asd234 3 q '}
]
});

this.store = this.tasksStore;

this.groupingFeature = Ext.create('Ext.grid.feature.Grouping',{
groupHeaderTpl: 'Grouped by: {name}'
});

this.features = [this.groupingFeature];

this.columns = [{
text: '????????????',
flex: 1,
dataIndex: 'title'
},{
text: '????????',
dataIndex: 'manager'
},{
text: '???????????',
dataIndex: 'executer'
},{
text: '???? ??????????',
dataIndex: 'expiration'
},{
text: '?????????',
dataIndex: 'state',
width:110
},{
text: '?????????',
dataIndex: 'priority'
}];

this.sorters = [
{
property : 'priority',
direction: 'DESC'
}
];

this.addEvents(
'taskedit'
);

this.plugins = [{
ptype: 'rowexpander',
rowBodyTpl : [
'<p><b>description:</b> {description}</p>'
]
}];

this.callParent(arguments);
}
});


it looks like this -> 30243


on expand icon click -> 30244

nextBd is null
var oldFn;
ext-all-debug.js (string 4823)

nextBd is null
return this;
ext-all-debug.js (string 4818)

mitchellsimoens
22 Dec 2011, 8:59 AM
I have moved it to the Ext JS 4 Q&A forum. Also, your code needs to be surrounded by the code tags (there is a button in the toolbar '#' to use it)

cmd03
24 Dec 2011, 12:37 AM
has anybody had the same problem?

Frith
8 Mar 2012, 4:47 AM
Yes...I have exactly the same problem...did you get a solution?

cmd03
9 Mar 2012, 12:20 AM
yes, i'v got
you are welcome



Ext.define('Ext.panel.Panel',{
......,
layout:'fit',
initComponent: function() {
this.items:[
Ext.create(

'Ext.grid.Panel',{
....,
groupingFeature:Ext.create('Ext.grid.feature.Grouping',{
groupHeaderTpl: 'Grouped by: {name}'


}),
plugins = [{
ptype: 'rowexpander',
rowBodyTpl : [
'<p><b>description:</b> {description}</p>'
]
}]

}
)]
this.callParent(arguments);



}
});