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
If the image is loaded successfully then you will get a message of successful otherwise you will get a error message.
Click or tapping on the image will give you a message of tapping.
Leave Comment