Xcode4 Sencha Touch setActiveItem显示动画，然后需要单击以显示

当我在Sencha Touch应用程序中的视图之间移动时，我会看到动画（幻灯片），然后再次显示原始视图（我开始时的视图）。此时，如果我单击应用程序中的任意位置，视图将更改为正确的新活动项

我正在使用Sencha Touch、XCode 4、iOS 5 SDK和PhoneGap 1.3.0

提前谢谢

以下是主视口的代码：

plantanalyzer.views.Viewport = Ext.extend(Ext.Panel, {
fullscreen: true,
layout: 'card',
cardSwitchAnimation: 'slide',
initComponent: function() {
Ext.apply(plantanalyzer.views, {
          login: new plantanalyzer.views.Login(),
          plantDetail: new plantanalyzer.views.PlantDetail(),
          buildingList: new plantanalyzer.views.BuildingList()
          });
Ext.apply(this, {
          items: [
                  plantanalyzer.views.login,
                  plantanalyzer.views.plantDetail,
                  plantanalyzer.views.buildingList
                  ]
          });


   plantanalyzer.views.Viewport.superclass.initComponent.apply(this, arguments);
    }
});

对于viewController：

plantanalyzer.controllers.viewController = new Ext.Controller({
index: function(options) {
    plantanalyzer.views.viewport.setActiveItem(plantanalyzer.views.plantDetail, options.animation);
},
show: function(options) {
    plantanalyzer.views.viewport.setActiveItem(plantanalyzer.views.buildingList, 

options.animation);
    }
});

这是其中一个视图的代码：

plantanalyzer.views.PlantDetail = Ext.extend(Ext.Panel, {
width: 320,
height: 480,
items: [
    {
        xtype: 'panel',
        html: '<img src="images/logo.jpg"/>',
        tpl: '{name}',
        cls: 'plantToolbar'
    },
    {
        xtype: 'button',
        name : 'buildingSelect',
        text: 'Select Building',
        cls: 'standardButton',
        listeners: {
            'tap': function () {
                'use strict';
                Ext.dispatch({
                    controller: plantanalyzer.controllers.viewController,
                    action: 'show'
                });
            }
        }
    },
    {
        xType: 'panel',
        cls: 'infoBoxes',
        html: 'Efficiency (kw/ton)<br><canvas id="eff"></canvas>'
    },
    {
        xType: 'panel',
        cls: 'infoBoxes',
        name: 'totalTons',
        html: 'Total Plant Tons: '
    },
    {
        xType: 'panel',
        cls: 'infoBoxes',
        name: 'totalCost',
        html: 'Real-time Plant Cost: '
    },
    {
        xType: 'panel',
        name: 'uodateTime',
        cls: 'lastUpdate',
        html: 'Last Update: '
    }
    ]
});

plantanalyzer.views.PlantDetail=Ext.extend（Ext.Panel{
宽度：320，
身高：480，
项目：[
{
xtype:'面板'，
html:“”，
tpl:“{name}”，
cls:“plantToolbar”
},
{
xtype:'按钮'，
名称：“buildingSelect”，
文本：“选择建筑”，
cls:“标准按钮”，
听众：{
“tap”：函数（）{
"严格使用",；
分机调度({
控制器：plantanalyzer.controllers.viewController，
动作：《秀》
});
}
}
},
{
xType:'面板'，
cls:“信息框”，
html:“效率（千瓦/吨）
”
},
{
xType:'面板'，
cls:“信息框”，
名称：'totalTons'，
html:'工厂总吨数：'
},
{
xType:'面板'，
cls:“信息框”，
名称：“总成本”，
html:“实时工厂成本：”
},
{
xType:'面板'，
名称：“uodateTime”，
cls:“上次更新”，
html:“上次更新：”
}
]
});

这两个部分的代码看起来都不错。当我遇到phonegap和sencha touch这样做的问题时，我通常会发现出现javascript错误，或者index.html文件的body标记之间有额外的html标记。第一件事是在chrome或safari中打开控制台并检查javascript控制台以确定它是否是javascript错误。如果您不能在它们中运行它，我建议使用Wienre应用程序，它将为您提供一个控制台，并用于调试phonegap应用程序（Wienre还允许您查看html标记以确保其正确性）

问题一定出在视图文件中的某个地方。您显示的代码是正确的。

好吧，无论如何，在重新构建应用程序后，我发现了问题。是一些自定义css把应用程序搞砸了。特别是在某些组件上设置的宽度。 希望这能为其他人节省一些时间和心痛

---

谢谢Darren和Ilija的帮助

谢谢！我现在正在查。我会告诉你我发现了什么。运气不好，用Weinre检查了错误，通过JSLint运行了我所有的JS文件，通过HtmlInt运行了我的index.html。没有线索。。。还有其他想法吗？