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

最新推荐文章于 2018-03-14 21:00:00 发布

wangyan_victory

最新推荐文章于 2018-03-14 21:00:00 发布

阅读量138

点赞数

文章标签： EXT HTML

本文链接：https://blog.csdn.net/wangyan_victory/article/details/83875691

版权

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