PDA

View Full Version : How to prevent floating panel form collapsing on mouseout?



Webtel
14 Dec 2011, 6:44 AM
How should i prevent floating panel (in border layout) form collapsing on mouseout?


Ext.create('Ext.Window',{ autoShow:true,
width:700,
height:500,
layout:'border',
id:'my1',
items:[{
region:'center',
html:'Click on floating panell to bring it. then tell me <b>how to prevent this panel from collapsing on mouse out?</b>'
},{
region:'east',
collapsed:true,
collapsible:true,
frame:true,
hideCollapseTool:true,
title:'floating panel',
width:400,id:'my2',
floatable:true,
html:'How can i make it stick (while floating)? Just dont want it to hide on mouse out.'
}]
});


PS . OR how to extend the timeout of this auto hide? (i noticed that when i move mouse out just for a sec then collapse is not fired - i want it to be somewhat 10sec. then it can go away..) - where to look for it?

PS. ONE WAY TO GAIN CONTROLL OVER SLIDING FLOATER IN AND OUT ---
i want better. :)



Ext.override(Ext.layout.container.Border,{
slideOutFloatedComponent: function(comp){},
MY_slideOutFloatedComponent: function(comp) {
var compEl = comp.el, slideOutAnim;
compEl.un(comp.panelMouseMon);
comp.placeholder.el.un(comp.placeholderMouseMon);
compEl.slideOut(this.slideDirection[comp.region], comp.slideOutAnim);
delete comp.slideOutAnim;
delete comp.panelMouseMon;
delete comp.placeholderMouseMon;
}
});


Ext.override(Ext.panel.Header, {
initComponent: function () {
var me = this;
me.on('render', function () {
if (me.comp && me.comp.id=="my2") {
me.on('click', function(){
if(me.comp.collapsed){
Ext.getCmp('my1').getLayout().floatCollapsedPanel(Ext.EventObject, Ext.getCmp('my2')
);
} else {
Ext.getCmp('my1')..getLayout().MY_slideOutFloatedComponent(
Ext.getCmp('my2')
);
}
});
}
}, me);
me.callOverridden();
}
});

nfuids
14 Dec 2011, 6:47 AM
Try changing the property 'collapsed' to false...

Webtel
14 Dec 2011, 6:49 AM
it needs to be collapsed on start. then it expands on headerclick (floats over container).

i just dont want it to hide automaticaly..

nfuids
14 Dec 2011, 7:22 AM
I would say that's because you hide the collapse tool. You need to click the tool (the button with >> on it) to make it stick...

redraid
14 Dec 2011, 7:28 AM
Set floatable to false and use toggleCollapse() in panel header click listener.

nfuids
14 Dec 2011, 7:48 AM
Set floatable to false and use toggleCollapse() in panel header click listener.

Interesting.. that would allow keeping the collapse tool hidden. How would you get a reference to the panel's header panel?

Webtel
15 Dec 2011, 12:04 AM
how can i OVERRIDE this behaviour - i dont want any floating panels to collapse on mouse out?

redraid
15 Dec 2011, 1:12 AM
Ext.override(Ext.panel.Panel, {
floatable: false
});

Ext.override(Ext.panel.Header, {
initComponent: function () {
var me = this,
panel,
f = function () { panel.toggleCollapse(); };

me.on('render', function () {
if (me.comp) {
// placeholder
panel = me.comp;
} else if (Ext.getClassName(me.ownerCt) == 'Ext.panel.Panel') {
// panel header
panel = me.ownerCt;
}

if (panel && panel.collapsible) {
me.on('click', f);
}
}, me, {single: true});

me.callOverridden();
}
});

Webtel
15 Dec 2011, 1:58 AM
well i need the panel to FLOAT (this is the whole point) so above override isnt what i m looking for. or am i wrong?

please look into my case :


Ext.create('Ext.Window',{ autoShow:true,
width:700,
autoDestroy:true,
height:500,
layout:'border',
items:[{
region:'center',
html:'i need to be laid all the time - dont touche me or resize. thats the point'
},{
region:'east',
collapsed:true,
border:true,frame:true,
collapsible:true,
hideCollapseTool:true,
title:'floating panel',
html:'I want to be collapsed on start. i never want to be "expanded" rather float over previous sibling.',
width:500,
floatable:true,
xtype:'form',
resizable:false
}]
});

in other words i d say i want to pin it (stick it)

i tried something like the following but it wont work. panel collapses either way.


....
xtype:'form',
listeners: {
mouseleave: {
element: 'el',
fn: function(e) {
e.stopEvent();
e.preventDefault();
e.stopPropagation();
return false;
}
}
},
...

