Dynamically change region

Hi, I have a view that is a container within that view I have two views, one is a nested list and the other is a container which must change as selected in the nested list. Someone could give me an idea of ​​how this is done. Greetings to all and thanks in advance.

mainmenu

Ext.define('PGW2.view.MainMenu',{

extend: 'Ext.Container',

alias: 'widget.mainmenu',

config: {

layout: 'hbox',

items: [{

xtype: 'navigationlist',

flex: 1

},{

xtype: 'piechart',

flex: 3

}]

}

});

nestedlist

Ext.define('PGW2.view.NavigationList', {

extend: 'Ext.Container',

alias: 'widget.navigationlist',

config: {

layout: {

type: 'card'

},

items: [

{

xtype: 'nestedlist',

id: 'nestedList',

title: 'PGW2',

displayField: 'key',

store: 'NavigationStore',

detailCard: {

xtype: 'container',

scrollable: true,

styleHtmlContent: true

}

}

]

}

});

piechart
Ext.define('PGW2.view.PieChart', {

extend: 'Ext.Container',

alias: 'widget.piechart',

requires: ['Ext.chart.PolarChart', 'Ext.chart.series.Pie', 'Ext.chart.interactions.Rotate'],

config: {

cls: 'card1',

layout: 'card',

style: 'background: white',

items: [

{

xtype: 'toolbar',

docked: 'top',

ui: 'light',

items: [

{

xtype: 'spacer'

},

{

iconCls: 'refresh',

text: 'Refresh',

handler: function () {

Ext.getStore('Pie').generateData(9);

}

},

{

text: 'Reset',

handler: function () {

//ensure the query gets the chart for this kitchensink example

var chart = Ext.ComponentQuery.query('polar', this.getParent().getParent())[0];

//reset the rotation

Ext.ComponentQuery.query('series', chart)[0].setRotation(0);

//reset the legend

chart.resetLegendStore();

}

}

]

},

{

xtype: 'polar',

style: 'background: white',

store: 'Pie',

colors: ["#115fa6", "#94ae0a", "#a61120", "#ff8809", "#ffd13e", "#a61187", "#24ad9a", "#7c7474", "#a66111"],

interactions: ['rotate', 'itemhighlight'],

legend: {

docked: 'right',

verticalWidth: 100

},

innerPadding: 45,

series: [

{

type: 'pie',

xField: 'g1',

label: {

field: 'name',

display: 'rotate'

},

donut: 30,

highlightCfg: {

margin: 20

},

style: {

stroke: 'white',

miterLimit: 10,

lineCap: 'miter',

lineWidth: 2

}

}

],

axes: [

]

}

]

},

initialize: function () {

this.callParent();

Ext.getStore('Pie').generateData(9);

}

});