Action Sheet Pushes the panel up permanently

[pd1980]

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.


29980

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)
29981

Here is my code:

Menu button that dispatches controller/action to display the menu.



{
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.



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

[mitchellsimoens]

Odd... is it the list that grows your Ext.Sheet to be larger than the screen?

[pd1980]

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.

29982


This is how it looks once I focus on it (Touch it). It jumps and sticks it self to the bottom.
29983

[pd1980]

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

[pd1980]

Hi Mitchel,

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

Thanks,
PD

[mitchellsimoens]

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.