1. #1
    Ext User
    Join Date
    Aug 2010
    Posts
    8
    Vote Rating
    0
    BaminiPrakash is on a distinguished road

      0  

    Default qtip with autohide disabled in a xml-grid

    qtip with autohide disabled in a xml-grid


    Hi,

    I am using ext-js xml-grid and qtip. xml-grid has come well as per my requirement. I am trying to use the quicktips from ext-js examples. for some reason the style sheet or image is not working. I am trying to use the sutohide disabled with closable true.

    my code is:
    {header: "<font size='2'><b>Status Reason</b></font>", width: 116, dataIndex: 'StatusReason', sortable: true,id:'StatusReason',
    renderer: function (pValue,pCell) {
    pCell.attr += ' ext:qtip="' + pValue + '"' + 'ext:hide=false' ;
    return pValue;
    }

    I am not able to bring the close button in the example. the example itself is not working in my local. it is working only in ext-js site. please let me know how i bring that color and close button in tip2 style. the above is a dynamice code.
    the static example code is

    new Ext.ToolTip({
    target: 'tip2',
    html: 'Click the X to close me',
    title: 'My Tip Title',
    autoHide: false,
    closable: true,
    draggable:true
    });
    <style type="text/css">
    .tip-target {
    width: 100px;
    text-align:center;
    padding: 5px 0;
    border:1px dotted #99bbe8;
    background:#dfe8f6;
    color: #15428b;
    cursor:default;
    margin:10px;
    font:bold 11px tahoma,arial,sans-serif;
    float:left;
    }
    </style>
    <div id="tip2" class="tip-target">autoHide disabled</div>

    how do i make this as dynamice in xml-grid.js for a data from xml file.

    Thanks
    Bamini

  2. #2
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    96
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    You could use:
    Code:
    Ext.QuickTip.prototype.closable = true;
    Ext.QuickTips.init();
    but this will enable the close button for all quicktips.

    If you don't want that, then you should use a separate ToolTip for your cell tip (try Animal's DataTip user extension).

  3. #3
    Ext User
    Join Date
    Aug 2010
    Posts
    8
    Vote Rating
    0
    BaminiPrakash is on a distinguished road

      0  

    Default


    sencha_pic.JPG

    Hi Condor,

    Hope you can view the above picture. I think I am missing some styles. I don't get the same color or the 'x' button for close. After I added your code, I can see that the hyperlink symbol appears when I move the mouse to that place but not seeing the x button.

    Can you help me to find that code?

    Thanks
    Bamini

  4. #4
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    96
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    Sorry, but my eyes aren't THAT good! Can you post the image again (but a little bigger this time)?

  5. #5
    Ext User
    Join Date
    Aug 2010
    Posts
    8
    Vote Rating
    0
    BaminiPrakash is on a distinguished road

      0  

    Default


    Quote Originally Posted by Condor View Post
    Sorry, but my eyes aren't THAT good! Can you post the image again (but a little bigger this time)?
    secha.JPG

    Hope this is clear..

  6. #6
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,508
    Vote Rating
    57
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    Getting any 404s in Firebug's Net tab?

  7. #7
    Ext User
    Join Date
    Aug 2010
    Posts
    8
    Vote Rating
    0
    BaminiPrakash is on a distinguished road

      0  

    Default


    No i do not get any 404. only thing is the x button not appearing.

  8. #8
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,508
    Vote Rating
    57
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    No images are appearing.

    You either have your images 404ing, or you have an incorrect stylesheet.

    Tooltips do not look like that.

    Check that tooltip's styling using Firebug, and see why it is not styled with framing images.

  9. #9
    Ext User
    Join Date
    Aug 2010
    Posts
    8
    Vote Rating
    0
    BaminiPrakash is on a distinguished road

      0  

    Default


    Hi

    my sample is working now. i found it is due to the ext-all.css placed in worng dir.

    now i would like to know how to change

    <div id="tip2" class="tip-target">autoHide disabled</div>

    to

    pCell.attr += ' ext:qtip="' + pValue + '"' + 'ext:hide=false' ; - this is the only code i use to get tooltip in xml-grid.js file i need tooltip for a single column.

    how do i give

    <style type="text/css">
    .tip-target {
    width: 100px;
    text-align:center;
    padding: 5px 0;
    border:1px dotted #99bbe8;
    background:#dfe8f6;
    color: #15428b;
    cursor:default;
    margin:10px;
    font:bold 11px tahoma,arial,sans-serif;
    float:left;
    }
    </style>

    this style sheet in xml-grid.js and the div tage to converted into pcell.attr = ... or in simple how do i give the class in my ext:qtip line. please help.

    Condor - after adding ur code the x button is not appearing but the close is working. i need it exactly as it looks in the example of ext.

    i have added
    Ext.QuickTip.prototype.closable = true;
    Ext.QuickTips.init();
    in xml-grid.js initially. only problem is pcell line. tell me how to convert the code.

    thanks
    Bamini

  10. #10
    Ext User
    Join Date
    Aug 2010
    Posts
    8
    Vote Rating
    0
    BaminiPrakash is on a distinguished road

      0  

    Default


    Hi

    i tried to put the ext-all.css out of resources dir and that caused the whole problem. now it is working after copying the whole of resources dir to my folder. only thing what i am thinking is to know which all file / gifs are included so i can put them in the same dir instead of placing the whole of resources dir.

    any help is appreciated.


    thanks
    bamini

Similar Threads

  1. How got a normal qtip and a error qtip in same time?
    By khatuido in forum Ext 2.x: Help & Discussion
    Replies: 3
    Last Post: 5 Feb 2008, 5:48 AM
  2. LayoutRegion, autoHide -> 1.1b
    By evant in forum Ext 1.x: Bugs
    Replies: 1
    Last Post: 12 Jun 2007, 10:33 PM

Thread Participants: 2

Tags for this Thread