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.

This article is about: Sencha Touch,

Bibhudatta

She loves coding for web and working with Microsoft Technologies. She has developed enterprise applications with B2B and B2C business models for worlds leading Financial and Retail chain market.

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.
  • Jones sabo

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

  • Somasekhar

    Excellent post. Thanks.

  • ankur

    nice tutorial. specially i liked inline live example.