1

我在 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 函数的合适监听器？

4

1 回答 1

1

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

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

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

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);
});
于 2013-03-06T17:34:02.663 回答