Sheet is a floating model panel widget, what animates on top of the view. Below image shows the class diagram of Ext.Sheet class. Sheet is subclass of Panel, which extends the functionality and provides flexibility to developer to add stack of other widgets to it. It is orientation aware; flipping the device causes the sheet to render in landscape mode. Sheet is a generic class for ActionSheet, Picker and MessageBox.

Sencha Sheet in class diagram

Sencha Touch Sheet Example

// Creating a Sheet Instance using Ext.Sheet Class constructor
var sheet = new Ext.Sheet({
		height  : 70,
		stretchX: true,
		stretchY: true,
		layout: { type: 'hbox', align: 'stretch'},
		items: [{html: "<img src='quote.png'>"}],
	dockedItems: [{
            dock : 'right',
            xtype: 'button',
            text : 'Close',
            iconCls : 'delete',
		iconMask : true,
            handler: function () {
	sheet.hide();             
            }
        }]
});

Here is the output of the above code.
Sencha Sheet in action

Sencha Touch ActionSheet Example

ActionSheet is a floating panel docked at the bottom of the screen, consists of stack of command buttons. ActionSheet is the way to allow user to choose one of the available buttons. It also has a title for providing a hint along with the Command buttons.

// Creating a ActionSheet Instance using Ext.ActionSheet Class constructor
var actions = new Ext.ActionSheet({
		items: [{
			text: 'Option 1',
			scope : this,
			handler : function(){
				actions.hide();
				}
             },{
	text : 'Option 2',
	scope : this,
	handler : function(){
		actions.hide();
                    }
             },{
	text : 'Cancel',
	scope : this,
	handler : function(){
		actions.hide();
		}
             }]
 });

Here is the output of the above code
Sencha ActionSheet Example

This article is about: Sencha Touch,

Nilanchala

A blogger, a bit of tech freak and a software developer. He is a thought leader in the fusion of design and mobile technologies. He is the author of Xamarin Mobile Application Development for Android Book (goo.gl/qUZ0XV3), DZone MVB and founder of stacktips.com.

Discussions

Please note: We reserve the right to delete comments that contains snarky remarks, offensive or off-topic. To know more read our comments policy.