将NavigationView添加到面板sencha touch 2

时间:2013-06-27 18:44:57

标签: image controller sencha-touch-2

我试图在点击图像时获得一个navigationView,但它对我不起作用,事件被触发,但当我尝试切换到about视图时没有发生任何事情,我正在使用导航视图为了有一个后退按钮.. 我的控制器:

   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',

                                },
      ......

1 个答案:

答案 0 :(得分:0)

您必须激活刚刚添加的面板才会将其带到前面。所以,在“点击”事件功能中执行此操作:

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

这应该可以正常工作。