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

      0  

    Default DataTip - show a complex tooltip based upon node's attributes or Record's data.

    DataTip - show a complex tooltip based upon node's attributes or Record's data.


    Code:
    /**
     * @class Ext.ux.DataTip
     * @extends Ext.ToolTip.
     * <p>This plugin implements automatic tooltip generation for an arbitrary number of child nodes <i>within</i> a Component.</p>
     * <p>This plugin is applied to a high level Component, which contains repeating elements, and depending on the host Component type,
     * it automatically selects a {@link Ext.ToolTip#delegate delegate} so that it appears when the mouse enters a sub-element.</p>
     * <p>When applied to a GridPanel, this ToolTip appears when over a row, and the Record's data is applied
     * using this object's {@link Ext.Component#tpl tpl} template.</p>
     * <p>When applied to a DataView, this ToolTip appears when over a view node, and the Record's data is applied
     * using this object's {@link Ext.Component#tpl tpl} template.</p>
     * <p>When applied to a TreePanel, this ToolTip appears when over a tree node, and the Node's {@link Ext.tree.TreeNode#attributes attributes} are applied
     * using this object's {@link Ext.Component#tpl tpl} template.</p>
     * <p>When applied to a FormPanel, this ToolTip appears when over a Field, and the Field's <code>tooltip</code> property is used is applied
     * using this object's {@link Ext.Component#tpl tpl} template, or if it is a string, used as HTML content.</p>
     * <p>If more complex logic is needed to determine content, then the {@link Ext.Component#beforeshow beforeshow} event may be used.<p>
     * <p>This class also publishes a <b><code>beforeshowtip</code></b> event through its host Component. The <i>host Component</i> fires the
     * <b><code>beforeshowtip</code></b> event.
     */
    Ext.ux.DataTip = Ext.extend(Ext.ToolTip, (function() {
    
    //  Target the body (if the host is a Panel), or, if there is no body, the main Element.
        function onHostRender() {
            var e = this.body || this.el;
            if (this.dataTip.renderToTarget) {
                this.dataTip.render(e);
            }
            this.dataTip.initTarget(e);
        }
    
        function updateTip(tip, data) {
            if (tip.rendered) {
                tip.update(data);
            } else {
                if (Ext.isString(data)) {
                    tip.html = data;
                } else {
                    tip.data = data;
                }
            }
        }
        
        function beforeTreeTipShow(tip) {
            var e = Ext.fly(tip.triggerElement).findParent('div.x-tree-node-el', null, true),
                node = e ? tip.host.getNodeById(e.getAttribute('tree-node-id', 'ext')) : null;
            if(node){
                updateTip(tip, node.attributes);
            } else {
                return false;
            }
        }
    
        function beforeGridTipShow(tip) {
            var rec = this.host.getStore().getAt(this.host.getView().findRowIndex(tip.triggerElement));
            if (rec){
                updateTip(tip, rec.data);
            } else {
                return false;
            }
        }
    
        function beforeViewTipShow(tip) {
            var rec = this.host.getRecord(tip.triggerElement);
            if (rec){
                updateTip(tip, rec.data);
            } else {
                return false;
            }
        }
    
        function beforeFormTipShow(tip) {
            var el = Ext.fly(tip.triggerElement).child('input,textarea'),
                field = el ? this.host.getForm().findField(el.id) : null;
            if (field && (field.tooltip || tip.tpl)){
                updateTip(tip, field.tooltip || field);
            } else {
                return false;
            }
        }
    
        function beforeComboTipShow(tip) {
            var rec = this.host.store.getAt(this.host.selectedIndex);
            if (rec){
                updateTip(tip, rec.data);
            } else {
                return false;
            }
        }
    
        return {
            init: function(host) {
                host.dataTip = this;
                this.host = host;
                if (host instanceof Ext.tree.TreePanel) {
                    this.delegate = this.delegate || 'div.x-tree-node-el';
                    this.on('beforeshow', beforeTreeTipShow);
                } else if (host instanceof Ext.grid.GridPanel) {
                    this.delegate = this.delegate || host.getView().rowSelector;
                    this.on('beforeshow', beforeGridTipShow);
                } else if (host instanceof Ext.DataView) {
                    this.delegate = this.delegate || host.itemSelector;
                    this.on('beforeshow', beforeViewTipShow);
                } else if (host instanceof Ext.FormPanel) {
                    this.delegate = 'div.x-form-item';
                    this.on('beforeshow', beforeFormTipShow);
                } else if (host instanceof Ext.form.ComboBox) {
                    this.delegate = this.delegate || host.itemSelector;
                    this.on('beforeshow', beforeComboTipShow);
                }
                if (host.rendered) {
                    onHostRender.call(host);
                } else {
                    host.onRender = host.onRender.createSequence(onHostRender);
                }
            }
        };
    })());
    Then just configure a Tree with an instance as a plugin. Provide a tpl which uses node attribute values.

    Code:
        plugins: new Ext.ux.DataTip({
            tpl: '<div class="whatever">{attributeName}</div>'
        })
    Or configure a DataView or GridPanel with an instance as a plugin, and the tpl will use the Record the mouse is over as a data source.

  2. #2
    Sencha User steffenk's Avatar
    Join Date
    Jul 2007
    Location
    Haan, Germany
    Posts
    2,664
    Vote Rating
    7
    steffenk has a spectacular aura about steffenk has a spectacular aura about steffenk has a spectacular aura about

      0  

    Default


    Cool, thx for this!

    It should be easy to adapt this to other components as well (grid etc)
    vg Steffen
    --------------------------------------
    Release Manager of TYPO3 4.5

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

      0  

    Default


    Done. Post #1 updated. It works for TreePanel, GridPanel and DataView (ListView is a DataView, so it will work for that too)

  4. #4
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    16,997
    Vote Rating
    649
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    As always, useful and cool.
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

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

      0  

    Default


    Update. This can be configured into any Component now. It just won't self-update unless it is a data-backed Component.

    The Component will fire "tip" + event names to pass on the events.

    So you would subscribe to the "beforeshowtip" event to poke in any kind of complex data you like.

  6. #6
    Sencha User
    Join Date
    Jul 2009
    Location
    The Netherlands
    Posts
    196
    Vote Rating
    0
    nicobarten is an unknown quantity at this point

      0  

    Default


    Thanks! Very useful for my ListView.

    Just a question. On some website (can't show it because you need a password) i saw also a kind of grid or list, and when i hovered my mouse over an item (let's say for a few seconds), it showed a 'loading'-image next to the item, and after it was loaded it showed a big tooltip.

    So, with this DataTip i get the information i want out of the ListView's store. Is there also a way like the method i described above to get specific information of the hovered item out of the database only when the mouseenter (or hover, whatever) gets called?

    So i have a ListView's store with 2 columns, 'ID' and 'Name'. Now when i hover over an item in the list, can i make it so that it gets data like 'birthday, address, etc' out of the database for the item's ID and shows it in the DataTip?

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

      0  

    Default


    Wouldn't it be a waste making a little Ajax call on every mouseover? Just have the data in the Record ready to go.

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

      0  

    Default


    It works for FormPanels too now. You can configure input fields with tooltip: 'Some text to display'

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

      0  

    Default


    Works for Combooxes now. Displays details pulled from the selected Record/

  10. #10
    Sencha User
    Join Date
    Dec 2008
    Location
    France
    Posts
    244
    Vote Rating
    0
    senacle is on a distinguished road

      0  

    Default Bug under FF and IE with Ext 3.2RC1

    Bug under FF and IE with Ext 3.2RC1


    Hello,

    Here's the description of the bug.

    Ext version tested:
    • Ext 3.2RC1

    Adapter used:
    • ext

    css used:
    • only default ext-all.css
    • custom css (include details)



    Browser versions tested against:
    • IE6
    • IE7
    • IE8
    • FF3 (firebug 1.5.3 installed)

    Operating System:
    • WinXP Pro

    Description:
    Steps to reproduce the problem:
    • Pass the mouse over a field without tooltip ==> Bug
    • Then pass the mouse over a field with a tooltip
    • Last pass the mouse over a field without a tooltip ==> No more bug

    The result that was expected:
    • No error message

    The result that occurs instead:
    • Under FF : this.body is undefined
      var bw = this.body.getTextWidth();
      ext-all-debug.js (ligne 48221)

      Under IE : this.body is null or not an object
      ext-all-debug.js (ligne 48221)