1. #1
    Ext User
    Join Date
    Jun 2010
    Posts
    19
    Vote Rating
    0
    gwthompson is on a distinguished road

      0  

    Default "Popover" question

    "Popover" question


    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

  2. #2
    Sencha User
    Join Date
    Mar 2007
    Location
    Haarlem, Netherlands
    Posts
    1,243
    Vote Rating
    10
    TommyMaintz will become famous soon enough TommyMaintz will become famous soon enough

      0  

    Default


    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.

  3. #3
    Ext User
    Join Date
    Jun 2010
    Posts
    19
    Vote Rating
    0
    gwthompson is on a distinguished road

      0  

    Default


    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

  4. #4
    Sencha User
    Join Date
    Mar 2007
    Location
    Haarlem, Netherlands
    Posts
    1,243
    Vote Rating
    10
    TommyMaintz will become famous soon enough TommyMaintz will become famous soon enough

      0  

    Default


    Try setting hideOnMaskTap: true on the component.

  5. #5
    Ext User
    Join Date
    Jun 2010
    Posts
    19
    Vote Rating
    0
    gwthompson is on a distinguished road

      0  

    Default


    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:

    Code:
              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:

    Code:
            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

  6. #6
    Sencha User
    Join Date
    Mar 2007
    Location
    Haarlem, Netherlands
    Posts
    1,243
    Vote Rating
    10
    TommyMaintz will become famous soon enough TommyMaintz will become famous soon enough

      0  

    Default


    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?

  7. #7
    Sencha User gaurav.k's Avatar
    Join Date
    Nov 2011
    Location
    Bangalore, India
    Posts
    11
    Vote Rating
    0
    gaurav.k is on a distinguished road

      0  

    Question How to dismiss the popover on a button tap

    How to dismiss the popover on a button tap


    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

  8. #8
    Sencha User
    Join Date
    Mar 2013
    Posts
    3
    Vote Rating
    0
    Taiko3615 is on a distinguished road

      0  

    Default


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

    Try this :

    Code:
     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?');
                        }
                    }
                ]
            }
        ]});

Similar Threads

  1. Replies: 3
    Last Post: 28 Oct 2009, 6:38 AM
  2. replace the "south" with the "new Ext.StatusBar" in "layout:'border'"
    By ealpha in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 18 May 2008, 8:28 PM
  3. Question about "load" and "layout"
    By gamma in forum Ext 2.x: Help & Discussion
    Replies: 0
    Last Post: 6 May 2008, 10:49 AM
  4. Replies: 0
    Last Post: 29 Feb 2008, 5:35 AM

Thread Participants: 3

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..."