Hybrid View

  1. #1
    Sencha User
    Join Date
    May 2011
    Posts
    15
    Vote Rating
    1
    webdev2111 is on a distinguished road

      1  

    Exclamation Unanswered: Grid cell tooltip

    Unanswered: Grid cell tooltip


    I have been searching everywhere for a solution to using quicktip/tooltip on how to add tooltip to each gridcell and it doesnt seem to be working..



    What I am trying to do is have a mouse over on a cell I want a t tooltip to show with the value in the cell

    Anyone have any suggestions how I can add extjs tooltip to this?

    Code:
    var listView = Ext.create('Ext.grid.Panel', {
            store: mystore,
            multiSelect: true,
            viewConfig: {
                emptyText: 'No images to display'
            },
            //reserveScrollOffset: true,
        renderTo: containerEl,
       
            columns: [
    {
                text: 'Class',
                flex: 10,
                dataIndex: 'ClassName',
                renderer: function(value, metaData, record) {
       return Ext.String.format('<a href="#" class="tooltip2">{0}<span>{0}</span></a>', value);
            }
    
       ]     
        });
    Last edited by webdev2111; 8 Feb 2012 at 9:10 AM. Reason: added [CODE] tags

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,347
    Answers
    3542
    Vote Rating
    846
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Moved to the Ext JS 4 Q&A forum and wrapped your code with [CODE] tags.

    In Ext JS 4, the attribute you should use is 'data-qtip'
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    May 2011
    Posts
    15
    Vote Rating
    1
    webdev2111 is on a distinguished road

      0  

    Default data-qtip usages

    data-qtip usages


    How can I go about adding the data-qtip on the code?
    I like the anchor and mousetrackign and the ba sic tooltps
    http://www.extjs.com/examples/explorer.html#tooltips

    Thanks
    Quote Originally Posted by mitchellsimoens View Post
    Moved to the Ext JS 4 Q&A forum and wrapped your code with [CODE] tags.

    In Ext JS 4, the attribute you should use is 'data-qtip'

  4. #4
    Sencha User charris's Avatar
    Join Date
    Sep 2010
    Location
    Brooklyn, NY
    Posts
    106
    Answers
    8
    Vote Rating
    13
    charris will become famous soon enough

      6  

    Default


    You can configure your column to use a renderer that, in addition to returning the value shown in the cell, can modify the <td> element surrounding the cell. Specifically, you can add the "data-qtip" attribute, which will cause ExtJS to display a tooltip when the mouse rolls over the <td> (e.g., <td ... data-qtip="Here's the tooltip">). The column config might look like this:
    Code:
    {    
         text: 'Column Header Blah',
        dataIndex: 'blah',
        renderer: function(value, metaData, record, rowIdx, colIdx, store) {
            metaData.tdAttr = 'data-qtip="' + value + '"';
            return value;
        }
    }
    Make sure to HTML encode the cell value and data-qutip value (twice) if your data needs it:
    Code:
    {
        renderer: function(value, metaData, record, rowIdx, colIdx, store) {
            // Sample value: msimms & Co. "like" putting <code> tags around your code
    
            value = Ext.String.htmlEncode(value);
    
            // "double-encode" before adding it as a data-qtip attribute
            metaData.tdAttr = 'data-qtip="' + Ext.String.htmlEncode(value) + '"';
    
            return value;
        }
    }

  5. #5
    Sencha User
    Join Date
    Mar 2010
    Posts
    39
    Answers
    2
    Vote Rating
    0
    WBX is on a distinguished road

      0  

    Default


    Thanks Clint and Mitchell for the tips (no pun intended) on this. This post should probably be marked as answered.

    Clint, could you explain the need to double encode the value?

    Also, I discovered that this strategy doesn't work well with the Ext.grid.column.Column convenience subclasses as it overrides the defaultRenderer for those classes. I made a post asking about this: http://www.sencha.com/forum/showthre...lumn.*-columns

    Do either of you have any ideas of how to address this?

    Thanks
    Gary

  6. #6
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    5,470
    Answers
    442
    Vote Rating
    202
    slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of

      0  

    Default


    Not sure how long you can count on this code since it uses some undocumented stuff, but.... works in 4.1.3

    But, this way you don't have to keep up with a renderer for each column - it'll grab the value dynamically for every column.

    http://jsfiddle.net/slemmon/GEwkG/
    Code:
    Ext.tip.QuickTipManager.init();
    
    Ext.create('Ext.data.Store', {
        storeId:'simpsonsStore',
        fields:['name', 'email', 'phone'],
        data:{'items':[
            { 'name': 'Lisa',  "email":"lisa@simpsons.com",  "phone":"555-111-1224"  },
            { 'name': 'Bart',  "email":"bart@simpsons.com",  "phone":"555-222-1234" },
            { 'name': 'Homer', "email":"home@simpsons.com",  "phone":"555-222-1244"  },
            { 'name': 'Marge', "email":"marge@simpsons.com", "phone":"555-222-1254"  }
        ]},
        proxy: {
            type: 'memory',
            reader: {
                type: 'json',
                root: 'items'
            }
        }
    });
    
    Ext.create('Ext.grid.Panel', {
        title: 'Simpsons',
        store: Ext.data.StoreManager.lookup('simpsonsStore'),
        columns: [
            { text: 'Name',  dataIndex: 'name' },
            { text: 'Email', dataIndex: 'email', flex: 1 },
            { text: 'Phone', dataIndex: 'phone' }
        ],
        height: 200,
        width: 400,
        renderTo: Ext.getBody()
        , listeners: {
            viewready: function (grid) {
                var view = grid.view;
                
                // record the current cellIndex
                grid.mon(view, {
                    uievent: function (type, view, cell, recordIndex, cellIndex, e) {
                        grid.cellIndex = cellIndex;
                        grid.recordIndex = recordIndex;
                    }
                });
                
                grid.tip = Ext.create('Ext.tip.ToolTip', {
                    target: view.el,
                    delegate: '.x-grid-cell',
                    trackMouse: true,
                    renderTo: Ext.getBody(),
                    listeners: {
                        beforeshow: function updateTipBody(tip) {
                            if (!Ext.isEmpty(grid.cellIndex) && grid.cellIndex !== -1) {
                                header = grid.headerCt.getGridColumns()[grid.cellIndex];
                                tip.update(grid.getStore().getAt(grid.recordIndex).get(header.dataIndex));
                            }
                        }
                    }
                });
    
            }
        }
    });
    This snippet assumes a dataIndex property for each column.