sencha-touch using ActionSheet - sencha-touch

Question

I am trying to use an ActionSheet to present the user several options to continue. I want to add a simple text box in the middle of the screen to describe the problem to the user.
Is there a simple/standard way to put such a prompt in Sencha-Touch?

Answer 1

You'll need to do something like this on your overlay ...
if (!this.popup) {
this.popup = new Ext.Panel({
hideOnMaskTap: false,
floating: true,
modal: true,
centered: true,
hideOnMaskTap: false,
width: 300,
height: 200,
styleHtmlContent: true,
scroll: 'vertical',
html: '<p>msg here</p>'
});
}
this.popup.show('pop');
The key here being hideOnMaskTap: false, this will prevent the overlay from disappearing when you click in it's masked area.
You can then display your action sheet but you must remember to hide the overlay in the handler(s) for your action sheet buttons since it will no longer go away when you tap in the masked area.
if (!this.actions) {
this.actions = new Ext.ActionSheet({
items: [{
text: 'decline',
ui: 'decline',
handler: function() {
this.doWhateverYouNeedToDo();
this.actions.hide();
this.popup.hide();
}
}, {
text: 'save',
handler: function() {
this.doWhateverYouNeedToDo();
this.actions.hide();
this.popup.hide();
}
}, {
text: 'cancel',
scope: this,
handler: function() {
this.doWhateverYouNeedToDo();
this.actions.hide();
this.popup.hide();
}
}]
});
}
this.actions.show();
note the hiding of the overlay in the sheet handlers.. (i don't do it above but you'll more than likely want to destroy the overlay and the action sheet after they are hidden as well just to keep things tidey)

Answer 2

You can use an Overlay popup to display a message after the ActionSheet renders.