Question

I am trying to slide a Panel from the bottom, so that it covers the entire viewport, like the Bookmarks panel in iOS Safari. This is similar to the ActionSheet, but fulscreen, and without the dark frame around it.

this.advSearch = Ext.ComponentMgr.create({xtype: 'advanced_search', itemId: 'pnlAdvancedSearch'});
this.advSearch.autoRender = true;
this.advSearch.show({type: 'slide', direction: 'up'});

This sort of works, but the new panel doesn’t fill the whole screen, and parts of it appear behind the background panel. I’ve tried various layouts, including fit, vbox, with varying degrees of ugliness, but the root problem seems to be that the panel doesn’t know how tall it needs to be. Maybe because it doesn’t have a container?

Any suggestions? Is this even the right approach, or should I try to hack the ActionSheet to expand to fullscreen, and show without the border?

Thanks.

Answer 1

Because your panel is floating (or I presume it is), you will need to give the panel a fixed height in Sencha Touch 1. You are very restricted in that respect. This following code should work:

var sheet = new Ext.Sheet({
    html: 'hello',
    style: 'color:#fff',
    height: window.innerHeight,
    stretchX: true
});

// replace this show with your animation
sheet.show();

As you can see, I give it a fixed height of the window and then stretch it on the X axis (y doesn’t work).