Sencha Touch Sheet And ActionSheet Example

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 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 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