哪个是正确的使用doLayout函数的监听器？

Question

我在EXTJS工作，请检查下面的例子：

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函数，但回调函数在上面的例子中没有帮助我：

当我打电话的doLayout功能2秒后则只有它的正常工作：

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