ToolTip Rendering problem

[jamil.isayyed]

Hello all,

i am facing a problem in Ext.tip.ToolTip, when i am adding an html code to the html property, which contains an image and text, the problem is the text rendered before the image get load. how i can load the image before showing it? in order to get a good tooltip?

Thanks

[Arg0n]

Could you show us some code please? ^^

[jamil.isayyed]

this.tooltip = Ext.create('Ext.tip.ToolTip', {
target : 'objOne',
html : ''
});

then i have listener, for mouse over like this:

el.on('mousemove', function(a, t, eOpts) {
this.getTooltip().update("<table><tr><td><img align='left' style='max-height:150px;max-width:300px' src='imageSource'</td></tr><tr><td align='left'><hr></hr></td></tr></table><table><tr><td align='left'>Data</td></tr><tr><td align='left'> data</td></tr><tr><td align='left'><hr></hr></td></tr></table>");

this.getTooltip().show();


}

the problem it take text rendred before the image get load, and taht make look ugly.....

[Arg0n]

So you don't work with the extjs MVC structure?

[jamil.isayyed]

no Not in this case?, it is a special case in my application, but it is not the problem, i am sure of that.

[Arg0n]

If yoour code is in a class you could preload the images by using the Ext.create('Ext.Img', .... in the constructor and saving the objects in an array into the class. You can show them via this.images[0].show(); for example.

But this means you can't use your html any more. You would have to use the item property. I hope you get what I mean xD

If not, I can show you an example...

There's also another method using pure JavaScript:

Ext.onReady(
  var image = new Image(100,100) //100, 100 is the size
  image.src ='path/to/your/image.png';
);

[jamil.isayyed]

the problem i can not do it like this all the html code i get it from the back end, so i think i need to use pure javascript.

[Arg0n]

Yap, I would make a store for it, which holds all the URIs for the images =)