1

我被要求开发一个包含 6 个选项卡的选项卡面板，每个选项卡有 30 到 40 个元素。每个选项卡都充当累积个人详细信息的表格，最后一个选项卡是摘要页面，显示在前五个选项卡中输入的所有值。我被要求提供摘要作为选项卡，因为用户可以在任何情况下导航到摘要选项卡并查看他/或查看摘要输入的详细信息。我正在关注 ExtJs MVC 模式。有效负载来自/去往 Spring MVC 应用程序。(JSON)

在控制器中使用选项卡更改事件，如果新选项卡是摘要，我将使用显示隐藏功能呈现页面。

方法 1：在控制器中，我使用了 Ext.getCmp('选项卡内每个元素的 ID') 并根据用户输入的值显示隐藏摘要选项卡中的组件。这杀死了我在 IE8 中的应用程序，弹出一条消息说“脚本很慢，等等等等……”我必须点击 NO 5 到 6 次才能让摘要选项卡呈现和显示页面。

方法 2：在控制器中，我使用 ref 和 selectos 来访问选项卡中的所有项目。我已经为摘要选项卡中的每个字段使用了 itemId。喜欢this.getXyz().show()。我以为会很快。是的，它在谷歌浏览器中。但与 goolge chrome/firefox 相比，我在 IE8 中的应用程序很慢

有关此的任何建议并计划减少页面呈现时间。摘要页面有1000多个字段。请随时发表您的想法或对此提出一些想法。

谢谢你！！

4

3 回答 3

1

我有几个建议你可以试试。首先，回答你的标题，我认为在 javascript 中查找组件的最快简单方法是构建哈希映射。像这样的东西：

var map = {};
Ext.each(targetComponents, function(item) {
    map[item.itemId] = item;
});

// Fastest way to retrieve a component
var myField = map[componentId];

对于渲染时间，请确保每次调用hide或show在子组件上都不会更新布局/DOM。用来suspendLayouts做到这一点：

summaryTabCt.suspendLayouts();

// intensive hide-and-seek business

// just one layout calculation and subsequent DOM manipulation    
summaryTabCt.resumeLayouts(true);

最后，如果尽管您尽了最大努力仍无法缩短处理时间，请进行损坏控制。也就是说，避免一直冻结 UI，让浏览器告诉用户你的应用程序已经死了。

您可以使用setTimeout来限制脚本一次保持执行线程的时间。该间隔将让浏览器有一些时间来处理 UI 事件，并防止它认为您的脚本已陷入无限循环。

这是一个例子：

var itemsToProcess = [...],
    // The smaller the chunks, the more the UI will be responsive,
    // but the whole processing will take longer...
    chunkSize = 50,
    i = 0,
    slice;

function next() {
    slice = itemsToProcess.slice(i, i+chunkSize);
    i += chunkSize;
    if (slice.length) {

        Ext.each(slice, function(item) {
            // costly business with item
        });

        // defer processing to give time
        setTimeout(next, 50);
    } else {
        // post-processing
    }
}

// pre-processing (eg. disabling the form submit button)

next(); // start the loop
于 2013-12-05T22:42:57.940 回答
1

up().down().action....did the magic. I have replaced each and every usage of Ext.getCmp('id'). Booooha... it's fast and NO issues.

this.up('tabpanel').down('tabName #itemIdOfField').actions.

actions= hide(), show(), setValues().

于 2013-12-12T23:24:44.250 回答
0
  • 尝试检查deferredRender是否为真。这应该只呈现活动选项卡。
  • 您也可以尝试不同的hideMode。特别是hideMode:'offsets'听起来很有希望

来自 sencha API 的引用：

hideMode: 'offsets' 通常是 IE 中布局问题的解决方案，特别是在隐藏/显示内容时

正如我在评论中所写，请阅读此性能指南： http ://docs.sencha.com/extjs/4.2.2/#!/guide/performance

就您而言，这对您来说将非常有趣：

{
    Ext.suspendLayouts();
    // batch of updates
    // show() / hide() elements
    Ext.resumeLayouts(true);
}
于 2013-12-06T07:16:45.787 回答