如何强制 EXTJS 中的数据视图项目保持相等的垂直 space？

Question

如何自定义 CSS 以强制数据视图（Ext.view.View - 经典工具包）项目在垂直方向上均匀分布。我有我想在两列中显示的数据视图，但项目的高度不同。我想在垂直方向上均匀分布它们。由于一张图片值一千个字，这是我得到的图片和我想要实现的图片：

因此，dataview 垂直对齐项目，但我希望项目 3 从项目 1 的正下方开始。基本上，我希望项目按顺序依次填充。我也想避免有两个数据视图（一个用于左侧，另一个用于右侧）。

这是我目前得到的：

EXTJS代码:

Ext.application({
    name: 'MyApp',

    launch: function() {
        Ext.define('myModel', {
            extend: 'Ext.data.Model',
            fields: [{
                name: 'field1',
                type: 'string'
            }]
        });

        var store = Ext.create('Ext.data.Store', {
            id: 'myStore',
            model: 'myModel',
            data: [{
                field1: '1. Some short text.'
            }, {
                field1: '2. A little bit longer text. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'
            },{
                field1: '3. This is the item number 3. It is supposed to be under the item number 1.'
            },{
                field1: '4. Item number 4'
            }, {
                field1: '5. Item number 5. When item number 3. shifts up, this item shoul also be just below item nummber 3.'
            },]
        });
        store.load();

        Ext.create('Ext.Panel', {
            frame: true,
            layout: 'fit',
            width: 535,
            height: 310,
            resizable: true,
            autoScroll: true,
            renderTo: document.body,
            title: 'MyPanel',
            items: Ext.create('Ext.view.View', {
                store: store,

                cls: 'my-view',
                itemCls: 'my-card',
                itemTpl: ['<div class="my-card-1">',
                            '{field1}',
                          '</div>'],
            })
        });
    }
});

CSS:

.my-view {
    background-color: #eeeeee;
}

.my-card {
    position: relative;
    display: block;
    padding: 5px;
    float: left;
    flex-direction:column;
    margin-bottom: 5px;
    margin-left: 10px;
    margin-right: 10px;
    background: #fff;
    width: calc(30vw);
    justify-content: space-evenly;
}


.my-card-1 {
    margin-right: 10px;
    font-size:12px;
}

结果对应图一

Answer 1

您可以使用列布局（或弹性布局）：

.my-view {
    background-color: #eeeeee;
    column-count: 2;
    column-width: 50%;
}

.my-card {
    position: relative;
    display: block;
    padding: 5px;
    float: left;
    flex-direction: column;
    margin-bottom: 5px;
    margin-left: 10px;
    margin-right: 10px;
    background: #fff;
    width: 100%;
    justify-content: space-evenly;
}

.my-card-1 {
    margin-right: 10px;
    font-size: 12px;
}

如何强制 EXTJS 中的数据视图项目保持相等的垂直 space？

How to force dataview item in EXTJS to maintain equal vertical space?

javascript

css

extjs