javascript - sencha 在按钮的选项卡上显示不同的 View

Question

我在 sencha touch 2 中创建了一个索引页面，我在其中的容器中创建了一些自定义按钮

Ext.define('ov_app.view.Main', {
extend: 'Ext.Container',
requires:[
    'ov_app.view.Eligibelity',
],
xtype: 'main',
css:[{
            "path": "default-theme.css",
    }],
config:{
    scrollable: true,
    items: [
        {           xtype: 'panel',
                    margin:10,
                    items:[
                        {
                            xtype:'button',
                            margin: '0 0 8 0',
                            cls:"main_navigation",
                            style:'background-color:#000',
                            action: 'push-view',
                        },{
                            xtype:'button',
                            margin: '0 0 8 0',
                            cls:"main_navigation",
                        },{
                            xtype:'button',
                            cls:"main_navigation",
                        }
                    ]
           }]
    }
});

这些按钮看起来像这样

点击橙色按钮我想显示一个新 View 。

我已经尝试过 ext.Navigation View ，但这不是我想要的。我是否必须向按钮添加事件监听器，或者我必须做其他事情请建议

我在 Controller 文件夹 main.js 中创建了一个新 Controller

Ext.define('ov_app.controller.Main', {
extend: 'Ext.app.Controller',
    config:{
        control: {
            'button[action=push-view]': {
                tap: 'pushViewFunction'
            }
        },
    },

pushViewFunction: function() {
    Ext.Viewport.add({
        xtype: 'Eligibelity' 
    });
}
});

和我的新 View Eligibelity.js 代码

`
Ext.define('ov_app.view.Eligibelity', {
    xtype : 'Eligibelity',

    config: {
        layout: 'vbox',
        cls: 'big',

        items: [
            {
                xtype: 'title',
                title: 'Twitter Search'
            }
        ]
    }
    });

`还有我的 app.js 代码

` Ext.Loader.setPath({ '分机':'触摸/源'， 'ov_app':'应用程序' });

    Ext.application({
        name: 'ov_app',

        requires: [
        'Ext.MessageBox'
    ],

views: ['Main', 'Eligibelity'],
controllers: ['Main'],

launch: function() {
    // Destroy the #appLoadingIndicator element
    Ext.fly('appLoadingIndicator').destroy();

    // Initialize the main view
    Ext.Viewport.add(Ext.create('ov_app.view.Main'));
},

onUpdated: function() {
    Ext.Msg.confirm(
        "Application Update",
        "This application has just successfully been updated to the latest version.     Reload now?",
        function(buttonId) {
            if (buttonId === 'yes') {
                window.location.reload();
            }
        }
    );
}
});

`

Answer 1

您可以在按钮中添加一个action 以供引用:

{
    xtype: 'button',
    action: 'push-view'
}

然后在您的 Controller 中，您可以在用户点击按钮时推送新 View ，如下所示:

control: {
   'button[action=push-view]': {
        tap: 'pushViewFunction'
    }
},

pushViewFunction: function() {
     Ext.Viewport.add({
         xtype: 'newView' // This is the xtype of new view you want to push 
     });
}

---

编辑

您需要将control 放在config block 中:

config: {    
    control: {
       'button[action=push-view]': {
            tap: 'pushViewFunction'
        }
    }
},

pushViewFunction: function() {
     Ext.Viewport.add({
         xtype: 'newView' // This is the xtype of new view you want to push 
     });
}

---

编辑 2:

您可以使用setActiveItem 或animateActiveItem:

 pushViewFunction: function() {
    Ext.Viewport.animateActiveItem({xtype: 'Eligibelity'}, {type:'slide', direction: 'left'});
}

这是 Working Demo 基于您发布的所有代码。