如何在带有模板列的 extjs 网格中删除网格行之间的 space？

Question

在带有模板列的 extjs 网格中的两行之间更改 space 的正确选择器是什么？

当模板列中的行内容高度不同时，行与行之间会出现一些额外的space。

如何使行之间的实际 space 相同？我一直在 inspector 中寻找适合那个额外 space 的选择器，但我找不到。

var store = Ext.create('Ext.data.Store', {
    fields: [
    {
        name: 'name1',
        type: 'string'
    }, {
        name: 'name2',
        type: 'string'
    }],


    data: [
        {
            name1: 'John',
            name2: 'Smith',
        },
        {
            name1: '',
            name2: '',
        },
        {
            name1: 'Homer',
            name2: 'Simson',
        },        
    ],
});


Ext.create('Ext.Container', {
    renderTo: Ext.getBody(),
    height: 700,
    items: [
        {
            xtype: 'grid',
            cls: 'grid',
            //rowLines: false,
            height: 700,
            store: store,
            columns: [
                {
                        text: '',
                        xtype: 'templatecolumn',
                        cell: {
                            encodeHtml: false
                        },              
                        tpl: new Ext.XTemplate(
                            '<div class="grid-box">',
                            '<div class="name">{name1}</div>',
                            '<div class="name">{name2}</div>',
                            '</div>',
                        ),
                        flex: 1
                }
            ]
        }
    ]
});

CSS

.grid .x-show-selection > .x-listitem.x-selected {
    background-color: pink;
}

.grid .x-show-selection > .x-listitem.x-selected {
    background-color: pink;
}

.grid .x-listitem {
    background-color: #a9f1ad;
}

.grid-box {
    background: #fff;
    border: 1px solid #cbd2d6;
    padding: 15px;
    height: 100%;
}

.grid .x-gridcell-body-el {
    padding: 5px 0px 5px 10px;
}

.name {
    font-size:22px;
    line-height:22px;
}

Answer 1

在您的 CSS 中设置最小高度：

.name {
    font-size: 22px;
    line-height: 22px;
    min-height: 22px; 
}

如何在带有模板列的 extjs 网格中删除网格行之间的 space？

How to remove space between grid rows in extjs grid with template column?

css

extjs

css-grid