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

wangyan_victory

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]
    });
});