ExtJs 4.2 ref-selector vs Ext.getcmp() vs Ext.ComponentQuery.query()答案

【问题标题】：ExtJs 4.2 ref-selector vs Ext.getcmp() vs Ext.ComponentQuery.query()ExtJs 4.2 ref-selector vs Ext.getcmp() vs Ext.ComponentQuery.query()
【发布时间】：2013-12-05 19:09:35
【问题描述】：

我被要求开发一个包含 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多个字段。请随时发表您的想法或对此提出一些想法。

谢谢！！

【问题讨论】：

您阅读过本指南吗？ docs.sencha.com/extjs/4.2.2/#!/guide/performance
没有。我正在经历它，你对上述问题有什么看法？..谢谢你的链接。
不要指望一个包含数千个字段的页面在 IE8 中会很快。真的就这么简单。

标签： javascript performance extjs extjs4.2 page-load-time

【解决方案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

【讨论】：

Rixo，我想在这里检查我的逻辑。为什么选项卡（每个选项卡都是 xtype ：'form'）标志 isDirty() = true ..... 即使没有输入数据？是因为它被渲染了吗？我已经检查了特定选项卡的所有表单属性。 wasDirty : true 并且 isDirty() 设置为 true。此外，suspendLayouts 是我研究过的东西。这对我来说是全新的。是因为，我在表单中有一些默认值......所以表单标志设置为脏为真？请问有这方面的资料吗？

【解决方案2】：

up().down().action....做了魔法。我已经替换了 Ext.getCmp('id') 的每一个用法。 Booooha ...它很快而且没有问题。

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

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

【讨论】：

【解决方案3】：

尝试检查 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);
}

【讨论】：