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

1tu0hz3e 于 2022-11-04 发布在其他

关注(0)|答案(1)|浏览(165)

如何在extJS数据视图中使用hbox。
我在我的应用程序中使用dataview。下面是代码和使用此链接。dataview link

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
            },

有人能帮我解决这个问题吗

extjs

来源：https://stackoverflow.com/questions/69087064/how-to-use-hbox-in-extjs-dataview

1条答案

按热度按时间

nzk0hqpo1#

在“Ext.view. view”中没有布局属性。您可以使用css网格来实现此目的：

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()
});

赞(0）回复(0）举报 2022-11-04

我来回答

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

1条答案

相关问题

热门标签

最新问答