Javascript ExtJs 4-调整窗口上的表单项大小调整大小
我正在使用ExtJS4.0.7,我刚刚遇到了一个问题。 当我调整包含窗体(面板)的窗口的大小时,我想调整窗体(面板)中元素的大小。 我知道,当您没有列并且使用Javascript ExtJs 4-调整窗口上的表单项大小调整大小,javascript,layout,extjs,hbox,Javascript,Layout,Extjs,Hbox,我正在使用ExtJS4.0.7,我刚刚遇到了一个问题。 当我调整包含窗体(面板)的窗口的大小时,我想调整窗体(面板)中元素的大小。 我知道,当您没有列并且使用anchor布局时,这很简单。 到目前为止,我的代码如下所示: initComponent: function () { var me = this; me.terminalImage = Ext.create('Ext.Img', { src: 'http://www.se
anchor
布局时,这很简单。
到目前为止,我的代码如下所示:
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);
}
我想得到这样的东西:
My Image | My TextField (resizable width on window resize)
(fixed size) | My ComboBox (I know it is not resizable)
|
现在,在调整窗口大小时,我的文本字段的宽度保持不变。谢谢你的帮助。你就快到了:)
只需删除默认的flex:默认值:{layout:'anchor',flex:1},
//不确定是否需要布局
并在文本字段中仅添加flex:1
。将其他项与一起固定,将使TextField占用所有剩余空间