加载数据后如何刷新面板？答案

【问题标题】：How to refresh a panel after data is loaded?加载数据后如何刷新面板？
【发布时间】：2011-05-17 04:22:54
【问题描述】：

我有一个 extjs 面板呈现在这样的 div 中：

panel = new Ext.Panel({
            layout : 'fit',
            renderTo: 'my_div',
            monitorResize: true, // relay on browser resize
            height: 500,
            autoWidth: true,
            items : [
                centerPanel
            ],
            plain : true
        });

页面加载后面板是空的，但是当我调整浏览器大小时，内容会神奇地出现！

我认为第一次渲染面板时数据还没有完成加载。

如何在不调整浏览器大小的情况下显示内容？

【问题讨论】：

看起来和我的问题非常相似：stackoverflow.com/questions/4302727/…
在某种程度上，我的面板也依赖于几个 Web 服务（从 centerPanel 中调用），但它是否也仅在调整浏览器大小后才显示内容？

标签： extjs refresh panel

【解决方案1】：

我怀疑问题是您需要明确地导致面板被渲染。创建面板后，进行以下调用：

panel.doLayout();

Sencha 文档说“在将新组件添加到已渲染的容器之后，或者可能在更改子组件的大小/位置属性之后，需要调用此函数。”

【讨论】：

您好 tedder，您的回答是正确的，它适用于 Firefox、Chrome 或任何其他设备，但不适用于 IE。你能告诉我如何在IE中解决它。
我正在使用cshtml代码并在JS代码中绑定一个渲染器函数。渲染器函数只会在页面加载时触发。我想从 JS 手动触发它，而 doLayout 没有帮助。你有什么想法吗？

【解决方案2】：

为什么要将面板嵌套在面板中？似乎centerPanel 可以直接呈现给您的包含 div。此外，问题很可能是您如何配置centerPanel，或者您如何加载它，您都没有在此处显示。在这种情况下，您不需要手动调用doLayout()，这可能是您的组件配置方式的问题。

【讨论】：

@RobertP。在更大的布局中，是的，有时。但一般来说，当有人将单个面板直接嵌套在另一个具有 layout:fit 的面板中时，这表明对 Ext 的容器/布局策略的误解。我认为您在否决我之前不会费心阅读问题的完整背景。谢谢。

【解决方案3】：

bmoeskau 是对的，我的猜测是您有一个异步服务器请求来加载您的数据（store.load、ajax 等）-您可以在存储加载后通过注册回调函数来调用布局（请参阅 sencha 文档）

【讨论】：

【解决方案4】：

tedder 建议帮助了我，但它本身并没有解决我遇到的类似问题：添加一个 Ext.draw.Component 我得到了一个空白面板。奇怪的是，面板看起来是白色的，但是 DOM 组件都在那里，我可以使用例如检查它们。 Chrome 开发者工具。

我通过使用一种变通方法使其正常工作。我在调用this.add(component)后添加了这两条指令：

this.setVisible(false);
this.setVisible(true);

隐藏面板，然后以某种晦涩的方式使其再次可见，就可以完成这项工作。

【讨论】：

我正在使用cshtml代码并在JS代码中绑定一个渲染器函数。渲染器函数只会在页面加载时触发。我想从 JS 手动触发它，而改变可见性并没有帮助。你有什么想法吗？