Question

我被要求开发一个带有6个标签的标签面板，每个标签有30到40个元素。每个选项卡用作累积人员详细信息的表单，最后一个选项卡是“摘要”页面，显示在前五个选项卡中输入的所有值。我被要求提供摘要作为选项卡，因为用户可以在任何实例中导航到摘要选项卡，并查看他输入的详细信息/或设置摘要。我正在关注ExtJs MVC模式。 Payload来自/转向Spring MVC Application。（JSON）

在控制器中使用制表符更改事件，如果newtab是摘要，我正在使用show hide功能呈现页面。

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

方法2 ：在控制器中，我使用了ref和selectos来处理选项卡中的所有项目。我在摘要选项卡中为每个字段使用了itemId。比如this.getXyz().show()。我觉得它会很快。是的，它是谷歌铬。但是与goolge chrome / firefox

相比，IE8中的应用程序速度很慢

有关此的任何建议并计划减少页面渲染时间。摘要页面有超过1000个字段。请随意摆脱你的想法或对此提出一些想法。

谢谢!!

Answer 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);

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

您可以使用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

Answer 2

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

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

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

Answer 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);
}

ExtJs 4.2 ref-selector vs Ext.getcmp（）vs Ext.ComponentQuery.query（）

3 个答案: