switching between views in sencha touch - extjs

Question

I have the following view code in 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);
});
}
}
});
I have defined xtype to my view, so I can reference it in my controller code
this is my controller code
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);
}
});
my main problem is that the get function getCategories() in the controller doesn't work so I can navigate to my view with slide right effect, I think that my problem is in definin the xtype, can you give me a clue on defining the correct xtype, giving that I tried using alias:widget.categories but it didnt work as well.

Answer 1

Your config should look like this:
config: {
refs : {
categories : {
autoCreate: true,
selector: '#categories_itemId',
xtype: 'categories'
},
List : {
// do the same thing for 'List'
}
},
control: {
...
},
...
},
...
Notice that the selector is the itemIdof your view so give your categories view an itemId (you can see I just made one up).