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();
});

为方便起见，请参阅以下小提琴：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

Answer 2

jacoviza。你能尝试捕捉面板的焦点事件吗？这个链接可以帮到你。 Extjs panel. Keyboard events

Answer 3

将一个监听器添加到占位符的el以进行鼠标悬停，然后调用floatCollapsedPanel（）

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

    layout: 'border',

    items: [{
        xtype: 'panel',
        title: 'panel1',
        region: 'center',
        flex: 1
    }, {
        xtype: 'panel',
        title: 'panel2',
        region: 'west',
        flex: 1,
        id: 'mypanel2',
        collapsible: true,
        collapsed: true,
        animCollapse: false,
        collapseDirection: Ext.Component.DIRECTION_BOTTOM,
        titleCollapse: true,
        listeners: {
            afterrender: {
                fn: function (self) {
                    self.placeholder.getEl().on('mouseover', function () {
                        var panel = Ext.getCmp('mypanel2');
                        panel.floatCollapsedPanel()

                    })
                }
            }
        }
    }]
}).show();

}）;

如何临时将鼠标悬停在extjs标题栏上的折叠面板？

3 个答案: