1

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.

Community
  • 1
  • 1
  • Here is a [link to the complete solution](http://stackoverflow.com/a/20342401/177800) I came up with. –  Dec 03 '13 at 03:53

2 Answers2

4

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.

Community
  • 1
  • 1
rixo
  • 23,815
  • 4
  • 63
  • 68
  • so there is no way to do this from inside Sencha Architect, I don't what to have to re-edit a file every time I publish. –  Dec 02 '13 at 14:50
  • I've downloaded Architect eval and saw a "Create override" button. It didn't go as smoothly as I'd have tought, but I managed to make it work. See my updated answer. I guess there would be a lot of other ways to include this snippet (extend from `Ext.grid.column.Date` or override it to add support for tooltips, mixins, ...). – rixo Dec 02 '13 at 18:30
  • thanks I didn't expect you to go to that much effort, it is appreciated. I am experimenting with trying to get `plugin` to work, if I get it to work I will post that as an answer as well. –  Dec 02 '13 at 21:43
  • This is more heavy handed than I wanted, so I keep researching and another similar question lead me to coming up with [this solution](http://stackoverflow.com/a/20342401/177800). –  Dec 03 '13 at 03:54
  • Hey that's the first time that two of my answers unite to produce an offspring. Good job! Regarding Architect, I've been thinking of giving it a look for some time now. You're not the first one to ask how to adapt a solution for it, and I wanted to see for myself. – rixo Dec 04 '13 at 14:27
  • it is an awesome way to keep track of all the files and the ridiculous amount of properties and configs ... –  Dec 05 '13 at 02:12
-1

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!

Pankaj Landge
  • 14
  • 5