Sencha Touch 2 - setActiveItem макета карты внутри проблемы с навигационным обзором

Question

У меня есть Ext.Panel с макетом карты, вложенным в навигационное представление. Я сделал это, чтобы легко переключаться между картой и списком, не делая поп, а затем нажимаю совершенно другое представление (в основном, чтобы избежать анимации). Итак, у меня есть кнопка в навигационной панели, которая запускает действие в контроллере. Это начальное представление со списком, нагрузка прекрасная, но код контроллера для переключения между представлениями (с помощью setActiveItem()) не работает. Нет сообщения об ошибке. Я нашел кое-что о ошибке, где вам нужно вызвать show(). Хотя это и работает, оно накладывает новый 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()

Кроме того, я попробовал сменить обертку на карусель (вместо обычной панели с макетом карты) и на carou sel будет прокручивать, чтобы изменить список/карту, но setActiveItem() STILL не работает.

Answer 1

Я в настоящее время работает над 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' 
} 

Надеется, что это помогает

Answer 2

Прежде всего, если вы просто хотите, чтобы избежать анимации на push/pop, добавьте этот config к вашему мнению навигации:

layout: { 
    animation: null 
} 

Как правило, вы не должны вызывать .show() на предметы, которые находятся внутри вашей Ext.navigation.View пример. Они будут добавлены непосредственно к Ext.Viewport, таким образом появляясь в верхней части панели навигации.

Посмотрите на this JSFiddle example, может дать вам подсказку.