EXTJS의 열 레이아웃

Question

ExtJs를 처음 사용합니다. 열 레이아웃을 사용하여 2 열의 입력 폼을 만들어야합니다.

Ext.onReady(function(){       

       var patientForm = new Ext.FormPanel({ 
        renderTo: "patientCreation", 
        frame: true, 
        title: 'Search Criteria', 
        labelAlign: 'left', 
        labelStyle: 'font-weight:bold;', 
        labelWidth: 85, 
        width: 900, 
        items: [ 
        { 
         layout:'column', 
         items:[ 
         { // column #1 
          columnWidth: .33, 
          layout: 'form', 
          items: [ 
           { xtype: 'textfield', 
            fieldLabel: 'FirstName', 
            name: 'firstName', 
            vtype : 'alpha', 
            allowBlank:false 
           },{ 
            xtype: 'textfield', 
            fieldLabel: 'MiddleName', 
            name: 'middleName', 
            vtype : 'alpha'    
           } 
          ] // close items for first column 
         }] 
        }] 

         });   
         var win = new Ext.Window({       
          layout:'form', 
          closable: false, 
          resizable: false, 
          plain: true, 
          border: false, 
          items: [patientForm] 
         }); 
      win.show(); 
      }); 

을하지만이 코드를 실행하면, 내가 시간이 정의되지 않은 오류입니다 가지고 다음과 같이

내 코드입니다. 열 레이아웃에서 양식을 디자인하는 방법? 명확한 아이디어를 제공하는 절차, 단계 또는 링크가 있습니까?

Answer 1

나는 ExtJs 3.2.2와 동일한 코드를 실행했고 비슷한 e rror. 내가 제거 할 때 renderTo: "patientCreation" 코드 일 : 당신이 창에 양식을 배치하는 원인이 부분이 '필요하지 않다

있다.

Answer 2

ExtJS 3에 대해 아무것도 모릅니다. ExtJS 4를 사용하는 경우 layout 구성을 잘못된 위치에 지정했습니다. items 구성 안에 지정 했으므로 items 구성 안에 있으면 안됩니다. 의 ExtJS 4에서 다음과 같이

레이아웃을 지정할 수 있습니다 : 당신은 모든 패널에 대한 샘플 코드를 얻을 수

Ext.define('your_domain_name.viewName', { 
    extend : 'Ext.panel.Panel', 
    alias : 'widget.any_name_you_want', 
    layout : 'column', 

    initComponent : function() { 
     this.items = [ 
      // all items inside form/panel will go here 
     ]; 
    this.callParent(arguments); 
    } 
}); 

이 here

Answer 3

대신 형식의 창에 renderTo 설정을 적용하려고

체크 example