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?

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?

• javascript
• extjs
• extjs4

• You want it to be text with no image, or with an image? – Reimius Commented Jul 26, 2013 at 13:48
• text with an image. like [the image][the text here] – user2622564 Commented Jul 26, 2013 at 14:49

1 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 pensate 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.