ExtJs 4.2 ref选择器与Ext.getcmp(）与Ext.ComponentQuery.query(）

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

本文关键字：Ext ComponentQuery query getcmp ExtJs ref 选择器      更新时间：2024-03-20

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

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

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

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

任何有关此的建议，并计划减少页面呈现时间。摘要页面包含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时更新。使用suspendLayouts来做到这一点：

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

up（）.down（）.action…发挥了神奇的作用。我已经替换了Ext.getCmp（'id'）的每一个用法。Booooha。。。它很快而且没有问题。

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

actions=隐藏（）、显示（）、设置值（）。

  • 请尝试检查deferredRender是否为true。这应该只呈现活动选项卡
  • 您也可以尝试其他隐藏模式。特别是hideMode："偏移"听起来很有希望

引用自sencha API：

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

正如我在评论中所写的，请浏览此性能指南：http://docs.sencha.com/extjs/4.2.2/#/引导/性能

在你的情况下，这对你来说将是非常有趣的：

{
    Ext.suspendLayouts();
    // batch of updates
    // show() / hide() elements
    Ext.resumeLayouts(true);
}
相关文章：