2013-02-21 2 views
0

ExtJs 4.0.7을 사용하고 있으며 문제가 발생했습니다. 요소를 포함하는 창을 크기를 조정할 때 (패널) 요소의 크기를 조정하려고합니다. 열이없고 간단히 anchor 레이아웃을 사용하면 간단합니다. 지금까지, 내 ​​코드는 다음과 같습니다ExtJs 4 - 창에서 양식 항목 크기 조정

My Image  | My TextField (resizable width on window resize) 
(fixed size) | My ComboBox (I know it is not resizable) 
       | 

지금, 내 텍스트 필드가 창 크기 조절에 일정한 폭으로 남아 :

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

내가 그런 일을 얻고 싶었다. 도와 줘서 고마워.

답변

1

당신은 거의

그냥 기본 플렉스를 제거 :)입니다 defaults: { layout: 'anchor', flex: 1}, // 당신이 레이아웃을 필요가 있는지 확실하지 않습니다.

flex:1을 TextField에 추가하십시오.
다른 항목을 고정하여 사용하면 TextField가 모든 왼쪽 공간을 차지하게됩니다.

관련 문제