ExtJS property grid colour

Question

How do I add a background colour to a property grid?

I've tried:

tdCls: 'red',

in my config but it doesn't do anything.

My full config is:

 xtype:'propertygrid',

        width: 80,
        header: false,
        title: 'prop grid',
        //for some reason the headers are not hiding, we may need to deal with this using CSS
        //hideHeaders: true,
        enableColumnResize: false,
        sortableColumns: false,
        nameColumnWidth: 1,
        source: record.data,
        sourceConfig: {

            periodScrumMaster: {
                editor: Ext.create('Ext.form.ComboBox', {
                    tdCls: 'red',
                    store: team,
                    queryMode: 'local',
                    displayField: 'personName',
                    valueField: 'personName',

                    listeners: {
                        'expand' : function(combo) {
                            var gridvalues = this.up('propertygrid').getSource();
                            combo.getStore().clearFilter(true);
                            combo.getStore().addFilter({property: 'teamName', value: teamName});
                            combo.getStore().addFilter({property: 'periodName', value: gridvalues.periodName});
                            var totalFTE = team.count();
                            console.log(totalFTE);
                            var teamStore = Ext.getStore('personPeriods');
                            console.log('store');
                            console.log(teamStore);
                        },
                    }}),
                displayName: 'Scrum Master'
            },

Greendrake Greendrake · Accepted Answer · 2015-06-29T12:58:11

tdCls on the editor will not work because it needs to be specified on columns, and propertygrid's columns (and their CSS classes) are hard coded in Ext.grid.property.HeaderContainer.

You still can apply your styles by adding them to the CSS classes already used on propertygrid. They are x-grid-property-name and x-grid-cell-value (can be seen in any DOM inspector). Example: https://fiddle.jshell.net/d4gka7aj/

ExtJS property grid colour

1 Answers