javascript - 如何在 Extjs 中的每个网格列内创建一个矩形？

Question

我有这个网格，我想使用 metadata.style 、tdCls 或CSS。我的问题是我不想为整个列(单元格)着色，我只想通过将它包裹在一个矩形中来为其内部的值着色，如果该列的值为empty 然后只显示一个空的矩形。 这是我希望每个列(单元格)在 Box 列 下看起来像的示例:

这是工作代码: FIDDLE

       switch(recordStatus) {
         case 'Checked-In':
            backgroundColor = "#B4B4D6";
            metadata.style = 'background-color: ' + backgroundColor + ';';
            return val; 
            break;
             ...
        }

提前致谢!

Answer 1

您需要从 renderer 中返回 html 方法并根据您的要求提供样式。

在这个 FIDDLE ，我已根据您的要求修改了您的代码中的一些更改。我希望它与您的要求相同。

JS代码

var data = Ext.decode('[{"box":"","name":"Brady, Marsha","status":"Checked-In"},{"box":"MA","name":"Dwight, Schrute","status":"With MA"},{"box":"MA","name":"Jim, Halpert","status":"With MA"},{"box":"MA","name":"Mike, Brown","status":"With MA"},{"box":"MA","name":"Steve, Smith","status":"With MA"},{"box":"MA","name":"Lori, Morrison","status":"With MA"},{"box":"MA","name":"Mary, Loson","status":"With MA"},{"box":"MA","name":"Junior, Meloni","status":"With MA"},{"box":"MA","name":"Jim, Halpert","status":"With MA"},{"box":"","name":"Kevin, Malone","status":"Checked-In"},{"box":"","name":"Angela, Martin","status":"Checked-In"},{"box":"2","name":"Jim, Halpert","status":"Ready for MA"},{"box":"2","name":"Kevin, Malone","status":"Ready for MA"},{"box":"2","name":"Angela, Martin","status":"Ready for MA"}]'),//Store Data
    //Create store
    store = Ext.create('Ext.data.Store', {
        fields: ['name', 'box', 'status'],
        data: data,
        groupField: 'status'
    }),
    //create grid
    grid = Ext.create('Ext.grid.Panel', {
        height: 450,
        frame: true,
        title: 'Sponsored Projects',
        iconCls: 'icon-grid',
        renderTo: document.body,
        store: store,
        features: [{
            ftype: 'grouping',
        }],
        columns: [{
            text: 'Box',
            renderer: function (val, metadata, record) {
                var recordStatus = record.get('status'),
                    style = 'border:1px solid #cccccc';
                if (val) {
                    switch (recordStatus) {
                    case 'Checked-In':
                        style = "background-color:#B4B4D6";
                        break;
                    case 'With MA':
                        style = "background-color:#CBC5EB";
                        break;
                    case 'Ready for MA':
                        style = "background-color:#E3E1ED";
                        break;
                    default:
                        style = '';
                    }
                }
                metadata.style = "text-align: center;";
                return `<div class="x-box-div" style="${style}">${val}</div>`
            },
            dataIndex: 'box',
            flex: 0.5
        }, {
            text: 'Name',
            renderer: function (value, metaData) {
                return value.replace(value, '<u><b>' + value.toUpperCase() + '</b></u>');
            },
            dataIndex: 'name',
            flex: 2
        }, {
            text: 'Status',
            dataIndex: 'status',
            flex: 1
        }]
    });

CSS 代码

<style>
    .x-box-div {
        min-width: 30px;
        min-height: 30px;
        text-align: center;
        display: inline-block;
        vertical-align: middle;
        padding: 10px 0;
        max-height: 30px;
    }

</style>