在 sencha touch 中切换视图

Question

我在sencha touch 2中有如下视图代码

  Ext.define('WL.view.Categories', {

extend: 'Ext.Container',

requires: [
    'Ext.SegmentedButton',
    'WL.view.movie.List',
    'Ext.form.Panel',
    'Ext.plugin.ListPaging',
    'Ext.TitleBar',
    'WL.view.movie.SortBar',
    'WL.view.movie.SearchBar'
],
    xtype: 'categories',

config: {

    layout: {
        type: 'card',
        animation: {
            type: 'fade'
        }
    },

    items: [
        {
            docked: 'top',
            xtype: 'toolbar',
            cls: 'small withBg',
            title: 'Merchants',
            items: [
               /* {
                    xtype: 'segmentedbutton',
                    allowDepress: false,
                    items: [
                    /*
                        {
                            cls: 'movies',
                            iconCls: 'movies',
                            pressed: true
                        },
                        {
                            xtype: 'button',
                            cls: 'friends',
                            iconCls: 'friends'
                        }
                    ]
                },
                */
                {    xtype: 'spacer'    },
                {
                    xtype: 'button',
                    cls: 'searchBtn',
                    iconCls: 'search',
                    align: 'right'
                },
                {
                    xtype: 'button',
                    cls: 'backBtn',
                    id: 'movieBackButton',
                    align: 'left'
                }
                /*
                {
                    xtype: 'component',
                    cls: 'fbProfilePic',
                    id: 'fbProfilePic',
                    tpl: '<img src="https://graph.facebook.com/{profileId}/picture?type=square" />'   // the img source can be later changed 
                }
                */
            ]
        },
        {
        xtype:'list',
        store: 'Merchants',       
        plugins: [
        { xclass: 'Ext.plugin.ListPaging' } 
        ],

        itemCls: 'expandedMovie',
        itemHeight:114,

        items: [
        { xtype: 'movieSortBar' , docked:'top'},   
        { xtype: 'movieSearchBar' , docked:'top' , hidden:true},    
        {
            xtype: 'container',
            cls: 'promo',
            itemId:'promo-container',
            docked:'bottom',
            html: '<span class="logo"></span>Brought to you by Sencha Touch 2.1 <button>Learn More</button>'
        }
    ],

    loadingText: null,  

    listeners: {
        order: 'before',
        select: function() {
            return false;
        },
        itemtap: function(dataview, index, target, record, evt) {

            var el = Ext.get(evt.target),
                fireEvent;

            if (el.dom.nodeName == 'B') el = el.parent();

            WL.currentMovie = record;

            if (el.hasCls('seen')) {
                fireEvent = el.hasCls('selected') ? 'unSeen' : 'seen';
                el.toggleCls('selected');
            } else if (el.hasCls('want')) {
                fireEvent = el.hasCls('selected') ? 'unWantToSee' : 'wantToSee';
                el.toggleCls('selected');
            } else if (el.hasCls('thumb') && el.hasCls('up')) {
                fireEvent = el.hasCls('selected') ? 'unLike' : 'like';
                el.toggleCls('selected');
            } else if (el.hasCls('thumb') && el.hasCls('down')) {
                fireEvent = el.hasCls('selected') ? 'unDislike' : 'dislike';
                el.toggleCls('selected');
            } else {
                fireEvent = 'tapMovie';
            }

            if (fireEvent) {
                this.fireEvent(fireEvent, record, el);
            }
        }
    },
    itemTpl: Ext.create('Ext.XTemplate',
        '<div class="moreArrow"></div>',
        '<div class="img"><img src="http://localhost/WL2/assets/rest/{image}" /></div>',
        '<div class="meta">',
            '<h3>{merchName}</h3>',
            '<div class="actions">',
                //'<div class="rating"><span>{% if (values.criticRating >= 0) { %}{criticRating}%{% } else { %}?{% } %}</span></div>',
                '<button class="seen{[values.seen ? " selected" : ""]}">{action}</button>',
                '{% if (values.seen) { %}',
                    '<button class="thumb up{[values.like ? " selected" : ""]}"><b></b></button>',
                    '<button class="thumb down{[values.dislike ? " selected" : ""]}"><b></b></button>',
                '{% } else { %}',
                    '<button class="want{[values.wantToSee ? " selected" : ""]}">Want to Go There</button>',
                '{% } %}',
            '</div>',

        '</div>'
    )

    }      // end of the categories list 
    ]
},

initialize: function() {
    this.callParent();

    // Enable the Tap event on the profile picture in the toolbar, so we can show a logout button
    var profilePic = Ext.getCmp('fbProfilePic');
    if (profilePic) {
        profilePic.element.on('tap', function(e) {
            profilePic.fireEvent('tap', profilePic, e);
        });
    }
}
});

我已经为我的视图定义了 xtype，所以我可以在我的控制器代码中引用它

这是我的控制器代码

Ext.define('WL.controller.Categories', {
extend: 'Ext.app.Controller',

config: {
    refs: {     
        categories: 'categories', 
        List:   'list'
    },

    control: {
        list: {
            tapMovie:  'onMovieTap'      // the function that will be created when a movie is tapped
        }

        }

},
slideLeftTransition: { type: 'slide', direction: 'left' },
    slideRightTransition: { type: 'slide', direction: 'right' },

onMovieTap: function () {
   Ext.Viewport.animateActiveItem(this.getCategories(),this.slideRightTransition);                  
}
});

我的主要问题是控制器中的 get 函数getCategories() 不起作用，所以我可以通过向右滑动效果导航到我的视图，我认为我的问题在于定义 xtype，你能给我一个线索在定义正确的 xtype 时，我尝试使用 alias:widget.categories，但效果不佳。

Answer 1

您的配置应如下所示：

config: {
    refs : {
        categories : {
            autoCreate: true,
            selector: '#categories_itemId',
            xtype: 'categories'
        },
        List : {
            // do the same thing for 'List'
        }
    },
    control: {
        ...
    },
    ...
},
...

请注意，选择器是您的view 的itemId，所以给您的categories view 一个itemId（您可以看到我刚刚编了一个）。