【发布时间】：2012-07-26 08:32:09
【问题描述】：
我的 Sencha Touch 2 应用程序非常复杂。所以我无法在这里展示整个代码 sn-ps，我将简要描述我应该做什么。 在我的应用程序中，我有以下全局结构：
- 主容器
- 工具栏顶部
- 卡开关
- 基于链接实例的不同面板
- 工具栏底部
Cardswitch 中的一个链接面板是主面板。该面板具有以下结构：
- 主容器
- 面板左侧（布局 vbox）
- 另外三个面板
- 面板右侧（布局 vbox）
- 带有数据视图的面板
- （* 我的问题面板）带有动态生成的分段按钮的面板
- 面板左侧（布局 vbox）
一切正常。 “问题面板”中的动态按钮将通过基于存储数据的控制器启动功能生成。每个按钮都设计并填充了一些 html 和自定义图像。
现在我的问题： 每个 Button 还提供点击功能。此功能应根据按钮位置弹出叠加层。因此，在生成按钮的控制器功能中，我有一些类似的代码：
...
var panel = this.getContent();
var overlay = Ext.create('MyApp.view.Overlay');
panel.add(overlay);
...
如您所见，我的叠加层是一个单独的类。 var panel 是显示按钮的“问题面板”。按钮项中点击功能的代码（效果很好）如下：
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);
只需调用 tap 函数
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() 的功能，但比我的应用程序要快得多。我能做些什么？我在整个申请过程中是否犯过任何错误？还要别的吗？ 我希望你们能帮助我，因为我处理这个简单的 Overlay 已经超过三天了....
编辑： 为了测试，我使用我的主页面板（包括问题面板）作为初始视图，因此它不包含在 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()？
【问题讨论】：
标签： overlay sencha-touch-2 panel