테이블 레이아웃

Question

에서 구성 요소를 스트레칭하려고 나는 다음과 같다 구성 요소의 3 × 패널이 : 그것은 테이블 레이아웃 (나는 추측하고이 작업에 가장 적합한 레이아웃)를 사용합니다

합니다. 나는 창을 넓혀 그러나 내부 구성 요소는 스트레칭하지 않습니다

내 코드는 다음과 같습니다

v = Ext.create('Ext.window.Window', { 
     renderTo: document.body, 

     layout: { 
      type: 'table', 
      columns: 3, 
      tdAttrs: { style: 'padding: 3px;' } 
     }, 

     items: [ 
      { 
       xtype: 'label', 
       text: 'Field 1' 
      }, 
      { 
       xtype: 'label', 
       text: 'Field 2' 
      }, 
      { 
       xtype: 'label', 
       text: 'Field 3' 
      }, 
      { 
       xtype: 'textfield' 
      }, 
      { 
       xtype: 'textfield' 
      }, 
      { 
       xtype: 'combobox' 
      } 
     ] 
    } 
); 
v.show() 

당신은 내가 테이블 레이아웃을 사용하고 볼 수 있듯이. 스트레칭 규칙없이 벽돌 같은 구성 요소를 배치하는 것 같습니다. 이 상황을위한 더 나은 레이아웃이 있습니까? 난 어쩌면 hBox과 3 개의 패널을 가지고 있다고 생각 했었고, 패널 안에는 vBox이 있었을 것입니다. 그러나 그것은 약간 성가시다.

바이올린은 여기에 있습니다 :

http://jsfiddle.net/dxyxudds/2/

Answer 1

당신은 각 항목에 대해 columnWidth의와 열 레이아웃을 사용할 수 있습니다. 텍스트 필드에는 라벨이 있으므로 별도의 라벨 위젯이 필요 없습니다.

Ext.create('Ext.window.Window', { 
    renderTo: document.body, 
    height: 100, 
    width: 500, 
    autoShow: true, 
    shadow: false, 
    layout: 'column', 
    defaults: { 
     labelAlign: 'top', 
     xtype: 'textfield', 
     columnWidth: 0.33, 
     padding: 5 
    }, 
    items: [{ 
     fieldLabel: 'Field 1' 
    }, { 
     fieldLabel: 'Field 2' 
    }, { 
     fieldLabel: 'Field 3' 
    }] 
}); 

여기는 테이블 레이아웃이 있지만 각 필드를 양식 레이아웃 컨테이너로 배치해야합니다. 양식 레이아웃의 주요 목적은 필드를 컨테이너 너비로 늘리는 것입니다.

Ext.create('Ext.window.Window', { 
     renderTo: Ext.getBody(), 
     height: 170, 
     width: 400, 
     autoShow: true, 
     layout: { 
      type: 'table', 
      columns: 3, 
      tdAttrs: { 
       style: 'width: 33%' 
      } 
     }, 
     defaults: { 
      xtype: 'container', 
      layout: 'form', 
      padding: 5, 
      defaults: { 
       xtype: 'textfield', 
       labelAlign: 'top' 
      } 
     }, 
     items: [{ 
      items: { 
       fieldLabel: 'Field 1' 
      } 
     }, { 
      items: { 
       fieldLabel: 'Field 2' 
      } 
     }, { 
      items: { 
       xtype: 'combobox', 
       fieldLabel: 'Field 3' 
      } 
     }, { 
      items: { 
       fieldLabel: 'Field 4' 
      } 
     }, { 
      items: { 
       fieldLabel: 'Field 5' 
      } 
     }, { 
      items: { 
       xtype: 'combobox', 
       fieldLabel: 'Field 6' 
      } 
     }] 
    });