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

請參閱下面搗鼓您的方便：http://jsfiddle.net/3FJ58/3/

提前感謝！

Answer 1

是的，這是可能的，但你必須從Ext.panel.Panel擴大到覆蓋所使用的的borderlayout

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

的getPlaceholder方法請參閱更新的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

一個監聽器添加到埃爾鼠標懸停的佔位符，然後調用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(); 

}）;