Add Button with image in Sencha Touch 2

In sencha Touch 2, Button (Ext.Button) in Form  is used to make web application interactive by submitting the data to the server and allows user to perform some action. By default, sencha touch uses iconCls configuration in order to apply styles and arrows to the button.Today,  we are going to see how we can add image to the Button View Component Using Sencha Touch. Let's see the implementation.

Create Form with Button and Image

Ext.define('MyApp.view.MyFormPanel', {
    extend: 'Ext.form.Panel',

    config: {
        items: [
            {
                xtype: 'toolbar',
                docked: 'top',
                title: 'Feedback'
            },
            {
                xtype: 'label',
                html: 'What do you think about my blog? Please rate it.',
                styleHtmlContent: true
            },
            {
                xtype: 'button',
                height: '29%',
                html: '<img src="resources/5stars_small.gif"/>',
                margin: '10px auto',
                width: '65%',
                text: ''
            },
            {
                xtype: 'button',
                height: '29%',
                html: '<img src="resources/4stars_small.gif"/>',
                margin: '10px auto',
                width: '65%'
            },
            {
                xtype: 'button',
                height: '29%',
                html: '<img src="resources/3stars_small.gif"/>',
                margin: '10px auto',
                width: '65%',
                iconAlign: 'center'
            },
            {
                xtype: 'button',
                height: '25%',
                html: '<img src="resources/2stars_small.gif"/>',
                margin: '10px auto',
                width: '65%',
                text: 'MyButton3'
            }
        ]
    }

});

We have created a form with Feedback Toolbar docked at top of the screen, a Label Field and 3 buttons (First Button with 5 star image, Second Button with 4 star image and Third Button with 3 star image).

Inorder to display image inside Button, we are going to use html configuration . This configuration allows to set the HTML Tag that needs to be applied for this Button. In our case, we have used <img> tag.

We are going to set the fixed width and height of the button using width and height configuration. Using margin configuration, we are displaying button middle of the page with 10px space around the button.

Hope, you enjoyed this Post.