2012-04-27 9 views
0

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

をしかし、私は、コードを実行したとき、私はhは未定義のエラーでました。どのように列レイアウトでフォームを設計するのですか?明確なアイデアを提供する手順、手順、またはリンクはありますか?

+1

ExtJS 3を使用していますか? ExtJS 4? – Shekhar

答えて

2

私はExtJs 3.2.2で同じコードを実行し、同様のe不具合私はrenderTo: "patientCreation" コードを削除する場合でも、働いていた: enter image description here

を使用すると、ウィンドウ内のフォームを配置している原因の部分が」必要ではないこと。

0

私はExtJS 3について何も知らない。ExtJS 4を使用している場合、間違った場所にlayoutの設定を指定した。 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

0

代わりに、フォームのウィンドウにrenderTo設定を適用してみてください

チェックexample

関連する問題