image - 将 NavigationView 添加到面板 sencha touch 2

Question

我试图在单击图像时获得一个导航视图，但它对我不起作用，该事件被触发，但是当我尝试切换到关于视图时没有发生任何事情，我正在使用导航视图以有一个后退按钮.. 我的控制器：

   Ext.define('app.controller.MainController', {
extend: 'Ext.app.Controller',
config: {
    refs: {
        main: 'Main',
        about: 'About',
        aboutimg: '#aboutimg'
    },
    control: {
        aboutimg: {
            tap: function(img, evt) {
                Ext.Viewport.add(Ext.create('app.view.About'));
            }
        }
    }
}

 });

我的看法：

  Ext.define('app.view.About', {
extend: 'Ext.NavigationView',
xtype: 'About',
 ....

主视图：

 Ext.define('app.view.Main', {
extend: 'Ext.Panel',
xtype: 'main',
requires: [
    'Ext.Img'
],
config: {
    layout: 'vbox',
    fullscreen: true,
    defaults: {
        flex: 1
    },
    items: [
        {
            xtype: 'panel'

        },
        {
            xtype: 'carousel',
            flex: 3,
            items: [
                {
                    xtype: 'panel',
                    layout: 'vbox',
                    items: [],
                    dockedItems: [{
                            xtype: 'panel',
                            style: 'background-color: #fff;',
                            layout: {
                                type: 'hbox',
                                pack: 'center'
                            },
                            flex: 1,
                            items: [
                                {
                                    xtype: 'image',
                                    id:'aboutimg',
                                    mode: 'element',
                                    src: "resources/images/about.jpg",
                                    cls: 'component',

                                },
      ......

Answer 1

您必须激活刚刚添加的面板，这会将其置于前面。因此，在“点击”事件函数中执行此操作：

var aboutPanel = Ext.Viewport.add(Ext.create('app.view.About'));
Ext.Viewport.animateActivateItem(aboutPanel, {
  type : 'slide',
  direction : 'left'
});

这应该可以正常工作。