1

我的 Sencha Touch 2 应用程序非常复杂。所以我无法在这里展示整个代码片段，我将简要描述我应该做什么。在我的应用程序中，我具有以下全局结构：

  • 主容器
    • 工具栏顶部
    • 卡开关
      • 基于链接实例的不同面板
  • 工具栏底部

Cardswitch 中的链接面板之一是主面板。该面板具有以下结构：

  • 主容器
    • 面板左侧（布局 vbox）
      • 另外三个面板
    • 面板右侧（布局 vbox）
      • 带数据视图的面板
      • (* 我的问题面板) 带有动态生成的分段按钮的面板

一切正常。“问题面板”中的动态按钮将通过基于存储数据的控制器启动功能生成。每个按钮都设计并填充了一些 html 和自定义图像。

现在我的问题：每个按钮还提供了一个点击功能。此功能应根据按钮位置弹出叠加层。因此，在生成按钮的控制器功能中，我有一些类似的代码：

...
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() 的功能，但比我的应用程序要快得多。我能做些什么？我在整个申请过程中是否犯过任何错误？还要别的吗？我希望你们能帮助我，因为我正在处理这个简单的叠加层超过三天......

编辑：为了测试，我使用我的主页面板（包括问题面板）作为初始视图，因此它不包含在 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()？

4

1 回答 1

2

好的，在与 sencha touch 中的性能问题进行了几周的斗争（这也导致了我在这里描述的问题）之后，我在这里找到了我自己的解决方案。

我的大多数面板都应用了布局“hbox”，子面板具有选项 flex，带有带有 hbox 布局的新面板。当我显示（）或隐藏（）主面板时，这会导致很长的加载时间。这种布局也导致了这个问题。

所以我的解决方法是将布局设置为默认值，手动浮动容器和元素，并在启动应用程序时使用 window.innerHeight / width 为这些元素设置初始宽度/高度。

之后，showBy() 函数的速度达到了应有的速度。

于 2012-09-03T09:08:41.327 回答