1. #1
    Sencha User
    Join Date
    Jan 2010
    Location
    Maryland
    Posts
    14
    Vote Rating
    0
    monzay is on a distinguished road

      0  

    Default Can tooltips work inside a grid panel?

    Can tooltips work inside a grid panel?


    I have a grid panel inside a tab panel. I'm trying to get a tooltip to work inside the grid cells. It works outside of the panels. If I just use a qtip inside the grid cell it works. I cannot get the tooltip to work inside a grid cell. Is this possible?

    I started with this example as a guide.

    Here is the beginning of my code. In the function, where val=akefh1, is where I'm trying to get the tooltip to work. The second part, val=hapcok1, works fine with the qtips.

    Code:
    Ext.onReady(function(){
    Ext.BLANK_IMAGE_URL = '../../EXT_JS/resources/images/default/images/s.gif';
    Ext.QuickTips.init();
    
    // example of custom renderer function
       function change(val){
           if (val == 'akefh1'){
               return '<div id="tip2" class="tip-target"><img src="../../images/warning.gif"/></div>';
           }else if (val == 'hapcok1'){
                   return "<img src='../../images/warning.gif' ext:hide:'user' ext:qtip='This is HAPCOK1 warning'/>";
                   }
           return "<img src='../../images/warning.gif' qtip='generic warning'/>";
       }     
    
    
        var columnRows = new Array;
        columnRows = [
                        {header: "Stock", dataIndex: 'Stock', width: 400, sortable: true, id:'title'},
                        {header: "FMP", dataIndex: 'fmp', hidden:true, groupName:'FMP'},
                        {header: "Data Quality", dataIndex: 'DataQuality', width: 75,sortable: false},    
                        {header: "Data Caveats", dataIndex: 'DataCaveat', renderer: change, width: 100, sortable: false},
                        {header: "Date Published", dataIndex: 'DatePub', renderer: Ext.util.Format.dateRenderer('m/d/Y'), width: 100,sortable: true},
                        {header: "Link To EFH Text", dataIndex: 'LinkToSrce', width: 100, sortable: false} 
                    ];
    Then there is a bunch of code that builds the tabpanels and gridpanels:

    Code:
    var tabCode = new Ext.TabPanel({
                    activeTab: 0,
                    renderTo: 'tabPanelContainer',
                    height: 500,
                    items: [{
            //ALASKA
                        title: 'Alaska',
                        id: 'AK',
                        xtype: 'tabpanel',
                        activeTab: 0,
                        items: [{
                            title: 'EFH',
                            xtype: 'grid',
                            stripeRows: true,
                            store: get_akefh(),
                            columns: columnRows,
                            view: groupViewSpecies
                            }
    Then it all gets displayed in a div:

    Code:
    <body>
            <div id='tip2' class='tip-target'><img src='../../images/warning.gif'/></div>
            <div id="tabPanelContainer"></div>
        </body>
    The first div is just to prove that I can get the tooltip to work outside of the panels.

  2. #2
    Ext JS Premium Member cnelissen's Avatar
    Join Date
    Sep 2007
    Location
    California
    Posts
    220
    Vote Rating
    7
    cnelissen is on a distinguished road

      0  

    Default


    You would have to change the selection model of the grid from a row selection model to a cell selection model... Otherwise the mouseover event is going to be captured by the row container instead of the individual cell. The cell might still capture the event before it hits your div though, since its nested.

    You could try setting trackMouseOver: false on your grid to see if that shows the qtip.
    - Clint Nelissen

  3. #3

Thread Participants: 2

Tags for this Thread