PDA

View Full Version : [Ext JS 3+] Ext.ux.grid.plugins.Pan - Pan support for LockingGridView



mankz
9 Aug 2010, 4:47 AM
This simple plugin adds panning to the locking gridview extension, same way Google Maps allows you to click and pan. I found some of Animals old code lying around and made a plugin out of it for LockingGridView. Drop it into Examples folder to try it out. :)



Ext.ns('Ext.ux.grid.plugins');

/**
* @class Ext.ux.grid.plugins.Pan
* @extends Object
* A plugin enabling panning by clicking and dragging in a LockingGridView context
* @constructor
* Create a new instance of this plugin
* @param {Object} config The configuration options
*/
Ext.ux.grid.plugins.Pan = function(config) {
Ext.apply(this, config);
};

Ext.ux.grid.plugins.Pan = Ext.extend(Object, {
/**
* @cfg {Boolean} enableVerticalPan
* True to allow vertical panning
*/
enableVerticalPan : true,

/**
* @cfg {Boolean} hideScrollbar
* False to hide the scrollbar of the pannable element
*/
hideScrollbar : false,

init : function(grid) {
grid.on('render', this.onRender, this);
},

onRender: function(grid) {
this.panEl = grid.getView().scroller;
grid.mon(this.panEl, 'mousedown', this.onMouseDown, this);

if (this.hideScrollbar) {
this.panEl.setStyle('overflow', 'hidden');
}
},

onMouseDown: function(e, t) {
e.stopEvent();
this.mouseX = e.getPageX();
this.mouseY = e.getPageY();
Ext.getBody().on('mousemove', this.onMouseMove, this);
Ext.getDoc().on('mouseup', this.onMouseUp, this);
},

onMouseMove: function(e) {
e.stopEvent();

var x = e.getPageX(),
xDelta = x - this.mouseX;
this.panEl.dom.scrollLeft -= xDelta;

if (this.enableVerticalPan) {
var y = e.getPageY(),
yDelta = y - this.mouseY;
this.panEl.dom.scrollTop -= yDelta;
}

this.mouseY = y;
this.mouseX = x;
},

onMouseUp: function(e) {
Ext.getBody().un('mousemove', this.onMouseMove, this);
Ext.getDoc().un('mouseup', this.onMouseUp, this);
}
});