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是自动高度面板，因为此面板用于多个pupose，

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

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

1 个答案: