"Popover" question

[gwthompson]

Hi All,

I see in the Kitchen Sink example when you are in portrait mode the left navigation is hidden and made visible via the Navigation button. When this button is clicked the navigation panel becomes visible in a floating panel that has the little "arrow" at the top like the popover element in the iPad SDK.

How can I take advantage of this interface element in my code? I would like to be able to have the "arrow" on the top, bottom, or either side so I can refer to an object underneath.

Is this even possible and if so how would I accomplish this?

Thanks for all of your help!

gt

[TommyMaintz]

You can make a component look like an overlay by setting floating: true on it. Make sure you give it a width and a height. Then you can use showBy on that component and pass an element or component (for example a button). This will automatically position it in a way that it fits on the screen and position the arrow for you to point towards the right place. It currently only supports the array to be on the top or bottom.

[gwthompson]

Thanks Tommy! That worked but now I have a new anomaly. What I have is an overlay that takes up most of the screen while dimming the page behind it. I added the "popover" overlay to an element on the underlying overlay which works just fine. However if I tap outside of the underlying overlay it hides itself as expected but if my "popover" overlay happens to be visible at the time it remains visible. Is there a way I can close the "popover" overlay whenever the underlying overlay is closed?

Hopefully this makes sense!

Thanks,
gt

[TommyMaintz]

Try setting hideOnMaskTap: true on the component.

[gwthompson]

Hi Tommy,

I just added the hideOnMaskTap to the "popover" overlay and still when I dismiss the underlying overlay by tapping on the mask on the mainPanel of my app my "popover" overlay still shows until I tap again.

Here is the code for the underlying overlay that is displayed over the mainPanel:

          var overlay = new Ext.Panel({
            floating: true,
            modal: true,
            centered: true,
            styleHtmlContent: true,
            contentEl: 'note1L',
            cls: 'htmlcontent'
       	 });

and here is the code for the "popover" overlay that is displayed on top of the overlay:

        var testPop = new Ext.Panel({
            floating: true,
            hidden: true,
			width: 200,
			height: 200,
			hideOnMaskTap: true,
			styleHtmlContent: true,
			html: 'This is a test of a popup',
			cls: 'htmlcontent'
        	});

Maybe you can see something wrong with my code.

Thanks for all of your help.

gt

[TommyMaintz]

Oh, I only realized now that you are talking about having two popups open at the same time.

You could listen for the 'hide' event of the one popup and programmatically call hide() of the other maybe?

[gaurav.k]

thank you tommy and thomson.
I tried the same thing and it worked perfectly for me. But Now I have a "Cancel" button that should remove the popover as soon as clicked.

How to dismiss the popover on Cancel button tap.

thank you

[Taiko3615]

As this post points out, sencha have very exactly what you need.

Try this :

 new Ext.Panel({
    fullscreen : true,
    items      : [
        {
            xtype  : 'toolbar',
            docked : 'top',
            items  : [
                {
                    text    : 'Open',
                    handler : function (button) {
                        var panel = new Ext.Panel({
                            height : 200,
                            width  : 200,
                            html   : 'Hello'
                        });

                        panel.showBy(button, 'tr-bc?');
                    }
                }
            ]
        }
    ]});