Javascript ExtJs 4.2参考选择器与Ext.getcmp（）与Ext.ComponentQuery.query（）的比较

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

在控制器中使用tab change事件，如果newtab是summary，我将使用show hide功能呈现页面

方法1：在控制器中，我使用了Ext.getCmp（“选项卡中每个元素的id”），并根据用户输入的值在摘要选项卡中显示和隐藏组件。这杀死了我在IE8中的应用程序，弹出一条消息说“脚本太慢了，诸如此类……”我不得不点击“否”5到6次，以便“摘要”选项卡呈现和显示页面

方法2：在控制器中，我使用ref和selectos访问选项卡中的所有项目。我已经为summary选项卡中的每个字段使用了itemId。像

这个.getXyz（）.show（）

。我以为会很快。是的，它在谷歌浏览器中。但我在IE8中的应用程序与谷歌chrome/firefox相比速度较慢

任何关于这方面的建议，并计划减少页面呈现时间。摘要页面有1000多个字段。请随意抛开你的想法或在这方面提出一些想法

---

谢谢

我有一些建议你可以试试。首先，为了回答您的标题，我认为在javascript中查找组件最简单的方法是构建一个哈希映射。大概是这样的：

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

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

对于渲染时间，确保布局/DOM不会在每次对子组件调用

hide

或

show

时更新。使用以下命令可执行此操作：

summaryTabCt.suspendLayouts();

// intensive hide-and-seek business

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

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

您可以使用

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

• 尝试检查延迟渲染是否为真。这应仅呈现活动选项卡
• 您还可以尝试不同的隐藏模式。尤其是隐藏模式：'offset'听起来很有希望

引用sencha API：

隐藏模式：“偏移量”通常是IE中布局问题的解决方案，特别是在隐藏/显示内容时

正如我在评论中所写，请阅读本绩效指南：

在您的情况下，这将是非常有趣的：

{
    Ext.suspendLayouts();
    // batch of updates
    // show() / hide() elements
    Ext.resumeLayouts(true);
}

向上（）.向下（）.动作……变魔术了。我已经替换了Ext.getCmp（'id'）的每一个用法。好哇。。。它速度快，没有问题

this.up（'tabpanel'）.down（'tabName#itemIdOfField'）.actions

---

actions=hide（）、show（）、setValues（）。

您阅读过本指南吗？不。我正在浏览，你对上面的问题怎么看？。谢谢你的链接。不要指望IE8中有数千个字段的页面会很快。其实很简单，Rixo，我想检查一下我的逻辑。为什么选项卡（每个选项卡都是xtype:'form'）标志isDirty（）=true。。。。。即使没有输入数据？是因为它被渲染了吗？我已经检查了特定选项卡的表单的所有属性。wasDirty:true，并且isDirty（）设置为true。另外，我也在研究suspendLayouts。这对我来说是全新的。是因为，我在表单中有一些默认值…所以表单标志被设置为dirty为true？有关于这个的信息吗？