extjs4 组件添加陷阱-优快云博客

本文链接：https://blog.youkuaiyun.com/javapolo/article/details/84209549

本文揭示了使用ExtJS的BorderLayout布局时遇到的一个隐蔽问题：直接添加或移除组件会导致异常。文章提供了详细的解决方法，建议将组件封装在额外的容器中进行管理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天在写extjs代码时发现了个extjs的一个很隐秘陷阱，就是在采用borderlayout的布局时，当你想更换这个布局里面的组件时，会报一个节点插入异常的错误，自己感觉很奇怪，因为自己一般通过直接获取一个panel，然后直接调用该panel的add方法可以直接将组件添加其中，但采用borderlayout布局时却始终报错，到底问题出在哪里？

google了下发现没什么好的解决方案，最后还是自己老老实实去看文档，发现了下面一些话，忽然间恍然大悟

If the Container was configured with a size-managing layout manager, the Container will recalculate its internal layout at this time too.

Note that the default layout manager simply renders child Components sequentially into the content area and thereafter performs no sizing.

组件父容器会根据添加进去的组件大小计算，并做dolayout，下面的语句是关键语句

Warning:##

Components directly managed by the BorderLayout layout manager may not be removed or added. See the Notes for BorderLayout for more details.

用borderlayout布局管理器管理的组件不会直接remove或者add，接下来看看为什么这样以及如何解决这个问题？

The regions of a BorderLayout are fixed at render time and thereafter, its child Components may not be removed or added.To add/remove Components within a BorderLayout, have them wrapped by an additional Container which is directly managed by the BorderLayout. If the region is to be collapsible, the Container used directly by the BorderLayout manager should be a Panel.

原来布局管理器里面的组件在渲染时就会被固定，解决组件添加的问题可以采用包装的方式，即在布局管理器的每个部分（例如west，east）包装一个panel，每次添加组件时，可以直接获取外层的panel，然后通过它来实现添加就可以了

这样问题就可以顺利解决！