PDA

View Full Version : Displaying an image in an Ext.Window



pmruk
7 Jul 2009, 6:57 AM
Hi,
All I want to do it put an image in an Ext.Window. Simple right? Well, not in IE land it's not. Firefox works fine, but IE just refuses to display the image. It's there in the DOM alright, but I just can't make it show. Here's some code:



var winHTML = "";
Ext.each(matchedRecs.items, function(o,i,a){
var winHTML += "<div id='imgDiv"+i+"'><img src='/dir/photo/"+this.data.uid+".jpg' width='66' height='88' /></div>";
});
var tagWin = new Ext.Window({
width : 540,
height : 350,
id : 'theTagWin',
autoScroll : true,
title : 'Win title',
layout : 'fit',
html : winHTML
});
tagWin.show();

I've tried various approaches including adding an extra panel into the window and populating that, using a dataView with an Ext.XTemplate and even setting the 'html' config of the Window object explicitly with the img HTML, none of which works. Is this issue to do with layouts? Can anybody help?
Thanks

Condor
7 Jul 2009, 7:04 AM
A DataView would indeed be the best solution.

But if you don't use a DataView I would recommend:

var items = [];
Ext.each(matchedRecs.items, function(item, index){
items.push({
id: 'imgDiv' + index,
children: [{
tag: 'img',
src: '/dir/photo/' + item.data.uid + '.jpg',
width: '66',
height: '88'
}]
});
});
var tagWin = new Ext.Window({
width: 540,
height: 350,
id: 'theTagWin',
autoScroll: true,
title: 'Win title',
items: items
});
tagWin.show();

pmruk
7 Jul 2009, 7:35 AM
Thanks a lot, but it still won't work :( So going down the dataView road this is what I've got (which also still won't work in IE):

var tagWin = new Ext.Window({
width : 540,
height : 350,
id : 'theTagWin',
autoScroll : true,
title : 'Win Title',
items : new Ext.DataView({
store : matchedRecs,
tpl : new Ext.XTemplate(
'<tpl for=".">',
'<img src="/dir/photo/{uid}.jpg" width="66" height="88"/>',
'</tpl>'
)
})
});
tagWin.show();

Condor
7 Jul 2009, 7:42 AM
What does matchedRecs contain exactly?

pmruk
7 Jul 2009, 7:47 AM
matchedRecs is the result of a query on a store, i.e.,


var matchedRecs = this.store.query('tags', tagName, true, false);Will that work properly, or does matchedRecs need to be an array? The docs say the result of a query on a store is a MixedCollection, but I guess you knew that already!