PDA

View Full Version : get height of panel



bf69
3 Jul 2010, 3:02 AM
Hi all,

I'm having a question I cannot find an answer to. I have an example of my current code online on http://tiny.cc/8tk54 (please don't mention the URL to avoid appearance in Google).

My question now is: can I somehow get the height of the opened tab?

Condor
3 Jul 2010, 4:17 AM
You can only query the height of a component after it has been rendered and layed out by it's container.

In your example:

var tab = tabs.add({
title: 'Another Tab',
html: 'Tab Body<br/><br/>',
closable:true
});
tabs.doLayout();
tabs.setActiveTab(tab);
alert(tab.getHeight());
ps. Why would you need this?

bf69
4 Jul 2010, 12:20 AM
That worked like a charm! Thanks Condor.

I need this because I want to show a page in the tab (I'm trying to make a CMS out of it). Since I need the external stylesheet and all, I have to use iframes for this. I searched the forums and found out that to use iframe I could use managedIframes to manage their behaviour. The trick is, I want the iframe to fill the entire tab, so in order to do that, I need to know the height of the tab. The width can easily be set to 100%, so that is not a problem.

Condor
4 Jul 2010, 12:15 PM
I thought so. There is absolutely no need to get the height of the panel if the IFRAME is managed by the layout.

You should try:

var tab = tabs.add({
title: 'Another Tab',
bodyCfg: {
tag: 'iframe',
src: 'http://www.google.com'
},
closable:true
});
tabs.doLayout();
tabs.setActiveTab(tab);
(a ManagedIframePanel works the same)

bf69
5 Jul 2010, 9:50 AM
That is just great! I didn't expect it to be so easy to add an iframe like this.

I'm just starting with ExtJS, and at the moment I'm hooking examples together to learn how they work.

vitolini
2 Sep 2010, 2:06 PM
I am kinda looking for the same answer (height of the new panel) but can't get it... Here is my situation. Initially I have one tab. Then dynamically i create a grid and attach to that tab. The grid is configured as
anchor: '100% 100%' so the initial grid is rendered fine taking the full height of the tab panel.

Than dynamically i add another tab panel and call the same code to attach a second grid, but the second grid is rendered as only 1 line height (although it has many records in the store and the paging shows the correct numbers), i add borders to tab panel and see that it actually takes the full height as other tab panels. But when i want to print its height it prints undefined

I can't add a screenshot as this new tool doesn't let me attach files (as soon as it uploads it shows me this red stop button for whatever reason!!!)


id = 'subreport_' + reportId;
subReportPanel = new Ext.Panel({
title: 'Report: ' + reportTitle,
id: 'subreport_' + reportId,
closable:'true'
});

tabPanel.add(subReportPanel);
tabPanel.doLayout();
tabPanel.setActiveTab(subReportPanel);

alert(subReportPanel.height);
attachGrid(subReportPanel);

Condor
3 Sep 2010, 1:23 AM
A TabPanel uses layout:'card', so an 'anchor' config option in a child item doesn't do anything.

Does the tabpanel itself have a height and width (either set or assigned by it's layout)?

vitolini
3 Sep 2010, 1:44 AM
tabpanel itself is the center region of the viewport with border layout. Even if i get the height at the time of render, i need the grid to resize itself when the tabpanel does. What setting should I use on the grid then, if not 'anchor'?

Condor
3 Sep 2010, 1:47 AM
If you are not overnesting, this should already happen by default.

Can you post your layout code?

vitolini
3 Sep 2010, 1:58 AM
In the most simple form, This is the related code...


tabPanel = new Ext.TabPanel({
region:'center',
deferredRender:false,
activeTab:0,
items:[
dashboardPanel,
vpadPanel,
newsPanel
, {
contentEl:'reports',
title: 'Reports',
items: [reportTabPanel],
autoScroll:true
}
, {
contentEl:'howto',
title: 'How To',
autoScroll:true
}]
});

var viewport = new Ext.Viewport({
layout:'border',
items:[
statusPanel,
viewEditPanel
,{
region:'west',
title: 'Navigation',
collapsible: true,
split:true,
width: 225,
minSize: 175,
layout:'border',
items:[accordion]
}
,

tabPanel
]
});

function reportLoaded(reportId, reportTitle){
id = 'subreport_' + reportId;
subReportPanel = new Ext.Panel({
title: 'Report: ' + reportTitle,
id: 'subreport_' + reportId,
closable:'true'
});

tabPanel.add(subReportPanel);
tabPanel.doLayout();
tabPanel.setActiveTab(subReportPanel);

alert(subReportPanel.height);
attachGrid(subReportPanel);
}

function attachGrid(parentContainer)
{

var summaryGrid = new Ext.grid.GridPanel({
store:dataStore,
sm: new Ext.grid.RowSelectionModel({singleSelect: true}),
sm:new Ext.grid.CheckboxSelectionModel(),
split: true,
anchor: '100% 100%',
cm: columnModel,
listeners :
{
rowclick: summaryGridRowClick
}
});

parentContainer.removeAll();
parentContainer.add(summaryGrid);
parentContainer.doLayout();
}

Condor
4 Sep 2010, 1:27 AM
subReportPanel should have layout:'anchor' (because you are using anchor: '100% 100%'), but if you are only going to use the container for a single item then using layout:'fit' would be even better.

vitolini
4 Sep 2010, 2:53 AM
perfect, how did i miss that!!!, thanks a lot !!!