2

ナビゲーションビューの戻るボタンをどのように表示するのか疑問に思いました。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();
                }
                }
            ]
        });
4

1 に答える 1

5

あなたが言及したフィドルは、私のマシンのローカルプロジェクトでうまく機能します。どういうわけか、フィドルサイトでは動作しません。ローカルプロジェクトで実行してみてください。

onBackButtonTapそれでも、configを使用する代わりに、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!'
                        });
                    }
                }]
            }]
        });

    }

これを試してみてください。それはあなたのために働くでしょうよ。

于 2013-02-13T18:54:23.573 に答える