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

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);

    }

});

the link you've mentioned can only visible to members. Post public link. — SachinGutte

Sebastian Mansfield Sebastian Mansfield · Accepted Answer · 2013-04-04T21:25:23

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();
}
}

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

1 Answers