使用 EXTJS 覆盖面板/网格中的展开/折叠动画答案

【问题标题】：Override expand/collapse animation in panel/grid with EXTJS使用 EXTJS 覆盖面板/网格中的展开/折叠动画
【发布时间】：2014-03-26 04:52:27
【问题描述】：

通常，extjs 中的展开/折叠功能在面板/网格标题保持在某个位置并且面板/网格的主体向下/向上移动时起作用。但是我需要面板标题处于某个位置并且在展开时，标题必须向上移动以显示面板/网格主体。折叠时，标题必须向下移动并到达原始位置。这就像手风琴布局内面板中的展开和折叠一样。但我想要一个面板。任何代码示例或指针都会非常有帮助。

注意：请注意，我不能使用任何第三方插件..

【问题讨论】：

你用的是哪个版本的extjs？
Extjs 版本为 4.2.1，请注意该功能必须在浏览器 >= IE7 中运行
为什么不使用只有一个面板的手风琴布局？

标签： extjs extjs4.2

【解决方案1】：

ExtJs 4.2.1 中的此示例。

实现您想要实现的目标的一种方法是在可折叠子项之前的父面板的 afterrender 事件中注入“expander”div。这意味着项目在扩展器 div 之后位于父主体的底部，因此有空间将它们展开。当子级折叠/展开或调整父级大小时，注入的 div 得到父级减去子级的高度。

你可以在这里看到它：https://fiddle.sencha.com/#fiddle/44c

编辑：我并没有真正得到 1 个面板部分 - 如果您希望单个面板具有这样的行为，可以在标题和内容之前将扩展器注入到包装器中，但是您会留下相同大小但折叠的面板 -唯一对我有意义的情况是通过扭转我提供的样本中儿童的崩溃

【讨论】：

嗨..非常感谢您的回答。会试一试，然后告诉你结果..