Ich habe ein Randlayout mit zwei Feldern in der Mitte und im Westen. Standardmäßig ist das Westfenster reduziert. Wenn Sie während des Reduzierens auf einen Teil der Titelleiste klicken, wird das Feld vorübergehend erweitert, bis Sie den Mauszeiger aus seinen Grenzen bewegen.

Was ich tun möchte, ist, dass dieselbe "temporäre Erweiterung" nicht durch Klicken auf die Titelleiste des Bedienfelds erfolgt, sondern nur darüber. Wie kann ich das ermöglichen?

Hier ist mein Code:

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

Weitere Informationen finden Sie in der folgenden Geige: http://jsfiddle.net/3FJ58/3/

Danke im Voraus!

3
jacoviza 20 Nov. 2013 im 19:31

3 Antworten

Beste Antwort

Ja, dies ist möglich, aber Sie müssen von Ext.panel.Panel aus erweitern, um die vom Borderlayout verwendete getPlaceholder -Methode zu überschreiben

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

Siehe die aktualisierte JSFiddle

Überschreiben ist IMO zumindest der sauberste Weg. Es wäre aber auch möglich, den durch das Borderlayout erstellten Platzhalter zu manipulieren.

@JoseRivas hat bereits so etwas gepostet, aber mit einigen Problemen werde ich hinzufügen, wie dies auf sauberere Weise gemacht werden kann

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

Siehe die aktualisierte JSFiddle

3
sra 20 Nov. 2013 im 16:40

Fügen Sie dem el des Platzhalters einen Listener für das Mouseover hinzu und rufen Sie dann das floatCollapsedPanel () auf.

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

});

-1
Jose Rivas 20 Nov. 2013 im 16:22

Jacoviza. Können Sie versuchen, das Fokusereignis des Panels zu erfassen? Dieser Link hilft Ihnen. Extjs-Panel. Tastaturereignisse

0
Community 23 Mai 2017 im 12:05