Extjs의 FormPanel 레이아웃

FormPanel에는 Form과 column의 두 가지 레이아웃이 있습니다.form은 세로 레이아웃이고,column은 가로 레이아웃입니다.기본값은 후자입니다.레이아웃 속성을 사용하여 레이아웃 형식을 정의합니다.복잡한 레이아웃 표에 대해 가장 중요한 것은 정확하게 분할하는 것이다. 분할 결과는 레이아웃이 순조롭게 실현될 수 있는지를 직접 결정한다.기본 레이아웃을 더 이상 사용하지 않으면 각 요소에 대해 레이아웃 방식을 지정해야 합니다. 또한 다음 사항을 따라야 합니다.

모든 폼 구성 요소를 실행한 후에 마지막에는 항상 form 레이아웃을 합니다

defaultType 속성이 반드시 작용하는 것은 아닙니다. 모든 폼 구성 요소에 xtype 또는 new를 지정해야 합니다

column 레이아웃에서columnWidth를 통해 열이 차지하는 너비의 백분율을 지정할 수 있습니다. 예를 들어 50%를 차지하는 너비는.오.아래와 같이 합리적인 구조를 분석한다

우리는 레이아웃은 사실 줄과 열 구성 요소로 이루어져 있으며, 왼쪽에서 오른쪽으로, 위에서 아래로 두 방향으로 나뉘어져 있으며, 왼쪽에서 오른쪽으로column, 위에서 아래로form라고 부른다는 것을 발견했다.
전체 큰 표는form 레이아웃이고 위에서 아래로 다섯 개의 작은 레이아웃을 놓았습니다. 여기서 저는 줄 n 표시를 하고 우리는 줄 1을 예로 삼아 분석합니다.행 1은 왼쪽에서 오른쪽으로 세 개의 폼 구성 요소가 있기 때문에column 레이아웃입니다. 행 1은 구조로 정의합니다.

{ 
    layout: “column”, 
    items:[{},{},{}] //items ，  
}

행 1에는 사실 세 개의form 레이아웃이 있습니다. 모든 레이아웃에 폼 구성 요소가 하나밖에 없기 때문에 뚜렷하게 보이지 않습니다. 우리는 여러 개의 폼 구성 요소를 레이아웃에 배치할 수 있습니다.각 레이아웃은 다음 구조 정의를 사용합니다.

{ 
    layout: “form”, 
    items:[{}] //  
}

위의 두 구조는 최종적으로 함께 조립해야 한다.

{ 
layout: “column”, 
items:[{ 
   layout: “form”, 
   items:[{}] 
},{ 
   layout: “form”, 
   items: [{}] 
},{ 
   layout: “form”, 
   items: [{}] 
}] 
}

위의 전체 코드는 다음과 같습니다.

Ext.onReady(function() {
    var form = new Ext.form.FormPanel({
       title : " ",
       width : 650,
       autoHeight : true,
       frame : true,
       renderTo : "a",
       layout : "form", //  form 
       labelWidth : 65,
       labelAlign : "right",
       items : [{ //  1
        layout : "column", //  
        items : [{
           columnWidth : .3, //  
           layout : "form", //  
           items : [{
              xtype : "textfield",
              fieldLabel : " ",
              width : 120
             }]
          }, {
           columnWidth : .3,
           layout : "form",
           items : [{
              xtype : "textfield",
              fieldLabel : " ",
              width : 120
             }]
          }, {
           columnWidth : .3,
           layout : "form",
           items : [{
              xtype : "textfield",
              fieldLabel : " ",
              width : 120
             }]
          }]
       }, { //  2
          layout : "column",
          items : [{
             columnWidth : .5,
             layout : "form",
             items : [{
                xtype : "textfield",
                fieldLabel : " 1",
                width : 220
               }]
            }, {
             columnWidth : .5,
             layout : "form",
             items : [{
                xtype : "textfield",
                fieldLabel : " 2",
                width : 220
               }]
            }]
         }, {//  3
          layout : "form",
          items : [{
             xtype : "textfield",
             fieldLabel : " ",
             width : 500
            }, {
             xtype : "textfield",
             fieldLabel : " ",
             width : 500
            }]
         }, {//  4
          layout : "column",
          items : [{
             layout : "form",
             columnWidth : 0.2,
             items : [{
                xtype : "textfield",
                fieldLabel : " ",
                width : 50
               }]
            }, {
             layout : "form",
             columnWidth : 0.2,
             items : [{
                xtype : "textfield",
                fieldLabel : " ",
                width : 50
               }]
            }, {
             layout : "form",
             columnWidth : 0.2,
             items : [{
                xtype : "textfield",
                fieldLabel : " ",
                width : 50
               }]
            }, {
             layout : "form",
             columnWidth : 0.2,
             items : [{
                xtype : "textfield",
                fieldLabel : " ",
                width : 50
               }]
            }]
         }, {//  5
          layout : "form",
          items : [{
             xtype : "htmleditor",
             fieldLabel : " ",
             enableLists : false,
             enableSourceEdit : false,
             height : 150
            }]
         }],
       buttonAlign : "center",
       buttons : [{
          text : " "
         }, {
          text : " "
         }]
      });
   });