PDA

View Full Version : What stops my components from expanding?



mice-pace
14 Nov 2012, 6:49 PM
After upgrading from ExtJs 4.0 to 4.1 my layouts have needed to be redesigned... To that end I opened up a new file in Architect, made a form with fields that expand based on the width of the whole thing, then exported it and imported it into my original project.

However once in the new project (despite being the exact same code) the text fields never expand. If it works in another context I'm probably doing the right thing, but some of the settings on the layout on my original project must be altering the way it is rendered. Can anyone suggest the things to start looking for?

Here's the Panel I made and then imported:

Ext.define('MyApp.view.MyPanel', {
extend: 'Ext.panel.Panel',
alias: 'widget.mypanel',

layout: {
type: 'border'
},

initComponent: function() {
var me = this;

Ext.applyIf(me, {
items: [
{
xtype: 'container',
flex: 1,
region: 'east',
width: 150
},
{
xtype: 'container',
flex: 1,
region: 'west',
width: 150
},
{
xtype: 'container',
region: 'north',
height: 20
},
{
xtype: 'container',
region: 'south',
height: 150
},
{
xtype: 'panel',
flex: 2,
region: 'center',
layout: {
align: 'stretch',
type: 'hbox'
},
title: 'My Panel',
items: [
{
xtype: 'container',
flex: 1,
layout: {
align: 'stretch',
type: 'vbox'
},
items: [
{
xtype: 'container',
layout: {
type: 'fit'
},
items: [
{
xtype: 'textfield',
fieldLabel: 'Label1',
grow: false
}
]
},
{
xtype: 'container',
layout: {
type: 'fit'
},
items: [
{
xtype: 'textfield',
shrinkWrap: 1,
fieldLabel: 'Label2'
}
]
},
{
xtype: 'container',
layout: {
type: 'fit'
},
items: [
{
xtype: 'textfield',
shrinkWrap: 1,
name: 'lastname',
fieldLabel: 'Label3',
labelAlign: 'right',
labelPad: 30
}
]
},
{
xtype: 'container',
layout: {
type: 'fit'
},
items: [
{
xtype: 'combobox',
shrinkWrap: 1,
fieldLabel: 'Label4'
}
]
}
]
},
{
xtype: 'container',
width: 5
},
{
xtype: 'container',
flex: 1,
layout: {
type: 'fit'
},
items: [
{
xtype: 'textareafield',
frame: true,
shrinkWrap: 1,
resizable: true,
fieldLabel: 'Label',
labelAlign: 'top',
grow: false
}
]
}
]
}
]
});

me.callParent(arguments);
}

});

mitchellsimoens
19 Nov 2012, 7:16 AM
You are overnesting. Your textfields don't need to be nested within a container.