egg
egg

Reputation: 1756

Extjs: How do you add/remove a class for a specific cell?

Disclaimer: I am completely new to Extjs.

I have a select listener on a ComboBox. Once selected I can set a different cell's value:

'select': function (combo, records, Opts) {
    e.record.set('value', 'hello world'); //set text for the "value" cell
    ....

The challenge is that I may need to add or remove a class for that cell. I'm having trouble locating in the Sencha Docs how to select or manipulate a cell beyond setting the value. One possibility is to use a custom renderer on the column, but this isn't working as expected (except that the text/value sets correctly). Idea taken from: http://snipplr.com/view/40942/

        ,renderer: function (value, meta, record, rowIndex, colIndex, store) {
            meta.css += ' rw-no-edit';
            return 'hello again';

What is the best way of both adding and removing a class for a specific column on a record?

Upvotes: 0

Views: 9273

Answers (2)

egg
egg

Reputation: 1756

Working solution:

        ,renderer: function (value, meta, record, rowIndex, colIndex, store) {
            var numberOfEditFields = K.kreports.whereOperators.bh(record.get('operator'), record.get('type'));
            if (!K.kreports.EditView) {
                if (record.get('usereditable') == 'yo1' || record.get('usereditable') == 'yo2') numberOfEditFields = 0;
            }

            //de-emphasize cells that are not needed
            var base_css = 'x-grid-cell x-grid-cell-value';
            meta.tdCls = base_css;
            if(numberOfEditFields === 0) {
                meta.tdCls = base_css+' rw-no-edit'; 
            }

            return value;
        }

Upvotes: 0

dbrin
dbrin

Reputation: 15673

The best grid style guide I have seen so far is from skirtle :

http://skirtlesden.com/articles/styling-extjs-grid-cells

I think custom renderer is the way to go for you. Be careful to return the actual value not a 'hello world' string.

Upvotes: 8

Related Questions