ExtJS panel layout with sub panels and donut chart - extjs

Question

I am trying to achieve a layout similar to the below where a panel contains 2 boxes to the left and a donut chart (contained within it's own panel) to the right.
Clicking on either box on the left would trigger a reload of the chart.
I am unclear what elements would be best for the clickable boxes to the left and also how i could align them with the chart. Would a container make it easier to position the elements as required ?
Thanks for any assistance.

Answer 1

to achieve the layout you want, there are several ways. The most popular are border layout and combination v hbox and vbox layout.
I will show both.
for click listener you can use container too if button is not an option, listener implementations are in examples too.
border layout mosly are used for main panels.
this is border layout example, 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"
}]
})
and this second example achived with layout hbox, 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
}]
})