Ext4使用总结(七) Ext4使用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中对象向右浮动

感谢给予我灵感的大师！