使用Extjs创建表格，如结构 [英] Create table like structure using Extjs

问题描述

在Extjs 4.1.1a中，我尝试使用 container 或面板水平和垂直伸展到其父组件。

In Extjs 4.1.1a, I am trying to create a table like structure using containers or panels which completely stretches horizontally and vertically to its parent component.

以下是示例小提琴

在视图中：

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

我不知道为什么这不工作（没有显示任何东西）。请帮助我解决这个问题。

I am not sure why this ain't working (not showing anything). Please assist me to solve this problem.

推荐答案

小提琴

您将阵列推入阵列，并将其作为主面板中的项目传递：

You're pushing an array into an array and passing it as items in the main panel:

这是固定代码：

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

这篇关于使用Extjs创建表格，如结构的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！