PDA

View Full Version : How to display a form that slides up from the bottom?



cymeng
26 Nov 2010, 4:36 PM
Hi all,

I'm pretty new to Sencha Touch, so please forgive me if the question is too naive.

What I'm trying to do is pretty similar to what the "Compose new mail" screen in the Mail application on iPhone does --- by clicking a button at the bottom bar (let's say, write new mail), a new screen (that contains all the form elements) slides up from the bottom. The new screen takes the entire screen, with its own toolbar.

So my question is, should I use another panel for that compose screen, or should I create that screen as a card that belongs to the main panel?

I tried to do in the former way, but I don't know how to get the new panel displayed (nothing shows up and no error is reported).
I also tried to do in the latter way, but it seems that the new card is shown without replacing (or covering) the original toolbars that belong to the original panel.

Any insight would be greatly appreciated.

Thank you!

VinylFox
26 Nov 2010, 5:21 PM
I tend to go with the card layout, but depends on the size of the app.

Post some code and we can make suggestions.

cymeng
26 Nov 2010, 6:53 PM
@Shea,

First off, many thanks for the quick response!

What I'm trying to do is quite complex, but here's the abbreviated code that's related to my question:



myApp = Ext.extend(Ext.Panel, {

...
initComponent: function() {

...
this.items = [this.homeView, this.secondView, this.composeNewView];
//my app has multiple views, switched by a group of SegmentedButtons (in a toolbar).
//the last "composeNewView" was the one that should be brought up from the bottom, covering the entire screen
...

}
...
onComposeNewTapped: function(button) {
//this event gets triggered when user clicks on the "Compose" button (located in the bottom toolbar)
var parentPanel = button.findParentByType("panel");
parentPanel.setActiveItem(2, {type:'slide', direction:'up'});
}

});


Here's a portion of the code that configures the compose panel:


myApp.views.composeNew = Ext.extend(Ext.Panel, {
id: 'compose-new',
title: 'Create New',
fullscreen:true,
initComponent: function() {
....
}
....


Right now, this new card doesn't really work --- nothing is shown when the compose button was clicked. But I could see something flashing by, *not* covering the entire screen (i.e. the toolbars are still there).

Just wanted to re-cap a little bit, I was trying to get the compose panel to cover up the entire screen, as it has its own toolbar.

Please advise. Also, please note that I'm just starting up with Sencha Touch (which is very cool, by the way!), so in my code there might be other issues as well.

Again, any insight would be greatly appreciated.

Thank you!

VinylFox
27 Nov 2010, 9:45 AM
That all looks correct to me.

Maybe the animation is hiding the element on completion? Remove the animation config (to use the default) in your setActiveItem call and see what happens.

cymeng
27 Nov 2010, 10:02 AM
Hi Shea,
Yep, you're right! I removed the animation, and the compose panel slides into the view. However: it slides in between the two toolbars, rather than taking up the entire screen.

Any thought on that?

Thanks again!

VinylFox
27 Nov 2010, 12:08 PM
Not sure, would need to see more of your code.

You using the toolbar as a dockedItem?

As for your animation (up) you might try playing with the settings, like setting 'out' to false.

cymeng
27 Nov 2010, 12:16 PM
@Shea,
Thanks again for the help.

I think I *sort of* figured it out! Here's what I did:


...
onComposeNewTap: function(button) {
...
var dockedItems = parentPanel.getDockedItems();
for (i = 0; i < dockedItems.length; i++) {
dockedItems[i].hide();
}
parentPanel.setActiveItem(3, {type: 'slide', direction: 'up'});
parentPanel.doComponentLayout();
}

And the new panel would slide up and take the entire screen!
But the weird thing is that this only works for the first time... when I click on the "Compose" button for the second time, the new panel slides up, leaving the space for the two invisible toolbars. Hmm....