Sencha Touch: how to implement a left menu with layout right - layout

Question

I'm new using Sencha Touch 2, and I've started developing a Tablet App. I'm using Sencha Architect for design and write the code, and my app has a card layout with "left-side" and "right-side". On the left I have a main menu with some buttons. This menu is all time on the left. On the right side, I want to change the views depending what menubutton was clicked and where the user want to go (It will have more than 3 levels navigation after every button click).
My problem now is "How to change the views?". Until now, I had a Navigation.View on the right, and I has using this.getPanelFrame().push(view); method. I have problems with toolbars when a load something into navegation.view, and I know how to create views and push, but after thant I dont know how to load this views again.
I Link too an image where you can the structure of my components. My main doubt is: do I have to use a navigation.view as a "frame" to load inside other views? How to change an load others? Any alternatives?
Thanks a million"
CONTROLLER
Ext.define('MyApp.controller.Main', {
extend: 'Ext.app.Controller',
config: {
refs: {
panelFrame: '#PanelFrame'
},
control: {
"button#btnclientes": {
tap: 'onBtnclientesTap'
},
"#btnpedidos": {
tap: 'onBtnpedidosTap'
}
}
},
onBtnclientesTap: function(button, e, options) {
var view = Ext.create("MyApp.view.ClientesListView");
this.getPanelFrame().push(view);
},
onBtnpedidosTap: function(button, e, options) {
var view = Ext.create("MyApp.view.ClientesNewView");
this.getPanelFrame().push(view);
}
});

Answer 1

why dont you create a container in the right side.
and then in the items: call each view with the xtype
{
xtype: 'container',
items: [
{
xtype: 'view1',
id: 'Cview1',
hidden:true,
},
{
xtype: 'view2',
id: 'Cview2',
hidden:true,
},
{
xtype: 'view3',
id: 'Cview3',
height:'auto',
hidden:true,
}]
and then in the handler of the button you just hide the other views and show your selected view like:
{
xtype: 'button',
handler:function(){
Ext.getCmp('Cview1').hide();
Ext.getCmp('Cview2').hide();
Ext.getCmp('Cview3').show();
}
}