2

ナビゲーション ビュー内の最初のアイテムとしてタブ パネルがあります。タブを変更すると、次の方法でナビゲーション バーのタイトルが更新されます。

activeitemchange: function(container){
    var navigationView = container.up('navigationview'),
        navigationBar = navigationView.getNavigationBar(),
        newTabTitle = value.tab._title;


    navigationBar.setTitle(newTabTitle);
}

問題は、新しいビューをナビゲーション ビューにプッシュすると、[戻る] ボタンのテキストが更新されたタイトルではなく、古い/元のタイトルを使用することです。[戻る] ボタンをクリックすると、ナビゲーション ビューのタイトルも古い/元のタイトルに設定されます。

私が解決策を見つけるのに最も近かったのはこれでした: http://www.sencha.com/forum/showthread.php?189284-Navigation-View-Title-(IPad-App)

しかし、navigationBar.refreshProxy() 呼び出しで「未定義」エラーが発生するため、古いバージョンの ST でのみ機能すると想定しています。

どんな助けでも素晴らしいでしょう、ありがとう。

4

3 に答える 3

3

質問はかなり古いので、この質問に対する答えを見つけたのか、自分で解決したのかはわかりません。しかし、私はあなたがやりたいことを試し、結果を得ることができました。これがコードです。私はMVCを厳密にフォローしているので、これが機能するために必要なファイルを投稿します。基本的に、ビューとコントローラー。

TabPanelを含むMain.js

Ext.define('SO.view.Main', {
extend: 'Ext.tab.Panel',
xtype: 'main',
requires: [
    'Ext.TitleBar',
    'Ext.Video'
],
config: {
    tabBarPosition: 'bottom',

    items: [
        {
            title: 'Welcome',
            iconCls: 'home',

            styleHtmlContent: true,
            scrollable: true,

            html: [
                "You've just generated a new Sencha Touch 2 project. What you're looking at right now is the ",
            ].join("")
        },
        {
            title: 'Get Started',
            iconCls: 'action',

            items: [
                {
                    xtype: 'button',
                    text: 'Push a new view!',
                    action:'push_new_view'
                }
            ]
        }
    ]
}

}）;

上記のタブパネルのようなナビゲーションビューとデフォルトアイテムを持つNav.js

Ext.define('SO.view.Nav', {
extend: 'Ext.NavigationView',
xtype: 'nav',
config:{
    fullscreen: true,

    items: [
        {
            title: 'Default View',
            xtype:'main'
        }
    ]
}

}）;

そして最後に、コントローラー。私はすべてのユーザーインタラクション処理をコントローラー自体で行いました。

Ext.define('SO.controller.Nav',{
    extend:'Ext.app.Controller',
    config:{
        refs:{
            views:['SO.view.Main','SO.view.Nav'],
            navView:'nav',
            tabView:'main'
        },
        control:{
            tabView:{
                activeitemchange:'changeTitle'
            },
            'button[action=push_new_view]':{
                tap:'pushNewView'
            }
        }
    },
    changeTitle:function(container,value,oldValue,eOpts ){
        console.log(value.title);
        this.getNavView().getNavigationBar().setTitle(value.title);
    },
    pushNewView:function(){
        var activeTabTitle = this.getTabView().getActiveItem().title;
        var controller = this;
        controller.getNavView().push({
            title: 'Second',
            html: 'Second view!'
        });
        controller.getNavView().getNavigationBar().getBackButton().setText(activeTabTitle);
        controller.getNavView().getNavigationBar().getBackButton().on('tap',function(self){             
            controller.getNavView().getNavigationBar().setTitle(activeTabTitle);
        });
    }
}

）;

ご覧のとおり、関数内で選択したタブに応じてタイトルを変更する関数を添付しましたchangeTitle。

この関数はpushNewView新しいビューをプッシュし、タップ時に戻るボタンの動作を確認します。私がやったことは、単純に、activeItem()新しいビューを押すボタンを保持しているタブパネルから取得することです。activeItemを取得したら、そのタイトルを取得できます。そのタイトルをに設定する必要がありますbackButtnoText。したがって、ナビゲーションビューとgetBackButtonインスタンスをトラバースし、setText()メソッドを呼び出すだけで、変更された戻るボタンのテキストを変更します。

同時に、ナビゲーションバーのタイトルを前のタイトルに変更したいので、戻るボタンにイベントハンドラーをアタッチしました。したがって、一度、タップする戻るボタンを使用して、上記の手順で取得したタイトルにタイトルを戻します。問題が発生する可能性があるため、すべての作業が終了したら、イベントハンドラーをデタッチすることをお勧めします。

これを試してみてください、それはうまくいきます。

于 2013-03-12T17:09:39.373 に答える
0

ナビゲーション ビュー タイルだけでなく、親ビューポートのタイトルを変更する必要があります。基本的に、ナビゲーションのタイトルは、親のビューのタイトルと、プッシュされたすべてのコンポーネントのタイトルに基づいて、すでに変更されています。

var view = Ext.create('Ext.NavigationView', {
    fullscreen: true,

    items: [{
        title: 'Change this title ',
        items: [{
            xtype: 'button',
            text: 'Push a new view!',
            handler: function() {
                view.push({
                    title: 'Second Title',
                    html: 'Second view!'
                });
            }
        }]
    }]
});

次のようになります。

activeitemchange: function(container){
    var newTabTitle = value.tab._title;
    container.setTitle(newTabTitle);
}
于 2013-02-14T02:14:47.157 に答える