如何自定义CSS以强制dataview(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;
}
结果与图1相对应。
1条答案
按热度按时间m3eecexj1#
您可以使用列布局(或Flex布局):