extjs 4.0.0の境界線レイアウトのグリッド？

Question

境界線レイアウトの中央領域の内側に、extjsバージョン4.0.0のフォームとともにグリッドを配置する方法。私はそれに沿ってグリッドではなくフォームを置くことができます。

ソースコードは： -

Ext.onReady(function() { 

    var viewport = Ext.create('Ext.container.Viewport', { 
     renderTo: Ext.getBody(), 
     layout: 'border', 
     items: [{ 
      region: 'west', 
      width: 200, 
      collapsible: true, 
      collapsed: true, 
      html: 'West Region' 
     }, { 
      region: 'center' 
     }, { 
      region: 'east', 
      width: 200, 
      collapsible: true, 
      collapsed: true, 
      html: 'East Region' 
     }, { 
      region: 'south', 
      height: 50, 
      html: 'South Region' 
     }] 
    }); 

    var form = Ext.create('Ext.form.Panel', { 
     renderTo: Ext.getBody(), 
     title: 'User Form', 
     height: 130, 
     align: 'center', 
     width: 280, 
     bodyPadding: 10, 
     defaultType: 'textfield', 
     items: [ 
      { 
       fieldLabel: 'First Name', 
       name: 'firstName' 
      }, 
      { 
       fieldLabel: 'Last Name', 
       name: 'lastName' 
      } 
     ], 

     buttons: [{ 
      text: 'Submit', 
      handler : function() { alert("successfully submitted");} 
     }] 

}); 
    viewport.layout.regions.center.add(form); 
    // using add() 
    form.show() 

    }); 

4.0.0

Answer 1

フォームやグリッド内を含める必要があり、私はExtJSの中ボーダレイアウトの中央領域にフォームの下にグリッドを入れて助けてください中央パネルの項目を適切なレイアウトに設定します。

Answer 2

borderlayout領域にコンポーネントを追加することはできません。ビューポートの中央領域に複数のコンポーネントを追加する場合は、ラッパーコンポーネントを使用する必要があります。

DOCからパラグラフ：http://docs.sencha.com/ext-js/4-0/#/api/Ext.layout.container.Border

のBorderLayoutの領域はレンダリング時に固定され、その後、 子成分が除去又はadded.ToしなくてもよいのBorderLayout内 コンポーネントの追加/削除、ましたそれらはBorderLayoutによって直接管理される追加の コンテナでラップされます。領域 を折り畳み可能にする場合は、BorderLayoutの マネージャが直接使用するコンテナをパネルにする必要があります。

Answer 3

//THis is in app.js 
    launch : function() { 
      Ext.create('Ext.container.Viewport', { 
       layout : { 
        type : 'border' 
       }, 
       defaults : { 
        split : false 
       }, 
       items : [ { 
        region : 'north', 
        id : 'mainHeader' 
       }, { 
        region : 'south', 
        height : 20, 
        id : 'mainFooter' 
       }, { 
        id : 'mainContent', 
        collapsible : false, 
        region : 'center', 
        layout: 'fit' 
        } 

    //----This is Controller code --- 
    init: function() { 
      console.debug(' controller init(). '); 
      this.control({ 
       'viewport > #mainContent': { //look inside a viewport component for component by id='mainContent' 
        render: this.onMainReady //attach 'onMainReady' function to the 'render' event of the above component 
       } 

    //--- this is onMainReady inside controller 
       //load grid into the main content 
       var main = Ext.getCmp('mainContent'); //it isnot best practice to use getCmp 
       main.add({ 
        xtype:'mygrid', 
        id:'whateveriwant' 
       }); 

Answer 4

代わりに一つの形 を追加する形とグリッドの両方を作成して、一度にそれらを追加

これを試してみてください。

var bothforms = Ext.create('Ext.form.Panel', { 
    renderTo: Ext.getBody(), 
    width: 600, 
    layout: 'column',//or whetever u want 
    items [{ 
    title: 'User Form', 
    columnWidth: .5, 
    border: false, 
    height: 130, 
    align: 'center', 
    width: 280, 
    bodyPadding: 10, 
    defaultType: 'textfield', 
    items: [... ] 
    },{ 
    title : 'User Grid', 
    columnWidth: .5, 
    border: false, 
    height: 130, 
    width: 300, 
    items: [... ] 
}] 

}); 
viewport.layout.regions.center.add(bothforms); 
// using add() 
bothforms.show()