[英]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.