PDA

View Full Version : How can I stop a Window containing a TabPanel from changing size after first render?



bareflix
15 Sep 2011, 11:35 AM
I have a window with a tab panel that contains a form in one tab, and a transaction log in the other tab. When the window is rendered, it is sized perfectly to fit the form, which is exactly what I want. When I change to the second tab, the window shrinks to fit that tab, but I don't want it to shrink, I want it to stay the size it was and stretch the content of the second tab to fit.
If I manually resize the window, it does keep the size.

Any suggestions on how to get the behavior I want? I don't want to have to hard code the window size, because the contents of the form will change.


Ext.define('app.view.ui.myWindow', {
extend: 'Ext.window.Window',

layout: {
type: 'fit'
},
border: false,

initComponent: function() {

var me = this;
me.items = [
{
xtype: 'tabpanel',
border: false,
activeTab: 0,
items: [
{
xtype: 'panel',
border: false,
bodyPadding: 10,
title: 'Configuration',
items: [
{
xtype: 'form',
id: "ReaderForm",
border: false,
buttonAlign: 'center',
buttons: [
{
id: 'save',
xtype: 'button',
text: 'Save'
}
]
}
etc.
]
},
{
xtype: 'panel',
border: false,
bodyPadding: 10,
title: 'Transactions',
id: "transactionPanel",
autoScroll: true,
layout:
{
type: 'fit'
},
html: "<div id=\"transactionList\">Transaction List</div>"
}
]
}
}
};

mberrie
15 Sep 2011, 10:42 PM
So you basically want the Window to auto-size itself, but then again... not! ;)

Interestingly this works for me in Ext 4.0.2a (it takes the width of the first tab on first show, but doesn't resize on tab change, check this out:

(I simulate auto-sizing from bottom up by assigning a html text of variable length to the inner elements)



Ext.Loader.setPath('Ext', 'ext/src');
Ext.Loader.config.disableCaching = false;

Ext.define('app.view.ui.myWindow', {
extend: 'Ext.window.Window',

layout: {
type: 'fit'
},
border: false,

initComponent: function() {

var me = this;
me.items = [
{
xtype: 'tabpanel',
border: false,
activeTab: 0,
items: [
{
xtype: 'panel',
border: false,
bodyPadding: 10,
title: 'Configuration',
items: [
{
xtype: 'form',
id: "ReaderForm",
border: false,
buttonAlign: 'center',
buttons: [
{
id: 'save',
xtype: 'button',
text: 'save'
}
],
items: [
{
xtype: 'component',
html: function() {
var title = [];
for (var i = 0; i < 100; i++) {
title[i] = 'x';
}
return title.join('');
}()
}

]
}
]
},
{
xtype: 'panel',
border: false,
bodyPadding: 10,
title: 'Transactions',
id: "transactionPanel",
autoScroll: true,
layout:
{
type: 'fit'
},
// html: "<div style=\"width: 100px\" id=\"transactionList\">Transaction List</div>"
html: function() {
var title = [];
for (var i = 0; i < 20; i++) {
title[i] = 'x';
}
return title.join('');
}()
}
]
}
]

this.callParent(arguments);
}
});
Ext.onReady(function() {
Ext.create('app.view.ui.myWindow').show();
});