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

      0  

    Default How to show a tooltip with the complete contents of a column

    How to show a tooltip with the complete contents of a column


    More exactly, How do I show a tooltip with the complete contents of a column in an Ext.grid.Panel when the columns content are "ellipsed" (shortened by the "..." characters) when the user hovers the cell with the cursor?

    The ideal solution would be to add a title attribute to the cell's div container to take advantage of the browser native title behavior, but if not, a sencha tooltip will do too.


    edit:

    Please take into account that this is in an already developed application, and can't go trough the application changing each cell definition renderer function, I need a global override or some config option.




    Thanks in advance!

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,074
    Vote Rating
    467
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    You could create a renderer for your column:

    Code:
        function columnTip(value, metaData, record, rowIndex, colIndex, store) {
            metaData.tdAttr = 'data-qtip="' + value + '"';
            return value;
        }
    Scott.

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

      0  

    Default


    I know about the render functions, but I need something global, so I've been trying to do something like this:

    Code:
    Ext.override(Ext.grid.header.Container,
    {
        prepareData: function () {
            var args = Array.prototype.slice.call(arguments, 0);
            this.callOverridden(args);
    }});
    But this gives me the following error in the console:

    Code:
    Error: Cannot read property 'rowCls' of undefined


  4. #4
    Sencha User Legolas's Avatar
    Join Date
    Apr 2010
    Location
    Brazil/MG
    Posts
    58
    Vote Rating
    3
    Legolas is on a distinguished road

      0  

    Default


    You could create a new column subclasses with the attribute "defaultRenderer".
    Code:
    Ext.define('Ext.grid.column.Custom', {
         extend: 'Ext.grid.column.Column'
        ,alias: 'widget.customcolumn'
        ,alternateClassName: 'Ext.grid.CustomColumn'
        ,defaultRenderer: function (value, metaData, record) {
            metaData.tdAttr = 'data-qtip="' + value + '"';
            return value;
        }
    });
    I am sorry my english, I am learning yet
    Portuguese blog: http://wessdevel.blogspot.com.br/
    Twitter: @wlegolas

  5. #5
    Sencha User
    Join Date
    Aug 2011
    Posts
    15
    Vote Rating
    1
    mrpo is on a distinguished road

      0  

    Default


    Quote Originally Posted by Legolas View Post
    You could create a new column subclasses with the attribute "defaultRenderer".
    Code:
    Ext.define('Ext.grid.column.Custom', {
         extend: 'Ext.grid.column.Column'
        ,alias: 'widget.customcolumn'
        ,alternateClassName: 'Ext.grid.CustomColumn'
        ,defaultRenderer: function (value, metaData, record) {
            metaData.tdAttr = 'data-qtip="' + value + '"';
            return value;
        }
    });
    And how would this be used? There are tons of grids already defined in the project.

    edit:

    I've finally fixed it with this code:

    Code:
    Ext.override(Ext.grid.column.Column,
    {
        defaultRenderer: function (value, metaData, record) 
        {
            metaData.tdAttr = 'title="' + value + '"';
            return value;
        }
    });
    I prefer to use the browser's default title attribute, instead of the qtip.

    Thanks all!

  6. #6
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,074
    Vote Rating
    467
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    You could create an override :

    Code:
    Ext.define('Ext.grid.column.override.Column', {
         override: 'Ext.grid.column.Column',
         ..
    });

Thread Participants: 2