1. #1
    Sencha User Ronaldo's Avatar
    Join Date
    Jul 2007
    Location
    Enschede, The Netherlands
    Posts
    290
    Vote Rating
    0
    Ronaldo is on a distinguished road

      0  

    Default Tooltip in grid

    Tooltip in grid


    Hi,

    I'm testing the 4.1 beta release and I'm having some problems with the tooltip for a cell in a grid.

    Code:
    onViewAfterRender: function(view) {
            view.tip = Ext.create('Ext.tip.ToolTip', {
                target: view.el,
                delegate: '.x-grid-cell-inner',
                trackMouse: true,
                renderTo: Ext.getBody(),
                listeners: {
                    beforeshow: function updateTipBody(tip) {
                        var rowEl = Ext.get(tip.triggerElement).findParentNode('.x-grid-row');
                        var record = view.view.getRecord(rowEl);
                        tip.update('ID "' + record.data.ID);
                    }
                }
            });
        },
    I managed to find the record, but how can I find the column (or the field that's displayed in the column)?
    Most documentation I find tells about a tip.triggerElement.cellIndex but that property seems to have vanished... ?

    Best regards,
    Ronald
    Ronald van Raaphorst aka Ronaldo
    I'm a freelance software developer in Java, PHP, and ExtJs.


    Skyperonald_twensoc
    Mailinfo@twensoc.nl

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,756
    Vote Rating
    828
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      1  

    Default


    I would use a renderer on the column:

    Code:
    {
        header : 'Company',
        dataIndex : 'company',
        renderer : function(val, meta, record) {
            meta.tdAttr = 'data-qtip="Some String"';
    
            return val;
        }
    }
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User Ronaldo's Avatar
    Join Date
    Jul 2007
    Location
    Enschede, The Netherlands
    Posts
    290
    Vote Rating
    0
    Ronaldo is on a distinguished road

      0  

    Default


    Hi Mitchell,

    Thx for your quick response!

    What I'm trying to do is to give a field based tooltip for an edit-in-place grid, where I want to display an error message containing the reason that the record could not be saved.
    Saving the record is a batch action, I can edit the complete grid and then save it in one action.
    I'm returning an array of errors for every record, pointing out on a per-field basis what's wrong. Records that are ok are saved, for records that can not be saved this array is returned.
    I'm writing this as a plugin, so it can be used for any grid.

    To display the error, I need the record and the field (or fieldname, or the cell) that the mouse is hovering.
    With your solution, I'd have to add a renderer to every column in every grid.

    AFAIK, there used to be a tip.triggerElement.cellIndex property but that has vanished.

    And I think I remember a method on the view that allowed you to find a cell based on the XY coordinates (so based on tip.triggerElement.targetXY I could find the row and column) but I can't find that anymore.

    Anyway, I managed to get it working like this:

    Code:
    Ext.define('Twensoc.grid.plugin.BatchErrorGridPlugin', {
        extend: 'Ext.AbstractPlugin',
        alias: 'plugin.batcherrorgridplugin',
        uses: [ ],
        init : function(grid) {
            this.grid = grid;
            grid.store.on('write', this.onWrite, this);
            grid.on('render', this.onViewRender, this);
        },
        destroy: function() {
            this.grid.store.un('write', this.onWrite, this);
            this.grid.store.un('render', this.onViewRender, this);
            delete(this.grid);
        },
        onWrite: function(store, o, opts) {
            var r = Ext.JSON.decode(o.response.responseText), errs=r.errors;
            if(errs) {
                // Process errs and save them in the record
            }
        },
        onViewRender: function(view) {
            view.tip = Ext.create('Ext.tip.ToolTip', {
                target: view.el,
                delegate: '.x-grid-cell',
                trackMouse: true,
                renderTo: Ext.getBody(),
                listeners: {
                    scope: this.grid,
                    beforeshow: function updateTipBody(tip) {
    // Find the row/record
                        var tE = tip.triggerElement, 
                            record = this.view.getRecord(Ext.fly(tE).findParentNode('.x-grid-row'));
    // Find the colum index by finding the triggerElement's 'indexOf' based on
    // it's position under its parent Element
                        var i = 0, cols = Ext.DomQuery.select('.x-grid-cell', tE.parentElement);
                        while(i<cols.length) {
                            if(cols[i] === tE) {
                                var dataIndex = this.view.getHeaderAtIndex(i).dataIndex;
                                tip.update('Over '+dataIndex+' containing '+record.data[dataIndex]);
                                break;
                            }
                                i++;
                        }
                    }
                }
            });
        }
    });
    And that gives me the dataIndex and thus the value of the record field in the tooltip. It's a bit of ugly solution, but it's also good enough for now.

    Best regards,
    Ronald
    Ronald van Raaphorst aka Ronaldo
    I'm a freelance software developer in Java, PHP, and ExtJs.


    Skyperonald_twensoc
    Mailinfo@twensoc.nl

Thread Participants: 1

Tags for this Thread

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi