Ext4使用总结(七) Ext4使用view做图片的横向显示

iteye_10153

于 2014-06-30 16:54:42 发布

阅读量218

点赞数

CC 4.0 BY-SA版权

分类专栏：开发

本文链接：https://blog.youkuaiyun.com/iteye_10153/article/details/82583856

开发专栏收录该内容

38 篇文章

订阅专栏

本文详细介绍了如何在视图中定义和加载流式图表组件，包括组件的扩展、样式设置、事件监听以及模板语法的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >


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; }

其中