3

I am trying to design a simple risk assessment matrix in ExtJs but facing two problems.

  1. border is missing for the cells with combobox in it.
  2. I want to set the whole cell background red. not just a part of it.

Please look at this fiddle for better explanation.

2
  • can you explain this whole cell background red ? May 18, 2018 at 19:04
  • If you have a look at the fiddle only the text part of the cell's background is changed to red. I want the whole cell to be red May 18, 2018 at 19:06

1 Answer 1

5

For border you need to use config tdAttrs and for change background color of particular cell you need to use cellCls

In this Fiddle, I have created a demo using your code and used tdAttrs and cellCls.

CODE SNIPPET

Ext.create('Ext.TabPanel', {

    name: 'myContainer',
    id: 'myContainer',

    renderTo: Ext.getBody(),
    items: [{
        title: 'Assessment',
        name: 'assessmentPanel',
        id: 'assessmentPanel',
        layout: {
            type: 'table',
            tdAttrs: {
                style: {
                    border: '1px solid #ccc'
                }
            },
            // The total column count must be specified here
            columns: 5
        },
        defaults: {
            // applied to each contained panel
            bodyStyle: 'padding:30px',
            html: 'Risk',
            scroll: false,
            //border: true

            //margin: '0 15 0 0'
        },
        items: [{
            html: '<font color="white">Risk</font>',
            //cellCls: 'first-row',
            listeners: {
                afterrender: function (view) {
                    console.log('view config entered!!');
                    //this.up('view').addCls('first-row');
                    //view.addCls('first-row');
                }
            }

        }, {
            html: '<b>Consequence</b>'
        }, {
            html: '<b>Likelihood</b>'
        }, {
            width: 20,
            cellCls: 'noborder'
        }, {
            html: '<b>Risk</b>'
        }, {
            html: '<b>Service Interruption</b>'
        }, {
            xtype: 'combobox',
            name: 'assessment1',
            id: 'assessment1',
            cellCls: 'demo',
            queryMode: 'local',
            displayField: 'text',
            valueField: 'value',
            editable: false,
            cls: 'bg-trasparent',
            value: 'red',
            store: Ext.create('Ext.data.Store', {
                data: [{
                    text: 'Red',
                    value: 'red'
                }, {
                    text: 'Gray',
                    value: 'gray'
                }, {
                    text: 'Green',
                    value: 'green'
                }, {
                    text: 'Yellow',
                    value: 'yellow'
                }, {
                    text: 'Blue',
                    value: 'blue'
                }]
            }),
            listeners: {
                select: function (combo, record) {
                    combo.el.dom.closest('td').style.background = record.get('value')
                }
            }
        }, {
            html: 'Cell F content'
        }, {
            width: 20,
            cellCls: 'noborder'
        }, {
            html: 'Cell F content'
        }, {
            html: '<b>Revenue Growth</b>'
        }, {
            xtype: 'combobox',
            name: 'assessment2',
            id: 'assessment2',
            value: 'Minor',
            width: 130,
            queryMode: 'local',
            displayField: 'text',
            valueField: 'value',
            editable: false,
            store: Ext.create('Ext.data.Store', {
                data: [{
                    text: 'Minor',
                    value: 'minor'
                }, {
                    text: 'Moderate',
                    value: 'moderate'
                }, {
                    text: 'Major',
                    value: 'major'
                }, {
                    text: 'Severe',
                    value: 'severe'
                }]
            })
        }, {
            html: 'Cell F content'
        }, {
            width: 20,
            cellCls: 'noborder'
        }, {
            html: 'Cell F content'
        }, {
            html: '<b>Reputation</b>'
        }, {
            xtype: 'combobox',
            name: 'assessment3',
            id: 'assessment3',
            value: 'Minor',
            width: 130,
            queryMode: 'local',
            displayField: 'text',
            valueField: 'value',
            editable: false,
            store: Ext.create('Ext.data.Store', {
                data: [{
                    text: 'Minor',
                    value: 'minor'
                }, {
                    text: 'Moderate',
                    value: 'moderate'
                }, {
                    text: 'Major',
                    value: 'major'
                }, {
                    text: 'Severe',
                    value: 'severe'
                }]
            })
        }, {
            html: 'Cell F content'
        }, {
            width: 20,
            cellCls: 'noborder'
        }, {
            html: 'Cell F content'
        }, {
            html: '<b>Legal and Compliance</b>'
        }, {
            xtype: 'combobox',
            name: 'assessment4',
            id: 'assessment4',
            value: 'Minor',
            width: 130,
            queryMode: 'local',
            displayField: 'text',
            valueField: 'value',
            editable: false,
            store: Ext.create('Ext.data.Store', {
                data: [{
                    text: 'Minor',
                    value: 'minor'
                }, {
                    text: 'Moderate',
                    value: 'moderate'
                }, {
                    text: 'Major',
                    value: 'major'
                }, {
                    text: 'Severe',
                    value: 'severe'
                }]
            })
        }, {
            html: 'Cell F content'
        }, {
            width: 20,
            cellCls: 'noborder'
        }, {
            html: 'Cell F content'
        }, {
            html: '<b>Capital Items</b>'
        }, {
            xtype: 'combobox',
            name: 'assessment5',
            id: 'assessment5',
            value: 'Minor',
            width: 130,
            queryMode: 'local',
            displayField: 'text',
            valueField: 'value',
            editable: false,
            store: Ext.create('Ext.data.Store', {
                data: [{
                    text: 'Minor',
                    value: 'minor'
                }, {
                    text: 'Moderate',
                    value: 'moderate'
                }, {
                    text: 'Major',
                    value: 'major'
                }, {
                    text: 'Severe',
                    value: 'severe'
                }]
            })
        }, {
            html: 'Cell F content'
        }, {
            width: 20,
            cellCls: 'noborder'
        }, {
            html: 'Cell F content'
        }, {
            html: '<b>Financial</b>'
        }, {
            xtype: 'combobox',
            name: 'assessment6',
            id: 'assessment6',
            value: 'Minor',
            width: 130,
            height: 5,
            queryMode: 'local',
            displayField: 'text',
            valueField: 'value',
            editable: false,
            store: Ext.create('Ext.data.Store', {
                data: [{
                    text: 'Minor',
                    value: 'minor'
                }, {
                    text: 'Moderate',
                    value: 'moderate'
                }, {
                    text: 'Major',
                    value: 'major'
                }, {
                    text: 'Severe',
                    value: 'severe'
                }]
            })
        }, {
            html: 'Cell F content'
        }, {
            width: 20,
            cellCls: 'noborder'

        }, {
            html: 'Cell F content'
        }, {
            height: 20,
            cellCls: 'noborder'
        }, {
            height: 20,
            cellCls: 'noborder'
        }, {
            height: 20,
            cellCls: 'noborder'
        }, {
            width: 20,
            height: 20,
            cellCls: 'noborder'
        }, {
            height: 20,
            cellCls: 'noborder'
        }, {
            html: '<b>Highest Risk</b>'
        }, {
            html: 'Minor'
        }, {
            html: 'Cell F content'

        }, {
            width: 20,
            cellCls: 'noborder'
        }, {
            html: 'Cell F content'
        }]
    }]
});

CSS CODE

<style>
    .demo {
        background: red;
    }

    .noborder {
        border: 0px !important;
    }

    .bg-trasparent input {
        background: transparent;
        color: #fff;
        font-weight: bold
    }

</style>
7
  • Hey @N.Jadhav is there any way I can get the combobox color go red too? May 18, 2018 at 20:49
  • And how can I change the color of the cell OnChange (from the listeneres change:). Thanks in advance May 18, 2018 at 22:11
  • You can do on change/select of combo-box using combo.el.dom.closest('td').style.background = record.get('value') . I have updated my answer. You can also check here FIDDLE. May 19, 2018 at 7:01
  • Hey Jadhav Thank you so much. you are a really big help. Is there any way I can get the combobox colored too? I mean it looks odd when the background is red and a white rectangle combobox. Red background and red combobox would look good. Thanks in advance May 22, 2018 at 18:42
  • @ShezRatnani yes you can do using background: transparent; for combo input cls. I have updated answer and FIDDLE as well. Please check. May 22, 2018 at 19:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.