1. #1
    Sencha User
    Join Date
    Mar 2007
    Posts
    7,854
    Vote Rating
    4
    tryanDLS is on a distinguished road

      0  

    Default Grid Header Tooltips

    Grid Header Tooltips


    I was playing around with putting tooltips on the col headers of a grid. Might be worth adding to the code, or at least inspire you to do something cooler

    Code:
    cm = new YAHOO.ext.grid.DefaultColumnModel(
            [{header:'Index', hidden:true /*width:50*/},
     	 {header:'Name', width: 90, tooltip:'Click to sort'},
             {header:'Code', width: 50},
             {header:'Viewable', width:65, editor:new YAHOO.ext.grid.CheckboxEditor(), renderer:renderBool}
            ]);
            
            
    In gridview.js
            var htemplate = dh.createTemplate({
               tag: 'span', cls: 'ygrid-hd ygrid-header-{0}', children: [{
                    tag: 'span',
                    cls: 'ygrid-hd-body',
                    html: '<table>' +
                          '<tbody><tr><td><span>{1}</span></td>' +
                          '<td><span></span><span></span></td>' +
                          '</tr></tbody></table>'
               }]
            });
            htemplate.compile();
            for(var i = 0; i < colCount; i++){
                var hd = htemplate.append(hrow, [i, colModel.getColumnHeader(i), colModel.getColumnTooltip(i)]);
                var spans = hd.getElementsByTagName('span');
                hd.textNode = spans[1];
                hd.sortDesc = spans[2];
                
                
    in DefaultColumnModel.js
            /**
             * Returns the tooltip for the specified column.
             * @param {Number} col The column index
             * @return {String}
             */
            getColumnTooltip : function(col){
                    return this.config[col].tooltip;
            },
            /**
             * Sets the tooltip for a column.
             * @param {Number} col The column index
             * @param {String} tooltip The new tooltip
             */
            setColumnTooltip : function(col, header){
                    this.config[col].tooltip = tooltip;
                    //this.onTooltipChange.fireDirect(this, col, tooltip);  // TODO-maybe:
            },

  2. #2
    Sencha User jack.slocum's Avatar
    Join Date
    Mar 2007
    Location
    Tampa, FL
    Posts
    6,955
    Vote Rating
    17
    jack.slocum will become famous soon enough jack.slocum will become famous soon enough

      0  

    Default


    Great idea! It stripped your html attributes though. Can your repost it with Disable HTML checked?

  3. #3
    Sencha User
    Join Date
    Mar 2007
    Posts
    7,854
    Vote Rating
    4
    tryanDLS is on a distinguished road

      0  

    Default


    Let's try this way.
    Code:
    cm = new YAHOO.ext.grid.DefaultColumnModel(
            [{header:'Index', hidden:true /*width:50*/},
     	 {header:'Name', width: 90, tooltip:'Click to sort'},
             {header:'Code', width: 50},
             {header:'Viewable', width:65, editor:new YAHOO.ext.grid.CheckboxEditor(), renderer:renderBool}
            ]);
            
            
    In gridview.js
            var htemplate = dh.createTemplate({
               tag: 'span', cls: 'ygrid-hd ygrid-header-{0}', children: [{
                    tag: 'span',
                    cls: 'ygrid-hd-body',
                    html: '<table border="0" cellpadding="0" cellspacing="0" title="{2}">' +
                          '<tbody><tr><td><span>{1}</span></td>' +
                          '<td><span class="sort-desc"></span><span class="sort-asc"></span></td>' +
                          '</tr></tbody></table>'
               }]
            });
            htemplate.compile();
            for(var i = 0; i < colCount; i++){
                var hd = htemplate.append(hrow, [i, colModel.getColumnHeader(i), colModel.getColumnTooltip(i) ]);
                var spans = hd.getElementsByTagName('span');
                hd.textNode = spans[1];
                hd.sortDesc = spans[2];
                
                
    in DefaultColumnModel.js
            /**
             * Returns the tooltip for the specified column.
             * @param {Number} col The column index
             * @return {String}
             */
            getColumnTooltip : function(col){
                    return this.config[col].tooltip;
            },
            /**
             * Sets the tooltip for a column.
             * @param {Number} col The column index
             * @param {String} tooltip The new tooltip
             */
            setColumnTooltip : function(col, header){
                    this.config[col].tooltip = tooltip;
                    //this.onTooltipChange.fireDirect(this, col, tooltip);  // TODO-maybe:
            },

  4. #4
    Sencha User jack.slocum's Avatar
    Join Date
    Mar 2007
    Location
    Tampa, FL
    Posts
    6,955
    Vote Rating
    17
    jack.slocum will become famous soon enough jack.slocum will become famous soon enough

      0  

    Default


    I put it in, my only change was:

    var hd = htemplate.append(hrow, [i, colModel.getColumnHeader(i), colModel.getColumnTooltip(i) || '']);

    This way if it's undefined there won't be any 'undefined' tooltips (DomHelper may correct this already though).

  5. #5
    Sencha User
    Join Date
    Mar 2007
    Posts
    7,854
    Vote Rating
    4
    tryanDLS is on a distinguished road

      0  

    Default


    Must be getting handled, cuz my sample only set a tooltip on one of the cols. That brings up another thought. Have you considered doing more complex stuff with the template code? For example in this case being able to do a null check within the append logic to eliminate the creation of the templated item, in this case 'title="""'? That might have to be on a parm-by-parm basis - maybe not worth the complication.

  6. #6
    Sencha User jack.slocum's Avatar
    Join Date
    Mar 2007
    Location
    Tampa, FL
    Posts
    6,955
    Vote Rating
    17
    jack.slocum will become famous soon enough jack.slocum will become famous soon enough

      0  

    Default


    Yes, I want to do more with the templates. The more I use them, the more features I want. I'm sure it will be coming soon.

  7. #7
    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


    One great thing with templates would be to allow actual HTMLelements/Elements in config objects:

    As a trivial example (You'd use .wrap() in this case if you didn't want a footer):

    [code]
    YAHOO.ext.DomHelper.append(document.body,
    {
    tag:"div",
    cls:"ydlg",
    children: [ { tag:"div", cls:"ydlg-hd" }, elementToUseAsBody...]
    });

    How could you detect whether an property of a config object was an element or a config object? Perhaps if it doesn't have a "tag" property, then it's a String/HTMLElement/Element to be inserted at that point.

  8. #8
    Sencha User jack.slocum's Avatar
    Join Date
    Mar 2007
    Location
    Tampa, FL
    Posts
    6,955
    Vote Rating
    17
    jack.slocum will become famous soon enough jack.slocum will become famous soon enough

      0  

    Default


    The problem is in standard mode it builds a monster string out of parent+children and inserts them all at once. There's no node by node insertion so inserting a particular node at a particular point would be very tricky.

Similar Threads

  1. Hide Grid Header
    By aconran in forum Ext 1.x: Help & Discussion
    Replies: 15
    Last Post: 29 Aug 2013, 10:02 PM
  2. Tooltips on text-only buttons?
    By fecund in forum Ext 2.x: Help & Discussion
    Replies: 4
    Last Post: 10 Mar 2007, 6:52 AM

Thread Participants: 2