1

Extjs 4.1.1a では、containersorpanelsを使用して、親コンポーネントに対して水平方向および垂直方向に完全に伸びるテーブルのような構造を作成しようとしています。

これがフィドルの例です

ビュー内:

Ext.define("MyApp.view.Main", {
    extend: 'Ext.panel.Panel',       
    layout: {type: 'vbox',align:'stretch'},
    title: 'hello',
    id: 'mainContainer' 
})

コントローラー内:

var items = [];
for(var i=0;i<6;i++){

    var vContainer = [];
    var hContainer = [];
    for(var j=0;j<7;j++){
       hContainer.push({
         xtype: 'panel',
         flex:1,                            
       })                       
    }                       
    vContainer.push({
        xtype:'panel',
        flex: 1,
        layout: {type:'hbox',align:'stretch'},                          
        items: hContainer
    })
}

var mainController = Ext.getCmp('mainController');  //Calling the id here
mainController.add(items);  //adding the items variable which is mentioned above

これが機能しない理由がわかりません（何も表示されません）。この問題を解決するために私を助けてください。

4

2 に答える 2

3

フィドル

配列を配列にプッシュし、それをメイン パネルの項目として渡します。

固定コードは次のとおりです。

    var items = [];
    for(var i=0;i<6;i++){

        var vContainer; //THE PROBLEM - NO NEED FOR IT TO BE AN ARRAY
        var hContainer = [];
        for(var j=0;j<7;j++){
           hContainer.push({
             xtype: 'panel',
               title : 'H',
             flex:1,                            
           });                      
        }                       
        vContainer = {
            xtype:'panel',
            flex: 1,
            layout: {type:'hbox',align:'stretch'},
            title : 'V',
            items: hContainer
        }
        items.push(vContainer);
    }



Ext.create('Ext.panel.Panel',{
    renderTo: Ext.getBody(),
    layout: {type: 'vbox',align:'stretch'},
    title: 'hello',
    minHeight : 500,
    minWidth : 500,
    items: items        
})
于 2013-03-15T10:44:16.780 に答える
3

編集：遅すぎたので、とにかくここに例を残してください。

あなたはそれを間違って構築しています:

/*****************************************/
    var items = [];
    for(var i=0;i<6;i++){               

        var hContainer = [];
        for(var j=0;j<7;j++){
           hContainer.push({
             xtype: 'panel',
             flex:1
           });                  
        }                       
        items.push({
            xtype:'panel',
            flex: 1,
            layout: {type:'hbox',align:'stretch'},                          
            items: hContainer
        });
    }

/*****************************************/

Ext.create('Ext.panel.Panel',{
    renderTo: Ext.getBody(),
    layout: {type: 'vbox',align:'stretch'},
    title: 'hello',
    height: 400,
    items: items        
});

これがフィドルです：http://jsfiddle.net/johanhaest/ptZp7/

于 2013-03-15T10:52:37.530 に答える