Tutorials Sencha Touch Sencha Touch Sheet And ActionSheet Example

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

Total
0
Shares
Previous Post
Sencha Touch Tutorials

Confirm, Alert and Prompt MessageBox in Sencha Touch

Next Post

Navigation Drawer Android Example

Related Posts
By clicking “Allow All”, you agree to the storing of cookies on your device to enhance site navigation, analyze site usage, and assist in our marketing efforts. Cookie Notice
Allow All