如何更改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>' 
    ],