PDA

View Full Version : Help with ActionSheet



edeandrea
13 Sep 2010, 5:07 AM
When I started development using sencha touch 0.93 I had implemented a navigation bar docked to the bottom using a TabBar. See this screenshot:

22369

Now using Sencha Touch 0.94 I would like to replace this using the ActionSheet component. I notice that the ActionSheet is supposed to be used to add buttons, but can I take my TabBar and add it as an item to the ActionSheet? When I do that I get something that looks like this:

22370

Can anyone help?

evant
13 Sep 2010, 5:18 AM
By default no, but you could simulate it by using an ActionSheet and a card layout. You'd need to manage the interaction with the buttons.

edeandrea
13 Sep 2010, 5:33 AM
Functionally I have it working - its more about the display/presentation of it. Its not keeping the same TabBar look & feel nor is it keeping the icons.

I'm somewhat new to JavaScript/CSS so any help would be greatly appreciated.

aconran
14 Sep 2010, 11:08 AM
edeandra -

Are you sure you are looking for an ActionSheet? This will give you vertical stacked buttons that slide up from the bottom and make interaction with the rest of the page modal.

edeandrea
15 Sep 2010, 3:50 AM
Hi Aaron,
What I'm looking for is what the ActionSheet provides - basically a panel that can be slide up/down from the bottom of the screen. What I don't want, however, is just to have buttons in this panel. I would like to be able to customize the content that goes into the panel. In my specific case I have a TabBar component with icons that I am using as a navigation bar. The problem I'm seeing is that when I put this TabBar into an ActionSheet then it doesn't render the way I would like it to.

Maybe I should copy some of the functionality from ActionSheet (the sliding in/out) and make it part of my TabBar?

sandor
15 Sep 2010, 11:48 AM
Hey,

i am not sure if this is working for a TabPanel (you can report if yes), but for toolbar is working fine for me:

listeners: {
render: function(c){
c.body.on('tap', function(e, t){
if (toolbar.isVisible()) {
toolbar.hide({type: 'slide', direction: 'up', duration: 250});
} else {
toolbar.show({type: 'slide', direction: 'down', duration: 250});
}
c.doComponentLayout();

}, c);
}

}

Cheers,

Sandor

aconran
15 Sep 2010, 4:08 PM
Sounds like you are really looking for a plain old Sheet with some custom items in it.

The 0.96 docs have been much improved and have high level examples of all components.

sandor
15 Sep 2010, 10:49 PM
@ Aaron: 0.96?? Just downloaded 0.95 yesterday - thought it was the latest :-)