PDA

View Full Version : Add an image to a Ext.panel.Panel. instance



SergeZ
11 Oct 2013, 8:43 AM
Hi, everyone!

How can I add an image to a panel ?



Ext.define('MyApp.view.Banner', {
extend: 'Ext.panel.Panel',
id: 'banner',
height: 500,
width: 500,
border: false,
collapsed: false,
collapsible: false,

initComponent: function() {
var myPhoto = Ext.create('Ext.Img', {
src: 'http://localhost:18080/ToolBar/resources/img/banner.png',
renderTo: Ext.getBody() /*this is a totally undemanded place to render... but it works only this way */
});


items: [
myPhoto,
{html:'<img src="../resources/img/banner.png" />' },
{ xtype: 'image', src: 'banner}
],
this.callParent(arguments);
}
});


In the code above only myPhoto variabel declaration has an effect ( but not expected, becouse of an Ext.getBody() place to render... I would like it to be rendered into the 'banner' declared in the begining of the code )


So, the questions are:
1) how can I _create_ an image object and render in to the place I would like to (items[{...}] as an example)
2) how to address a local image:
for example there is the following project structure:
app
extjs
resources
img - this is the directory with images ( banner.png is also there )
view
Viewport.js
Banner.js - is the file where I would like to get an image and to put it in a certain place on a page
app.js

----- how banner.png could be addressed from the inside of Banner.js file ?

scottmartin
14 Oct 2013, 12:52 PM
Something like this should do the trick:



Ext.define('MyApp.view.Banner', {
extend: 'Ext.panel.Panel',

height: 500,
width: 500,

items: [{
xtype: 'image',
src: 'http://www.sencha.com/img/20110215-feat-html5.png',
}]
});

Ext.application({
name: 'Fiddle',

launch: function() {
Ext.create('MyApp.view.Banner', {
title: 'myPanel',
renderTo: Ext.getBody()
});
}
});


Scott.