Question

我有以下数据视图，并希望显示尽可能多的图标，可以放在一行中。但是，每行只显示一个图标。我该怎么做才能改变这种行为？

另外 - 如何将图像置于图像下方？

Ext.define('EMS.view.application.IconView', {
extend: 'Ext.view.View',
alias: 'widget.application.IconView',

xtype: 'iconView',
itemId: 'iconView',

layout: 'fit',

tpl: ['<tpl for=".">',
    '<div class="dataview">',
        '<div style="position:relative;width:100px;height:100px;margin:15px;" class="thumb-wrap">',
          '<img src="{src}" />',
          '{text}',
        '</div>',
    '</div>',
'</tpl>'],
itemSelector: 'div.dataview',
store: 'application.Icon',

initComponent: function () {
    this.callParent(arguments);
}
});

Answer 1

为.dataview设置样式，如下所示

.dataview {
  width:100px; height:100px; margin:15px;
  display: inline-block; float: left;
  text-align: center;
}

并将您的tpl更改为

tpl: [
     '<div style="clear:both">',
         '<tpl for=".">',
             '<div class="dataview">',
               '<img src="{src}" /><br/>',
               '{text}',
             '</div>',
         '</tpl>',
      '</div>'
     ],

如何更改DataView的行项数和图像文本对齐方式

1 个答案: