---
title: "Ext.Img in Sencha Touch"  
description: "In this article, I’m explaining the image in sencha touch and how to use it."  
author: "Sumit Kesarwani"  
published: 2013-06-14  
updated: 2019-09-07  
canonical: https://www.mindstick.com/articles/1327/ext-img-in-sencha-touch  
category: "sencha touch"  
tags: ["sencha touch"]  
reading_time: 3 minutes  

---

# Ext.Img in Sencha Touch

In this [article](https://yourviews.mindstick.com/view/81489/kashmir-now-after-an-year-of-abrogation-of-article-370), I’m explaining the image in [sencha touch](https://www.mindstick.com/blog/619/changing-sencha-touch-app-theme) and how to use it.\

Ext.Img class is used to add an image in [your application](https://answers.mindstick.com/qa/95487/how-do-you-troubleshoot-when-your-application-link-is-not-responding). It can be used like any other [component](https://www.mindstick.com/articles/12262/learn-how-to-make-a-component-in-magento-2) and [supports](https://www.mindstick.com/blog/12043/how-to-create-a-killer-mobile-app-that-supports-your-brand) all layouts of the component.

##### Example

First drag-n-drop the panel from the toolbox and [titlebar](https://www.mindstick.com/forum/1013/how-to-change-font-color-and-size-of-titlebar-in-sencha-touch) for [heading](https://yourviews.mindstick.com/view/81027/world-economy-heading-towards-recession) purpose. Add image to the panel and set it sourcr through src [configuration](https://www.mindstick.com/articles/13112/setting-up-the-perfect-configuration-for-your-work-computer) and then three events to the image – tap event give [messages](https://www.mindstick.com/news/4179/google-faces-backlash-for-claiming-all-texts-in-google-messages-are-end-to-end-encrypted) 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](https://www.mindstick.com/mindstickarticle/97e7fe22-7770-435c-af79-ce3fa8be2e03/images/ca0a125b-e409-4d68-9ae8-a5f541f08c48.png)

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](https://www.mindstick.com/mindstickarticle/97e7fe22-7770-435c-af79-ce3fa8be2e03/images/5c2c6f02-faa4-4562-a978-77cb7cbb5f4b.png)

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

![Ext.Img in Sencha Touch](https://www.mindstick.com/mindstickarticle/97e7fe22-7770-435c-af79-ce3fa8be2e03/images/b48de045-d981-40e7-8f01-a5c10c7d5094.png)

---

Original Source: https://www.mindstick.com/articles/1327/ext-img-in-sencha-touch

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.