Question

我是使用Sencha Touch 2的新手，我开始开发平板电脑应用程序。我正在使用Sencha Architect进行设计并编写代码，而我的应用程序的card layout带有“左侧”和“右侧”。在左边我有一个带有一些按钮的主菜单。这个菜单一直在左边。在右侧，我想根据menubutton点击的内容以及用户想去的位置来更改视图（每次点击按钮后，它将有超过3个级别的导航）。我现在的问题是“如何改变观点？”。到目前为止，我右侧有一个Navigation.View，我使用了this.getPanelFrame().push(view);方法。当我将一些内容加载到navegation.view中时，我遇到了工具栏的问题，我知道如何创建视图和推送，但是在我不知道如何再次加载这些视图之后。

我Link too an image您可以在哪里找到我的组件的结构。我的主要疑问是：我是否必须使用navigation.view作为“框架”来加载其他视图？如何更改其他人的负载？任何替代方案？

万分感谢

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

为什么不在右侧创建容器。然后在项目中：使用xtype调用每个视图

{
     xtype: 'container',

    items: [

 {
             xtype: 'view1',
             id: 'Cview1',
              hidden:true,
     },
                {
                    xtype: 'view2',
                    id: 'Cview2',
                   hidden:true,
                },
                {
                    xtype: 'view3',
                    id: 'Cview3',
                    height:'auto',
                     hidden:true,

                }]

然后在按钮的处理程序中，您只需隐藏其他视图并显示所选视图，如：

           {
                                    xtype: 'button',

                                   handler:function(){

                                        Ext.getCmp('Cview1').hide();
                                        Ext.getCmp('Cview2').hide();
                                        Ext.getCmp('Cview3').show();
}
}

Sencha Touch：如何实现具有右侧布局的左侧菜单

1 个答案: