Create Extjs 4 grid actioncolumn with text?

Question

how to create ExtJs 4 grid action column with text? this is my code

{
    xtype : 'actioncolumn',
    text : lang('publish'),
    width    : 100,
    tdCls: 'x-publish-cell',
    items : [{
         getClass : function(v, meta, rec) {
             if (rec.get('isPublished') == true) {
                 //this.items[0].tooltip = 'Test';
                 return 'y';
             } else {
                 return 'n';
             }
         }
     }

How to create ExtJs 4 grid action column with text?

Answer 1

You can use the column's renderer. The trick is that Ext specifically hide a CSS rule to hide content of action columns:

.x-grid-cell-inner-action-col {
    line-height: 0;
    font-size: 0;
}

So you will have to compensate for that.

Example:

{
    xtype:'actioncolumn',
    renderer: function() {
        return 
            '<div style="float:right; font-size: 13px; line-height: 1em;">'
                + 'Hey!' 
            + '</div>'
    },
    items: [
        // ...
    ]
}

Here I've used inline style, but a custom CSS class would probably be better.

Now that allows you to add some text to the column. If what you want to achieve is to add some text per action item in the column, you'll have to override Ext.grid.column.Action#defaultRenderer.