使用Extjs創建類似結構的表格

Question

在Extjs 4.1.1a中，我嘗試使用containers或panels創建一個類似於結構的表格，該表格完全沿水平和垂直方向伸展到其父組件。

這裏是Example Fiddle

在查看：

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 

我不知道爲什麼這不起作用（沒有顯示任何東西）。請協助我解決這個問題。

Answer 1

Fiddle

你推一個數組的數組，並把它當作物品在主面板：

這裏的固定碼：

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

Answer 2

編輯：爲時已晚，無論如何都留下了這個例子。

你正在構建一個錯誤：

/*****************************************/ 
    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/