Ext 4使用総括(七)Ext 4使用viewによる画像の横表示

Ext.define('MyChart.view.FlowChart', {
    extend: 'Ext.view.View',
    alias: 'widget.myChart',
    itemId: 'myChart',
    autoScroll: true,
    loadMask: true,
    itemSelector: 'div.chartList',
    trackOver: true,
    overItemCls:'overitem',
    cls: 'x-image-view',
    selModel: {
        mode: 'SINGLE',
        listeners: {
            scope: this,
            selectionchange: function(item, selected, eOpts ) {
                if ( selected[0] != null) {
                    item.view.fireEvent('selectChart',selected[0].data)
                }
            }
        }
    },
    tpl:  [
        '<tpl for=".">',
            '<div class="chartList">',
                '<div class="center"><img width="72" height="72" src=' + Ext.getContext() + '/icons/guide.png/></div><br/>',
                '<div class="center">{name}</div>',
            '</div>',
        '</tpl>'
    ]
})

viewファイルで参照されるcssファイルの内容は以下の通りです.

.chartList{
    float:left;display:block;width:180px;height:160px;padding:10px;
}
.selected{
    background-color: #D3E1F1;
}
.overitem{
    background-color: #E7E7E7;
}
.center { text-align: center; }

内

float:left

divでオブジェクトが左にフローティングし、

float:right

divでオブジェクトが右に浮動することを指します
インスピレーションを与えてくれたマスターに感謝します!