Ext JS 添加子组件的正确方式与常见误区解析

Ext JS 子组件添加误区与布局机制

许多开发者常遇到 Grid 无法随窗口大小自动调整的问题。深入排查后发现，根源往往在于渲染子组件时的操作方式：习惯将 Grid 渲染到容器内部的一个 div 元素中，这种处理方式正是导致问题的关键。

在 Ext JS 的布局系统中，系统仅能直接控制容器的子组件。若 Grid 被渲染到容器内的某个 div 中，容器无法感知该 Grid 的存在，因此在调整容器大小时，也无法触发对 Grid 大小的调整，导致 Grid 无法随容器变化而自适应。

常见误区原因分析

为何这种添加子组件的方式如此普遍？

首先，部分开发者不清楚如何在容器内正确添加子组件。

其次，受 jQuery 等其他框架开发习惯的影响，难以迅速转变思维模式。

动态添加子组件的解决方案

针对第一个原因，动态添加 Grid 常令初学者困惑，例如当 Grid 的配置需根据远程返回数据动态生成时，如何获取脚本并添加到容器？笔者在学习 Ext JS 初期也犯过此类错误，因此本文旨在澄清这一疑惑。

解决动态添加问题主要有两种方法：一是通过 Ajax 将 Grid（或其他组件的配置对象）加载至本地，随后利用容器的 add 方法将组件加入容器；二是直接利用容器的 load 功能，加载子组件并渲染，返回的数据即为子组件的配置对象。

开发习惯修正与 MVC 实践

对于第二个原因，即习惯问题，开发者需自我修正，尽快熟悉 Ext JS 的开发模式，从而轻松摆脱旧有习惯。

若采用 Ext JS 4 的 MVC 架构进行开发，此类尴尬情况基本不会出现。此时，可将子组件定义为视图，并在控制器中将其添加至容器，实现规范化管理。