extjs继承panel实现图片缩放、翻页功能

extjs继承panel实现图片缩放、翻页功能

文章分类:Web前端

Ext.onReady(function() { 
   ImgView = Ext.extend(Ext.Panel, { 
   height: 740, 
   img_index: 0, 
   img_view_id: this.id + '_img', 
   
   set_img: function(offset) { 
   Ext.get(this.img_view_id).dom.src = this.src[this.img_index + offset]; 
  Ext.getCmp(this.id + '_next_btn').disabled = ((this.img_index + offset) == this.src.length - 1) ? true : false; 
  Ext.getCmp(this.id + '_pre_btn').disabled = ((this.img_index + offset) == 0) ? true : false;
   this.img_index = this.img_index + offset; 
   }, 
initComponent: function(){ 
   var cmp = this; 
this.html='<img id=/'' + this.img_view_id + '/' src=/'' + this.src[0] + '/' ></img>'; 
this.tbar = [ 
{text:"上一张", id: this.id + '_pre_btn', handler: function(){ 

  cmp.set_img(-1); 
   }}, 
{text:"下一张", id: this.id + '_next_btn', handler: function(){ 
  cmp.set_img(1); 
  }}]; 

  ImgView.superclass.initComponent.call(this); 
}, 
   afterRender: function() { 
   ImgView.superclass.afterRender.call(this); 
   Ext.get(this.img_view_id).parent = this; 
   Ext.get(this.img_view_id).center(); 
        new Ext.dd.DD(Ext.get(this.img_view_id), 'pic'); 
        //Ext.get(this.img_view_id).dom.title='双击放大  右击缩小'; 
   Ext.get(this.img_view_id).on({ 
   'dblclick': {fn: function(){ 
     Ext.get(this).parent.zoom(Ext.get(this), 1.5,true); 
   }}, 
   'contextmenu': {fn: function(){ 
       Ext.get(this).parent.zoom(Ext.get(this), 1.5,false);    
   }} 
   }); 
    }, 
    //放大、缩小 
    zoom: function(el, offset,type) { 
    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'  
        ); 
    } 
    }); 
  var img1 = new ImgView({src: ['img_file/001.jpg','img_file/002.jpg','img_file/003.jpg','img_file/004.jpg'], title: '图片浏览'}); 
  var main_panel = new Ext.Panel({ 
   title: 'main_panel', 
   el: 'main_panel', 
        autoHeight: true, 
        bodyBorder: false, 
        collapsible: true, 
        renderTo: Ext.getBody(), 
        items: [img1] 
    }); 
});