ExtJs 4 - Изменить размеры элементов формы при изменении размера окна

Question

Я использую ExtJs 4.0.7, и у меня только что возникла проблема. Я хочу изменить размеры элементов в форме (панели), когда я изменяю размер окна, которое содержит его (или их). Это просто, когда у вас нет столбцов, и вы используете макет 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) 
       | 

Сейчас мой TextField остается с постоянной шириной на изменения размеров окна. Спасибо за помощь.

Answer 1

вы почти там :)

просто удалить по умолчанию флекс: defaults: { layout: 'anchor', flex: 1}, // не уверен, что если вам нужен макет.

и добавить flex:1только в текстовое поле.
Имея другие элементы с фиксированным, сделает TextField занять все свободное место.