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

时间:2014-02-24 13:29:43

标签: extjs extjs4.2

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

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

1 个答案:

答案 0 :(得分:2)

ExtJs 4.2.1中的此示例。

实现您要实现的目标的一种方法是在可折叠子项之前在父面板的 afterrender 事件中注入“expandder” div 。这意味着在扩展器 div 之后,项目位于父体的底部,因此有足够的空间来扩展它们。当孩子被折叠/展开或父母被调整大小时,注入 div 会获得父亲减去孩子的身高。

您可以在此处查看:https://fiddle.sencha.com/#fiddle/44c

编辑:我真的没有得到1个面板部分 - 如果你想让单个面板表现得像那样,扩展器可以在标头和内容之前注入包装器,但是你留下的面板大小相同但是折叠了 - 只有对我来说有意义的情况是通过扭转我提供的样本中儿童的崩溃