PDA

View Full Version : extjs 4 accordion grid cannot be checked



betimonde
3 Mar 2012, 10:57 AM
Hi all,

using mvc with extjs, i try to make an accordion panel with 2 items (form,grid).

step 0 : define the grid with selModel



Ext.define('Grid', {
extend : 'Ext.grid.Panel',
alias : 'widget.myGrid',
selType : 'rowmodel',
store : 'myServices',

initComponent: function () {

Ext.apply(this, {
layout : 'fit',
padding : 10,
border : true,
width : '95%',
title : 'Services',
iconCls : 'icon-grid',
align : 'center',

});

var sm = Ext.create('Ext.selection.CheckboxModel');
this.selModel = sm;

var movieEditor = this;
this.columns = [
{
header: 'Name',
dataIndex: 'name',
flex: 1
},
{
header: 'Desc',
dataIndex: 'desc',
flex: 1
}
];
this.callParent(arguments);
}
});



step 1 : the view


Ext.define('Form', {
extend : 'Ext.panel.Panel',
alias : 'widget.form',
initComponent: function() {
var itemFields = Ext.create('Ext.Panel', {
title: 'Accordion Item 1',
items : [{
xtype : 'form',
autoScroll : true,
items: [
{
xtype: 'textfield',
name : 'name',
fieldLabel: 'Name'
},
{
xtype: 'textfield',
name : 'desc',
fieldLabel: 'Desc'
}
]
}]
});

var itemGrid = Ext.create('Ext.Panel', {
title: 'Accordion Item 2',
items : [{
xtype: 'myGrid',
name : 'items',
fieldLabel: 'datas'
}]
});

var accordion = Ext.create('Ext.Panel', {
layout:'accordion',
items: [itemFields,itemGrid]
});

Ext.apply(this, {
margins:'5 0 5 5',
padding : 0,
border : true,
items : accordion
});

this.callParent(arguments);
}
});


the grid get checkbox


get var sm = Ext.create('Ext.selection.CheckboxModel');
this.selModel = sm;


step 2 : the controller firevent 'Edit' to
- fill the form fields
- set checked items
- open the panel



edit: function (record) {
console.log('edit');
var panel = Ext.getCmp('east-panel');

var me = this;
var form = panel.down('form');
var grid = panel.down('grid');

var store = this.getStore('Services');
var selected = [];

var items = record.get('items');
var array = items.split(',');

var services = Ext.widget('grid');
services.getStore().load({
callback:function(){
for(var i=0; i<store.getRange().length; i++)
{
for (var j=0; j<array.length; j++){
if(store.getRange()[i].get('id') == array[j]){
selected.push(store.getRange()[i]);
}
}
}
grid.getSelectionModel().select(selected);
}
});

form.loadRecord(record);
panel.show();
},


Here the issue,
got a message :


Uncaught TypeError: Cannot read property 'length' of undefined


In fact if the grid is in the first panel, no message appear.
[itemGrid,itemFields] instead of [itemFields,itemGrid]


var accordion = Ext.create('Ext.Panel', {
layout:'accordion',
items: [itemGrid,itemFields]
});


debug :
when debug, i found that the problem is on line


grid.getSelectionModel().select(selected);


It's like i cannot check items in the grid until the grid is not visible

My question is :
how to check data of grid which is not visible in a accordion panel ?

Hope anyone could help
Take care

mitchellsimoens
4 Mar 2012, 7:24 AM
Where do you set the selModel?

betimonde
5 Mar 2012, 11:01 AM
thanks again to be there, sorry for delay but i work a lot around extjs

adding the step 0 in which i define myGrid, then this widget.myGrid will be call by accordion

So the selModel was set on myGrid.

Hope my description is clear :)

Take care