javascript - 哪个合适的监听器可以使用doLayout函数？

我在EXTJ中工作，请检查以下示例：

var containerForm=Ext.widget('panel',{
        width: 1100,
        border: false,
        frame: true,
        "layout":"fit",
        title: 'Add User',
        hidden:true,
        listeners:{
                'afterrender': function(panelObj,eOpts )
                {
                    panelObj.doLayout();
                }
        }
    });

上面面板的HTML通过ajax响应进行更新，如以下代码所示：

formObj.update(jsonResp.html,true,function(){
    containerForm.doLayout();containerForm.focus();
});

containerForm是自动高度面板，因为该面板用于多个用途，

当“ formObj.update”填充此面板内容时，其内容已正确加载，但

如果ajax响应“ jsonResp.html”具有任何图像，则那时的doLayout（）函数不能帮助正确对齐面板高度，

我在2个地方添加了doLayout函数，但在上述情况下回调函数没有帮助我：

当我在2秒后调用doLayout函数时，只有它可以正常工作：

formObj.update(jsonResp.html,true,function(){
    setTimeout('containerForm.doLayout(); containerForm.focus();', 2000);
});

哪个合适的监听器可以使用doLayout函数？

最佳答案

您可以看一下Mutation Events，但它们与跨浏览器不兼容。如果是这样，您可以尝试：
formObj.on('DOMSubtreeModified', function(){containerForm.doLayout();}, this);

您真的只需要确保您的formObj.update()是完整的。这就是为什么您的超时有所帮助的原因。如果要确保设置了innerHtml，请自己检查。

如果您查看Source for Ext.dom.Element.update()，它只是使用dom.innerHtml更新html。在更新回调中，您可以在调用doLayout()之前检查innerHtml是否存在。我快速整理了一些简单的示例代码。

var doLayoutIfComplete = function(){
  if(document.getElementById('formObjId').innerHTML == jsonResp.html){
    containerForm.doLayout();
  }
  else{
    doLayoutWhenComplete.delay(500); //Check again in 500ms
  }
}

var doLayoutWhenComplete = new Ext.util.DelayedTask(function(){
  doLayoutIfComplete();
});

formObj.update(jsonResp.html,true,function(){
  doLayoutWhenComplete.delay(500);
});