1. #1
    Sencha Premium Member
    Join Date
    Apr 2009
    Posts
    208
    Vote Rating
    8
    Answers
    5
    jhoweaa is on a distinguished road

      0  

    Default Answered: Popup Panel Issues

    Answered: Popup Panel Issues


    In my app I want to be able to pop up a panel containing a list of items. The list might contain quite a few items so I'm using the ListPaging plugin. I also want the panel to slide in when opening and slide out when hiding. The panel will be modal and will close if the user clicks outside, but the window can also be closed by a button in a toolbar which is part of the popup. I have most of this working but there are a couple of quirks that I don't understand. To demonstrate the issue, I tweaked the code in the 'pullrefresh' example. I have an app which shows the list of tweets in the main panel, but I'm also using the same tweet list class in my popup window. My popup code looks like this:

    Code:
    this.tweetsPopup = Ext.create('Ext.Panel', {
        autoDestroy: true,
        modal: true,
        scrollable: false,
        centered: true,
        width: '95%',
        height: '95%',
        hideOnMaskTap: true,
        showAnimation: 'slideIn',
        hideAnimation: 'slideOut',
        layout: 'fit',
        items: [
            {
                xtype: 'titlebar',
                docked: 'top',
                title: 'Tweets',
                items: [
                    {
                        text: 'Done',
                        action: 'done',
                        iconMask: true,
                        align: 'right',
                        listeners: {
                            tap: function() {
                                this.tweetsPopup.hide();
                                Ext.Viewport.remove(this.tweetsPopup);
                                this.tweetsPopup = undefined;
                            },
                            scope: this
                        }
                    }
                ]
            }, {
                xclass: 'TweetList'
            }
        ]
    });
    Ext.Viewport.add(this.tweetsPopup);
    this.tweetsPopup.show();
    I hook the display code up to a button in a toolbar in my main Viewport. Here are the odd things. The tweet list which displays on my main Viewport displays 5 items and then displays the 'Load More...' message. However, when I display the TweetList class in my popup, I get 5 items, but I don't get the 'Load More...' message. Also, in the popup, I can pull the list and get the Pull Refresh message, but the list doesn't update, but it works perfectly when displayed on the main page.

    Another odd thing is the way the panel hides. I specified 'slideOut' and if I tap outside of the window the panel will slide out. However, if I click my 'Done' button which invokes the hide method on the popup panel itself, the panel just disappears. I would have expected that since I set a hideAnimation, when I told the panel to hide, the animation would take effect.

    One other question I have is on what the best practice is for creating temporary windows which might display a large list. I've set my panel up to autoDestroy. When I create the panel, I add it to the Viewport and if the user clicks my Done button I hide the panel, remove it from the Viewport and then remove the reference to the object. Should I invoke destroy on the panel to remove it and its children from memory?

    Thanks for any assistance.

    Jim

  2. I would look at the DOM to see if the DOM elements for the two plugins are there.

    You execute hide() and then remove the panel from the viewport. You need to wait till after the panel hides to remove it from the viewport, animation is asynchronous.

    Ext.Viewport.remove should destroy the component by default.

  3. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,641
    Vote Rating
    898
    Answers
    3573
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    I would look at the DOM to see if the DOM elements for the two plugins are there.

    You execute hide() and then remove the panel from the viewport. You need to wait till after the panel hides to remove it from the viewport, animation is asynchronous.

    Ext.Viewport.remove should destroy the component by default.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  4. #3
    Sencha Premium Member
    Join Date
    Apr 2009
    Posts
    208
    Vote Rating
    8
    Answers
    5
    jhoweaa is on a distinguished road

      0  

    Default


    Thanks for the tip on the asynchronous nature of animations. It's easy to overlook something like that.

    Regarding looking at the DOM, the Pull Refresh items must be there since visually the list acts correctly, it will pull down, expose the 'Pull for Refresh' message and then hide, but the list doesn't seem to properly refresh. It doesn't seem that the paging information is in the DOM, however.

    With regards to the hide animation, why would it work when hide is invoked from tapping outside of the panel, but not work when invoked by the Done button? I walked through the code in Chrome Developer and both methods invoke the hide method on Component, both retrieve the proper animation, but only one actually seems to perform the animation. I did get the animation to trigger once when invoked from my Done button, but that only happened when I stepped through the hide method line by line.

    Thanks again for your help.

    Jim

  5. #4
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,641
    Vote Rating
    898
    Answers
    3573
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    When you tap on the mask it doesn't remove the panel from the Viewport. You are.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  6. #5
    Sencha Premium Member
    Join Date
    Apr 2009
    Posts
    208
    Vote Rating
    8
    Answers
    5
    jhoweaa is on a distinguished road

      0  

    Default


    Got it.

    Thanks!

Thread Participants: 1