PDA

View Full Version : ExtJS tab and grid



jtiai
16 Jan 2012, 5:11 AM
Hi,

I'm trying to put simple grid in tab, but for some reason first time tab is activated grid is empty. If I reconfigure grid it will show data correctly.

How to add grid properly to tab so data will be visible from first activation as well?

mitchellsimoens
16 Jan 2012, 9:24 AM
Is the grid nested within another component or is it a direct child of the tab panel?

jtiai
16 Jan 2012, 9:03 PM
Nested within panel.

My layout is like following:

Tab
Panel

Toolbar
Grid



Does that help?

mitchellsimoens
16 Jan 2012, 9:08 PM
The grid probably wants a size so you need to use a layout manager on the panel that wraps the grid that will tell the grid to have a certain size... layout : 'fit' if you have one or one of the box layouts if you have multiple components under the panel.

jtiai
16 Jan 2012, 9:20 PM
Hmm... I've vbox layout with align stretching.

Following slightly stripped out version of my panel that I put in tab.



Ext4.define('MyPanel', {
extend : 'Ext4.form.Panel',
alias : 'widget.mypanel',


initComponent : function() {
var me = this;

me.layout = {
type : 'vbox',
align : 'stretch'
};


me.items = [{
xtype : 'toolbar',
dock : 'top',
flex : 0,
items : [{
xtype : 'button',
icon : '/image/add.png',
text : 'Add',
scope : me,
handler : me.doAdd
}, {
xtype : 'button',
icon : '/image/remove.png',
text : 'Remove',
scope : me,
handler : me.doRemove
}, {
xtype : 'button',
icon : '/image/report.png',
text : 'Report',
scope : me,
handler : me.doReport
}]
}, {
flex : 1,
xtype : 'grid',
itemId : 'mygrid',
store : me.store || 'ext-empty-store',
simpleSelect : true,
columns : [{
header : 'Item',
dataIndex : 'item',
flex : 1
}, {
header : 'Type',
dataIndex : 'type',
}]
}];


me.callParent();

},
setStore : function(store) {
var me = this, grid= me.child('#mygrid');


if(!this.rendered) {
// If this is omitted code next line crashes due views not defined.
return;
}


documentgrid.reconfigure(store);

}
});




I added onetime "afterlayout" hook to reconfigure grid and now everything "works". I guess it has something to do with deferred rendering of tabs (maybe grid doesn't like that).