[英]How to make a table-like structure with row/colspans using ExtJS Grid 4.1
[英]Create table like structure using Extjs
在Extjs 4.1.1a中,我试图使用containers
或panels
创建一个类似表的结构,该containers
完全在水平和垂直方向上延伸到其父组件。
这是示例小提琴
在视图中 :
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
我不确定为什么这行不通(什么都不显示)。 请协助我解决这个问题。
您正在将一个数组推入一个数组,并将其作为项目传递到主面板中:
这是固定代码:
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
})
编辑:为时已晚,无论如何都将示例留在这里。
您在建立错误:
/*****************************************/
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/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.