PDA

View Full Version : Need some help by getting the height of a center region



16 Dec 2010, 2:16 AM
Hello,
I can't seem to find out how to get the height of a border layout.
The layout is as follows (build in designer). First I have created a tab panel layout and within the first tab I've got a panel with a border layout promoted to class. Within the promoted class I've got to panels with region west and center and with layout auto.

Now, when I open the js file of the promoted class i'm setting an afterrender event and within the method called after render I would like to get the height of the body. But I always get 0 /:)

Now, when I select the layout body with inspect element i can see the height of the body is set (depending on the window dimensions)

Code created by designer

workSheetUi = Ext.extend(Ext.Panel, {
title: 'My Panel',
layout: 'border',
autoScroll: true,
initComponent: function() {
this.items = [
{
xtype: 'panel',
title: 'My Panel',
region: 'center',
floatable: false,
ref: 'templateViewer'
},
{
xtype: 'panel',
title: 'My Panel',
region: 'west',
width: 100
}
];
workSheetUi.superclass.initComponent.call(this);
}
});

Promoted class


workSheet = Ext.extend(workSheetUi, {
initComponent: function() {
workSheet.superclass.initComponent.call(this);


this.on("afterrender", this.build, this);

},

build: function() {
// I would like to get the height of the body, but i can't figure out how
}
});
Ext.reg('workSheet', workSheet);

mankz
16 Dec 2010, 2:26 AM
If I run the following in Firebug it logs 300.


workSheetUi = Ext.extend(Ext.Panel, {
title: 'My Panel',
layout: 'border',
autoScroll: true,
initComponent: function() {
this.items = [
{
xtype: 'panel',
title: 'My Panel',
region: 'center',
floatable: false,
ref: 'templateViewer'
},
{
xtype: 'panel',
title: 'My Panel',
region: 'west',
width: 100
}
];
workSheetUi.superclass.initComponent.call(this);
}
});

workSheet = Ext.extend(workSheetUi, {
initComponent: function() {
workSheet.superclass.initComponent.call(this);


this.on("afterrender", this.build, this);

},

build: function() {
console.log(this.getHeight());
}
});

new workSheet({
height : 300, width : 300
}).render(Ext.getBody());

16 Dec 2010, 2:30 AM
I would like to get the height depending on the window dimensions (fit) and not by setting it first
Thanks for the quick reply by the way ;-)

Condor
16 Dec 2010, 2:33 AM
So you are looking for:

new Ext.Viewport({
layout: 'fit',
items: new workSheet()
});

16 Dec 2010, 3:21 AM
Sorry Condor, I don't think that was what i was looking for :-) (correct me if i'm wrong)

This is the complete code of the app.


AdproAppUi = Ext.extend(Ext.Viewport, {
layout: 'border',
initComponent: function() {
this.items = [
{
xtype: 'container',
region: 'north',
autoHeight: true
},
{
xtype: 'panel',
layout: 'border',
region: 'center',
width: 100,
items: [
{
xtype: 'tabpanel',
activeTab: 0,
region: 'center',
items: [
{
xtype: 'workSheet'
}
]
}
]
}
];
AdproAppUi.superclass.initComponent.call(this);
}
});

workSheet = Ext.extend(workSheetUi, {
initComponent: function() {
workSheet.superclass.initComponent.call(this);
this.on("afterrender", this.build, this);
},

build: function() {
this.getHeight(); //doesn't give the height
}
});

Ext.reg('workSheet', workSheet);
Ext.onReady(function() {
Ext.QuickTips.init();

var cmp1 = new AdproApp({
renderTo: Ext.getBody()
});

cmp1.show();

});
Somehow, the workSheet class doesn't give me the height of the panel. Even not after render.