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

Ext.Img in Sencha Touch


Sencha Touch Sencha Touch 
Ratings:
0 Comment(s)
 5452  View(s)
Rate this:

Ext.Img in Sencha Touch

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

 


Don't want to miss updates? Please click the below button!

Follow MindStick