The new chart and drawing functionality (partly thanks to RaphaelJS) in ExtJS 4 is great. While it's early on in it's release, and most likely more features like this will be implemented, you might have found an immediate need for panning the entire the surface of a drawing component. It's rather easy to implement by utilizing methods similar to dragging sprites.
Start by creating an Ext.draw.Component and adding to your layout/application. Make sure to set the height/width to something very large, yet the encompassing layout should only let the user view a small section. From there let's add listeners for mousedown and mouseup. Each is passed an eventObject (e). Upon mousedown you should store variables for e.getPageX() and e.getPageY(), which is the original click location. Also save your panel's surface.el.getX() and surface.el.getY(), which is the location of the surface upon click. Now add a listener to mousemove and prevent default actions using e.preventDefault(). The mouseup listener will simply remove the listener. Remember you must specify the function for mousemove when both adding/removing the listener, so the mousemove function should be more global (same with the saved variables, as they will be used in this function).
Now all that's left is crafting the drag function called each time the mouse moves, after a mousedown but before a mouseup on the surface. This can actually and easily be accomplished with just a few lines of code and utilizing the variables you saved:
var x = originalSurfaceX-(mouseEventX-e.getPageX()),
y = originalSurfaceY-(mouseEventY-e.getPageY());
drawPanel.surface.el.setXY([x,y],false);Now check it out, and you should be able to simply click on the surface and drag/pan it around within the panel. Obviously once you reach the edges of the surface you will have areas that you cannot drag against, so some additional checks are definitely needed. However hopefully this helps get the ball rolling for those you need a push in the right direction.
