Question

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

mainContainer上
- 工具栏顶部
- Cardswitch
  - 基于关联实例的不同面板
工具栏底部

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

mainContainer上
- 面板左侧（布局vbox）
  - 另外三个小组
- 面板右侧（布局vbox）
  - 带数据视图的面板
  - （*我的问题面板）具有动态生成的分段按钮的面板

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

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

...
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（）的功能，但比我的应用程序快得多。我能做什么？我在整个申请过程中是否有任何错误？还要别的吗？我希望你的家伙可以帮助我，因为我正在处理这个简单的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（）？

Answer 1

好的，经过几周的针对触摸性能问题的斗争（这也导致我在这里描述的问题），我在这里找到了我自己的解决方案。

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

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

之后showBy（）函数应该尽可能快。

Sencha Touch 2 Overlay的showBy（）函数非常慢

1 个答案: