Javascript ExtJs表格布局缺少边框和单元格颜色

我试图在ExtJs中设计一个简单的风险评估矩阵，但面临两个问题

包含组合框的单元格缺少边框

我想将整个单元格背景设置为红色。不仅仅是其中的一部分

---

请查看此内容以获得更好的解释。

对于

边框

，您需要使用配置并更改需要使用的特定单元格的背景颜色

在中，我使用您的代码创建了一个演示，并使用了

tdAttrs

和

cellCls

代码片段

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'
        }]
    }]
});

Ext.create（'Ext.TabPanel'{
名称：“myContainer”，
id:“myContainer”，
renderTo:Ext.getBody（），
项目：[{
标题：“评估”，
名称：“评估小组”，
id:“评估小组”，
布局：{
键入：“表”，
TDATTR：{
风格：{
边框：“1px实心#ccc”
}
},
//必须在此处指定列总数
栏目：5
},
默认值：{
//应用于每个包含的面板
车身风格：“衬垫：30px”，
html:“风险”，
卷轴：错，
//边界：对
//边距：“0 15 0”
},
项目：[{
html:“风险”，
//cellCls:“第一行”，
听众：{
afterrender:函数（视图）{
log（'view config entered！！'）；
//this.up（'view'）.addCls（'first-row'）；
//view.addCls（“第一行”）；
}
}
}, {
html:“结果”
}, {
html:“可能性”
}, {
宽度：20，
cellCls:“noborder”
}, {
html:“风险”
}, {
html:“服务中断”
}, {
xtype:“组合框”，
名称：“评估1”，
id:'评估1'，
cellCls:'演示'，
queryMode:'本地'，
显示字段：“文本”，
valueField:'值'，
可编辑：false，
cls:“bg trasparent”，
值：“红色”，
存储：Ext.create（'Ext.data.store'{
数据：[{
文字：“红色”，
值：“红色”
}, {
文本：“灰色”，
值：“灰色”
}, {
文本：“绿色”，
值：“绿色”
}, {
文本：“黄色”，
值：“黄色”
}, {
文本：“蓝色”，
值：“蓝色”
}]
}),
听众：{
选择：函数（组合、记录）{
combo.el.dom.closest（'td'）.style.background=record.get（'value'））
}
}
}, {
html:“单元格F内容”
}, {
宽度：20，
cellCls:“noborder”
}, {
html:“单元格F内容”
}, {
html:“收入增长”
}, {
xtype:“组合框”，
名称：“评估2”，
id:“评估2”，
值：'Minor'，
宽度：130，
queryMode:'本地'，
显示字段：“文本”，
valueField:'值'，
可编辑：false，
存储：Ext.create（'Ext.data.store'{
数据：[{
文字：“小调”，
值：“未成年人”
}, {
正文：“中等”，
价值：“中等”
}, {
课文：'少校'，
价值：“主要”
}, {
文字：“严重”，
值：“严重”
}]
})
}, {
html:“单元格F内容”
}, {
宽度：20，
cellCls:“noborder”
}, {
html:“单元格F内容”
}, {
html:“声誉”
}, {
xtype:“组合框”，
名称：“评估3”，
id:‘评估3’，
值：'Minor'，
宽度：130，
queryMode:'本地'，
显示字段：“文本”，
valueField:'值'，
可编辑：false，
存储：Ext.create（'Ext.data.store'{
数据：[{
文字：“小调”，
值：“未成年人”
}, {
正文：“中等”，
价值：“中等”
}, {
课文：'少校'，
价值：“主要”
}, {
文字：“严重”，
值：“严重”
}]
})
}, {
html:“单元格F内容”
}, {
宽度：20，
cellCls:“noborder”
}, {
html:“单元格F内容”
}, {
html:“法律与合规”
}, {
xtype:“组合框”，
名称：“评估4”，
id:‘评估4’，
值：'Minor'，
宽度：130，
queryMode:'本地'，
显示字段：“文本”，
valueField:'值'，
可编辑：false，
存储：Ext.create（'Ext.data.store'{
数据：[{
文字：“小调”，
值：“未成年人”
}, {
正文：“中等”，
价值：“中等”
}, {
课文：'少校'，
价值：“主要”
}, {
文字：“严重”，
值：“严重”
}]
})
}, {
html:“单元格F内容”
}, {
宽度：20，
cellCls:“noborder”
}, {
html:
<style>
    .demo {
        background: red;
    }

    .noborder {
        border: 0px !important;
    }

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

</style>