0

私は、ST2 で (少なくとも私が信じている) 非常に単純であるべきことをしようとしていますが、機能していません。メイン ビュー ( xtype: navigationview) とセカンダリ ビュー ( xtype: container) があります。メイン ビューのナビゲーション バーには、セカンダリ ビューに移動するときに非表示にし、メイン ビューに戻るときに表示するボタンがあります。メイン ビューの構成リスナーでマークするコードを追加しましたsetHidden(true)が、どちらのイベントも発生しません。

これを行うためのより良い方法はありますか？

メイン ビュー:

Ext.define('MyApp.view.Main', {
    extend: 'Ext.navigation.View',
    xtype: 'main',

    requires: [
        'Ext.dataview.List'
    ],

    config: {
        navigationBar: {
            items: [
                {
                    xtype: 'button',
                    iconCls: 'refresh',
                    iconMask: true,
                    itemId: 'refreshBtn',
                    align: 'left'
                }
            ]
        },
        items: [
            {
                xtype: 'button',
                itemId: 'next-page-button',
                text: 'Next Page'
            }
        ],

        listeners: {
            activate: function() {
                this.query('[itemId=refrehBtn]')[0].setHidden(false);
            },
            deactivate: function() {
                this.query('[itemId=refrehBtn]')[0].setHidden(true);
            }
        }
    },

    initialize: function() {
        this.callParent();
    }
});

二次ビュー:

Ext.define('MyApp.view.Main2', {
    extend: 'Ext.Container',
    xtype: 'main2',

    config: {
        items: [
            {
                xtype: 'panel',
                items: [
                    {
                        xtype: 'panel',
                        html: 'second view'
                    },
                ]
            }
        ]
    }
});

コントローラ：

Ext.define('MyApp.controller.TestController', {
    extend: 'Ext.app.Controller',

    config: {
        refs: {
            nextPgBtn: '[itemId=next-page-button]'
        },

        control: {
            nextPgBtn: {
                tap: 'showNextPg'
            }
        }
    },

    showNextPg: function(btn, e, opts) {
        btn.up('navigationview').push({
            xtype: 'main2'
        });
    }
});
4

1 に答える 1

0

Firstly, you need to change your query to correctly retrieve your button. Change this:

this.query('[itemId=refrehBtn]')[0].setHidden(false);

to this:

Ext.ComponentQuery.query('#refreshBtn')[0].setHidden(false);

Secondly, instead of using activate and deactivate event, you should make use of back

event which fires when the back button in the navigation view was tapped. and push event which fires when a view is pushed into this navigation view in order to show and hide your button accordingly:

back: function() {
    Ext.ComponentQuery.query('#refreshBtn')[0].setHidden(false);
},

push: function() {
    Ext.ComponentQuery.query('#refreshBtn')[0].setHidden(true);
}

Here is a demo: http://www.senchafiddle.com/#GSt6x

于 2013-02-18T05:04:13.160 に答える