你在开发中是否遇到过这样的问题：Grid 已经写好，但窗口一拉伸，它却纹丝不动，始终不肯自适应。跑去请教别人，得到的答复通常是——你是不是把它渲染到了一个容器里的 div 里了？没错，这正是问题的根源所在。

在 Ext JS 的布局系统中，布局控制的粒度仅作用于容器的直接子组件。如果你将一个 Grid 嵌入容器内部的某个 div 中，容器根本不知道有这样一个“子组件”存在。当容器需要重新计算布局、调整大小时，自然不会去处理那个藏在角落里 Grid。结果就是：你命令它“变大”，它却置若罔闻。

为什么那么多人会走这条弯路？究其原因，主要有两个方面：

第一，不清楚如何在容器里正确添加子组件。尤其是动态添加 Grid 的场景，令不少初学者感到困惑——Grid 的配置需要从远程返回后才能获取，怎么办？坦白说，当年学习 Ext JS 时我也踩过这个坑，所以深有体会。不过别着急，解决办法是存在的，而且不止一种：

第一种，先通过 Ajax 将整个 Grid 的配置对象（或其他组件的配置）拉取到本地，然后直接调用容器的 add 方法，即可将组件添加进去，简单直接。第二种，直接利用容器自带的 load 功能——它会自动加载子组件并完成渲染，只需将返回的数据写成子组件的配置对象，一步到位。

第二，被 jQuery 等其他框架的使用习惯所影响。很多人在接触 Ext JS 之前，已经习惯了“先写一个 div，再用 JavaScript 往里塞内容”的模式。这种惯性一时难以改变，但只要尽快熟悉 Ext JS 的声明式开发与布局管理思路，慢慢就能扭转过来。

另外，如果你使用的是 Ext JS 4 的 MVC 模式进行开发，基本就不会遇到这种尴尬了——将子组件封装成独立的视图，然后在控制器中将视图添加到容器，一切都在框架的掌控之下，自动适配、自动排布，既省心又高效。