如何在extJS数据视图中使用hbox

Question

如何在extJS dataview中使用hbox

我在我的应用程序中使用数据视图。这里是代码，并使用此链接。dataview链接

Ext.define('Image', {
extend: 'Ext.data.Model',
fields: [
{ name:'src', type:'string' },
{ name:'caption', type:'string' }
]
});
Ext.create('Ext.data.Store', {
id:'imagesStore',
model: 'Image',
data: [
{ src:'http://www.sencha.com/img/20110215-feat-drawing.png', caption:'Drawing & Charts' },
{ src:'http://www.sencha.com/img/20110215-feat-data.png', caption:'Advanced Data' },
{ src:'http://www.sencha.com/img/20110215-feat-html5.png', caption:'Overhauled Theme' },
{ src:'http://www.sencha.com/img/20110215-feat-perf.png', caption:'Performance Tuned' }
]
});
var imageTpl = new Ext.XTemplate(
'<tpl for=".">',
'<div style="margin-bottom: 10px;" class="thumb-wrap">',
'<img src="{src}" />',
'<br/><span>{caption}</span>',
'</div>',
'</tpl>'
);
Ext.create('Ext.view.View', {
store: Ext.data.StoreManager.lookup('imagesStore'),
tpl: imageTpl,
itemSelector: 'div.thumb-wrap',
emptyText: 'No images available',
renderTo: Ext.getBody()
});

现在在这段代码中元素是垂直的。一个接一个。我想让元素2在一行中。我正在使用这个，但没有运气。

layout: {
type: 'table',
columns: 2
},

谁能帮我解决这个问题?

Answer 1

在Ext.view.View中没有布局属性。你可以使用css grid:

Ext.define('Image', {
extend: 'Ext.data.Model',
fields: [
{ name:'src', type:'string' },
{ name:'caption', type:'string' }
]
});
Ext.create('Ext.data.Store', {
id:'imagesStore',
model: 'Image',
data: [
{ src:'https://picsum.photos/id/0/200/300', caption:'Drawing & Charts' },
{ src:'https://picsum.photos/id/1/200/300', caption:'Drawing & Charts' },
{ src:'https://picsum.photos/id/2/200/300', caption:'Advanced Data' },
{ src:'https://picsum.photos/id/3/200/300', caption:'Overhauled Theme' },
{ src:'https://picsum.photos/id/4/200/300', caption:'Performance Tuned' }
]
});
var imageTpl = new Ext.XTemplate(
'<div style="display: grid; grid-template-columns: 200px 200px;">', // wrapper div with grid layout
'<tpl for=".">',
'<div style="margin-bottom: 10px;" class="thumb-wrap">',
'<img src="{src}" style="max-width: 50%;"/>',
'<br/><span>{caption}</span>',
'</div>',
'</tpl>',
'</div>'
);
Ext.create('Ext.view.View', {
store: Ext.data.StoreManager.lookup('imagesStore'),
tpl: imageTpl,
itemSelector: 'div.thumb-wrap',
emptyText: 'No images available',
renderTo: Ext.getBody()
});