CODEWITHSUNDEEP
javascriptextjsextjs4
user2622564
user2622564

Reputation: 63

Create Extjs 4 grid actioncolumn 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?

Upvotes: 6

Views: 9954

Answers (1)

rixo
rixo

Reputation: 25001

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.

Upvotes: 13

Related Questions