Hybrid View

  1. #1
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,483
    Vote Rating
    35
    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,649
    Vote Rating
    6
    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,483
    Vote Rating
    35
    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,120
    Vote Rating
    508
    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,483
    Vote Rating
    35
    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
    194
    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?

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar