I am using ExtJs 4.0.7 and I have just got into a problem.
I want to resize the elements in the form(panel) when I resize the window which contains it(or them).
It's simple when you don't have columns and you are using an anchor
layout, I know.
So far, my code looks like this:
initComponent: function ()
{
var me = this;
me.terminalImage = Ext.create('Ext.Img', {
src: 'http://www.sencha.com/img/20110215-feat-html5.png',
width: 50,
margin: '0 10 0 0'
});
me.nameField = Ext.create('Ext.form.Text', {
xtype: 'textfield',
name: 'defname',
fieldLabel: 'myFLabel',
allowBlank: false,
listeners: {
}
});
me.terminalTypeCmb = Ext.create('Ext.form.field.ComboBox', {
fieldLabel: me.getTrans('lblTerminalType.Text', 'Type'),
parentRecord: me.parentRecord,
store: 'myStore',
queryMode: 'local',
name: 'typename',
width: 300,
valueField: 'deftype',
displayField: 'typename',
listeners: {
}
});
me.form = Ext.create('Ext.form.Panel', {
xtype: 'form',
autoScroll: true,
defaultType: 'textfield',
defaults: { layout: 'anchor', flex: 1},
padding: '10',
items: [{
xtype: 'container',
layout: 'hbox',
items: [
me.terminalImage,
{
items: [me.nameField, me.terminalTypeCmb]
}
]
}
]
});
Ext.apply(this,
{
defaults: {
},
defaultType: 'textfield',
items: [me.form]
});
if (me.parentRecord)
{
me.form.loadRecord(me.parentRecord);
}
this.callParent(arguments);
}
I wanted to get something like that:
My Image | My TextField (resizable width on window resize)
(fixed size) | My ComboBox (I know it is not resizable)
|
Right now, my textfield remains with a constant width on window resize. Thank you for your help.
you are almost there :)
just remove default flex :defaults: { layout: 'anchor', flex: 1},
// not sure if you need the layout.
and add flex:1
only to the TextField.
Having the other items with fixed with, will make the TextField take all the space left.