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

Question

我在 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 函数？

Answer 1

您可以查看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);
});