EXTJS中的列布局

我是ExtJs的新手。我需要使用列布局在2列中创建一个条目表单。EXTJS中的列布局

我的代码如下：

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

但是当我运行的代码，我h是未定义的错误。如何在列布局中设计表单？是否有任何程序，步骤或链接给出了清晰的想法？

来源

2012-04-27 user1321824

你使用ExtJS 3吗？或ExtJS 4？ – Shekhar 2012-04-27 06:50:39

我用ExtJs 3.2.2运行相同的代码，得到了类似的e RROR。但是，当我删除renderTo: "patientCreation" 代码工作： enter image description here

那部分是没有必要的，因为你正在放置的形式在窗口中。

来源

2012-04-27 16:09:03 lvojnovic

我对ExtJS 3一无所知。如果您使用的是ExtJS 4，那么您在错误的地方指定了layout配置。你已经在items配置里指定了它，它不应该在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

来源

2012-04-27 06:55:54 Shekhar

尝试应用renderTo配置到窗口，而不是形式

检查example

来源

2012-04-27 08:40:05 MMT

EXTJS中的列布局

回答

相关问题