Page 1 of 5 123 ... LastLast
Results 1 to 10 of 43

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

  1. #1
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Redwood City
    Posts
    30,626
    Vote Rating
    56
      0  

    Default 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.
    Longtime Sencha geek. Outspoken advocate of pure Javascript Views. Posts my own opinions.

  2. #2
    Sencha Premium Member steffenk's Avatar
    Join Date
    Jul 2007
    Location
    Haan, Germany
    Posts
    2,676
    Vote Rating
    9
      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
    Bédoin/Redwood City
    Posts
    30,626
    Vote Rating
    56
      0  

    Default

    Done. Post #1 updated. It works for TreePanel, GridPanel and DataView (ListView is a DataView, so it will work for that too)
    Longtime Sencha geek. Outspoken advocate of pure Javascript Views. Posts my own opinions.

  4. #4
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    18,814
    Vote Rating
    904
      0  

    Default

    As always, useful and cool.
    Evan Trimboli
    Twitter - @evantrimboli

  5. #5
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Redwood City
    Posts
    30,626
    Vote Rating
    56
      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.
    Longtime Sencha geek. Outspoken advocate of pure Javascript Views. Posts my own opinions.

  6. #6
    Sencha User
    Join Date
    Jul 2009
    Location
    The Netherlands
    Posts
    196
    Vote Rating
    0
      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
    Bédoin/Redwood City
    Posts
    30,626
    Vote Rating
    56
      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.
    Longtime Sencha geek. Outspoken advocate of pure Javascript Views. Posts my own opinions.

  8. #8
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Redwood City
    Posts
    30,626
    Vote Rating
    56
      0  

    Default

    It works for FormPanels too now. You can configure input fields with tooltip: 'Some text to display'
    Longtime Sencha geek. Outspoken advocate of pure Javascript Views. Posts my own opinions.

  9. #9
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Redwood City
    Posts
    30,626
    Vote Rating
    56
      0  

    Default

    Works for Combooxes now. Displays details pulled from the selected Record/
    Longtime Sencha geek. Outspoken advocate of pure Javascript Views. Posts my own opinions.

  10. #10
    Sencha User
    Join Date
    Dec 2008
    Location
    France
    Posts
    248
    Vote Rating
    0
      0  

    Default 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)

Page 1 of 5 123 ... LastLast

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •