我的Sencha Touch 2应用程序非常复杂。因此，我无法在这里显示整个代码片段，我将简要描述我应该做什么。在我的应用程序中，我有以下全局结构：
- 主容器
- 工具栏顶部
- Cardswitch
- 基于链接实例的不同面板
- 工具栏底部
Cardswitch中的一个链接面板是主面板。该面板具有以下结构：
- 主容器
- 面板左侧（布局vbox）
- 另外三块面板
- 面板右侧（布局vbox）
- 带数据视图的面板
- （*我的问题面板）具有动态生成的分段按钮的面板
- 面板左侧（布局vbox）
一切都很好。"问题面板"中的动态按钮将通过基于存储数据的控制器启动功能生成。每个按钮都经过设计并填充了一些html自定义图像。
现在我的问题是：每个按钮还提供一个点击功能。此功能应根据按钮位置弹出一个覆盖。因此，在我的控制器功能中，在生成按钮的地方，我有一些类似的代码：
...
var panel = this.getContent();
var overlay = Ext.create('MyApp.view.Overlay');
panel.add(overlay);
...
正如你所看到的，我的覆盖是一个单独的类。var面板是显示按钮的"问题面板"。按钮项中的点击功能的代码（运行良好）如下：
listeners: {
tap: function() {
//overlay.showBy(this);
overlay.show();
}
}
覆盖层的代码：
Ext.define('MyApp.view.Overlay', {
extend: 'Ext.Panel',
alias: 'widget.Overlay',
config: {
centered: true,
height: 200,
hidden: true,
html: 'This is just a overlay',
id: 'pOverlay',
ui: 'light',
width: 200,
hideOnMaskTap: true,
modal: true
}
});
如果我做
panel.add(overlay);
只调用的抽头函数
overlay.show();
一切都很好，速度很快，但相对于按下的按钮，覆盖不会弹出。所以我想使用
overlay.showBy(button);
但如果我这样做，覆盖需要大约两秒钟以上才能弹出，而且速度非常慢（在Windows 7@quadcore上使用chrome）。我使用的是sencha touch 2.0.1.1当我将覆盖添加到视口，而不是添加到面板，然后调用show:时
//panel.add(overlay);
Ext.Viewport.add(overlay);
...
overlay.show();
它不会像我把它添加到面板上那样快。我需要showBy（）的功能，但速度比我的应用程序快得多。我能做什么？我在整个申请过程中有没有犯过错误？还有别的吗？我希望你们能帮助我，因为我已经处理了三天多的这个简单的叠加。。。。
编辑：为了进行测试，我使用了我的主面板（包括问题面板）作为初始视图，这样它就不会包含在Cardswitch容器中。在那之后，我做了一个showBy（），当整个面板都包含在cardswitch中时，它比以前快得多。它不会爆裂就像只使用show（）函数一样快，但它还可以。但这对我来说仍然不是一个解决方案，因为我需要嵌入面板。
我还尝试使用一个带有两个选项的简单选择字段。选择字段还使用覆盖显示选项，选择字段的速度与问题面板中我自己的覆盖一样慢。：（
编辑2：我在这里找到了类似的问题描述：http://www.sencha.com/forum/showthread.php?203501-ShowBy-with-Flexed panels-and-a-box-layout-popup-is slow但是该线程中的解决方法对我不起作用。我如何使选择字段的项目列表覆盖在屏幕中间，而不是使用showBy（）？
好吧，在与sencha touch中的性能问题进行了几周的斗争之后（我在这里描述了这个问题也是由wich引起的），我在这里找到了自己的解决方案。
我的大多数面板都应用了布局"hbox"，子面板可以选择使用hbox布局的新面板进行弯曲。当我显示（）或隐藏（）主面板时，这会导致加载时间非常长。这种布局也造成了这个问题。
因此，我的解决方案是将布局设置为默认，手动浮动容器和元素，并在应用程序启动时使用window.innerHeight/width为这些元素设置初始宽度/高度。
之后，showBy[（）]函数会尽可能快。