Extjs问题——windows包容多组件

问题描述：需要在实现一个Ext.window.Window弹窗，里面包含一个图标和一个表格。出现的问题是只能显示出一个组件。

初始代码：Ext.create('Ext.window.Window',{
title: '基于位置的故障数占比',
width: 800,
height: 600,
layout: 'fit',
modal: true,
items:[
{
xtype:'cartesian',
animation: !Ext.isIE9m && Ext.os.is.Desktop,
background: '#ffffff',
height: 300,
colors: [
'#6aa5db'
],
bind:{
store: '{dashboard.QGBarStore}'
},
axes: [
{
type: 'category',
fields: [
'xvalue'
],
hidden: false,
position: 'bottom'
},
{
type: 'numeric',
fields: [
'yvalue'
],

hidden: false,
position: 'left'
}
],
series: [
{
type: 'bar',
xField: 'xvalue',
yField: [
'yvalue'
]
}
],
interactions: [
{
type: 'panzoom'
}
]
},
{
xtype: 'grid',
border: true,
autoScroll:true,
height:300,
width:'100%',
columns: [
{
header: 'Area_id',
dataIndex: 'xvalue'
},
{
header: 'numbers',
dataIndex:'yvalue'
}
], // One header just for show. There's no data,
store: Ext.create('Ext.data.Store', {
autoLoad:true,
model:'Admin.model.DataXY',
proxy:{
type:'ajax',
url:'~api/qg/bar',
reader: {
type: 'json',
rootProperty: 'data'
}
}
})
}
]

}).show();
解决思路：在windows的item里面放一个容器panel，用该panel盛装需要显示的widgets。

解决之后的代码以及一些小tips：

Ext.create('Ext.window.Window',{
title: '基于位置的故障数占比',
width: 800,
height: 600,
layout: 'fit',
modal: true,
items:[
{
xtype: 'panel',
width:'100%',
height:'100%',
items:[
{
xtype:'cartesian',
animation: !Ext.isIE9m && Ext.os.is.Desktop,
background: '#ffffff',
height: 300,
colors: [
'#6aa5db'
],
bind:{
store: '{dashboard.QGBarStore}'
},
axes: [
{
type: 'category',
fields: [
'xvalue'
],
hidden: false,
position: 'bottom'
},
{
type: 'numeric',
fields: [
'yvalue'
],

hidden: false,
position: 'left'
}
],
series: [
{
type: 'bar',
xField: 'xvalue',
yField: [
'yvalue'
]
}
],
interactions: [
{
type: 'panzoom'
}
]
},
{
xtype: 'grid',
border: true,
autoScroll:true,
height:300,
width:'100%',
columns: [
{
header: 'Area_id',
dataIndex: 'xvalue'
},
{
header: 'numbers',
dataIndex:'yvalue'
}
], // One header just for show. There's no data,
store: Ext.create('Ext.data.Store', {
autoLoad:true,
model:'Admin.model.DataXY',
proxy:{
type:'ajax',
url:'~api/qg/bar',
reader: {
type: 'json',
rootProperty: 'data'
}
}
})
}
]
}

]
}).show();1.需要在弹出窗口之后背景变黑：设置modal：true
2.表格需要显示滚动条，autoScroll：true。但需要注意的是，需要设置表格的高度，否则不会显示。