PDA

View Full Version : Button with overlay above it



ogoto
6 Mar 2015, 12:18 PM
Hi, I was wondering if anyone has sample code that will when clicking a button an overlay box will appear above the button?

joel.watson
9 Mar 2015, 8:26 AM
Hi, I was wondering if anyone has sample code that will when clicking a button an overlay box will appear above the button?

By "above the button," do you mean "over the button?"

Thanks
Joel

ogoto
9 Mar 2015, 8:43 AM
The button is at the top of the footer. When clicking the button an overlay box would appear above the button aligning with the top of the footer.

joel.watson
9 Mar 2015, 8:53 AM
The button is at the top of the footer. When clicking the button an overlay box would appear above the button aligning with the top of the footer.

Assuming that your "overlay box" is a floatable component of some kind (like a Window), you could simply do theComponent.showBy( toolbar, 'tl' ) to align it to the top-left of the toolbar. See the Fiddle below for an example.

Thanks
Joel

jbe

ogoto
9 Mar 2015, 11:57 AM
What i would like to do is have the window be centered directly above the button. Where the window bottom is touching the top of the button. I played with the win.showBy but I was unable to get effect with tl or tl-bl.

Ext.onReady(function () {
Ext.create('Ext.Button', {
text: 'Click me',
renderTo: "toolbutton",
handler: function () {
win = Ext.create('Ext.window.Window', {
width: 400,
height: 100,
title: 'Overlay'
});
win.showBy( Ext.get("toolbutton"), 'tl' );
}
});
});

joel.watson
10 Mar 2015, 2:27 PM
Hi--

Were you able to review the docs for alignTo? This provides the options that you can pass for the "position" argument of showBy (or your could use alignTo() as well).

http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.Component-method-alignTo

Thanks!
Joel

ogoto
27 Mar 2015, 9:59 AM
Sorry for taking so long to get back. I ended up going to a non ExtJs approach to get an overlay above a button. I posted the simple example here http://stackoverflow.com/questions/28967167/overlay-appear-above-a-button to get a more elaborate solution. I needed to do a lot of customization on the overlay on my final solution and injected Ext Js search feature into the overlay.

joel.watson
27 Mar 2015, 10:00 AM
Awesome, glad you found a workaround and thanks for sharing the solution!

Joel