javascript - 如何在 extjs 中将鼠标悬停在标题栏上临时展开折叠面板？

Question

我有一个边界布局，在中心和西部区域有两个面板。默认情况下，西面板是折叠的，如果您在折叠时单击标题栏的任何部分，面板会暂时展开，直到您将鼠标指针移出其边界。

我想要做的是让这个相同的“临时展开”不是通过点击面板的标题栏，而是将鼠标悬停在它上面。我怎样才能做到这一点？

这是我的代码:

Ext.onReady(function() {
    Ext.create('Ext.window.Window', {
        width: 500,
        height: 300,

        layout: 'border',

        items: [{
                xtype: 'panel',
                title: 'Center Panel',
                region: 'center',
                flex: 1
            },{
                xtype: 'panel',
                title: 'West Panel',
                region: 'west',
                flex: 1,

                collapsible: true,
                collapsed: true,
                animCollapse: false,
                collapseDirection: Ext.Component.DIRECTION_BOTTOM,
                titleCollapse: true
        }]
    }).show();
});

为方便起见，请引用以下 fiddle :http://jsfiddle.net/3FJ58/3/

提前致谢!

Answer 1

是的，这是可能的，但您必须从 Ext.panel.Panel 扩展以覆盖 borderlayout 使用的 getPlaceholder 方法

getPlaceholder: function(direction) {
    var me = this,
        collapseDir = direction || me.collapseDirection,
        listeners = null,
        placeholder = me.placeholder,
        floatable = me.floatable,
        titleCollapse = me.titleCollapse;

    if (!placeholder) {
        if (floatable || (me.collapsible && titleCollapse)) {
            listeners = {
                mouseenter: {
                    // titleCollapse needs to take precedence over floatable
                    fn: (!titleCollapse && floatable) ? me.floatCollapsedPanel : me.toggleCollapse,
                    element: 'el',
                    scope: me
                }
            };
        }

        me.placeholder = placeholder = Ext.widget(me.createReExpander(collapseDir, {
            id: me.id + '-placeholder',
            listeners: listeners
        }));
    }

    // User created placeholder was passed in
    if (!placeholder.placeholderFor) {
        // Handle the case of a placeholder config
        if (!placeholder.isComponent) {
            me.placeholder = placeholder = me.lookupComponent(placeholder);
        }
        Ext.applyIf(placeholder, {
            margins: me.margins,
            placeholderFor: me
        });

        placeholder.addCls([Ext.baseCSSPrefix + 'region-collapsed-placeholder', Ext.baseCSSPrefix + 'region-collapsed-' + collapseDir + '-placeholder', me.collapsedCls]);
    }

    return placeholder;
}

查看更新的 JSFiddle

重写至少是 IMO 最干净的方式。但也可以操纵由 borderlayout 创建的占位符。

@JoseRivas 已经发布了类似的内容，但由于存在一些问题，我将添加如何以更简洁的方式完成此操作的片段

listeners: {
   afterrender: function(p){
      p.placeholder.getEl().on('mouseenter', function(){ p.floatCollapsedPanel() })
   }
}

查看更新的 JSFiddle