1. #1
    Sencha User BitPoet's Avatar
    Join Date
    Sep 2008
    Location
    Bavaria
    Posts
    277
    Vote Rating
    1
    BitPoet is on a distinguished road

      0  

    Default Ext.ux.plugins.grid.CellToolTips

    Ext.ux.plugins.grid.CellToolTips


    I'm trying my hands by announcing my first plugin, CellToolTips, here. It's a small plugin for the GridPanel to add different tooltips to individual rows of a grid. Each column tooltip has its own XTemplate that is dynamically filled from the underlying data record.

    The 'magic' behind the plugin is that only a single ToolTip is created for the whole grid, making it quite memory friendly.

    Note: to work in Ext 2, it needs Animal's triggerElement override for the ToolTip.

    Sources:

    The source can be found here.

    A demo is here.

    Let me know what you think.
    Last edited by BitPoet; 12 Nov 2010 at 9:12 AM. Reason: Updated links for version 1.3

  2. #2
    Sencha User
    Join Date
    Apr 2007
    Posts
    172
    Vote Rating
    1
    medusadelft is on a distinguished road

      0  

    Default


    It doesn't work in IE6 or IE7....

    But in FF it does work. Nice.

  3. #3
    Sencha User BitPoet's Avatar
    Join Date
    Sep 2008
    Location
    Bavaria
    Posts
    277
    Vote Rating
    1
    BitPoet is on a distinguished road

      0  

    Default


    Thanks for the feedback. Made a stupid copy&paste mistake, now the demo also works in IE and Chrome.

  4. #4
    Ext User zhw511006's Avatar
    Join Date
    Oct 2008
    Posts
    39
    Vote Rating
    0
    zhw511006 is on a distinguished road

      0  

    Default


    Great !Thank you For Sharing!

    It Works nice!

  5. #5
    Sencha Premium Member
    Join Date
    Jun 2008
    Posts
    323
    Vote Rating
    6
    Scorpie is on a distinguished road

      0  

    Default


    These kind of improvements are really nice! Thanks!
    I`m from Holland!

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

      0  

    Default


    FYI, the delegate config, and the triggerElement property of Tooltip are going to be in 3.0, so when you upgrade, you can remove the override which adds these capabilities.

  7. #7
    Sencha Premium Member
    Join Date
    Jun 2008
    Posts
    323
    Vote Rating
    6
    Scorpie is on a distinguished road

      0  

    Default


    Quote Originally Posted by Animal View Post
    FYI, the delegate config, and the triggerElement property of Tooltip are going to be in 3.0, so when you upgrade, you can remove the override which adds these capabilities.
    I vote for a renaming of your description from "ExtJS Support Team" to "ExtJS Ultimate Guru"
    I`m from Holland!

  8. #8
    Ext User
    Join Date
    Aug 2009
    Posts
    2
    Vote Rating
    0
    suntory217 is on a distinguished road

      0  

    Default the tooltip doesnt work well when use a table.

    the tooltip doesnt work well when use a table.


    My tooltip doesnt work well when I use a table in tpl, here is my code:

    Ext.onReady(function(){

    var myData = [
    ['3m Co',71.72,0.02,0.03,'9/1 12:00am'],
    ['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'],
    ['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am'],
    ['American Express Company',52.55,0.01,0.02,'9/1 12:00am'],
    ['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am'],
    ['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am'],
    ['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am'],
    ['Caterpillar Inc.',67.27,0.92,1.39,'9/1 12:00am'],
    ['Citigroup, Inc.',49.37,0.02,0.04,'9/1 12:00am'],
    ['E.I. du Pont de Nemours and Company',40.48,0.51,1.28,'9/1 12:00am'],
    ['Exxon Mobil Corp',68.1,-0.43,-0.64,'9/1 12:00am'],
    ['General Electric Company',34.14,-0.08,-0.23,'9/1 12:00am'],
    ['General Motors Corporation',30.27,1.09,3.74,'9/1 12:00am'],
    ['Hewlett-Packard Co.',36.53,-0.03,-0.08,'9/1 12:00am'],
    ['Honeywell Intl Inc',38.77,0.05,0.13,'9/1 12:00am'],
    ['Intel Corporation',19.88,0.31,1.58,'9/1 12:00am'],
    ['International Business Machines',81.41,0.44,0.54,'9/1 12:00am'],
    ['Johnson & Johnson',64.72,0.06,0.09,'9/1 12:00am'],
    ['JP Morgan & Chase & Co',45.73,0.07,0.15,'9/1 12:00am'],
    ['McDonald\'s Corporation',36.76,0.86,2.40,'9/1 12:00am'],
    ['Merck & Co., Inc.',40.96,0.41,1.01,'9/1 12:00am'],
    ['Microsoft Corporation',25.84,0.14,0.54,'9/1 12:00am'],
    ['Pfizer Inc',27.96,0.4,1.45,'9/1 12:00am'],
    ['The Coca-Cola Company',45.07,0.26,0.58,'9/1 12:00am'],
    ['The Home Depot, Inc.',34.64,0.35,1.02,'9/1 12:00am'],
    ['The Procter & Gamble Company',61.91,0.01,0.02,'9/1 12:00am'],
    ['United Technologies Corporation',63.26,0.55,0.88,'9/1 12:00am'],
    ['Verizon Communications',35.57,0.39,1.11,'9/1 12:00am'],
    ['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'9/1 12:00am']
    ];

    var store = new Ext.data.SimpleStore({
    fields: [
    {name: 'company'},
    {name: 'price', type: 'float'},
    {name: 'change', type: 'float'},
    {name: 'pctChange', type: 'float'},
    {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
    ]
    });
    store.loadData(myData);
    var grid_tip_tpl =
    '<table border="0" width="600">'+
    '<tr >'+
    '<td width="200"><b>comapny </b> {company}</td>'+
    '<td width="200"><b>price </b> {price}</td>'+
    '<td width="200"><b>change </b> {change}</td>'+
    '</tr>'+
    '<tr >'+
    '<td width="200"><b>lastchange </b> {lastchange}</td>'+
    '<td width="200"><b>company-price </b> {company}-{price}</td>'+
    '<td width="200"><b>change </b> {change}</td>'+
    '</tr>'+
    '</table>';


    var cellTips = new Ext.ux.plugins.grid.CellToolTips([
    { field: 'company', tpl: grid_tip_tpl },
    { field: 'change', tpl: '<b>Change: </b>{change}' },
    { field: 'lastChange', tpl: '<b>{company}</b><br />Last changed: <i>{lastChange}</i>' }
    ]);

    var grid = new Ext.grid.GridPanel({
    store: store,
    columns: [
    {id:'company',header: "Company", width: 160, sortable: true, dataIndex: 'company'},
    {header: "Price", width: 75, sortable: true, dataIndex: 'price'},
    {header: "Change", width: 75, sortable: true, dataIndex: 'change'},
    {header: "% Change", width: 75, sortable: true, dataIndex: 'pctChange'},
    {header: "Last Updated", width: 85, sortable: true, dataIndex: 'lastChange'}
    ],
    stripeRows: true,
    autoExpandColumn: 'company',
    height:350,
    width:600,
    title:'Array Grid',
    plugins: [ cellTips ]
    });

    grid.render('mygrid-div');

    });


    The red part is the only change of my code, my project need to use a table to finish the tpl, and it just doesnt work well, the tooltip seemed not well.
    here is the screensnap:


    can the writer of the this plugin resolve it?

  9. #9
    Sencha User BitPoet's Avatar
    Join Date
    Sep 2008
    Location
    Bavaria
    Posts
    277
    Vote Rating
    1
    BitPoet is on a distinguished road

      0  

    Default


    Hi suntory,

    the rendering issue is due to the maxWidth setting of the ToolTip that defaults to 300px. If you want to change it, you have to use a more complex configuration like the following:
    Code:
    var grid_tip_tpl =
        '<table border="0" width="500">'+
        '<tr >'+
        '<td width="133"><b>comapny </b> {company}</td>'+
        '<td width="133"><b>price </b> {price}</td>'+
        '<td width="134"><b>change </b> {change}</td>'+
        '</tr>'+
        '<tr >'+
        '<td width="133"><b>lastchange </b> {lastchange}</td>'+
        '<td width="133"><b>company-price </b> {company}-{price}</td>'+
        '<td width="134"><b>change </b> {change}</td>'+
        '</tr>'+
        '</table>';
        
    var cellTips = new Ext.ux.plugins.grid.CellToolTips({
        tipConfig:     {
            maxWidth:    500
        },
        ajaxTips:    [
            { field: 'company', tpl: grid_tip_tpl },
            { field: 'change', tpl: '<b>Change: </b>{change}' },
            { field: 'lastChange', tpl: '<b>{company}</b><br />Last changed: <i>{lastChange}</i>' }
        ]
    });
    Be aware that the maximum for maxWidth is 500px, which is a built-in value in the Ext.ToolTip class itself, so your 600px table will be too wide in any case. You'll either have to adapt your tip layout to fit into the 500px or override the ToolTip class.

  10. #10
    Ext User
    Join Date
    Aug 2009
    Posts
    2
    Vote Rating
    0
    suntory217 is on a distinguished road

      0  

    Default


    BitPoet:
    Thanks very much, I modify the maxValue according to your suggestion and it work very well.
    Your reply is so in time. I have to thank you a million times. Thanks.