PDA

View Full Version : how to "float in" a collapsed floatable panel?



Webtel
15 Dec 2011, 2:32 AM
How can i make below floating panel to float in (slide in,show) using script (and not by clicking on placeholder)?


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,
collapsible:true,frame:true,border: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
}]
});

PS. panel.expand() is not an answer (it wont be floating anymore).

PS.2. or just How can i fire click event on placeholder (header).

mitchellsimoens
15 Dec 2011, 2:27 PM
ON the border layout in 4.0.x, there is a method, floatCollapsedPanel that takes two arguments. The first is a tricky one as it wants an EventObject and the second is the component.

Webtel
15 Dec 2011, 11:53 PM
for now working example looks like this:


Ext.getCmp('my1').getLayout().floatCollapsedPanel(Ext.EventObject,Ext.getCmp('my2'));



Ext.create('Ext.Window',{
autoShow:true,
width:700,
autoDestroy:true,
height:500,
id:'my1',
layout:'border',
items:[{
region:'center',
html:'i need to be laid all the time - dont touche me or resize. thats the point'
},{
region:'east',
id:'my2',
collapsed:true,
collapsible:true,frame:true,border: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
}]
});