ExtJs 4 - 调整窗口大小的窗体项目调整大小

我使用的ExtJs 4.0.7，我刚刚陷入了一个问题。当我调整包含它（或它们）的窗口的大小时，我想调整窗体（面板）中的元素的大小。这很简单，当你没有列和你正在使用anchor布局，我知道。到目前为止，我的代码看起来是这样的：ExtJs 4 - 调整窗口大小的窗体项目调整大小

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

现在，我的文本框仍然对窗口调整大小不变的宽度。感谢您的帮助。

来源

2013-02-21 darkdante

你几乎没有:)

只是删除默认的Flex：defaults: { layout: 'anchor', flex: 1}, //不知道，如果你需要的布局。

并将flex:1只有添加到TextField。
使用固定的其他项目，将使TextField占据所有空间。

来源

2013-03-29 12:43:15

ExtJs 4 - 调整窗口大小的窗体项目调整大小

回答

相关问题