Tutorials Sencha Touch Sencha Touch Button Example

Sencha Touch Button Example

This section of the tutorial explains Sencha Touch Button Example with different styles. Below you will find a live example, which demonstrates the code snippet shared below. The buttons are styled based on the UI configuration option, determines the UI look and feel of the button. Supported button configuration types are normal, back, round, action, forward, decline, confirm and small. The round and small  UIs can also be appended to the other options – for example ‘confirm-small’, ‘action-round’, ‘forward-small’ etc. Defaults to ‘normal’

Here is the basic example of Sencha Touch UI controls.

Ext.setup({
	icon : 'icon.png',
	tabletStartupScreen : 'tablet_startup.png',
	phoneStartupScreen : 'phone_startup.png',
	glossOnIcon : false,

	onReady : function() {
		var formBase = new Ext.form.FormPanel({
			fullscreen: true,
			layout: "vbox",			
			items: [
              {
                xtype: "button",
                ui: "normal",
                text: "Normal Button"  
              },
              {
                xtype: "button",
                ui: "back",
                text: "Backward  Button"  
              },{
                xtype: "button",
                ui: "forward",
                text: "Forward  Button"  
              },
              {
                xtype: "button",
                ui: "round",
                text: "Round  Button"  
              },
              {
                xtype: "button",
                ui: "action",
                text: "Action  Button"  
              },              
              {
              	xtype: "button",
                ui: "decline",
                text: "Decline  Button"  
              },
              {
              	xtype: "button",
                ui: "decline-round",
                text: "Decline Round"  
              }
            ]
		});

		Ext.apply(formBase, {
			fullscreen : true,
			autoRender : true,
			hideOnMaskTap : false
		});

		formBase.show();
	}
});

Below is how the output of the above code.

[box type=”note” border=”full”]Note that, this example will work only on web-kit browser that supports Sencha touch. For best results you may use Google chrome browser or safari.[/box]

Now, let’s make it responsive. Here we will add some event handler function to the button, which will respond the user click on the button.

{
  xtype: "button",
  ui: "decline",
  text: "Decline  Button" ,
  handler: function () {
     	alert("Decline Button Pressed!!");                
  }
}

Here, in this above code I am using handler for the button. On user click, it will just show the alert in the screen.

Here is the example for that makes use of Button components both by xtype as well as via their constructors. First create the object Button using Ext.Button Class Constructor and then add declineBtn to formPannel items.

var declineBtn = new Ext.Button({
	id: 'sampleBtn',
      ui: "decline",
      text: "Decline  Button" ,
      handler: function () {
        	alert("Decline Button Pressed!!");                
      }
});

Sencha touch comes with an array of beautiful icons for almost every need of your app. You can use them using the iconMask and iconCls property. You can find those images inside the resources/picto directory of Sencha downloaded resource.

{
   xtype: "button",
   ui: "decline-round",
   text: "Decline Round",     
   iconCls : 'add',
   iconMask : true
}

However, if you’ve made a few apps you’ll realize that not all the icons in the resources folder work in the iconCls.

Total
0
Shares
3 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
ankur
ankur
9 years ago

nice tutorial. specially i liked inline live example.

Somasekhar
Somasekhar
9 years ago

Excellent post. Thanks.

Jones sabo
Jones sabo
9 years ago

I really like your writing style, excellent information, thankyou for putting up : D.

Previous Post
Sencha Touch Tutorials

Getting Started with Sencha Touch

Next Post
PhoneGap Tutorials

What is Phonegap Cordova

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