使用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/