PDA

View Full Version : floating a collapsible panel



toxkillfraex
26 Mar 2012, 5:41 AM
I have a pretty little custom panel that's collapsible and that contains something of a menu.

I've got it to react on mouse over and mouse out event to show up when the user would want it

now I want to it to float over the other content whenever it expands with either Ext specific code or with the help of CSS.

I've tried a couple of things already but they're all dead ends.


this would be the panel that has to float over the rest without moving anything else

var eastPanel = Ext.create('Ext.panel.Panel',
{
xtype: 'panel',

id: 'east-region',

bodyCls: 'viewportBasePanel',
layout: 'fit',
region: 'east',

maxWidth: 90,

flex: 1.5,

collapsible: true,
collapsed: true,
collapseMode: 'mini',

split: true,

header : false

});


later in the code another panel is added but I don't think it matters much other than it has an ID and a dataview

any ideas on this would be quite welcome.

toxkillfraex
27 Mar 2012, 12:08 AM
I managed to solve this after allot of hardship and keep the collapse feel.

I edited the panel and due to some aligning problems I replaced it with a 10px wide panel in the viewport (with a border layout)


this.eastPanel = Ext.create('Ext.panel.Panel',
{
xtype: 'panel',

id: 'east-region',

bodyCls: 'viewportBasePanelSide',
layout: 'fit',

maxWidth: 90,

width: 90,

height: '88%',

floating: true,
shadow: false,

/*collapsible: true,
collapsed: true,
collapseMode: 'mini',*/

header : false

});

/*east panel to align the dock navigation panel to*/
var eastAlignPanel = Ext.create('Ext.panel.Panel',
{
xtype: 'panel',

id: 'east-align-region',

bodyCls: 'viewportBasePanelSide',
layout: 'fit',
region: 'east',

width: 10,

height: '100%',

header : false

});



then when the panel is given content I show it and align it to the top left of the central panel


this.getEast().add(panel);

this.getEast().show();
this.getEast().alignTo(this.getCenter(), 'tr', [0, 0]);

this.getEast().doLayout();


because of the tiny replacement east panel in the center this give a small edge that can react to a mouse enter event that I added after the code added the panel (these are in separate methods)



Ext.get('appBody').select('#east-region'). addListener('mouseenter', this.dockMouseEnter);
Ext.get('appBody').select('#east-region').addListener('mouseleave', this.dockMouseOut);


and this is the 'collapsing' code with animate to make it less brutal and crude to the eye


dockMouseEnter: function()
{
console.log('dock mouse enter');

var target = this;

var leftVal = parseInt (target.style.left) -60;


Ext.create('Ext.fx.Anim',
{
target: target,
duration: 500,
to: {
left: leftVal, //end width
}
});
},
dockMouseOut: function()
{
console.log('dock mouse out');

var target = this;

var leftVal = parseInt (target.style.left) +60;

Ext.create('Ext.fx.Anim',
{
target: target,
duration: 500,
to: {
left: leftVal, //end width
}
});

},



I hope this helps somebody else out. Or inspires similar code <33

dotnetwise
8 Apr 2012, 5:45 PM
This is crazy! Sencha please provide a proper method on Panel or AbstractCompoent to float the collapsed panel/component!

Tchinkatchuk
28 Aug 2013, 7:05 AM
+1