Webtel
15 Dec 2011, 5:25 AM
@nfuids (http://www.sencha.com/forum/member.php?60161-nfuids)
http://www.sencha.com/forum/images/statusicon/user-offline.pngI would say that's because you hide the collapse tool. You need to click the tool (the button with >> on it) to make it stick...


that button just expands panel and not stick while floating (even if clicked while floating) so wont be any good for me. (i dont want to change width of previous sibling - center region)

Webtel
19 Dec 2011, 11:29 PM
i see that only "fresh" threads bring answeers here. so i will start this anew. i realy need that functionality and cant figure out it by myself.

sterlpearl
8 Apr 2012, 9:53 AM
I had the same problem. I extended the Border layout and implemented the function floatCollapsedPanel almost exactly as implemented in the source. The only exception is this function contains a function called onMouseLeaveFloated. I provided an empty implementation of this function and it worked.

If someone from Sencha can comment on whether this would be the preferred way of handling this, or if this is more of a hack, I would greatly appreciate the feedback.


Ext.define("NonSlidingBorder", { extend : 'Ext.layout.container.Border',
alias: ['layout.nsborder'],


floatCollapsedPanel: function(e, comp) {


if (comp.floatable === false) {
return;
}


var me = this,
compEl = comp.el,
placeholder = comp.placeholder,
placeholderEl = placeholder.el,
shadowContainer = comp.shadowOwnerCt,
shadowLayout = shadowContainer.layout,
placeholderBox = shadowLayout.getChildBox(placeholder),
scsl = shadowContainer.suspendLayout,
curSize, toCompBox, compAnim;


// Ignore clicks on tools.
if (e.getTarget('.' + Ext.baseCSSPrefix + 'tool')) {
return;
}


// It's *being* animated, ignore the click.
// Possible future enhancement: Stop and *reverse* the current active Fx.
if (compEl.getActiveAnimation()) {
return;
}


// If the Component is already fully floated when they click the placeholder,
// it will be primed with a slide out animation object... so slide it out.
if (comp.slideOutAnim) {
me.slideOutFloatedComponent(comp);
return;
}


// Function to be called when the mouse leaves the floated Panel
// Slide out when the mouse leaves the region bounded by the slid Component and its placeholder.
function onMouseLeaveFloated(e) {}


// Monitor for mouseouting of the placeholder. Hide it if they exit for half a second or more
comp.placeholderMouseMon = placeholderEl.monitorMouseLeave(500, onMouseLeaveFloated);


// Do not trigger a layout during slide out of the Component
shadowContainer.suspendLayout = true;


// Prevent upward notifications from downstream layouts
me.layoutBusy = true;
me.owner.componentLayout.layoutBusy = true;


// The collapse tool is hidden while slid.
// It is re-shown on expand.
if (comp.collapseTool) {
comp.collapseTool.hide();
}


// Set flags so that the layout will calculate the boxes for what we want
comp.hidden = false;
comp.collapsed = false;
placeholder.hidden = true;


// Recalculate new arrangement of the Component being floated.
toCompBox = shadowLayout.calculateChildBox(comp);
placeholder.hidden = false;


// Component to appear just after the placeholder, whatever "after" means in the context of the shadow Box layout.
if (comp.region == 'north' || comp.region == 'west') {
toCompBox[shadowLayout.parallelBefore] += placeholderBox[shadowLayout.parallelPrefix] - 1;
} else {
toCompBox[shadowLayout.parallelBefore] -= (placeholderBox[shadowLayout.parallelPrefix] - 1);
}
compEl.setStyle('visibility', 'hidden');
compEl.setLeftTop(toCompBox.left, toCompBox.top);


// Equalize the size of the expanding Component prior to animation
// in case the layout area has changed size during the time it was collapsed.
curSize = comp.getSize();
if (curSize.height != toCompBox.height || curSize.width != toCompBox.width) {
me.setItemSize(comp, toCompBox.width, toCompBox.height);
}


// This animation slides the collapsed Component's el out to just beyond its placeholder
compAnim = {
listeners: {
afteranimate: function() {
shadowContainer.suspendLayout = scsl;
delete me.layoutBusy;
delete me.owner.componentLayout.layoutBusy;


// Prime the Component with an Anim config object to slide it back out
compAnim.listeners = {
afterAnimate: function() {
compEl.show().removeCls(Ext.baseCSSPrefix + 'border-region-slide-in').setLeftTop(-10000, -10000);


// Reinstate the correct, current state after slide out animation finishes
comp.hidden = true;
comp.collapsed = true;
delete comp.slideOutAnim;
delete comp.panelMouseMon;
delete comp.placeholderMouseMon;
}
};
comp.slideOutAnim = compAnim;
}
},
duration: 500
};


// Give the element the correct class which places it at a high z-index
compEl.addCls(Ext.baseCSSPrefix + 'border-region-slide-in');


// Begin the slide in
compEl.slideIn(me.slideDirection[comp.region], compAnim);


// Monitor for mouseouting of the slid area. Hide it if they exit for half a second or more
comp.panelMouseMon = compEl.monitorMouseLeave(500, onMouseLeaveFloated);


}
});