带有子面板和圆环图的 ExtJS 面板布局
ExtJS panel layout with sub panels and donut chart
我正在尝试实现类似于下面的布局,其中一个面板左侧包含 2 个框,右侧包含一个圆环图(包含在它自己的面板中)。
单击左侧的任一框都会触发重新加载图表。
我不清楚哪些元素最适合左侧的可点击框以及如何将它们与图表对齐。容器是否可以更轻松地根据需要定位元素?
感谢您的帮助。
要实现你想要的布局,有几种方法。最流行的是边框布局和组合 v hbox 和 vbox 布局。 我会展示两者。
对于点击监听器,如果按钮不是一个选项,您也可以使用容器,监听器实现也在示例中。
边框布局主要用于主面板。
这是边框布局示例,here is fiddle
Ext.create('Ext.panel.Panel', {
renderTo: Ext.getBody(),
title: "Main Panel",
width: "100%",
bodyPadding: 5,
height: Ext.getBody().getHeight(),
layout: "border",
items: [{
xtype: "panel",
title: "leftContainer",
region: "west",
width: 300,
layout: {
type: 'vbox',
align: 'stretch'
},
items: [{
type: "conatiner",
style: "border:1px solid red",
html: "first container",
flex: 1,
listeners: {
el: {
click: function () {
alert("first Container")
}
}
}
}, {
type: "conatiner",
style: "border:1px solid red",
html: "secon container",
flex: 1,
listeners: {
el: {
click: function () {
alert("second Container")
}
}
}
}]
}, {
xtype: "panel",
margin: "0 0 0 5",
title: "center Container",
region: "center"
}]
})
第二个示例通过布局水平盒实现,here is fiddle
Ext.create('Ext.panel.Panel', {
renderTo: Ext.getBody(),
title: "Main Panel",
width: "100%",
bodyPadding: 5,
height: Ext.getBody().getHeight(),
layout: {
type: 'hbox',
align: 'stretch'
},
items: [{
xtype: "panel",
title: "leftContainer",
width: 300,
layout: {
type: 'vbox',
align: 'stretch'
},
items: [{
type: "conatiner",
style: "border:1px solid red",
html: "first container",
flex: 1,
listeners: {
el: {
click: function () {
alert("first Container")
}
}
}
}, {
type: "conatiner",
style: "border:1px solid red",
html: "secon container",
flex: 1,
listeners: {
el: {
click: function () {
alert("second Container")
}
}
}
}]
}, {
xtype: "panel",
margin: "0 0 0 5",
title: "center Container",
flex: 1
}]
})