How to add tooltip to cell of a DateColumn in Sencha Architect 3?

Question

This is how I have it working with a Cell in a normal Column:

{
    xtype: 'gridcolumn',
    renderer: function(value, metaData, record, rowIndex, colIndex, store, view) {
        metaData.tdAttr = 'data-qtip="BlobKey:' + record.get('key') + '"';
        return value;
    },
    itemId: 'filename',
    dataIndex: 'filename',
    text: 'Filename',
    flex: 1
}

This works perfectly, but there is no renderer attribute on DateColumn and none of the suggested examples I have found on the internet work.

This is what my DateColumn definition looks like:

{
    xtype: 'datecolumn',
    itemId: 'created-on-column',
    dataIndex: 'createdOn',
    text: 'Created',
    format: 'c'
}

I can't figure out how to add a ToolTip to a cell in a DateColumn. There is no attribute in the Config panel of Sencha Architect 3.0 for renderer and all my attempts at trying to use the afterRender event or other suggestions from a couple of years ago all fail.

Answer 1

Actually, the date column class extends from the column class, so it does have a renderer. It is simply hidden from the doc, to ensure that the defaultRenderer will be used. That means you can use the same strategy to add your tooltip. You just need to ensure that your custom renderer will return the result of the default renderer to have the value formatted as usual.

Here's how this can be done:

{
    xtype: 'datecolumn',
    itemId: 'created-on-column',
    dataIndex: 'createdOn',
    text: 'Created',
    format: 'c',
    renderer: function(value, metaData, record, rowIndex, colIndex, store, view) {
        metaData.tdAttr = 'data-qtip="BlobKey:' + record.get('symbol') + '"';
        // Pass the call to the date column default renderer
        return Ext.grid.column.Date.prototype.defaultRenderer.apply(this, arguments);
    }
}

Update

In Architect, you can create an override. For example, using the project template "Basic > Master/Detail" (because there is a grid), this does the trick for me:

Ext.define('MyApp.view.override.MainView', {
    override: 'MyApp.view.MainView'
    
    ,initComponent: function() {
        this.callParent();

        var grid = this.down('gridcolumn[dataIndex=date]');
        
        Ext.override(grid, {
            renderer: function(value, metaData, record) {
                metaData.tdAttr = 'data-qtip="BlobKey:' + record.get('title') + '"';
                // Pass the call to the date column default renderer
                return this.callParent(arguments);
            }
        });
    }   
});

Surprisingly, I've had to add this class to the application's requires myself...

This put me on the right track to develop this as a plugin:

I am accepting this as the solution to give the rep to @rixo for going to so much trouble to help me, but I wanted to post the link to the actual solution he lead me to create. I added it to the answer because I am pretty sure it would get lost in the comments section.

Here is the link to the solution I devised based on inspiration from this answer, and another one.

Answer 2

you can try something like this if you are planning to show readonly cell::

{
                header:"Created"
               ,width:20, sortable:true
               ,renderer:yourrenderer // Ext.util.Format.dateRenderer('m/d/Y')
               ,dataIndex:'createdOn'
}

and in store::

store:new Ext.data.JsonStore({
                // other cofig params
                ,fields:[
                   // other columns
                   ,{name:'createdOn', type:'date', dateFormat:'n/j h:ia'}

                ]
            })

Hope this helps!