1. #1
    Sencha Premium Member
    Join Date
    Aug 2012
    Posts
    19
    Vote Rating
    0
    jamil.isayyed is on a distinguished road

      0  

    Default Unanswered: ToolTip Rendering problem

    Unanswered: ToolTip Rendering problem


    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

  2. #2
    Sencha User Arg0n's Avatar
    Join Date
    Apr 2012
    Location
    Germany
    Posts
    122
    Answers
    12
    Vote Rating
    16
    Arg0n will become famous soon enough Arg0n will become famous soon enough

      0  

    Default


    Could you show us some code please? ^^

  3. #3
    Sencha Premium Member
    Join Date
    Aug 2012
    Posts
    19
    Vote Rating
    0
    jamil.isayyed is on a distinguished road

      0  

    Default code

    code


    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.....

  4. #4
    Sencha User Arg0n's Avatar
    Join Date
    Apr 2012
    Location
    Germany
    Posts
    122
    Answers
    12
    Vote Rating
    16
    Arg0n will become famous soon enough Arg0n will become famous soon enough

      0  

    Default


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

  5. #5
    Sencha Premium Member
    Join Date
    Aug 2012
    Posts
    19
    Vote Rating
    0
    jamil.isayyed is on a distinguished road

      0  

    Default


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

  6. #6
    Sencha User Arg0n's Avatar
    Join Date
    Apr 2012
    Location
    Germany
    Posts
    122
    Answers
    12
    Vote Rating
    16
    Arg0n will become famous soon enough Arg0n will become famous soon enough

      0  

    Default


    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:

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

  7. #7
    Sencha Premium Member
    Join Date
    Aug 2012
    Posts
    19
    Vote Rating
    0
    jamil.isayyed is on a distinguished road

      0  

    Default


    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.

  8. #8
    Sencha User Arg0n's Avatar
    Join Date
    Apr 2012
    Location
    Germany
    Posts
    122
    Answers
    12
    Vote Rating
    16
    Arg0n will become famous soon enough Arg0n will become famous soon enough

      0  

    Default


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

Thread Participants: 1

Tags for this Thread