ExtJS之图片浏览器(转载推荐)

1、效果图

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

 

3、 js代码

 

Js代码  

1. var image_window = new Ext.Window({   
2.     id: 'image-window',   
3.     title : '图片浏览',   
4.     width : 750,   
5.     height : 500,   
6.     resizable : false,   
7.     closeAction :'hide',   
8.     layout:'border',   
9.     items:[{   
10.         xtype: 'panel',   
11.         region: 'center',   
12.         layout:'fit',   
13.         bodyStyle : 'background-color:#E5E3DF;',   
14.         frame:false,   
15.         border:false,   
16.         html :'<div id="mapPic"><div class="nav">'  
17.             +'<div class="up" id="up"></div><div class="right" id="right"></div>'  
18.             +'<div class="down" id="down"></div><div class="left" id="left"></div>'  
19.             +'<div class="zoom" id="zoom"></div><div class="in" id="in"></div>'  
20.             +'<div class="out" id="out"></div></div>'  
21.             +'<img id="view-image" src="" border="0" style="cursor: url(images/openhand_8_8.cur), default;" > </div>'  
22.     }],   
23.     buttons: [{   
24.         text: '取消',   
25.         handler: function() {   
26.             image_window.hide();   
27.         }   
28.     }],   
29.     listeners: {   
30.         'show': function(c) {   
31.             pageInit();   
32.         }   
33.     }   
34. });   
35.   
36.   
37. /**  
38.  * 初始化  
39.  */  
40. function pageInit(){   
41.     var image = Ext.get('view-image');   
42.   
43.     if(image!=null){   
44.         Ext.get('view-image').on({   
45.             'mousedown':{fn:function(){this.setStyle('cursor','url(images/closedhand_8_8.cur),default;');},scope:image},   
46.             'mouseup':{fn:function(){this.setStyle('cursor','url(images/openhand_8_8.cur),move;');},scope:image},   
47.             'dblclick':{fn:function(){   
48.                 zoom(image,true,1.2);   
49.             }   
50.         }});   
51.         new Ext.dd.DD(image, 'pic');   
52.            
53.         //image.center();//图片居中   
54.            
55.         //获得原始尺寸   
56.         image.osize = {   
57.             width:image.getWidth(),   
58.             height:image.getHeight()   
59.         };   
60.        
61.         Ext.get('up').on('click',function(){imageMove('up',image);});       //向上移动   
62.         Ext.get('down').on('click',function(){imageMove('down',image);});   //向下移动   
63.         Ext.get('left').on('click',function(){imageMove('left',image);});   //左移   
64.         Ext.get('right').on('click',function(){imageMove('right',image);}); //右移动   
65.         Ext.get('in').on('click',function(){zoom(image,true,1.5);});        //放大   
66.         Ext.get('out').on('click',function(){zoom(image,false,1.5);});      //缩小   
67.         Ext.get('zoom').on('click',function(){restore(image);});            //还原   
68.     }   
69. };   
70.   
71.   
72. /**  
73.  * 图片移动  
74.  */  
75. function imageMove(direction, el) {   
76.     el.move(direction, 50, true);   
77. }   
78.   
79.   
80. /**  
81.  *   
82.  * @param el 图片对象  
83.  * @param type true放大,false缩小  
84.  * @param offset 量  
85.  */  
86. function zoom(el,type,offset){   
87.     var width = el.getWidth();   
88.     var height = el.getHeight();   
89.     var nwidth = type ? (width * offset) : (width / offset);   
90.     var nheight = type ? (height * offset) : (height / offset);   
91.     var left = type ? -((nwidth - width) / 2):((width - nwidth) / 2);   
92.     var top =  type ? -((nheight - height) / 2):((height - nheight) / 2);    
93.     el.animate(   
94.         {   
95.             height: {to: nheight, from: height},   
96.             width: {to: nwidth, from: width},   
97.             left: {by:left},   
98.             top: {by:top}   
99.         },   
100.         null,         
101.         null,        
102.         'backBoth',   
103.         'motion'  
104.     );   
105. }   
106.   
107.   
108. /**  
109.  * 图片还原  
110.  */  
111. function restore(el) {   
112.     var size = el.osize;   
113.        
114.     //自定义回调函数   
115.     function center(el,callback){   
116.         el.center();   
117.         callback(el);   
118.     }   
119.     el.fadeOut({callback:function(){   
120.         el.setSize(size.width, size.height, {callback:function(){   
121.             center(el,function(ee){//调用回调   
122.                 ee.fadeIn();   
123.             });   
124.         }});   
125.     }   
126.     });   
127. }  

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

Js代码  

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

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 下载