javascript - ExtJs 4.2 引用选择器 vs Ext.getcmp() vs Ext.ComponentQuery.query()

Question

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

在 Controller 中使用标签更改事件，如果新标签是摘要，我将呈现具有显示隐藏功能的页面。

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

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

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

谢谢!!

Answer 1

我有一些建议你可以试试。首先，回答你的标题，我认为在 javascript 中查找组件的最快的简单方法是构建 HashMap 。像这样:

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