Question

我正在使用Sencha touch构建应用程序。我把我的视口作为旋转木马，在旋转木马里面有2个面板。

该视口中的第二个面板也是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。我一直在努力让这个工作。知道我做错了什么吗？

Answer 1

问题出在这一行：

 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);} } });

然后粘贴你到这里的控制台日志。

Sencha触摸屏setActiveItem无法正常工作

1 个答案: