EXT 放大镜

最新推荐文章于 2021-05-25 18:11:04 发布

Sukla

最新推荐文章于 2021-05-25 18:11:04 发布

阅读量603

点赞数

分类专栏： Ext.js

本文链接：https://blog.csdn.net/Sukla/article/details/79699516

版权

Ext.js 专栏收录该内容

32 篇文章 3 订阅

订阅专栏

1、目的：实现一个能局部放大缩略图的功能

2、目前已完成效果

3、局部放大还没有做,后续做的话再更新

4、思路，

给缩略图的图片容器设设置tips 在tips中显示大一点的另一个图片

5、代码

view

/**
 * Created by Sukla on 2018/3/26.
 */
Ext.define('app.view.common.pictureMagnifier.PictureMagnifierView', {
    extend: 'Ext.panel.Panel',
    alias: 'widget.picture-magnifier-view',
    title: 'picture-magnifier-view',
    controller:'picture-magnifier-controller',
    viewModel: {
        data: {
            minImg: 'resources/images/min.png',
            maxImg: 'resources/images/max.png'
        }
    },
    layout: {
        type: 'vbox',
    },
    items: [
        {
            xtype: 'box',
            reference:'imgTip',
            width:50,
            height:50,
            fieldLabel: '图片',
            autoEl:{
                tag:'img',
                src:'resources/images/min.png'
            }
        }
    ]
})

controller

/**
 * Created by Sukla on 2018/3/26.
 */
Ext.define('app.view.common.pictureMagnifier.PictureMagnifierController',{
    extend:'Ext.app.ViewController',
    alias:'controller.picture-magnifier-controller',

    afterRender: function() {
        var tips = [{
            target: this.lookup('imgTip').el,
            title: 'Mouse imgTip',
            width: 300,
            height:300,
            html:'<img style="max-width:100%;max-height:100%;display:block;margin:0 auto;" src="resources/images/max.png">',
            trackMouse: true
        }];

        this.tips = Ext.Array.map(tips, function(cfg) {
            cfg.showOnTap = true;
            return new Ext.tip.ToolTip(cfg);
        });
    }

})