移除 ExtJs 面板的折叠按钮和浮动动画答案

【问题标题】：Removing ExtJs' panel's collapse button and it's floating animation移除 ExtJs 面板的折叠按钮和浮动动画
【发布时间】：2013-09-11 07:30:30
【问题描述】：

在使用 ExtJs 边框布局时，我希望我的东面板只能通过单击面板的标题来展开和折叠，即使用浮动特性。我的疑问是：

如何移除折叠按钮？
如何删除浮动动画？（animCollapse 属性似乎仅适用于折叠和展开折叠时执行的操作按钮）

【问题讨论】：

标签： extjs extjs4

【解决方案1】：

Ext.require(['*']);

Ext.onReady(function() {

    new Ext.container.Viewport({
        layout: 'border',
        items: [{
            region: 'west',
            collapsed: true,
            hideCollapseTool: true,
            floatable: true,
            width: 200,
            title: 'Foo'
        }, {
            region: 'center'
        }]
    });

});

【讨论】：

糟糕！设置为 false 时的可浮动属性会完全消除扩展的能力。我只希望动画消失而不是扩展行为。请注意，我也尝试过 animCollapse:false，它仅在使用折叠按钮时才有效。顺便说一句，谢谢，因为 hideCollapseTool:true 确实可以按预期工作。
更新答案，你还需要titleCollapse。
当我从整体上看待我的问题时，这并没有解决我的担忧。你能看看下面的，看看是从哪里开始的吗？：stackoverflow.com/questions/18576497/…
谢谢，但遗憾的是动画仍然存在。我希望面板立即打开，而不是动画效果。
+1 因为我得到了我要找的东西...floatable:false 禁止浮动动画，因此只能通过单击折叠/展开按钮查看面板。

【解决方案2】：

在 ExtJS 4.1.2 之前，无法禁用浮动面板的动画。现在，如果 animCollapse 设置为 0，动画将被禁用。

重要！！！ animCollapse 属性可以设置为 true、false 或动画持续时间（以毫秒为单位）。但是，如果设置为 false，它仍将使用默认动画时间。它必须设置为 0。我认为这是一个错误，尚未在 4.2.2 中修复

如果您想禁用动画但无法将项目更新到 ExtJS 4.1.2 或更高版本，请将持续时间添加到 floatCollapsedPanel 中的 slideIn 调用和 Ext.panel.Panel 源代码中的 slideOutFloatedPanel 中的 slideOut 调用.

...
me.el.slideIn(slideDirection, {
    preserveScroll: true,
    duration: Ext.Number.from(me.animCollapse, Ext.fx.Anim.prototype.duration),
    listeners: {
        afteranimate: function() {
            me.isSliding = false;
        }
    }
});
...

和

...
compEl.slideOut(collapseDirection, {
    preserveScroll: true,
    duration: Ext.Number.from(me.animCollapse, Ext.fx.Anim.prototype.duration),
    listeners: {
        afteranimate: function() {
            me.slideOutFloatedPanelEnd();
            // this would be in slideOutFloatedPanelEnd except that the only other
            // caller removes this cls later
            me.el.removeCls(Ext.baseCSSPrefix + 'border-region-slide-in');
            me.isSliding = false;
        }
    }
});
...

Ext.panel.Panel查看4.1.2源码：http://docs.sencha.com/extjs/4.1.2/source/Panel5.html#Ext-panel-Panel

【讨论】：