Clear Up
SharpKit Reference

Img Class

Namespace: Ext

Base Types

System.Object

Constructors

Name Description
Img(ImgConfig)
Img()

Properties

Name Description
extend This is a simple way to add an image of any size to your application and have it participate in the layout system like any other component. This component typically takes between 1 and 3 configurations - a {@link #src}, and optionally a {@link #height} and a {@link #width}: Ext.create('Ext.Img', { src: 'path/to/my/image.jpg', height: 300, width: 400 }); It's also easy to add an image into a panel or other container using its xtype: Ext.create('Ext.Panel', { layout: '{@link Ext.layout.HBox hbox}', items: [ { xtype: 'image', src: 'path/to/my/profilePicture.jpg', flex: 1 }, { xtype: 'textareafield', flex: 2, label: { text: 'My Profile', align: 'top' } } ] }); Here we created a panel which contains an image (a profile picture in this case) and a text area to allow the user to enter profile information about themselves. In this case we used an {@link Ext.layout.HBox hbox layout} and flexed the image to take up one third of the width and the text area to take two thirds of the width. See the {@link Ext.layout.HBox hbox docs} for more information on flexing items.
xtype This is a simple way to add an image of any size to your application and have it participate in the layout system like any other component. This component typically takes between 1 and 3 configurations - a {@link #src}, and optionally a {@link #height} and a {@link #width}: Ext.create('Ext.Img', { src: 'path/to/my/image.jpg', height: 300, width: 400 }); It's also easy to add an image into a panel or other container using its xtype: Ext.create('Ext.Panel', { layout: '{@link Ext.layout.HBox hbox}', items: [ { xtype: 'image', src: 'path/to/my/profilePicture.jpg', flex: 1 }, { xtype: 'textareafield', flex: 2, label: { text: 'My Profile', align: 'top' } } ] }); Here we created a panel which contains an image (a profile picture in this case) and a text area to allow the user to enter profile information about themselves. In this case we used an {@link Ext.layout.HBox hbox layout} and flexed the image to take up one third of the width and the text area to take two thirds of the width. See the {@link Ext.layout.HBox hbox docs} for more information on flexing items.

Methods

Name Description
initialize()
onAfterRender()
updateSrc(object) @private
© Copyright 2005-2011 SharpKit. All rights reserved.