Создание таблицы, подобной структуре с использованием 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

Edit: Это было слишком поздно, оставив здесь пример.

Вы строите это неправильно:

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