2013-02-21 182 views
0

我使用的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) 
       | 

現在,我的文本框仍然對窗口調整大小不變的寬度。感謝您的幫助。

回答

1

你幾乎沒有:)

只是刪除默認的Flex:defaults: { layout: 'anchor', flex: 1}, //不知道,如果你需要的佈局。

並將flex:1只有添加到TextField。
使用固定的其他項目,將使TextField佔據所有空間。