PDA

View Full Version : Can't autoload image in a window



HighKickX
18 Jun 2009, 2:33 AM
Hi,

I am a total beginner with extJS.

I would like to display an image in a window like this:

For my test, I use the API Documentation (http://extjs.com/deploy/dev/docs/) with Firebug console on.

Here is some code that works :


var myWindow = new Ext.Window({
layout: 'fit',
width: 800,
height: 542,
resizable: false,
title: '',
closeAction: 'hide',
bodyCfg: {
tag:'img',
src:'http://christopherwink.files.wordpress.com/2009/06/hkg_hong_kong_advertising.jpg',
}
});

myWindow.show();

But I would like to have a "loading" effect.

Like this :


var myWindow = new Ext.Window({
modal: true,
layout: 'fit',
width: 800,
height: 542,
resizable: false,
title: '',
closeAction: 'hide',
autoLoad: {
url: '../../../'}
});

myWindow.show();

But the following is not working...


var myWindow = new Ext.Window({
modal: true,
layout: 'fit',
width: 800,
height: 542,
resizable: false,
title: '',
closeAction: 'hide',
autoLoad: {
url: 'http://christopherwink.files.wordpress.com/2009/06/hkg_hong_kong_advertising.jpg'}
});

myWindow.show();

and I don't want to create an html page containing the image I want to display.

What can I do? Any suggestions?

Thank you.

18 Jun 2009, 3:58 AM
autoLoad is for HTML fragments, not images.

moegal
18 Jun 2009, 3:59 AM
Have you looked at the image extension?

http://extjs.com/forum/showthread.php?t=59623

I don't know if has been tested with v3+ yet.

Marty

HighKickX
18 Jun 2009, 4:10 AM
autoLoad is for HTML fragments, not images.

Does that mean I can autoload the following fragment?


<img src="http://christopherwink.files.wordpress.com/2009/06/hkg_hong_kong_advertising.jpg" />

HighKickX
18 Jun 2009, 4:13 AM
Have you looked at the image extension?

http://extjs.com/forum/showthread.php?t=59623

I don't know if has been tested with v3+ yet.

Marty

Hi Marty, like I said I am new to ExtJs. I don't know how to use that extension.

Condor
18 Jun 2009, 4:21 AM
Does that mean I can autoload the following fragment?


<img src="http://christopherwink.files.wordpress.com/2009/06/hkg_hong_kong_advertising.jpg" />

Yes, that works (but don't specify a bodyCfg in that case, because the image will be loaded inside the body).

18 Jun 2009, 4:25 AM
Does that mean I can autoload the following fragment?


<img src="http://christopherwink.files.wordpress.com/2009/06/hkg_hong_kong_advertising.jpg" />

yup :)

HighKickX
18 Jun 2009, 4:40 AM
Sorry but the noob that I am can't get this thing working :)

Here is what I'm trying to do :


var myWindow = new Ext.Window({
modal: true,
width: 800,
height: 542,
resizable: false,
autoload: '<img src="http://christopherwink.files.wordpress.com/2009/06/hkg_hong_kong_advertising.jpg" />'});

myWindow.show();

What's wrong with that code?

Condor
18 Jun 2009, 4:42 AM
No, we meant:

var myWindow = new Ext.Window({
modal: true,
width: 800,
height: 542,
resizable: false,
autoload: 'image.html'});
myWindow.show();
with image.html:

<img src="http://christopherwink.files.wordpress.com/2009/06/hkg_hong_kong_advertising.jpg" />

18 Jun 2009, 4:42 AM
:)

the server needs to return an html fragment containing : '<img src="http://christopherwink.files.wordpress.com/2009/06/hkg_hong_kong_advertising.jpg" />'

mschwartz
18 Jun 2009, 4:48 AM
var myWindow = new Ext.Window({
modal: true,
width: 800,
height: 542,
resizable: false,
layout: 'fit',
items: [{
html: '<img src="http://christopherwink.files.wordpress.com/2009/06/hkg_hong_kong_advertising.jpg" />'
}]
});
myWindow.show();

HighKickX
18 Jun 2009, 4:49 AM
Ok, but I wrote in my first post that I didn't want to use that solution...


I don't want to create an html page containing the image I want to display.

What I need is to mask the page when it's loaded and display an image so visitor cannot miss the advertising on that image.

Do you have another idea/solution?

Anyone can tell me how to use lightboxes, because the online sample doesn't seem to work...

HighKickX
18 Jun 2009, 4:51 AM
Thank you mschwartz but that doesn't solve my "Loading..." problem.

I want the window to display a loading message or a progress bar while the image is loading.

Condor
18 Jun 2009, 5:01 AM
Does this work?


new Ext.Viewport({
layout: 'fit',
items: {
xtype: 'box',
autoEl: {tag: 'img', src: 'myimage.gif'},
listeners: {
render: function(c){
var loadMask = new Ext.LoadMask(c.getEl());
loadMask.show();
c.getEl().on('load', function(){
loadMask.hide();
});
}
}
}
});

HighKickX
18 Jun 2009, 5:05 AM
Condor, your code gives me an "unterminated string literal"" error

(I replaced the src value with the full path of my image)

Condor
18 Jun 2009, 5:15 AM
And you don't know enough javascript to spot the error? Are you familiar with jslint.org (http://www.jslint.com/)?

ps. I also corrected the code in my post above.

HighKickX
18 Jun 2009, 5:22 AM
No, I don't know enough javascript (thanks for the code checker)

What is your code supposed to do?

What I get is my image as a background and I can only see some few stripes of it (nearly 1-5% of the screen)

Condor
18 Jun 2009, 5:39 AM
Yeah, that doesn't work.

This however does:

Ext.onReady(function(){
new Ext.Viewport({
layout: 'fit',
items: {
itemId: 'img',
xtype: 'box',
autoEl: {tag: 'img', src: Ext.BLANK_IMAGE_URL},
},
listeners: {
afterlayout: {
fn: function(c){
var img = c.getComponent('img').getEl();
var loadMask = new Ext.LoadMask(c.getEl());
loadMask.show();
img.dom.src = 'someimage.gif';
img.on('load', function(){
loadMask.hide();
});
},
single: true
}
}
});
});

HighKickX
18 Jun 2009, 5:50 AM
Ok, Condor your suggestion is interesting (I got it to work).

But I'm looking for something that has a "lightbox" behavior.

So I think I will dig more in that direction.

18 Jun 2009, 5:59 AM
why not just use the Ext JS light box?
http://extjs.com/playpen/ext-core-latest/examples/lightbox/

HighKickX
18 Jun 2009, 6:02 AM
That's exactly what I'm trying to do.

But I need to customize it because I won't have an image to click on and the to appear bigger in the lightbox.

What I want is to open the lightbox when the page is ready.

Inspecting lightbox.js right now... :)

HighKickX
18 Jun 2009, 6:04 AM
Note that the ExtJs lightbox is not working properly, it fails to close.

Condor
18 Jun 2009, 6:06 AM
Correct. This has already been fixed in SVN.

HighKickX
18 Jun 2009, 6:12 AM
Could you tell when is the next release?

How can I open a lightbox when my page loaded?

I see at the end of the lightbox.js file the following line :


Ext.onReady(Ext.ux.Lightbox.init, Ext.ux.Lightbox);

Should I add something in the Ext.onReady() or should I add a new block like the following? (or replace the line?


Ext.onReady(function(){
// Open a lightbox containing my image
});