Results 1 to 6 of 6

Thread: Action Sheet Pushes the panel up permanently

  1. #1
    Sencha User
    Join Date
    Oct 2011
    Posts
    26

    Exclamation Action Sheet Pushes the panel up permanently

    I am rendering the web app menu using an action sheet. I have 10-15 menu items, so my menu is larger then the screen.

    When the menu renders, it displays fine.

    Then when I focus on it (by touching), it slides up automatically. It is like stuck to the bottom, keeps jumping back down even if I try to scroll it up. I can see the whole menu when I click on the top browser bar (which shows the address bar).

    If I close the menu, the panel behind has moved up, and it stays that way. And there is a white empty space at the bottom of the panel.

    The image below shows the white space at the bottom of the app.


    iOS Simulator Screen shot Dec 13, 2011 11.34.17 AM.png

    The image below shows the header of the app when I click to view the address bar. Other times, it is always hidden (after closing the menu Sheet)
    iOS Simulator Screen shot Dec 13, 2011 11.43.04 AM.png

    Here is my code:

    Menu button that dispatches controller/action to display the menu.
    Code:
    {
        text: 'Menu',
        handler: function(button, event) {
            console.log('Menu button was tapped');
            event.stopEvent();
            Ext.dispatch( {
                controller : "Navigation",
                action : "create"
            });
        }
    }
    Controller/View that displays the Sheet.
    Code:
    Ext.regController('Navigation', {
        navData: Ext.EmptyFn,
        create: function() {
    
            // logic to get menu data
    
    
    
            this.actions = new OnsetJS.views.MainNavigation({data: this.navData});
            this.actions.show();
        }
    });
    
    
    MyApp.views.MainNavigation = Ext.extend(Ext.Sheet, {
        id: "MainNavigation",
        data: Ext.EmptyFn,
        enter: "top",
        exit: "top",
        stretchX: true,
        stretchY: true,
        scroll: "vertical",
        hideOnMaskTap: true,
        modal: true,
        initComponent: function() {
            this.setLoading(true);
            // create an array of buttons for navlinks
            console.log(this.data);
            Ext.apply(this,
            {
                items: [
                    {
                        xtype: 'toolbar',
                        ui: 'plain',
                        defaults: {
                            ui: 'light',
                            iconMask: true
                        },
                        items: [
                            { text: "A<small>A</small>"},
                            { iconCls: 'search'},
                            { xtype: "spacer"},
                            { iconCls: 'delete', scope: this, handler: function() {this.hide()} },
                        ]
                    },
                    {
                            id: "MainNavigationLinks",
                            xtype: "list",
                            scroll: false,
                            store: this.data,
                            itemTpl: onsetjs_template_mainnav_link,
                            listeners: {
                                itemtap: function(view, index, element, event) {
                                event.stopEvent();
                                var store = view.getStore();
                                result = store.getAt(index);
                                console.log("Navitem " + result.get('title') + " was tapped");
                                Ext.dispatch({
                                    controller : "Navigation",
                                    action : "hide",
                                });
                                Ext.dispatch({
                                    controller : "Pages",
                                    action : "section",
                                    sectionId : result.get('url'),
                                    historyUrl : "Pages/section/" + result.get('url'),
                                });
                            }
                        }
                    },
                ]
            });
            OnsetJS.views.MainNavigation.superclass.initComponent.apply(this,arguments);
        }
    });

    Thank you.

    PD
    Last edited by pd1980; 13 Dec 2011 at 11:57 AM. Reason: added controller code

  2. #2
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,451

    Default

    Odd... is it the list that grows your Ext.Sheet to be larger than the screen?
    Mitchell Simoens @LikelyMitch
    Modus Create, Senior Fullstack Engineer
    ________________
    Modus Create is based on the model of an open source team. We’re a remote, global team of experts in our field. To find out more about the work we do, head over to our website.

    Check out my GitHub:
    https://github.com/mitchellsimoens

  3. #3
    Sencha User
    Join Date
    Oct 2011
    Posts
    26

    Default

    Yes. I have tool bar at the top, and then a list after that. The list has all the clickable items.

    Also, another strange thing, If I keep the toolbar at the top "docked", then it appears fine. Otherwise it expands (like in the image) and cuts a bit off of the close button.

    This is how the menu looks when I open it.

    iOS Simulator Screen shot Dec 13, 2011 1.11.47 PM.png


    This is how it looks once I focus on it (Touch it). It jumps and sticks it self to the bottom.
    iOS Simulator Screen shot Dec 13, 2011 1.13.41 PM.png

  4. #4
    Sencha User
    Join Date
    Oct 2011
    Posts
    26

    Question Any help on this one

    Anything I should look into? I am stuck at this one bad...

  5. #5
    Sencha User
    Join Date
    Oct 2011
    Posts
    26

    Default Please unmark this question

    Hi Mitchel,

    Could you please mark this thread as unanswered, so it grabs some attention.

    Thanks,
    PD

  6. #6
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,451

    Default

    Quote Originally Posted by pd1980 View Post
    Hi Mitchel,

    Could you please mark this thread as unanswered, so it grabs some attention.

    Thanks,
    PD
    There is no marking in a Discussion forum, only in the Q&A forum.
    Mitchell Simoens @LikelyMitch
    Modus Create, Senior Fullstack Engineer
    ________________
    Modus Create is based on the model of an open source team. We’re a remote, global team of experts in our field. To find out more about the work we do, head over to our website.

    Check out my GitHub:
    https://github.com/mitchellsimoens

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •