Extjs之-图片浏览器

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 id="up"></div><div id="right"></div>'+'<div id="down"></div><div id="left"></div>'+'<div id="zoom"></div><div id="in"></div>'+'<div 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?下载

?

1 楼 waainli 2012-08-21   求CSS和image代码。 2 楼 liuxi1024 2012-08-21   好，我把图片和css作为附件提交