Create Extjs 4 grid actioncolumn with text?

Question

How to create an ExtJs 4 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 an ExtJs 4 action column with text?

Answer 1

You can use the renderer column. The trick is that Ext specifically hides the CSS rule to hide the contents of the action columns:

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

So you have to make up for it.

Example:

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

I used the inline style here, but a custom CSS class would probably be better.

Now you can add text to the column. If what you want to achieve is to add text to the action element in the column, you will have to override Ext.grid.column.Action#defaultRenderer .