Question

我有一个Ext.Panel，其卡片布局嵌套在导航视图中。我这样做是为了在地图和列表之间轻松切换，而不必弹出，然后推送一个完整的不同视图（基本上是为了避免动画）。所以，我在navigationBar中有一个按钮，用于触发控制器中的动作。这个带有列表的初始视图加载正常，但是在视图之间切换的控制器代码（使用setActiveItem（））不起作用。没有错误消息。我发现了一些你必须调用show（）的bug。虽然这有效，但它会将新的activeItem（在本例中为Map）覆盖在navigaionBar之上！（见截图）。另外，如果我只是手动将包装器的配置中的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()上发生的不稳定视图的屏幕截图 Screenshot

此外，我尝试将包装器更改为Carousel（而不是带有卡片布局的常规面板），并且轮播将滑动以更改列表/地图，但setActiveItem（）仍然无效。

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 ，可能会给您一些提示。

Sencha Touch 2 - 在导航视图问题中的卡布局的setActiveItem

2 个答案: