0

ナビゲーション ビュー内にネストされたカード レイアウトを持つ Ext.Panel があります。これを行ったのは、マップとリストを簡単に切り替えて、ポップしてからまったく別のビューをプッシュする必要がないためです (基本的にはアニメーションを避けるためです)。したがって、コントローラーでアクションを起動するボタンがナビゲーションバーにあります。リストを含むこの初期ビューは問題なくロードされますが、(setActiveItem() を使用して) ビューを切り替えるコントローラー コードは機能しません。エラー メッセージはありません。show() を呼び出さなければならないバグを見つけました。これは機能しますが、navigaionBar の上に新しい activeItem (この場合はマップ) をオーバーレイします! （スクリーンショットを参照）。また、ラッパーの構成でactiveItemを手動で1に変更すると、リストと同じようにマップがうまく表示されます。

私のラッパーパネルは次のようになります。

Ext.define(ViewInfos.VendorWrapper.ViewName,{
    extend: 'Ext.Panel',
    id:     ViewInfos.VendorWrapper.PanelId,
    xtype:  ViewInfos.VendorWrapper.Xtype,

    config:
    {
        layout: 'card',
        title:      Resources.VendorsNearby,
        activeItem: 0,
        items: [
            {
                xtype: ViewInfos.VendorList.Xtype, //Initially shown, a list
            },
            {
                xtype: ViewInfos.VendorMap.Xtype, //What I'm trying to show, a map
            }
        ]
    }
});

ここに私のコントローラーコードがあります：

Ext.define('OrderMapper.controller.VendorWrapper', {
    extend: 'Ext.app.Controller',

    config: {
        refs: {
           vendorMap:           ViewInfos.VendorMap.Xtype,
           vendorList:          ViewInfos.VendorList.Xtype,
           vendorWrapper:       ViewInfos.VendorWrapper.Xtype,
           main:                ViewInfos.Main.Xtype,
           vendorToggleButton: (ViewInfos.Main.Xtype + ' button[action=vendorViewToggle]')
        },
        control: {
            vendorToggleButton:{
                tap: function(){
                    var curView = this.getVendorWrapper().getActiveItem().id;

                    //active view == VendorList
                    if(curView == 'VendorList'){

                        //this shows up in the console
                        console.log('vendorToggleButton tapped, switching to map');

                        this.getVendorWrapper().setActiveItem(1);

                        //without this line, the view doesn't even change
                        this.getVendorWrapper().show();
                        this.getVendorToggleButton().setText('List');
                    }

                    //active view == VendorMap
                    else if (curView == 'VendorMap'){
                        console.log('vendorToggleButton tapped, switching to list');
                        this.getVendorWrapper().setActiveItem(0);
                        this.getVendorToggleButton().setText('Map');

                    }
                }
            }
        }
    }

そして、これが発生する不安定なビューのスクリーンショットですthis.getVendorWrapper().show() スクリーンショット

また、ラッパーを (カード レイアウトの通常のパネルではなく) カルーセルに変更しようとしましたが、カルーセルはスワイプしてリスト/マップを変更しますが、setActiveItem() はまだ機能しません。

4

2 に答える 2

1

私は現在、他のサブビューをプッシュできる場所から基本的に 4 つのメイン ビューがあるナビゲーションビューに取り組んでいます。私はこのようにしました：

Ext.define('App.view.Navigation', {
  requires: [
    ...
  ],

  xtype: 'mainviews',

  extend: 'Ext.navigation.View',

  config: {
    cls: 'content',
    layout:{animation:false}, // or whatever animation you want for push and pop
    navigationBar: {
      ...
    },
    items: [{
      xtype: 'container',
      layout:'card',
      items: [{
        xtype: 'mainview1',
      },{
        xtype: 'mainview2',
      },{
        xtype: 'mainview3',
      },{
        xtype: 'mainview4',
      }]
    }]
  }
});

次に、ナビゲーション ビューのアクティブなアイテムを設定するか、サブビューをプッシュするのは非常に簡単です。

たとえば、コントローラーでは次のようになります

this.getMainviews().setActiveItem(X); // X = 0,1,2 or 3

と

this.getMainviews.push(view); // view = the view your want to push

これらは参考文献です：

refs:{
  mainviews: 'mainviews'
}

お役に立てれば

于 2012-06-22T18:25:14.130 に答える
0

pushまず、 /のアニメーションを避けたい場合は、popこれをナビゲーション ビューに追加configします。

layout: {
    animation: null
}

通常、インスタンス.show()内にあるアイテムを呼び出すべきではありません。Ext.navigation.Viewそれらは直接追加されるExt.Viewportため、ナビゲーション バーの上に表示されます。

この JSFiddleの例を見てください。ヒントが得られるかもしれません。

于 2012-06-22T07:49:17.950 に答える