Ext JS 3.4 延迟渲染手风琴 - 面板的强制渲染

Posted 2023-02-26

【中文标题】Ext JS 3.4 延迟渲染手风琴 - 面板的强制渲染

【英文标题】：Ext JS 3.4 lazy rendering accordions - force render of panels

【发布时间】：2012-12-13 15:51:17

【问题描述】：

我将一个大型应用从 v2 升级到 v3.4

我有一个带有 n > 1 个面板的手风琴。默认情况下，第一个是展开的，而所有其他的都不是。与现在使用 Ext 3.4 的 Ext JS 2 不同，面板在首先展开之前不会呈现。这会导致多个问题，因为某些代码路径要求元素已经在 DOM 中。

deferredRender 对手风琴没有任何影响，它只是用于制表符。

我尝试了什么：遍历所有项目并调用 setActiveItem 或 setActive 但这只会导致最后一个面板实际呈现，所有其他面板仍然不在 DOM 内（我想激活一个元素是异步的，即使animate 是false)。

如何告诉手风琴渲染所有面板，即使它们一开始是折叠的？

【参考方案1】：

AFAIK 面板中具有accordion 布局的所有组件都会立即呈现。示例：http://jsfiddle.net/P5Gen/3/

请注意，子组件是在容器上触发 afterrender 事件后呈现的。子元素的实际渲染是通过布局进行的，因此在触发afterlayout 事件后，标记才可用。

要强制布局（以及强制子级渲染），您可以调用container.doLayout(false, true)。

如果您需要在每个具有手风琴布局的容器上调用doLayout，您可以使用ComponentMgr 来执行此操作。示例：

Ext.ComponentMgr.all.on('add', function(index, component)
    if (!(component instanceof Ext.Container)) 
        return;
    
    if (component.layout !== 'accordion' && !(component.layout instanceof Ext.layout.AccordionLayout)) 
        return;
    

    component.on('afterrender', function(sender) 
        // do layout or something else
        sender.doLayout(false, true);
    );
);

【讨论】：

您的演示显示的行为与我观察到的不同，所以也许有其他脚本弄乱了我的手风琴。我无法在 12 月 20 日之前查看，但届时我一定会回答/投票。

那么为什么你的小提琴中的面板会立即渲染到 DOM 而我的却没有呢？查看 15.3。在sencha.com/forum/showthread.php?70352-Upgrading-to-Ext-3

我的例子显示了完全相反的行为。看源代码。 AccordionLayout.onLayout 调用 ContainerLayout.renderAll 方法，顾名思义，该方法呈现所有组件。我没有看到任何与延迟渲染相关的代码，希望与CardLayout 相关的代码在TabPanel 中使用。为避免这种情况，您可以将Ext.TabPanel.prototype.deferredRender 设置为false。如果您仍然遇到该问题，请尝试在 jsfiddle 上重现，以便我查看。

我不知道我的手风琴出了什么问题，但你的代码解决了我的大部分问题。我认为我无法在小提琴中重现这一点。谢谢。