Extjs图片浏览器

1、效果图

2、此实例是在  http://yourgame.iteye.com/blog/477600 基础上进行改进并修改。 

 

3、 js代码

 

var image_window = new Ext.Window({
    id: 'image-window',
    title : '图片浏览',
    width : 750,
    height : 500,
    resizable : false,
    closeAction :'hide',
    layout:'border',
    items:[{
        xtype: 'panel',
        region: 'center',
        layout:'fit',
        bodyStyle : 'background-color:#E5E3DF;',
        frame:false,
        border:false,
        html :'<div id="mapPic"><div class="nav">'
            +'<div class="up" id="up"></div><div class="right" id="right"></div>'
            +'<div class="down" id="down"></div><div class="left" id="left"></div>'
            +'<div class="zoom" id="zoom"></div><div class="in" id="in"></div>'
            +'<div class="out" id="out"></div></div>'
            +'<img id="view-image" src="" border="0" style="cursor: url(images/openhand_8_8.cur), default;" > </div>'
    }],
    buttons: [{
        text: '取消',
        handler: function() {
            image_window.hide();
        }
    }],
    listeners: {
        'show': function(c) {
            pageInit();
        }
    }
});


/**
 * 初始化
 */
function pageInit(){
    var image = Ext.get('view-image');

    if(image!=null){
        Ext.get('view-image').on({
            'mousedown':{fn:function(){this.setStyle('cursor','url(images/closedhand_8_8.cur),default;');},scope:image},
            'mouseup':{fn:function(){this.setStyle('cursor','url(images/openhand_8_8.cur),move;');},scope:image},
            'dblclick':{fn:function(){
                zoom(image,true,1.2);
            }
        }});
        new Ext.dd.DD(image, 'pic');

        //image.center();//图片居中

        //获得原始尺寸
        image.osize = {
            width:image.getWidth(),
            height:image.getHeight()
        };

        Ext.get('up').on('click',function(){imageMove('up',image);});       //向上移动
        Ext.get('down').on('click',function(){imageMove('down',image);});   //向下移动
        Ext.get('left').on('click',function(){imageMove('left',image);});   //左移
        Ext.get('right').on('click',function(){imageMove('right',image);}); //右移动
        Ext.get('in').on('click',function(){zoom(image,true,1.5);});        //放大
        Ext.get('out').on('click',function(){zoom(image,false,1.5);});      //缩小
        Ext.get('zoom').on('click',function(){restore(image);});            //还原
    }
};


/**
 * 图片移动
 */
function imageMove(direction, el) {
    el.move(direction, 50, true);
}


/**
 *
 * @param el 图片对象
 * @param type true放大,false缩小
 * @param offset 量
 */
function zoom(el,type,offset){
    var width = el.getWidth();
    var height = el.getHeight();
    var nwidth = type ? (width * offset) : (width / offset);
    var nheight = type ? (height * offset) : (height / offset);
    var left = type ? -((nwidth - width) / 2):((width - nwidth) / 2);
    var top =  type ? -((nheight - height) / 2):((height - nheight) / 2);
    el.animate(
        {
            height: {to: nheight, from: height},
            width: {to: nwidth, from: width},
            left: {by:left},
            top: {by:top}
        },
        null,
        null,
        'backBoth',
        'motion'
    );
}


/**
 * 图片还原
 */
function restore(el) {
    var size = el.osize;

    //自定义回调函数
    function center(el,callback){
        el.center();
        callback(el);
    }
    el.fadeOut({callback:function(){
        el.setSize(size.width, size.height, {callback:function(){
            center(el,function(ee){//调用回调
                ee.fadeIn();
            });
        }});
    }
    });
}

 

4、调用该窗体js

image_window.show();
image_window.setTitle('图片预览-' + array[0].pigCode + '[' + picType + ']');
Ext.get('view-image').dom.src = 'upload/' + array[0].picName;

 

说明：在程序的任意处可以直接调用该窗体，只需要将src指向图片地址。

 

5、用到的其他css及image可以从 地址：http://yourgame.iteye.com/blog/477600 下载