Add TextField with images in Sencha Touch 2

In sencha Touch 2, TextField (Ext.field.Text) in Form plays an important role in any mobile web applications. Today,  we are going to see how we can add TextField with image in a Form Using Sencha Touch. This will come handy when you are displaying Username with Profile image in Account Profile Form or any other account details form. Let's see the implementation.


Create Form with TextField and Image

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

    config: {
        items: [
            {
                xtype: 'toolbar',
                docked: 'top',
                title: 'Profile'
            },
            {
                xtype: 'textfield',
                label: 'Username'
            },
            {
                xtype: 'image',
                height: '50px',
                width: '60px',
                src: 'avatar.png'
            }
        ]
    }
});

We have created a form with Profile Toolbar docked at top of the screen, Username TextField and avatar image. But the avatar  image is displaying as the separate row (Next to Username TextField). Please refer the below snapshot.

Inorder to display avatar Image next to the Username Text Field, We need to wrap both the fields inside a container and apply hbox layout. Following is the code

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

    config: {
        items: [
            {
                xtype: 'toolbar',
                docked: 'top',
                title: 'Profile'
            },
            {
                xtype: 'container',
                layout: {
                    type: 'hbox'
                },
                items: [
                    {
                        xtype: 'textfield',
                        flex: 3,
                        label: 'Username'
                    },
                    {
                        xtype: 'image',
                        flex: 1,
                        height: '50px',
                        width: '60px',
                        src: 'avatar.png'
                    }
                ]
            }
        ]
    }
});

Following is the output, when i run in Google Chrome

Hope, you enjoyed this Post.