如何在展开之前等待ExtJS Panel渲染？

Question

我有一个infoContainer在ExtJS 4.0.7中扩展Ext.panel.Panel这些属性（仅显示相关内容）：

• collapsible：true
• 崩溃：是真的
• 已禁用：true
• forceLayout：true

我有一些修改（一些渲染）要应用于组件（如文本字段，复选框等），所以我在面板的beforeexpand中执行此操作。但是，当面板扩展时，我们清楚地看到面板可见后对组件的修改。所以，我需要这个逻辑完成之前我们看到面板打开。

那么，我是否可以限制面板的扩展仅在beforeexpand的逻辑完成时发生？以及如何做到这一点？

Answer 1

我将如何做到这一点：

创建一个函数，该函数执行您当前希望在beforeexpand事件上发生的呈现/修改逻辑。

在此功能中，在面板上设置自定义属性，以便您知道根据您的逻辑对其进行渲染/修改，例如： myPanel.isPrepared = true;。

此外，在此功能的最后，再次调用myPanel.expand();

然后，在beforeexpand处理程序中添加一个条件，检查您的渲染/修改是否已完成，例如if (myPanel.isPrepared) {...

如果它通过，则不要在处理程序中执行任何操作，并让面板展开。

如果不传递，则调用上面提到的函数然后return false;将阻止面板扩展，您的函数将执行您想要的渲染/修改然后它完成后将调用expand。

假设您没有使用MVC模式创建应用程序，处理程序和函数可能如下所示：

myPanel.on('beforeexpand`, function() {
    if (!myPanel.isPrepared) {
        prepareMyPanel();
        return false;
    }
})

function prepareMyPanel() {
    // rendering / modification logic here...
    myPanel.isPrepared = true;
    myPanel.expand();
}

如果您使用MVC模式创建应用程序，您应该能够将其转换为正确的控制器处理程序。