Sencha Touch setActiveItem 显示动画然后需要点击显示答案

【问题标题】：Sencha Touch setActiveItem shows animation then requires click to showSencha Touch setActiveItem 显示动画然后需要点击显示
【发布时间】：2012-02-10 18:56:06
【问题描述】：

当我在 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: '
    }
    ]
});

【问题讨论】：

标签： xcode4 ios5 cordova sencha-touch

【解决方案1】：

这两个部分的代码看起来都很好。当我遇到 phonegap 和 sencha touch 的问题时，我通常发现发生了 javascript 错误，或者 index.html 文件的 body 标记之间存在额外的 html 标记。首先是在 chrome 或 safari 中打开控制台并检查 javascript 控制台以确定它是否是 javascript 错误。如果您无法在其中运行它，我建议您使用 Wienre 应用程序，该应用程序将为您提供一个控制台并编写用于调试 phonegap 应用程序（wienre 还允许您查看 html 标记以确保它是正确的）

【讨论】：

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

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

感谢 Darren 和 Ilija 的帮助！

【讨论】：