Sencha Touch 2：如何覆盖导航视图上的后退按钮

Posted 2023-02-25

【中文标题】Sencha Touch 2：如何覆盖导航视图上的后退按钮

【英文标题】：Sencha Touch 2: How to override back button on Navigation View

【发布时间】：2013-02-13 17:16:02

【问题描述】：

我想知道如何覆盖导航视图上的后退按钮。我尝试使用 onBackButtonTap 但它似乎不起作用http://www.senchafiddle.com/#8zaXf

var view = Ext.Viewport.add(
            xtype: 'navigationview',
            onBackButtonTap: function () 
                alert('Back Button Pressed');
            ,

            //we only give it one item by default, which will be the only item in the 'stack' when it loads
            items: [
                
                    //items can have titles
                    title: 'Navigation View',
                    padding: 10,

                    //inside this first item we are going to add a button
                    items: [
                    
                    xtype: 'button',
                    text: 'Push another view!',
                    handler: function() 
                    //when someone taps this button, it will push another view into stack
                    view.push(
                    //this one also has a title
                    title: 'Second View',
                    padding: 10,

                    //once again, this view has one button
                    items: [
                    
                    xtype: 'button',
                    text: 'Pop this view!',
                    handler: function() 
                    //and when you press this button, it will pop the current view (this) out of the stack
                    view.pop();
                
                
            ]
        );

【问题讨论】：

你小提琴不能在浏览器（Chrome）中运行。引发语法错误。

在这行 `padding:10' 之后缺少,。

@phazorRise 你是对的

@MCL 链接和代码已更新

【参考方案1】：

您提到的小提琴在我机器上的本地项目中运行良好。出于某种原因，它在小提琴网站上不起作用。尝试在本地项目上运行它。

仍然不要使用onBackButtonTap 配置，最好扩展Ext.navigation.View 类并覆盖onBackButtonTap 方法。这样您就可以更好地控制整个组件。您还想覆盖其他配置。这是我会使用的 -

Ext.namespace('Ext.ux.so');

Ext.define('Ext.ux.so.CustomNav',
    extend:'Ext.navigation.View',
    xtype:'customnav',
    config:

    ,
    onBackButtonTap:function()
        this.callParent(arguments); 
        alert('back button pressed');
    
);

this.callParent(arguments) 行将允许组件以默认方式运行+希望它运行的方式。如果你想完全覆盖后退按钮的行为，你可以删除这一行。尝试两种方式。

要使用这个自定义组件，可以使用 -

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


        var view = Ext.create('Ext.ux.so.CustomNav', 
            fullscreen: true,

            items: [
                title: 'First',
                items: [
                    xtype: 'button',
                    text: 'Push a new view!',
                    handler: function() 
                        //use the push() method to push another view. It works much like
                        //add() or setActiveItem(). it accepts a view instance, or you can give it
                        //a view config.
                        view.push(
                            title: 'Second',
                            html: 'Second view!'
                        );
                    
                ]
            ]
        );

    

试一试。它会为你工作哟。