Расположение колонок в 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 config в неправильном месте. Вы указали его внутри items config, его не должно быть внутри items config.

Макет может быть определен следующим образом в 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