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

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>' 
    ],