Sencha触控面板setActiveItem不工作
问题描述:
我正在构建Sencha touch的应用程序。我把我的视口当作旋转木马,在旋转木马的内部有2个面板。Sencha触控面板setActiveItem不工作
该视口中的第二个面板也是2个嵌套面板的容器。
App.views.Viewport = Ext.extend(Ext.Carousel, {
fullscreen: true,
indicator: false,
layout: 'card',
cardSwitchAnimation: 'slide',
initComponent: function() {
Ext.apply(App.views, {
mainWindow: new App.views.MainWindow(),
categories: new App.views.Categories()
});
Ext.apply(this, {
items: [
App.views.mainWindow,
App.views.categories
]
});
App.views.Viewport.superclass.initComponent.apply(this, arguments);
}
});
App.views.Categories = Ext.extend(Ext.Panel, {
fullscreen: true,
layout: 'card',
cardSwitchAnimation: 'slide',
initComponent: function() {
Ext.apply(App.views, {
categoriesList: new App.views.CategoriesList(),
categoryDetail: new App.views.CategoryDetail()
});
Ext.apply(this, {
items: [
App.views.categoryDetail,
App.views.categoriesList
]
});
App.views.Viewport.superclass.initComponent.apply(this, arguments);
}
});
下面是该categoriesList列表中的元素
Ext.regModel('Contact', {
fields: ['firstName', 'lastName']
});
App.ListStore = new Ext.data.Store({
model: 'Contact',
sorters: 'firstName',
getGroupString : function(record) {
return record.get('firstName')[0];
},
data: [
{firstName: 'Julio', lastName: 'Benesh'},
]
});
App.views.catsList = new Ext.List({
store: App.ListStore,
itemTpl: '<div class="contact"><div class="app_icon"><img src="images/angry-birds.png" width="50" height="50" /></div><div class="app_name"><strong>{firstName}</strong> {lastName}<br /><img src="images/rating-icon.gif" /></div></div>',
onItemDisclosure: function(record, btn, index) {
App.views.categories.setActiveItem(
App.views.categoryDetail, options.animation
);
}
});
App.views.CategoriesList = Ext.extend(Ext.Panel, {
layout: 'fit',
items: [App.views.catsList],
initComponent: function() {
App.views.Categories.superclass.initComponent.apply(this, arguments);
}
});
onItemDisclosure被触发的代码。但是,App.views.categories的setActiveItem不会切换到categoryDetail。我一直在努力做到这一点。任何想法我做错了什么?
答
问题就出在这行:
App.views.categories.setActiveItem(
App.views.categoryDetail, options.animation
);
你看你有一个options
对象,它是不确定的。您应该使用此代替:
App.views.categories.setActiveItem(
App.views.categoryDetail, {type:'slide', direction:'left'}
);
或其他类型的动画。
你有错误日志吗?也许还有一些其他问题,为什么它不工作。
更新
控制器然后添加这个
onItemDisclosure: function(record, btn, index) {
console.log('onItemDis fired');
try{
Ext.dispatch({ controller: App.controllers.AppsList, action: 'show', id: record.getId(), animation: { type:'slide', direction:'left' } });
}catch(e){
console.log(e);
}
}
:
App.controllers.MyController = new Ext.Controller({ show: function(options) {
console.log('controller called');
try{
App.views.categories.setActiveItem(App.views.categoryDetail, options.animation);
}catch(e){console.log(e);} } });
然后粘贴你在这里的控制台日志。
实际上,这段代码在我的控制器中,它传递了对象选项。问题是,我没有在我的控制台中得到任何错误:S ' App.controllers.MyController = new Ext.Controller({display:function(options){ \t App.views.categories.setActiveItem \t \t \t App.views.categoryDetail,options.animation ); } }); – Maverick
你怎么称呼它?那个错误日志呢?这真的很难像这样猜测... – ilija139
on the catsList对象我正在处理onItemDisclosure事件: onItemDisclosure:function(record,btn,index){ \t Ext.dispatch({controller:App.controllers.MyController, action:'show', id:record.getId() }); } – Maverick