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);
}
});
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);
}
});