PDA

View Full Version : Ext.Window with Ext.TabPanel autosizing question.



storozhilov
14 Dec 2010, 2:38 AM
Hi, Sencha! Many thanks for your hard work on ExtJS!

I want to build a window with one tab-panel item on it, which should occupy all window's space. Each tab-panel's tab should contain form fields positioned by 'form' layout. Window's size should be automatically set up by Ext's engine based upon the structure of window's content, layouts of containers and sizes of form fields. So I do not want to hardcode window width and height in order to be not dependent on the concrete theme of the GUI.

So, if just to create Ext.Window with 'form' layout and supply it with form fields as items it works fine in Firefox (see screenshot). But if try to wrap form fields by Ext.TabPanel the window becomes extremely wide (even wider that two monitor screens or something like - see screenshot).

So the question is does ExtJS support correct autosizing of the containers (based on their items structure/sizes/layouts) to avoid sizes hardcoding at all? What do I do wrong to achieve it? Thank you much!

tpt.html:


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>eCountry</title>
<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css">
<script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext/ext-all-debug.js"></script>
<script type="text/javascript" src="tpt.js"></script>
<script type="text/javascript">
Ext.BLANK_IMAGE_URL = 'ext/resources/images/default/s.gif';
Ext.onReady(init);
</script>
</head>
<body></body>
</html>tpt.js (sorry for subclassing - just a feature of my project's structure):


// With tab panel - window is too wide
TabbedFormWindow = Ext.extend(Ext.Window, {
constructor: function() {
var firstInput = new Ext.form.TextField({
fieldLabel: 'First field'
});
var secondInput = new Ext.form.TextField({
fieldLabel: 'Second field'
});
var thirdInput = new Ext.form.TextField({
fieldLabel: 'Third field'
});
TabbedFormWindow.superclass.constructor.call(this, {
layout: 'fit',
items: [
new Ext.TabPanel({
activeTab: 0,
defaults: {
layout: 'form'
},
items: [{
title: 'First tab',
items: [firstInput, secondInput]
},{
title: 'Second tab',
items: [thirdInput]
}],
layoutOnTabChange: true
})
],
renderTo: document.body
});
}
});

// W/o tab panel - works fine
FormWindow = Ext.extend(Ext.Window, {
constructor: function() {
var firstInput = new Ext.form.TextField({
fieldLabel: 'First field'
});
var secondInput = new Ext.form.TextField({
fieldLabel: 'Second field'
});
var thirdInput = new Ext.form.TextField({
fieldLabel: 'Third field'
});
FormWindow.superclass.constructor.call(this, {
layout: 'form',
items: [firstInput, secondInput, thirdInput],
renderTo: document.body
});
}
});

init = function() {
var win = new FormWindow();
win.show();
var tabbedWin = new TabbedFormWindow();
tabbedWin.show();
console.dir(tabbedWin);
}