PDA

View Full Version : Dynamically changing height and width of ExtJS Panel with layout 'table'



KnowledgeSeeker
7 Mar 2014, 7:12 AM
I am creating dynamic table inside a panel. I want to set the height and width of the table dynamically (at runtime) based on few conditions. I am able to get the height and width of its parent container but I am unable to assign this height and width to the table. Here is my code:


var myComponent = Ext.create('Ext.panel.Panel', {
layout: {
type: 'table',
columns: 3
},
listeners: {
afterrender: function(panel) {
var myWidth = panel.up('panel').getWidth();
var myHeight = panel.up('panel').getHeight();
panel.setHeight(myHeight);
panel.setWidth(myWidth);
}
},
items: [{
html: 'Widget 0',
rowspan: 2
}, {
html: 'Widget 1',
colspan: 2
}, {
html: 'Widget 2'
}]
});

scottmartin
7 Mar 2014, 8:20 AM
Several issues:

You are already in the panel, your code suggests that you are looking for another parent panel.


panel.up('panel')




Ext.application({
name: 'Fiddle',

launch: function() {

var myComponent = Ext.create('Ext.panel.Panel', {
title: 'panel',
renderTo: Ext.getBody(),
layout: {
type: 'table',
columns: 3
},
listeners: {
boxready: function(panel) { // too soon, use boxready

//setting the h/w to the same values?

// var myWidth = panel.up('panel').getWidth();
// var myHeight = panel.up('panel').getHeight();

panel.setHeight(300);
panel.setWidth(300);

}
},
items: [{
html: 'Widget 0',
rowspan: 2
}, {
html: 'Widget 1',
colspan: 2
}, {
html: 'Widget 2'
}]
});

// or below
// myComponent.setHeight(300);
// myComponent.setWidth(300);


}
});

KnowledgeSeeker
9 Mar 2014, 10:54 PM
There is no issue if I set the height and width as:

panel.setHeight(300);
panel.setWidth(300);
The problem is that the height and width has to be calculated at runtime. I can not assign a static value. My application's structure is as follows:

I have a border layout with three regions. West, Center, and East. Inside the Center region there is a tabpanel. this tabpanel is going to accomodate a table that will be created at runtime.
The height and width of this table has to be equal to the height and width of the tabpanel. I want to use the all available space.