哪個是正確的使用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); 
});