时间戳

首页 > 解决方案 > ExtJs表格布局边框丢失和单元格颜色

javascript - ExtJs表格布局边框丢失和单元格颜色

问题描述

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

  1. 带有组合框的单元格缺少边框。
  2. 我想将整个单元格背景设置为红色。不仅仅是其中的一部分。

请看这个小提琴以获得更好的解释。

标签： javascriptextjs

解决方案

因为border您需要使用配置tdAttrs并更改您需要使用的特定单元格的背景颜色cellCls

在这个 Fiddle中，我使用您的代码创建了一个演示，并使用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'
        }]
    }]
});

CSS 代码

<style>
    .demo {
        background: red;
    }

    .noborder {
        border: 0px !important;
    }

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

</style>

推荐阅读