PDA

View Full Version : Add image from file as panel content



georgewr3
15 Aug 2011, 9:47 AM
How do I add an image from a file as the content of a panel?

I tried this but nothing shows up. If I use an html <p> that content does show up.

var myP = new Ext.Panel({
id: 'myPanel',
layout: {type: 'hbox', align: 'center'},
items: [{
xtype: 'box',
align: 'middle',
border: true,
flex: 1,
html: '<img src="/logo.png" style="height: 30px"; />' // alt="logo.png" />'
}]

slemmon
15 Aug 2011, 11:29 AM
What if you just did:

Is that what you're looking for as the output?


var myP = new Ext.Panel({
id: 'myPanel',
html: '<img src="/logo.png" style="height: 30px"; />' // alt="logo.png" />'
})

skirtle
15 Aug 2011, 11:39 AM
Is this ExtJS 3? Not really the right forum if it is but I'll try to help anyway.

I tried your code and it worked in some browsers but not others. It also seemed to be intermittent. I think it's something to do with the timing of the image loading from the server.

I think you'd be better to avoid using the html option and use a BoxComponent with autoEl instead. Something like this:


{
height: 30,
xtype: 'box',
autoEl: {
src: '/logo.png',
tag: 'img'
}
}

Getting the width correct will then depend on your choice of layout for the surrounding container. Without knowing the specifics of your use case I can't really comment on that.

georgewr3
15 Aug 2011, 12:30 PM
Thanks. I'm using Ext JS 4 which doesn't seem to like the tab 'img'. Is there an Ext JS 4 version of this?

skirtle
15 Aug 2011, 3:03 PM
Just tried my code with ExtJS 4 and it works fine. Note that it's tag, not tab.

Here are a couple of examples:


new Ext.panel.Panel({
height: 300,
renderTo: Ext.getBody(),
width: 300,
items: [{
height: 30,
xtype: 'component',
autoEl: {
src: '/logo.png',
tag: 'img'
}
}]
});


new Ext.panel.Panel({
height: 300,
html: '<img src="/logo.png" style="height: 30px;">',
renderTo: Ext.getBody(),
width: 300
});

Note that there's not actually any need to wrap it in a panel, you could just create a component:


new Ext.Component({
height: 30,
renderTo: Ext.getBody(),
xtype: 'component',
autoEl: {
src: '/logo.png',
tag: 'img'
}
});

or even just:


new Ext.Img({
height: 30,
renderTo: Ext.getBody(),
src: '/logo.png'
});

You've got many options and really it all comes down to how it fits into your wider application. As you add extra layers of nesting (like in your original code) you need to keep track of the layouts and sizes. If you leave sizing to be 'automatic' it will often end up completely wrong, like it did in your case. I think the issue in your original code was that the image was loading the right size but one of your containers was being auto-sized to zero height. If you're explicit with all your heights (or use a layout that manages the height for you) you won't have that problem.

georgewr3
16 Aug 2011, 5:02 AM
You're right, it does work stand alone but is flagging the tag: line in firebug in the full app. That get's me started - thank you!

skirtle
16 Aug 2011, 7:50 AM
Not sure what you mean by 'flagging' but given you're in ExtJS 4 it's probably easier just to use Ext.Img anyway.