articles

Home / DeveloperSection / Articles / Ext.Img in Sencha Touch

Ext.Img in Sencha Touch

Sumit Kesarwani 8430 14-Jun-2013

In this article, I’m explaining the image in sencha touch and how to use it.

Ext.Img class is used to add an image in your application. It can be used like any other component and supports all layouts of the component.

Example

First drag-n-drop the panel from the toolbox and titlebar for heading purpose. Add image to the panel and set it sourcr through src configuration and then three events to the image – tap event give messages when user tap, load event gives when image successfully loaded and error event gives message if there is any error in loading of an image.

Ext.define('MyApp.view.MyPanel', {

    extend: 'Ext.Panel',
 
    config: {
        items: [
            {
                xtype: 'titlebar',
                docked: 'top',
                title: 'Image Example'
            },
            {
                xtype: 'image',
                height: 121,
                itemId: 'myimg',
                mode: 'element',
                src: 'logo.jpg'
            }
        ],
        listeners: [
            {
                fn: 'onMyimgTap',
                event: 'tap',
                delegate: '#myimg'
            },
            {
                fn: 'onMyimgLoad',
                event: 'load',
                delegate: '#myimg'
            },
            {
                fn: 'onMyimgErased',
                event: 'erased',
                delegate: '#myimg'
            }
        ]
    },
 
    onMyimgTap: function(image, e, eOpts) {
        Ext.Msg.alert('You click the image');
    },
 
    onMyimgLoad: function(image, e, eOpts) {
        Ext.Msg.alert('Image load succesfully');
    },
 
    onMyimgErased: function(component, eOpts) {
        Ext.Msg.alert('Image not load successfully');
    }
});

 Output

Ext.Img in Sencha Touch

If the image is loaded successfully then you will get a message of successful otherwise you will get a error message.

Ext.Img in Sencha Touch

Click or tapping on the image will give you a message of tapping.

Ext.Img in Sencha Touch

 


Updated 07-Sep-2019

Leave Comment

Comments

Liked By