Sencha Touch 2 - 導航視圖內部卡片佈局的setActiveItem問題

我有一個Ext.Panel卡片佈局嵌套在導航視圖中。我這樣做是爲了在地圖和列表之間輕鬆切換，而無需彈出，然後推入一個完全不同的視圖（基本上避免了動畫）。所以，我在navigationBar中有一個按鈕，在控制器中觸發一個動作。此初始視圖帶有一個列表，加載正常，但在視圖之間切換的控制器代碼（使用setActiveItem（））不起作用。沒有錯誤信息。我發現了一些有關你需要調用show（）的錯誤。雖然這有效，但它將在navigaionBar上覆蓋新的activeItem（本例中爲Map）！（見屏幕截圖）。另外，如果我只是在包裝器的配置中手動將activeItem更改爲1，則它將顯示地圖，與列表相同。Sencha Touch 2 - 導航視圖內部卡片佈局的setActiveItem問題

我包裝紙板看起來是這樣的：

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() Screenshot

發生在靠不住的視圖的屏幕截圖

另外，我嘗試將包裝器更改爲Carousel（而不是使用卡片佈局的普通面板），並將卡魯sel將滑動以更改列表/地圖，但setActiveItem（）STILL不起作用。

來源

2012-06-22 charltoons

順便說一句，你的問題得到解答，你需要接受點擊檢查符號正確答案的答案旁邊。這是感謝找到答案的人的一種方式。 –

我目前正在致力於navigation.View其中基本上有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-22 18:25:14

首先，如果你只是想避免push/pop動畫，這config添加到您的導航視圖：

layout: { 
    animation: null 
}

一般來說，你不應該說是裏面你Ext.navigation.View項目叫.show()實例。它們將被直接添加到Ext.Viewport，因此顯示在導航欄的頂部。

看看this JSFiddle example，可能會給你一個提示。

來源

2012-06-22 07:49:17

謝謝你的回答。現在我明白了'show（）'，但是，我確實需要每隔一次'push'時動畫。我希望地圖和列表能夠彈出到相同的前一個視圖。我應該只關閉動畫，「彈出」列表，「推」地圖，用'setLayout（{...}）'重新打開動畫？這似乎是矯枉過正。 – charltoons

Sencha Touch 2 - 導航視圖內部卡片佈局的setActiveItem問題

回答

相關問題