ExtJS DataView中如何使用hbox布局实现每行展示2个元素

失效原因说明 #

layout配置属于ExtJS容器类组件的属性，作用是管理容器内的Ext子组件排布逻辑，而DataView（Ext.view.View）的所有条目都是通过XTemplate直接渲染的原生HTML元素，不属于Ext子组件，所以容器布局规则不会作用在这些条目上，配置自然不生效。

方案1：CSS浮动实现（推荐，改动最小） #

只需要调整XTemplate的样式逻辑即可，原有其他配置无需修改：

var imageTpl = new Ext.XTemplate(
    '<div class="image-container">',
    '<tpl for=".">',
        // 左浮动+宽度48%+间距，保证一行刚好放2个
        '<div style="margin-bottom: 10px; margin-right: 2%; float: left; width: 48%;" class="thumb-wrap">',
          '<img src="{src}" style="width: 100%;" />',
          '<br/><span>{caption}</span>',
        '</div>',
        // 每2个元素后清除浮动，避免行排版错乱
        '<tpl if="xindex % 2 === 0">',
            '<div style="clear: both;"></div>',
        '</tpl>',
    '</tpl>',
    // 整体末尾清除浮动，避免父容器高度塌陷
    '<div style="clear: both;"></div>',
    '</div>'
);

原有DataView的itemSelector: 'div.thumb-wrap'配置无需修改，所有条目选择、事件绑定逻辑完全兼容。

方案2：Table结构模板实现 #

如果需要严格用table布局，可修改XTemplate按组输出table结构：

var imageTpl = new Ext.XTemplate(
    '<table style="width: 100%; border-collapse: collapse;">',
    // 每2个条目分为一组
    '<tpl for="." groupSize="2">',
        '<tr>',
            '<tpl for="group">',
                '<td style="width: 50%; padding-bottom: 10px; padding-right: 10px;" class="thumb-wrap">',
                  '<img src="{src}" style="width: 100%;" />',
                  '<br/><span>{caption}</span>',
                '</td>',
            '</tpl>',
            // 处理最后一行不足2个条目的情况，补空单元格保证布局统一
            '<tpl if="group.length < 2">',
                '<td></td>',
            '</tpl>',
        '</tr>',
    '</tpl>',
    '</table>'
);

注意修改DataView的itemSelector为td.thumb-wrap即可适配原有交互逻辑。

内容的提问来源于stack exchange，提问作者David