Question

我在div中渲染了一个extjs面板：

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

页面加载后面板为空，但当我调整浏览器大小时，内容会显示魔术！

我认为第一次渲染面板时数据尚未完成加载。

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

Answer 1

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

panel.doLayout();

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

Answer 2

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

Answer 3

bmoeskau是对的，我的猜测是你有一个异步服务器请求加载你的数据（store.load，ajax等） - 你可以通过重新设置回调函数来加载该商店之后调用布局（参见sencha docs）

Answer 4

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

我通过使用解决方法来实现它。我在调用this.add(component)后添加了这两条说明：

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

隐藏面板，然后以某种模糊的方式再次显示它，就可以完成工作。

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

4 个答案: