PDA

View Full Version : Ext.Window and TabPanel autowidth



isnogood
14 Aug 2009, 1:00 AM
Hello there!

I'm new to ExtJS and want to build a popup. Therfore i have chosen a Ext.Window. There are two Contents for the Window depending on where the users Clicks.

1. Content: Simple HTML Table because there is only one Information at this point.
2. Content: Ext.TabPanel because there is more information at this point.

Now here is my Problem:
If the content is the simple HTML Table the Ext.window automaticly sizes the height and the width to the content (the Html table). So you have always the optimal height and width.

If the content is the Ext.TabPanel the height is correct, but the width is somthing very big.

What i want to know first is why does it works perfect with the simple Html table and not with the TabPanel?
Then i want to know how i can tell the Ext.Window that he should do exactly the same with the TabPanel as with the Html table?
But what i realy want to know: Is it possible that the width of the Ext.Window or Tabpanel is always the width of the TabPanel Content?

Here is the code for the Window. It comes from GeoExt and is the Geoext.popup wich extends the Ext.Window.



popup = new GeoExt.Popup({
title: features[features.length - 1].attributes['layer'],
feature: features[0],
resizable: false,
dragable: false,
unpinnable: false,
map: map
})

if (features.length > 1) {
popup.add(getTabPanelWith(features));
}
else {
popup.html = html; // i filled this before
}
popup.doLayout();
popup.show();
Here is the code for the TabPanel:



function getTabPanelWith(features) {

var tabs = new Ext.TabPanel({
enableTabScroll: true,
plain:true,
activeTab: 0
});

for (var i = 0; i < features.length; i++) {
tabs.add({
title: (i + 1) + '.',
html: 'HERE COMES THE CONTENTN LALALALA ' + i
}).show();
}
return tabs;
}

14 Aug 2009, 1:40 AM
no need to call .show

isnogood
14 Aug 2009, 2:25 AM
Ok, i removed show() but the problem still exists.

14 Aug 2009, 2:29 AM
the tab panel does not have dimensions set. does the parent use a child-sizing layout like fit, accordion, etc?

evant
14 Aug 2009, 2:29 AM
The window needs dimensions. Also, the window has no layout.

isnogood
14 Aug 2009, 2:39 AM
I've given the GeoExt.Popup, which extends from Ext.Window, a layout: 'fit' but the problem is still there.

With dimensions you mean height and width?

Well this is exactly my point. I don't want to give the window a height and a width, because the window should chose the dimenson by himself.

As i descriped above the ext.window does chose the dimenson himself if i set the html propertie of the ext.window to a html table.

isnogood
16 Aug 2009, 10:56 PM
Is the only solution for my problem to set the dimension?

Animal
16 Aug 2009, 10:59 PM
Yes. Otherwise, what size would it be?

isnogood
16 Aug 2009, 11:18 PM
Ok ... but what i dont understand is that the ext.window (which inherits from panel) do the autoresize if the Content is a HTML table.

If i set the content of the Ext.window to a TabPanel and the content of the TabPanel to a Html table the TabPanel (which inherits also from the Panel) doesn't autosize.

So where is the different between the TabPanel and the Window, which are both a specification of a Panel?

I would realy like to know why the two Panels have different behaviour?

Because if there is no "simple" solution i will do the math myself, because the Html Table which is the content of the TabPanels has a width after the render. So i get the width and set the TabPanels width to it after each render of the TabPanel.

Animal
16 Aug 2009, 11:35 PM
It's to do with Ext's layouts.

Layouts are used by Containers (Check the inheritance diagram for what is a Container... all Panels are) to impose sizing on child items based on the size of the Container.

So on render of child items, the layout manager of say, a TabPanel, finds the dimensions of the TabPanel, and sizes the child item (usually a Panel) to fit into it exactly.

Normally you will have "top-down" dimensions because you will have the browser window as your outermost Container, and all dimensions will flow from that.

isnogood
17 Aug 2009, 12:49 AM
Ah ok ... but it would be a nice feature to check if there is no parent with a dimension and then get the content width to set the parent size.

For my problem this works greate:


function doResize(TabPanelContent) {
var myTable = Ext.get(TabPanelContent);
var myPanel = Ext.get('PopupTabPanel');
popup.setWidth(myTable.getWidth() + 15);
popup.doLayout();
}

popup is my window.

I hope this is selfexplained. If not and somebody wants more details just ask here.

Animal
17 Aug 2009, 2:29 AM
With a TabPanel?

So it flips to multiple sizes depending upon which tab you have active?

isnogood
17 Aug 2009, 2:38 AM
Yes.

I changed the size of my window with the width of the content from the active tab. The Window has a fit layout and contains the TabPanel.

This is my TabPanel:

var tabs = new Ext.TabPanel({
id: 'PopupTabPanel',
autoHeight: true,
resizeTabs: true,
enableTabScroll: true,
plain: true,
activeTab: 0,
listeners: {
tabchange: function(tab, panel) {
doResize(panel.title + "-tabPanelContent");
}
}
});

This is my Popup:


popup = new GeoExt.Popup({
title: features[features.length - 1].attributes['layer'],
feature: features[0],
autoHeight: true,
minWidth: 200,
minHeight: 100,
layout: 'fit',
resizable: false,
dragable: false,
unpinnable: false,
map: map
});

if (features.length > 1) {
popup.add(getTabPanelWith(features));
}
else {
popup.html = html;
}
popup.show();


More Questions?