ext-all-debug.js
资源名称:ext-3.0.0.zip [点击查看]
上传用户:shuoshiled
上传日期:2018-01-28
资源大小:10124k
文件大小:2341k
源码类别:
中间件编程
开发平台:
JavaScript
- if(!forceRefresh && vd && this.el){
- var t = date.getTime();
- if(vd.getMonth() == date.getMonth() && vd.getFullYear() == date.getFullYear()){
- this.cells.removeClass('x-date-selected');
- this.cells.each(function(c){
- if(c.dom.firstChild.dateValue == t){
- c.addClass('x-date-selected');
- if(vis){
- Ext.fly(c.dom.firstChild).focus(50);
- }
- return false;
- }
- });
- return;
- }
- }
- var days = date.getDaysInMonth();
- var firstOfMonth = date.getFirstDateOfMonth();
- var startingPos = firstOfMonth.getDay()-this.startDay;
- if(startingPos <= this.startDay){
- startingPos += 7;
- }
- var pm = date.add('mo', -1);
- var prevStart = pm.getDaysInMonth()-startingPos;
- var cells = this.cells.elements;
- var textEls = this.textNodes;
- days += startingPos;
- // convert everything to numbers so it's fast
- var day = 86400000;
- var d = (new Date(pm.getFullYear(), pm.getMonth(), prevStart)).clearTime();
- var today = new Date().clearTime().getTime();
- var sel = date.clearTime().getTime();
- var min = this.minDate ? this.minDate.clearTime() : Number.NEGATIVE_INFINITY;
- var max = this.maxDate ? this.maxDate.clearTime() : Number.POSITIVE_INFINITY;
- var ddMatch = this.disabledDatesRE;
- var ddText = this.disabledDatesText;
- var ddays = this.disabledDays ? this.disabledDays.join('') : false;
- var ddaysText = this.disabledDaysText;
- var format = this.format;
- if(this.showToday){
- var td = new Date().clearTime();
- var disable = (td < min || td > max ||
- (ddMatch && format && ddMatch.test(td.dateFormat(format))) ||
- (ddays && ddays.indexOf(td.getDay()) != -1));
- if(!this.disabled){
- this.todayBtn.setDisabled(disable);
- this.todayKeyListener[disable ? 'disable' : 'enable']();
- }
- }
- var setCellClass = function(cal, cell){
- cell.title = '';
- var t = d.getTime();
- cell.firstChild.dateValue = t;
- if(t == today){
- cell.className += ' x-date-today';
- cell.title = cal.todayText;
- }
- if(t == sel){
- cell.className += ' x-date-selected';
- if(vis){
- Ext.fly(cell.firstChild).focus(50);
- }
- }
- // disabling
- if(t < min) {
- cell.className = ' x-date-disabled';
- cell.title = cal.minText;
- return;
- }
- if(t > max) {
- cell.className = ' x-date-disabled';
- cell.title = cal.maxText;
- return;
- }
- if(ddays){
- if(ddays.indexOf(d.getDay()) != -1){
- cell.title = ddaysText;
- cell.className = ' x-date-disabled';
- }
- }
- if(ddMatch && format){
- var fvalue = d.dateFormat(format);
- if(ddMatch.test(fvalue)){
- cell.title = ddText.replace('%0', fvalue);
- cell.className = ' x-date-disabled';
- }
- }
- };
- var i = 0;
- for(; i < startingPos; i++) {
- textEls[i].innerHTML = (++prevStart);
- d.setDate(d.getDate()+1);
- cells[i].className = 'x-date-prevday';
- setCellClass(this, cells[i]);
- }
- for(; i < days; i++){
- var intDay = i - startingPos + 1;
- textEls[i].innerHTML = (intDay);
- d.setDate(d.getDate()+1);
- cells[i].className = 'x-date-active';
- setCellClass(this, cells[i]);
- }
- var extraDays = 0;
- for(; i < 42; i++) {
- textEls[i].innerHTML = (++extraDays);
- d.setDate(d.getDate()+1);
- cells[i].className = 'x-date-nextday';
- setCellClass(this, cells[i]);
- }
- this.mbtn.setText(this.monthNames[date.getMonth()] + ' ' + date.getFullYear());
- if(!this.internalRender){
- var main = this.el.dom.firstChild;
- var w = main.offsetWidth;
- this.el.setWidth(w + this.el.getBorderWidth('lr'));
- Ext.fly(main).setWidth(w);
- this.internalRender = true;
- // opera does not respect the auto grow header center column
- // then, after it gets a width opera refuses to recalculate
- // without a second pass
- if(Ext.isOpera && !this.secondPass){
- main.rows[0].cells[1].style.width = (w - (main.rows[0].cells[0].offsetWidth+main.rows[0].cells[2].offsetWidth)) + 'px';
- this.secondPass = true;
- this.update.defer(10, this, [date]);
- }
- }
- },
- // private
- beforeDestroy : function() {
- if(this.rendered){
- this.keyNav.disable();
- this.keyNav = null;
- Ext.destroy(
- this.leftClickRpt,
- this.rightClickRpt,
- this.monthPicker,
- this.eventEl,
- this.mbtn,
- this.todayBtn
- );
- }
- }
- /**
- * @cfg {String} autoEl @hide
- */
- });
- Ext.reg('datepicker', Ext.DatePicker);
- /** * @class Ext.LoadMask * A simple utility class for generically masking elements while loading data. If the {@link #store} * config option is specified, the masking will be automatically synchronized with the store's loading * process and the mask element will be cached for reuse. For all other elements, this mask will replace the * element's Updater load indicator and will be destroyed after the initial load. * <p>Example usage:</p> *<pre><code> // Basic mask: var myMask = new Ext.LoadMask(Ext.getBody(), {msg:"Please wait..."}); myMask.show(); </code></pre> * @constructor * Create a new LoadMask * @param {Mixed} el The element or DOM node, or its id * @param {Object} config The config object */ Ext.LoadMask = function(el, config){ this.el = Ext.get(el); Ext.apply(this, config); if(this.store){ this.store.on('beforeload', this.onBeforeLoad, this); this.store.on('load', this.onLoad, this); this.store.on('exception', this.onLoad, this); this.removeMask = Ext.value(this.removeMask, false); }else{ var um = this.el.getUpdater(); um.showLoadIndicator = false; // disable the default indicator um.on('beforeupdate', this.onBeforeLoad, this); um.on('update', this.onLoad, this); um.on('failure', this.onLoad, this); this.removeMask = Ext.value(this.removeMask, true); } }; Ext.LoadMask.prototype = { /** * @cfg {Ext.data.Store} store * Optional Store to which the mask is bound. The mask is displayed when a load request is issued, and * hidden on either load sucess, or load fail. */ /** * @cfg {Boolean} removeMask * True to create a single-use mask that is automatically destroyed after loading (useful for page loads), * False to persist the mask element reference for multiple uses (e.g., for paged data widgets). Defaults to false. */ /** * @cfg {String} msg * The text to display in a centered loading message box (defaults to 'Loading...') */ msg : 'Loading...', /** * @cfg {String} msgCls * The CSS class to apply to the loading message element (defaults to "x-mask-loading") */ msgCls : 'x-mask-loading', /** * Read-only. True if the mask is currently disabled so that it will not be displayed (defaults to false) * @type Boolean */ disabled: false, /** * Disables the mask to prevent it from being displayed */ disable : function(){ this.disabled = true; }, /** * Enables the mask so that it can be displayed */ enable : function(){ this.disabled = false; }, // private onLoad : function(){ this.el.unmask(this.removeMask); }, // private onBeforeLoad : function(){ if(!this.disabled){ this.el.mask(this.msg, this.msgCls); } }, /** * Show this LoadMask over the configured Element. */ show: function(){ this.onBeforeLoad(); }, /** * Hide this LoadMask. */ hide: function(){ this.onLoad(); }, // private destroy : function(){ if(this.store){ this.store.un('beforeload', this.onBeforeLoad, this); this.store.un('load', this.onLoad, this); this.store.un('exception', this.onLoad, this); }else{ var um = this.el.getUpdater(); um.un('beforeupdate', this.onBeforeLoad, this); um.un('update', this.onLoad, this); um.un('failure', this.onLoad, this); } } };/**
- * @class Ext.Slider
- * @extends Ext.BoxComponent
- * Slider which supports vertical or horizontal orientation, keyboard adjustments,
- * configurable snapping, axis clicking and animation. Can be added as an item to
- * any container. Example usage:
- <pre><code>
- new Ext.Slider({
- renderTo: Ext.getBody(),
- width: 200,
- value: 50,
- increment: 10,
- minValue: 0,
- maxValue: 100
- });
- </code></pre>
- */
- Ext.Slider = Ext.extend(Ext.BoxComponent, {
- /**
- * @cfg {Number} value The value to initialize the slider with. Defaults to minValue.
- */
- /**
- * @cfg {Boolean} vertical Orient the Slider vertically rather than horizontally, defaults to false.
- */
- vertical: false,
- /**
- * @cfg {Number} minValue The minimum value for the Slider. Defaults to 0.
- */
- minValue: 0,
- /**
- * @cfg {Number} maxValue The maximum value for the Slider. Defaults to 100.
- */
- maxValue: 100,
- /**
- * @cfg {Number/Boolean} decimalPrecision.
- * <p>The number of decimal places to which to round the Slider's value. Defaults to 0.</p>
- * <p>To disable rounding, configure as <tt><b>false</b></tt>.</p>
- */
- decimalPrecision: 0,
- /**
- * @cfg {Number} keyIncrement How many units to change the Slider when adjusting with keyboard navigation. Defaults to 1. If the increment config is larger, it will be used instead.
- */
- keyIncrement: 1,
- /**
- * @cfg {Number} increment How many units to change the slider when adjusting by drag and drop. Use this option to enable 'snapping'.
- */
- increment: 0,
- // private
- clickRange: [5,15],
- /**
- * @cfg {Boolean} clickToChange Determines whether or not clicking on the Slider axis will change the slider. Defaults to true
- */
- clickToChange : true,
- /**
- * @cfg {Boolean} animate Turn on or off animation. Defaults to true
- */
- animate: true,
- /**
- * True while the thumb is in a drag operation
- * @type boolean
- */
- dragging: false,
- // private override
- initComponent : function(){
- if(!Ext.isDefined(this.value)){
- this.value = this.minValue;
- }
- Ext.Slider.superclass.initComponent.call(this);
- this.keyIncrement = Math.max(this.increment, this.keyIncrement);
- this.addEvents(
- /**
- * @event beforechange
- * Fires before the slider value is changed. By returning false from an event handler,
- * you can cancel the event and prevent the slider from changing.
- * @param {Ext.Slider} slider The slider
- * @param {Number} newValue The new value which the slider is being changed to.
- * @param {Number} oldValue The old value which the slider was previously.
- */
- 'beforechange',
- /**
- * @event change
- * Fires when the slider value is changed.
- * @param {Ext.Slider} slider The slider
- * @param {Number} newValue The new value which the slider has been changed to.
- */
- 'change',
- /**
- * @event changecomplete
- * Fires when the slider value is changed by the user and any drag operations have completed.
- * @param {Ext.Slider} slider The slider
- * @param {Number} newValue The new value which the slider has been changed to.
- */
- 'changecomplete',
- /**
- * @event dragstart
- * Fires after a drag operation has started.
- * @param {Ext.Slider} slider The slider
- * @param {Ext.EventObject} e The event fired from Ext.dd.DragTracker
- */
- 'dragstart',
- /**
- * @event drag
- * Fires continuously during the drag operation while the mouse is moving.
- * @param {Ext.Slider} slider The slider
- * @param {Ext.EventObject} e The event fired from Ext.dd.DragTracker
- */
- 'drag',
- /**
- * @event dragend
- * Fires after the drag operation has completed.
- * @param {Ext.Slider} slider The slider
- * @param {Ext.EventObject} e The event fired from Ext.dd.DragTracker
- */
- 'dragend'
- );
- if(this.vertical){
- Ext.apply(this, Ext.Slider.Vertical);
- }
- },
- // private override
- onRender : function(){
- this.autoEl = {
- cls: 'x-slider ' + (this.vertical ? 'x-slider-vert' : 'x-slider-horz'),
- cn:{cls:'x-slider-end',cn:{cls:'x-slider-inner',cn:[{cls:'x-slider-thumb'},{tag:'a', cls:'x-slider-focus', href:"#", tabIndex: '-1', hidefocus:'on'}]}}
- };
- Ext.Slider.superclass.onRender.apply(this, arguments);
- this.endEl = this.el.first();
- this.innerEl = this.endEl.first();
- this.thumb = this.innerEl.first();
- this.halfThumb = (this.vertical ? this.thumb.getHeight() : this.thumb.getWidth())/2;
- this.focusEl = this.thumb.next();
- this.initEvents();
- },
- // private override
- initEvents : function(){
- this.thumb.addClassOnOver('x-slider-thumb-over');
- this.mon(this.el, {
- scope: this,
- mousedown: this.onMouseDown,
- keydown: this.onKeyDown
- });
- this.focusEl.swallowEvent("click", true);
- this.tracker = new Ext.dd.DragTracker({
- onBeforeStart: this.onBeforeDragStart.createDelegate(this),
- onStart: this.onDragStart.createDelegate(this),
- onDrag: this.onDrag.createDelegate(this),
- onEnd: this.onDragEnd.createDelegate(this),
- tolerance: 3,
- autoStart: 300
- });
- this.tracker.initEl(this.thumb);
- this.on('beforedestroy', this.tracker.destroy, this.tracker);
- },
- // private override
- onMouseDown : function(e){
- if(this.disabled) {return;}
- if(this.clickToChange && e.target != this.thumb.dom){
- var local = this.innerEl.translatePoints(e.getXY());
- this.onClickChange(local);
- }
- this.focus();
- },
- // private
- onClickChange : function(local){
- if(local.top > this.clickRange[0] && local.top < this.clickRange[1]){
- this.setValue(Ext.util.Format.round(this.reverseValue(local.left), this.decimalPrecision), undefined, true);
- }
- },
- // private
- onKeyDown : function(e){
- if(this.disabled){e.preventDefault();return;}
- var k = e.getKey();
- switch(k){
- case e.UP:
- case e.RIGHT:
- e.stopEvent();
- if(e.ctrlKey){
- this.setValue(this.maxValue, undefined, true);
- }else{
- this.setValue(this.value+this.keyIncrement, undefined, true);
- }
- break;
- case e.DOWN:
- case e.LEFT:
- e.stopEvent();
- if(e.ctrlKey){
- this.setValue(this.minValue, undefined, true);
- }else{
- this.setValue(this.value-this.keyIncrement, undefined, true);
- }
- break;
- default:
- e.preventDefault();
- }
- },
- // private
- doSnap : function(value){
- if(!this.increment || this.increment == 1 || !value) {
- return value;
- }
- var newValue = value, inc = this.increment;
- var m = value % inc;
- if(m != 0){
- newValue -= m;
- if(m * 2 > inc){
- newValue += inc;
- }else if(m * 2 < -inc){
- newValue -= inc;
- }
- }
- return newValue.constrain(this.minValue, this.maxValue);
- },
- // private
- afterRender : function(){
- Ext.Slider.superclass.afterRender.apply(this, arguments);
- if(this.value !== undefined){
- var v = this.normalizeValue(this.value);
- if(v !== this.value){
- delete this.value;
- this.setValue(v, false);
- }else{
- this.moveThumb(this.translateValue(v), false);
- }
- }
- },
- // private
- getRatio : function(){
- var w = this.innerEl.getWidth();
- var v = this.maxValue - this.minValue;
- return v == 0 ? w : (w/v);
- },
- // private
- normalizeValue : function(v){
- v = this.doSnap(v);
- v = Ext.util.Format.round(v, this.decimalPrecision);
- v = v.constrain(this.minValue, this.maxValue);
- return v;
- },
- /**
- * Programmatically sets the value of the Slider. Ensures that the value is constrained within
- * the minValue and maxValue.
- * @param {Number} value The value to set the slider to. (This will be constrained within minValue and maxValue)
- * @param {Boolean} animate Turn on or off animation, defaults to true
- */
- setValue : function(v, animate, changeComplete){
- v = this.normalizeValue(v);
- if(v !== this.value && this.fireEvent('beforechange', this, v, this.value) !== false){
- this.value = v;
- this.moveThumb(this.translateValue(v), animate !== false);
- this.fireEvent('change', this, v);
- if(changeComplete){
- this.fireEvent('changecomplete', this, v);
- }
- }
- },
- // private
- translateValue : function(v){
- var ratio = this.getRatio();
- return (v * ratio)-(this.minValue * ratio)-this.halfThumb;
- },
- reverseValue : function(pos){
- var ratio = this.getRatio();
- return (pos+this.halfThumb+(this.minValue * ratio))/ratio;
- },
- // private
- moveThumb: function(v, animate){
- if(!animate || this.animate === false){
- this.thumb.setLeft(v);
- }else{
- this.thumb.shift({left: v, stopFx: true, duration:.35});
- }
- },
- // private
- focus : function(){
- this.focusEl.focus(10);
- },
- // private
- onBeforeDragStart : function(e){
- return !this.disabled;
- },
- // private
- onDragStart: function(e){
- this.thumb.addClass('x-slider-thumb-drag');
- this.dragging = true;
- this.dragStartValue = this.value;
- this.fireEvent('dragstart', this, e);
- },
- // private
- onDrag: function(e){
- var pos = this.innerEl.translatePoints(this.tracker.getXY());
- this.setValue(Ext.util.Format.round(this.reverseValue(pos.left), this.decimalPrecision), false);
- this.fireEvent('drag', this, e);
- },
- // private
- onDragEnd: function(e){
- this.thumb.removeClass('x-slider-thumb-drag');
- this.dragging = false;
- this.fireEvent('dragend', this, e);
- if(this.dragStartValue != this.value){
- this.fireEvent('changecomplete', this, this.value);
- }
- },
- // private
- onResize : function(w, h){
- this.innerEl.setWidth(w - (this.el.getPadding('l') + this.endEl.getPadding('r')));
- this.syncThumb();
- },
- //private
- onDisable: function(){
- Ext.Slider.superclass.onDisable.call(this);
- this.thumb.addClass(this.disabledClass);
- if(Ext.isIE){
- //IE breaks when using overflow visible and opacity other than 1.
- //Create a place holder for the thumb and display it.
- var xy = this.thumb.getXY();
- this.thumb.hide();
- this.innerEl.addClass(this.disabledClass).dom.disabled = true;
- if (!this.thumbHolder){
- this.thumbHolder = this.endEl.createChild({cls: 'x-slider-thumb ' + this.disabledClass});
- }
- this.thumbHolder.show().setXY(xy);
- }
- },
- //private
- onEnable: function(){
- Ext.Slider.superclass.onEnable.call(this);
- this.thumb.removeClass(this.disabledClass);
- if(Ext.isIE){
- this.innerEl.removeClass(this.disabledClass).dom.disabled = false;
- if (this.thumbHolder){
- this.thumbHolder.hide();
- }
- this.thumb.show();
- this.syncThumb();
- }
- },
- /**
- * Synchronizes the thumb position to the proper proportion of the total component width based
- * on the current slider {@link #value}. This will be called automatically when the Slider
- * is resized by a layout, but if it is rendered auto width, this method can be called from
- * another resize handler to sync the Slider if necessary.
- */
- syncThumb : function(){
- if(this.rendered){
- this.moveThumb(this.translateValue(this.value));
- }
- },
- /**
- * Returns the current value of the slider
- * @return {Number} The current value of the slider
- */
- getValue : function(){
- return this.value;
- }
- });
- Ext.reg('slider', Ext.Slider);
- // private class to support vertical sliders
- Ext.Slider.Vertical = {
- onResize : function(w, h){
- this.innerEl.setHeight(h - (this.el.getPadding('t') + this.endEl.getPadding('b')));
- this.syncThumb();
- },
- getRatio : function(){
- var h = this.innerEl.getHeight();
- var v = this.maxValue - this.minValue;
- return h/v;
- },
- moveThumb: function(v, animate){
- if(!animate || this.animate === false){
- this.thumb.setBottom(v);
- }else{
- this.thumb.shift({bottom: v, stopFx: true, duration:.35});
- }
- },
- onDrag: function(e){
- var pos = this.innerEl.translatePoints(this.tracker.getXY());
- var bottom = this.innerEl.getHeight()-pos.top;
- this.setValue(this.minValue + Ext.util.Format.round(bottom/this.getRatio(), this.decimalPrecision), false);
- this.fireEvent('drag', this, e);
- },
- onClickChange : function(local){
- if(local.left > this.clickRange[0] && local.left < this.clickRange[1]){
- var bottom = this.innerEl.getHeight()-local.top;
- this.setValue(this.minValue + Ext.util.Format.round(bottom/this.getRatio(), this.decimalPrecision), undefined, true);
- }
- }
- };/**
- * @class Ext.ProgressBar
- * @extends Ext.BoxComponent
- * <p>An updateable progress bar component. The progress bar supports two different modes: manual and automatic.</p>
- * <p>In manual mode, you are responsible for showing, updating (via {@link #updateProgress}) and clearing the
- * progress bar as needed from your own code. This method is most appropriate when you want to show progress
- * throughout an operation that has predictable points of interest at which you can update the control.</p>
- * <p>In automatic mode, you simply call {@link #wait} and let the progress bar run indefinitely, only clearing it
- * once the operation is complete. You can optionally have the progress bar wait for a specific amount of time
- * and then clear itself. Automatic mode is most appropriate for timed operations or asynchronous operations in
- * which you have no need for indicating intermediate progress.</p>
- * @cfg {Float} value A floating point value between 0 and 1 (e.g., .5, defaults to 0)
- * @cfg {String} text The progress bar text (defaults to '')
- * @cfg {Mixed} textEl The element to render the progress text to (defaults to the progress
- * bar's internal text element)
- * @cfg {String} id The progress bar element's id (defaults to an auto-generated id)
- * @xtype progress
- */
- Ext.ProgressBar = Ext.extend(Ext.BoxComponent, {
- /**
- * @cfg {String} baseCls
- * The base CSS class to apply to the progress bar's wrapper element (defaults to 'x-progress')
- */
- baseCls : 'x-progress',
- /**
- * @cfg {Boolean} animate
- * True to animate the progress bar during transitions (defaults to false)
- */
- animate : false,
- // private
- waitTimer : null,
- // private
- initComponent : function(){
- Ext.ProgressBar.superclass.initComponent.call(this);
- this.addEvents(
- /**
- * @event update
- * Fires after each update interval
- * @param {Ext.ProgressBar} this
- * @param {Number} The current progress value
- * @param {String} The current progress text
- */
- "update"
- );
- },
- // private
- onRender : function(ct, position){
- var tpl = new Ext.Template(
- '<div class="{cls}-wrap">',
- '<div class="{cls}-inner">',
- '<div class="{cls}-bar">',
- '<div class="{cls}-text">',
- '<div> </div>',
- '</div>',
- '</div>',
- '<div class="{cls}-text {cls}-text-back">',
- '<div> </div>',
- '</div>',
- '</div>',
- '</div>'
- );
- this.el = position ? tpl.insertBefore(position, {cls: this.baseCls}, true)
- : tpl.append(ct, {cls: this.baseCls}, true);
- if(this.id){
- this.el.dom.id = this.id;
- }
- var inner = this.el.dom.firstChild;
- this.progressBar = Ext.get(inner.firstChild);
- if(this.textEl){
- //use an external text el
- this.textEl = Ext.get(this.textEl);
- delete this.textTopEl;
- }else{
- //setup our internal layered text els
- this.textTopEl = Ext.get(this.progressBar.dom.firstChild);
- var textBackEl = Ext.get(inner.childNodes[1]);
- this.textTopEl.setStyle("z-index", 99).addClass('x-hidden');
- this.textEl = new Ext.CompositeElement([this.textTopEl.dom.firstChild, textBackEl.dom.firstChild]);
- this.textEl.setWidth(inner.offsetWidth);
- }
- this.progressBar.setHeight(inner.offsetHeight);
- },
- // private
- afterRender : function(){
- Ext.ProgressBar.superclass.afterRender.call(this);
- if(this.value){
- this.updateProgress(this.value, this.text);
- }else{
- this.updateText(this.text);
- }
- },
- /**
- * Updates the progress bar value, and optionally its text. If the text argument is not specified,
- * any existing text value will be unchanged. To blank out existing text, pass ''. Note that even
- * if the progress bar value exceeds 1, it will never automatically reset -- you are responsible for
- * determining when the progress is complete and calling {@link #reset} to clear and/or hide the control.
- * @param {Float} value (optional) A floating point value between 0 and 1 (e.g., .5, defaults to 0)
- * @param {String} text (optional) The string to display in the progress text element (defaults to '')
- * @param {Boolean} animate (optional) Whether to animate the transition of the progress bar. If this value is
- * not specified, the default for the class is used (default to false)
- * @return {Ext.ProgressBar} this
- */
- updateProgress : function(value, text, animate){
- this.value = value || 0;
- if(text){
- this.updateText(text);
- }
- if(this.rendered){
- var w = Math.floor(value*this.el.dom.firstChild.offsetWidth);
- this.progressBar.setWidth(w, animate === true || (animate !== false && this.animate));
- if(this.textTopEl){
- //textTopEl should be the same width as the bar so overflow will clip as the bar moves
- this.textTopEl.removeClass('x-hidden').setWidth(w);
- }
- }
- this.fireEvent('update', this, value, text);
- return this;
- },
- /**
- * Initiates an auto-updating progress bar. A duration can be specified, in which case the progress
- * bar will automatically reset after a fixed amount of time and optionally call a callback function
- * if specified. If no duration is passed in, then the progress bar will run indefinitely and must
- * be manually cleared by calling {@link #reset}. The wait method accepts a config object with
- * the following properties:
- * <pre>
- Property Type Description
- ---------- ------------ ----------------------------------------------------------------------
- duration Number The length of time in milliseconds that the progress bar should
- run before resetting itself (defaults to undefined, in which case it
- will run indefinitely until reset is called)
- interval Number The length of time in milliseconds between each progress update
- (defaults to 1000 ms)
- animate Boolean Whether to animate the transition of the progress bar. If this value is
- not specified, the default for the class is used.
- increment Number The number of progress update segments to display within the progress
- bar (defaults to 10). If the bar reaches the end and is still
- updating, it will automatically wrap back to the beginning.
- text String Optional text to display in the progress bar element (defaults to '').
- fn Function A callback function to execute after the progress bar finishes auto-
- updating. The function will be called with no arguments. This function
- will be ignored if duration is not specified since in that case the
- progress bar can only be stopped programmatically, so any required function
- should be called by the same code after it resets the progress bar.
- scope Object The scope that is passed to the callback function (only applies when
- duration and fn are both passed).
- </pre>
- *
- * Example usage:
- * <pre><code>
- var p = new Ext.ProgressBar({
- renderTo: 'my-el'
- });
- //Wait for 5 seconds, then update the status el (progress bar will auto-reset)
- p.wait({
- interval: 100, //bar will move fast!
- duration: 5000,
- increment: 15,
- text: 'Updating...',
- scope: this,
- fn: function(){
- Ext.fly('status').update('Done!');
- }
- });
- //Or update indefinitely until some async action completes, then reset manually
- p.wait();
- myAction.on('complete', function(){
- p.reset();
- Ext.fly('status').update('Done!');
- });
- </code></pre>
- * @param {Object} config (optional) Configuration options
- * @return {Ext.ProgressBar} this
- */
- wait : function(o){
- if(!this.waitTimer){
- var scope = this;
- o = o || {};
- this.updateText(o.text);
- this.waitTimer = Ext.TaskMgr.start({
- run: function(i){
- var inc = o.increment || 10;
- this.updateProgress(((((i+inc)%inc)+1)*(100/inc))*0.01, null, o.animate);
- },
- interval: o.interval || 1000,
- duration: o.duration,
- onStop: function(){
- if(o.fn){
- o.fn.apply(o.scope || this);
- }
- this.reset();
- },
- scope: scope
- });
- }
- return this;
- },
- /**
- * Returns true if the progress bar is currently in a {@link #wait} operation
- * @return {Boolean} True if waiting, else false
- */
- isWaiting : function(){
- return this.waitTimer !== null;
- },
- /**
- * Updates the progress bar text. If specified, textEl will be updated, otherwise the progress
- * bar itself will display the updated text.
- * @param {String} text (optional) The string to display in the progress text element (defaults to '')
- * @return {Ext.ProgressBar} this
- */
- updateText : function(text){
- this.text = text || ' ';
- if(this.rendered){
- this.textEl.update(this.text);
- }
- return this;
- },
- /**
- * Synchronizes the inner bar width to the proper proportion of the total componet width based
- * on the current progress {@link #value}. This will be called automatically when the ProgressBar
- * is resized by a layout, but if it is rendered auto width, this method can be called from
- * another resize handler to sync the ProgressBar if necessary.
- */
- syncProgressBar : function(){
- if(this.value){
- this.updateProgress(this.value, this.text);
- }
- return this;
- },
- /**
- * Sets the size of the progress bar.
- * @param {Number} width The new width in pixels
- * @param {Number} height The new height in pixels
- * @return {Ext.ProgressBar} this
- */
- setSize : function(w, h){
- Ext.ProgressBar.superclass.setSize.call(this, w, h);
- if(this.textTopEl){
- var inner = this.el.dom.firstChild;
- this.textEl.setSize(inner.offsetWidth, inner.offsetHeight);
- }
- this.syncProgressBar();
- return this;
- },
- /**
- * Resets the progress bar value to 0 and text to empty string. If hide = true, the progress
- * bar will also be hidden (using the {@link #hideMode} property internally).
- * @param {Boolean} hide (optional) True to hide the progress bar (defaults to false)
- * @return {Ext.ProgressBar} this
- */
- reset : function(hide){
- this.updateProgress(0);
- if(this.textTopEl){
- this.textTopEl.addClass('x-hidden');
- }
- if(this.waitTimer){
- this.waitTimer.onStop = null; //prevent recursion
- Ext.TaskMgr.stop(this.waitTimer);
- this.waitTimer = null;
- }
- if(hide === true){
- this.hide();
- }
- return this;
- }
- });
- Ext.reg('progress', Ext.ProgressBar);/* * These classes are derivatives of the similarly named classes in the YUI Library. * The original license: * Copyright (c) 2006, Yahoo! Inc. All rights reserved. * Code licensed under the BSD License: * http://developer.yahoo.net/yui/license.txt */ (function() { var Event=Ext.EventManager; var Dom=Ext.lib.Dom; /** * @class Ext.dd.DragDrop * Defines the interface and base operation of items that that can be * dragged or can be drop targets. It was designed to be extended, overriding * the event handlers for startDrag, onDrag, onDragOver and onDragOut. * Up to three html elements can be associated with a DragDrop instance: * <ul> * <li>linked element: the element that is passed into the constructor. * This is the element which defines the boundaries for interaction with * other DragDrop objects.</li> * <li>handle element(s): The drag operation only occurs if the element that * was clicked matches a handle element. By default this is the linked * element, but there are times that you will want only a portion of the * linked element to initiate the drag operation, and the setHandleElId() * method provides a way to define this.</li> * <li>drag element: this represents the element that would be moved along * with the cursor during a drag operation. By default, this is the linked * element itself as in {@link Ext.dd.DD}. setDragElId() lets you define * a separate element that would be moved, as in {@link Ext.dd.DDProxy}. * </li> * </ul> * This class should not be instantiated until the onload event to ensure that * the associated elements are available. * The following would define a DragDrop obj that would interact with any * other DragDrop obj in the "group1" group: * <pre> * dd = new Ext.dd.DragDrop("div1", "group1"); * </pre> * Since none of the event handlers have been implemented, nothing would * actually happen if you were to run the code above. Normally you would * override this class or one of the default implementations, but you can * also override the methods you want on an instance of the class... * <pre> * dd.onDragDrop = function(e, id) { * alert("dd was dropped on " + id); * } * </pre> * @constructor * @param {String} id of the element that is linked to this instance * @param {String} sGroup the group of related DragDrop objects * @param {object} config an object containing configurable attributes * Valid properties for DragDrop: * padding, isTarget, maintainOffset, primaryButtonOnly */ Ext.dd.DragDrop = function(id, sGroup, config) { if(id) { this.init(id, sGroup, config); } }; Ext.dd.DragDrop.prototype = { /** * Set to false to enable a DragDrop object to fire drag events while dragging * over its own Element. Defaults to true - DragDrop objects do not by default * fire drag events to themselves. * @property ignoreSelf * @type Boolean */ /** * The id of the element associated with this object. This is what we * refer to as the "linked element" because the size and position of * this element is used to determine when the drag and drop objects have * interacted. * @property id * @type String */ id: null, /** * Configuration attributes passed into the constructor * @property config * @type object */ config: null, /** * The id of the element that will be dragged. By default this is same * as the linked element , but could be changed to another element. Ex: * Ext.dd.DDProxy * @property dragElId * @type String * @private */ dragElId: null, /** * The ID of the element that initiates the drag operation. By default * this is the linked element, but could be changed to be a child of this * element. This lets us do things like only starting the drag when the * header element within the linked html element is clicked. * @property handleElId * @type String * @private */ handleElId: null, /** * An object who's property names identify HTML tags to be considered invalid as drag handles. * A non-null property value identifies the tag as invalid. Defaults to the * following value which prevents drag operations from being initiated by <a> elements:<pre><code> { A: "A" }</code></pre> * @property invalidHandleTypes * @type Object */ invalidHandleTypes: null, /** * An object who's property names identify the IDs of elements to be considered invalid as drag handles. * A non-null property value identifies the ID as invalid. For example, to prevent * dragging from being initiated on element ID "foo", use:<pre><code> { foo: true }</code></pre> * @property invalidHandleIds * @type Object */ invalidHandleIds: null, /** * An Array of CSS class names for elements to be considered in valid as drag handles. * @property invalidHandleClasses * @type Array */ invalidHandleClasses: null, /** * The linked element's absolute X position at the time the drag was * started * @property startPageX * @type int * @private */ startPageX: 0, /** * The linked element's absolute X position at the time the drag was * started * @property startPageY * @type int * @private */ startPageY: 0, /** * The group defines a logical collection of DragDrop objects that are * related. Instances only get events when interacting with other * DragDrop object in the same group. This lets us define multiple * groups using a single DragDrop subclass if we want. * @property groups * @type object An object in the format {'group1':true, 'group2':true} */ groups: null, /** * Individual drag/drop instances can be locked. This will prevent * onmousedown start drag. * @property locked * @type boolean * @private */ locked: false, /** * Lock this instance * @method lock */ lock: function() { this.locked = true; }, /** * When set to true, other DD objects in cooperating DDGroups do not receive * notification events when this DD object is dragged over them. Defaults to false. * @property moveOnly * @type boolean */ moveOnly: false, /** * Unlock this instace * @method unlock */ unlock: function() { this.locked = false; }, /** * By default, all instances can be a drop target. This can be disabled by * setting isTarget to false. * @property isTarget * @type boolean */ isTarget: true, /** * The padding configured for this drag and drop object for calculating * the drop zone intersection with this object. * @property padding * @type int[] An array containing the 4 padding values: [top, right, bottom, left] */ padding: null, /** * Cached reference to the linked element * @property _domRef * @private */ _domRef: null, /** * Internal typeof flag * @property __ygDragDrop * @private */ __ygDragDrop: true, /** * Set to true when horizontal contraints are applied * @property constrainX * @type boolean * @private */ constrainX: false, /** * Set to true when vertical contraints are applied * @property constrainY * @type boolean * @private */ constrainY: false, /** * The left constraint * @property minX * @type int * @private */ minX: 0, /** * The right constraint * @property maxX * @type int * @private */ maxX: 0, /** * The up constraint * @property minY * @type int * @type int * @private */ minY: 0, /** * The down constraint * @property maxY * @type int * @private */ maxY: 0, /** * Maintain offsets when we resetconstraints. Set to true when you want * the position of the element relative to its parent to stay the same * when the page changes * * @property maintainOffset * @type boolean */ maintainOffset: false, /** * Array of pixel locations the element will snap to if we specified a * horizontal graduation/interval. This array is generated automatically * when you define a tick interval. * @property xTicks * @type int[] */ xTicks: null, /** * Array of pixel locations the element will snap to if we specified a * vertical graduation/interval. This array is generated automatically * when you define a tick interval. * @property yTicks * @type int[] */ yTicks: null, /** * By default the drag and drop instance will only respond to the primary * button click (left button for a right-handed mouse). Set to true to * allow drag and drop to start with any mouse click that is propogated * by the browser * @property primaryButtonOnly * @type boolean */ primaryButtonOnly: true, /** * The availabe property is false until the linked dom element is accessible. * @property available * @type boolean */ available: false, /** * By default, drags can only be initiated if the mousedown occurs in the * region the linked element is. This is done in part to work around a * bug in some browsers that mis-report the mousedown if the previous * mouseup happened outside of the window. This property is set to true * if outer handles are defined. * * @property hasOuterHandles * @type boolean * @default false */ hasOuterHandles: false, /** * Code that executes immediately before the startDrag event * @method b4StartDrag * @private */ b4StartDrag: function(x, y) { }, /** * Abstract method called after a drag/drop object is clicked * and the drag or mousedown time thresholds have beeen met. * @method startDrag * @param {int} X click location * @param {int} Y click location */ startDrag: function(x, y) { /* override this */ }, /** * Code that executes immediately before the onDrag event * @method b4Drag * @private */ b4Drag: function(e) { }, /** * Abstract method called during the onMouseMove event while dragging an * object. * @method onDrag * @param {Event} e the mousemove event */ onDrag: function(e) { /* override this */ }, /** * Abstract method called when this element fist begins hovering over * another DragDrop obj * @method onDragEnter * @param {Event} e the mousemove event * @param {String|DragDrop[]} id In POINT mode, the element * id this is hovering over. In INTERSECT mode, an array of one or more * dragdrop items being hovered over. */ onDragEnter: function(e, id) { /* override this */ }, /** * Code that executes immediately before the onDragOver event * @method b4DragOver * @private */ b4DragOver: function(e) { }, /** * Abstract method called when this element is hovering over another * DragDrop obj * @method onDragOver * @param {Event} e the mousemove event * @param {String|DragDrop[]} id In POINT mode, the element * id this is hovering over. In INTERSECT mode, an array of dd items * being hovered over. */ onDragOver: function(e, id) { /* override this */ }, /** * Code that executes immediately before the onDragOut event * @method b4DragOut * @private */ b4DragOut: function(e) { }, /** * Abstract method called when we are no longer hovering over an element * @method onDragOut * @param {Event} e the mousemove event * @param {String|DragDrop[]} id In POINT mode, the element * id this was hovering over. In INTERSECT mode, an array of dd items * that the mouse is no longer over. */ onDragOut: function(e, id) { /* override this */ }, /** * Code that executes immediately before the onDragDrop event * @method b4DragDrop * @private */ b4DragDrop: function(e) { }, /** * Abstract method called when this item is dropped on another DragDrop * obj * @method onDragDrop * @param {Event} e the mouseup event * @param {String|DragDrop[]} id In POINT mode, the element * id this was dropped on. In INTERSECT mode, an array of dd items this * was dropped on. */ onDragDrop: function(e, id) { /* override this */ }, /** * Abstract method called when this item is dropped on an area with no * drop target * @method onInvalidDrop * @param {Event} e the mouseup event */ onInvalidDrop: function(e) { /* override this */ }, /** * Code that executes immediately before the endDrag event * @method b4EndDrag * @private */ b4EndDrag: function(e) { }, /** * Fired when we are done dragging the object * @method endDrag * @param {Event} e the mouseup event */ endDrag: function(e) { /* override this */ }, /** * Code executed immediately before the onMouseDown event * @method b4MouseDown * @param {Event} e the mousedown event * @private */ b4MouseDown: function(e) { }, /** * Event handler that fires when a drag/drop obj gets a mousedown * @method onMouseDown * @param {Event} e the mousedown event */ onMouseDown: function(e) { /* override this */ }, /** * Event handler that fires when a drag/drop obj gets a mouseup * @method onMouseUp * @param {Event} e the mouseup event */ onMouseUp: function(e) { /* override this */ }, /** * Override the onAvailable method to do what is needed after the initial * position was determined. * @method onAvailable */ onAvailable: function () { }, /** * Provides default constraint padding to "constrainTo" elements (defaults to {left: 0, right:0, top:0, bottom:0}). * @type Object */ defaultPadding : {left:0, right:0, top:0, bottom:0}, /** * Initializes the drag drop object's constraints to restrict movement to a certain element. * * Usage: <pre><code> var dd = new Ext.dd.DDProxy("dragDiv1", "proxytest", { dragElId: "existingProxyDiv" }); dd.startDrag = function(){ this.constrainTo("parent-id"); }; </code></pre> * Or you can initalize it using the {@link Ext.Element} object: <pre><code> Ext.get("dragDiv1").initDDProxy("proxytest", {dragElId: "existingProxyDiv"}, { startDrag : function(){ this.constrainTo("parent-id"); } }); </code></pre> * @param {Mixed} constrainTo The element to constrain to. * @param {Object/Number} pad (optional) Pad provides a way to specify "padding" of the constraints, * and can be either a number for symmetrical padding (4 would be equal to {left:4, right:4, top:4, bottom:4}) or * an object containing the sides to pad. For example: {right:10, bottom:10} * @param {Boolean} inContent (optional) Constrain the draggable in the content box of the element (inside padding and borders) */ constrainTo : function(constrainTo, pad, inContent){ if(typeof pad == "number"){ pad = {left: pad, right:pad, top:pad, bottom:pad}; } pad = pad || this.defaultPadding; var b = Ext.get(this.getEl()).getBox(); var ce = Ext.get(constrainTo); var s = ce.getScroll(); var c, cd = ce.dom; if(cd == document.body){ c = { x: s.left, y: s.top, width: Ext.lib.Dom.getViewWidth(), height: Ext.lib.Dom.getViewHeight()}; }else{ var xy = ce.getXY(); c = {x : xy[0]+s.left, y: xy[1]+s.top, width: cd.clientWidth, height: cd.clientHeight}; } var topSpace = b.y - c.y; var leftSpace = b.x - c.x; this.resetConstraints(); this.setXConstraint(leftSpace - (pad.left||0), // left c.width - leftSpace - b.width - (pad.right||0), //right this.xTickSize ); this.setYConstraint(topSpace - (pad.top||0), //top c.height - topSpace - b.height - (pad.bottom||0), //bottom this.yTickSize ); }, /** * Returns a reference to the linked element * @method getEl * @return {HTMLElement} the html element */ getEl: function() { if (!this._domRef) { this._domRef = Ext.getDom(this.id); } return this._domRef; }, /** * Returns a reference to the actual element to drag. By default this is * the same as the html element, but it can be assigned to another * element. An example of this can be found in Ext.dd.DDProxy * @method getDragEl * @return {HTMLElement} the html element */ getDragEl: function() { return Ext.getDom(this.dragElId); }, /** * Sets up the DragDrop object. Must be called in the constructor of any * Ext.dd.DragDrop subclass * @method init * @param id the id of the linked element * @param {String} sGroup the group of related items * @param {object} config configuration attributes */ init: function(id, sGroup, config) { this.initTarget(id, sGroup, config); Event.on(this.id, "mousedown", this.handleMouseDown, this); // Event.on(this.id, "selectstart", Event.preventDefault); }, /** * Initializes Targeting functionality only... the object does not * get a mousedown handler. * @method initTarget * @param id the id of the linked element * @param {String} sGroup the group of related items * @param {object} config configuration attributes */ initTarget: function(id, sGroup, config) { // configuration attributes this.config = config || {}; // create a local reference to the drag and drop manager this.DDM = Ext.dd.DDM; // initialize the groups array this.groups = {}; // assume that we have an element reference instead of an id if the // parameter is not a string if (typeof id !== "string") { id = Ext.id(id); } // set the id this.id = id; // add to an interaction group this.addToGroup((sGroup) ? sGroup : "default"); // We don't want to register this as the handle with the manager // so we just set the id rather than calling the setter. this.handleElId = id; // the linked element is the element that gets dragged by default this.setDragElId(id); // by default, clicked anchors will not start drag operations. this.invalidHandleTypes = { A: "A" }; this.invalidHandleIds = {}; this.invalidHandleClasses = []; this.applyConfig(); this.handleOnAvailable(); }, /** * Applies the configuration parameters that were passed into the constructor. * This is supposed to happen at each level through the inheritance chain. So * a DDProxy implentation will execute apply config on DDProxy, DD, and * DragDrop in order to get all of the parameters that are available in * each object. * @method applyConfig */ applyConfig: function() { // configurable properties: // padding, isTarget, maintainOffset, primaryButtonOnly this.padding = this.config.padding || [0, 0, 0, 0]; this.isTarget = (this.config.isTarget !== false); this.maintainOffset = (this.config.maintainOffset); this.primaryButtonOnly = (this.config.primaryButtonOnly !== false); }, /** * Executed when the linked element is available * @method handleOnAvailable * @private */ handleOnAvailable: function() { this.available = true; this.resetConstraints(); this.onAvailable(); }, /** * Configures the padding for the target zone in px. Effectively expands * (or reduces) the virtual object size for targeting calculations. * Supports css-style shorthand; if only one parameter is passed, all sides * will have that padding, and if only two are passed, the top and bottom * will have the first param, the left and right the second. * @method setPadding * @param {int} iTop Top pad * @param {int} iRight Right pad * @param {int} iBot Bot pad * @param {int} iLeft Left pad */ setPadding: function(iTop, iRight, iBot, iLeft) { // this.padding = [iLeft, iRight, iTop, iBot]; if (!iRight && 0 !== iRight) { this.padding = [iTop, iTop, iTop, iTop]; } else if (!iBot && 0 !== iBot) { this.padding = [iTop, iRight, iTop, iRight]; } else { this.padding = [iTop, iRight, iBot, iLeft]; } }, /** * Stores the initial placement of the linked element. * @method setInitPosition * @param {int} diffX the X offset, default 0 * @param {int} diffY the Y offset, default 0 */ setInitPosition: function(diffX, diffY) { var el = this.getEl(); if (!this.DDM.verifyEl(el)) { return; } var dx = diffX || 0; var dy = diffY || 0; var p = Dom.getXY( el ); this.initPageX = p[0] - dx; this.initPageY = p[1] - dy; this.lastPageX = p[0]; this.lastPageY = p[1]; this.setStartPosition(p); }, /** * Sets the start position of the element. This is set when the obj * is initialized, the reset when a drag is started. * @method setStartPosition * @param pos current position (from previous lookup) * @private */ setStartPosition: function(pos) { var p = pos || Dom.getXY( this.getEl() ); this.deltaSetXY = null; this.startPageX = p[0]; this.startPageY = p[1]; }, /** * Add this instance to a group of related drag/drop objects. All * instances belong to at least one group, and can belong to as many * groups as needed. * @method addToGroup * @param sGroup {string} the name of the group */ addToGroup: function(sGroup) { this.groups[sGroup] = true; this.DDM.regDragDrop(this, sGroup); }, /** * Remove's this instance from the supplied interaction group * @method removeFromGroup * @param {string} sGroup The group to drop */ removeFromGroup: function(sGroup) { if (this.groups[sGroup]) { delete this.groups[sGroup]; } this.DDM.removeDDFromGroup(this, sGroup); }, /** * Allows you to specify that an element other than the linked element * will be moved with the cursor during a drag * @method setDragElId * @param id {string} the id of the element that will be used to initiate the drag */ setDragElId: function(id) { this.dragElId = id; }, /** * Allows you to specify a child of the linked element that should be * used to initiate the drag operation. An example of this would be if * you have a content div with text and links. Clicking anywhere in the * content area would normally start the drag operation. Use this method * to specify that an element inside of the content div is the element * that starts the drag operation. * @method setHandleElId * @param id {string} the id of the element that will be used to * initiate the drag. */ setHandleElId: function(id) { if (typeof id !== "string") { id = Ext.id(id); } this.handleElId = id; this.DDM.regHandle(this.id, id); }, /** * Allows you to set an element outside of the linked element as a drag * handle * @method setOuterHandleElId * @param id the id of the element that will be used to initiate the drag */ setOuterHandleElId: function(id) { if (typeof id !== "string") { id = Ext.id(id); } Event.on(id, "mousedown", this.handleMouseDown, this); this.setHandleElId(id); this.hasOuterHandles = true; }, /** * Remove all drag and drop hooks for this element * @method unreg */ unreg: function() { Event.un(this.id, "mousedown", this.handleMouseDown); this._domRef = null; this.DDM._remove(this); }, destroy : function(){ this.unreg(); }, /** * Returns true if this instance is locked, or the drag drop mgr is locked * (meaning that all drag/drop is disabled on the page.) * @method isLocked * @return {boolean} true if this obj or all drag/drop is locked, else * false */ isLocked: function() { return (this.DDM.isLocked() || this.locked); }, /** * Fired when this object is clicked * @method handleMouseDown * @param {Event} e * @param {Ext.dd.DragDrop} oDD the clicked dd object (this dd obj) * @private */ handleMouseDown: function(e, oDD){ if (this.primaryButtonOnly && e.button != 0) { return; } if (this.isLocked()) { return; } this.DDM.refreshCache(this.groups); var pt = new Ext.lib.Point(Ext.lib.Event.getPageX(e), Ext.lib.Event.getPageY(e)); if (!this.hasOuterHandles && !this.DDM.isOverTarget(pt, this) ) { } else { if (this.clickValidator(e)) { // set the initial element position this.setStartPosition(); this.b4MouseDown(e); this.onMouseDown(e); this.DDM.handleMouseDown(e, this); this.DDM.stopEvent(e); } else { } } }, clickValidator: function(e) { var target = e.getTarget(); return ( this.isValidHandleChild(target) && (this.id == this.handleElId || this.DDM.handleWasClicked(target, this.id)) ); }, /** * Allows you to specify a tag name that should not start a drag operation * when clicked. This is designed to facilitate embedding links within a * drag handle that do something other than start the drag. * @method addInvalidHandleType * @param {string} tagName the type of element to exclude */ addInvalidHandleType: function(tagName) { var type = tagName.toUpperCase(); this.invalidHandleTypes[type] = type; }, /** * Lets you to specify an element id for a child of a drag handle * that should not initiate a drag * @method addInvalidHandleId * @param {string} id the element id of the element you wish to ignore */ addInvalidHandleId: function(id) { if (typeof id !== "string") { id = Ext.id(id); } this.invalidHandleIds[id] = id; }, /** * Lets you specify a css class of elements that will not initiate a drag * @method addInvalidHandleClass * @param {string} cssClass the class of the elements you wish to ignore */ addInvalidHandleClass: function(cssClass) { this.invalidHandleClasses.push(cssClass); }, /** * Unsets an excluded tag name set by addInvalidHandleType * @method removeInvalidHandleType * @param {string} tagName the type of element to unexclude */ removeInvalidHandleType: function(tagName) { var type = tagName.toUpperCase(); // this.invalidHandleTypes[type] = null; delete this.invalidHandleTypes[type]; }, /** * Unsets an invalid handle id * @method removeInvalidHandleId * @param {string} id the id of the element to re-enable */ removeInvalidHandleId: function(id) { if (typeof id !== "string") { id = Ext.id(id); } delete this.invalidHandleIds[id]; }, /** * Unsets an invalid css class * @method removeInvalidHandleClass * @param {string} cssClass the class of the element(s) you wish to * re-enable */ removeInvalidHandleClass: function(cssClass) { for (var i=0, len=this.invalidHandleClasses.length; i<len; ++i) { if (this.invalidHandleClasses[i] == cssClass) { delete this.invalidHandleClasses[i]; } } }, /** * Checks the tag exclusion list to see if this click should be ignored * @method isValidHandleChild * @param {HTMLElement} node the HTMLElement to evaluate * @return {boolean} true if this is a valid tag type, false if not */ isValidHandleChild: function(node) { var valid = true; // var n = (node.nodeName == "#text") ? node.parentNode : node; var nodeName; try { nodeName = node.nodeName.toUpperCase(); } catch(e) { nodeName = node.nodeName; } valid = valid && !this.invalidHandleTypes[nodeName]; valid = valid && !this.invalidHandleIds[node.id]; for (var i=0, len=this.invalidHandleClasses.length; valid && i<len; ++i) { valid = !Ext.fly(node).hasClass(this.invalidHandleClasses[i]); } return valid; }, /** * Create the array of horizontal tick marks if an interval was specified * in setXConstraint(). * @method setXTicks * @private */ setXTicks: function(iStartX, iTickSize) { this.xTicks = []; this.xTickSize = iTickSize; var tickMap = {}; for (var i = this.initPageX; i >= this.minX; i = i - iTickSize) { if (!tickMap[i]) { this.xTicks[this.xTicks.length] = i; tickMap[i] = true; } } for (i = this.initPageX; i <= this.maxX; i = i + iTickSize) { if (!tickMap[i]) { this.xTicks[this.xTicks.length] = i; tickMap[i] = true; } } this.xTicks.sort(this.DDM.numericSort) ; }, /** * Create the array of vertical tick marks if an interval was specified in * setYConstraint(). * @method setYTicks * @private */ setYTicks: function(iStartY, iTickSize) { this.yTicks = []; this.yTickSize = iTickSize; var tickMap = {}; for (var i = this.initPageY; i >= this.minY; i = i - iTickSize) { if (!tickMap[i]) { this.yTicks[this.yTicks.length] = i; tickMap[i] = true; } } for (i = this.initPageY; i <= this.maxY; i = i + iTickSize) { if (!tickMap[i]) { this.yTicks[this.yTicks.length] = i; tickMap[i] = true; } } this.yTicks.sort(this.DDM.numericSort) ; }, /** * By default, the element can be dragged any place on the screen. Use * this method to limit the horizontal travel of the element. Pass in * 0,0 for the parameters if you want to lock the drag to the y axis. * @method setXConstraint * @param {int} iLeft the number of pixels the element can move to the left * @param {int} iRight the number of pixels the element can move to the * right * @param {int} iTickSize optional parameter for specifying that the * element * should move iTickSize pixels at a time. */ setXConstraint: function(iLeft, iRight, iTickSize) { this.leftConstraint = iLeft; this.rightConstraint = iRight; this.minX = this.initPageX - iLeft; this.maxX = this.initPageX + iRight; if (iTickSize) { this.setXTicks(this.initPageX, iTickSize); } this.constrainX = true; }, /** * Clears any constraints applied to this instance. Also clears ticks * since they can't exist independent of a constraint at this time. * @method clearConstraints */ clearConstraints: function() { this.constrainX = false; this.constrainY = false; this.clearTicks(); }, /** * Clears any tick interval defined for this instance * @method clearTicks */ clearTicks: function() { this.xTicks = null; this.yTicks = null; this.xTickSize = 0; this.yTickSize = 0; }, /** * By default, the element can be dragged any place on the screen. Set * this to limit the vertical travel of the element. Pass in 0,0 for the * parameters if you want to lock the drag to the x axis. * @method setYConstraint * @param {int} iUp the number of pixels the element can move up * @param {int} iDown the number of pixels the element can move down * @param {int} iTickSize optional parameter for specifying that the * element should move iTickSize pixels at a time. */ setYConstraint: function(iUp, iDown, iTickSize) { this.topConstraint = iUp; this.bottomConstraint = iDown; this.minY = this.initPageY - iUp; this.maxY = this.initPageY + iDown; if (iTickSize) { this.setYTicks(this.initPageY, iTickSize); } this.constrainY = true; }, /** * resetConstraints must be called if you manually reposition a dd element. * @method resetConstraints * @param {boolean} maintainOffset */ resetConstraints: function() { // Maintain offsets if necessary if (this.initPageX || this.initPageX === 0) { // figure out how much this thing has moved var dx = (this.maintainOffset) ? this.lastPageX - this.initPageX : 0; var dy = (this.maintainOffset) ? this.lastPageY - this.initPageY : 0; this.setInitPosition(dx, dy); // This is the first time we have detected the element's position } else { this.setInitPosition(); } if (this.constrainX) { this.setXConstraint( this.leftConstraint, this.rightConstraint, this.xTickSize ); } if (this.constrainY) { this.setYConstraint( this.topConstraint, this.bottomConstraint, this.yTickSize ); } }, /** * Normally the drag element is moved pixel by pixel, but we can specify * that it move a number of pixels at a time. This method resolves the * location when we have it set up like this. * @method getTick * @param {int} val where we want to place the object * @param {int[]} tickArray sorted array of valid points * @return {int} the closest tick * @private */ getTick: function(val, tickArray) { if (!tickArray) { // If tick interval is not defined, it is effectively 1 pixel, // so we return the value passed to us. return val; } else if (tickArray[0] >= val) { // The value is lower than the first tick, so we return the first // tick. return tickArray[0]; } else { for (var i=0, len=tickArray.length; i<len; ++i) { var next = i + 1; if (tickArray[next] && tickArray[next] >= val) { var diff1 = val - tickArray[i]; var diff2 = tickArray[next] - val; return (diff2 > diff1) ? tickArray[i] : tickArray[next]; } } // The value is larger than the last tick, so we return the last // tick. return tickArray[tickArray.length - 1]; } }, /** * toString method * @method toString * @return {string} string representation of the dd obj */ toString: function() { return ("DragDrop " + this.id); } }; })(); /** * The drag and drop utility provides a framework for building drag and drop * applications. In addition to enabling drag and drop for specific elements, * the drag and drop elements are tracked by the manager class, and the * interactions between the various elements are tracked during the drag and * the implementing code is notified about these important moments. */ // Only load the library once. Rewriting the manager class would orphan // existing drag and drop instances. if (!Ext.dd.DragDropMgr) { /** * @class Ext.dd.DragDropMgr * DragDropMgr is a singleton that tracks the element interaction for * all DragDrop items in the window. Generally, you will not call * this class directly, but it does have helper methods that could * be useful in your DragDrop implementations. * @singleton */ Ext.dd.DragDropMgr = function() { var Event = Ext.EventManager; return { /** * Two dimensional Array of registered DragDrop objects. The first * dimension is the DragDrop item group, the second the DragDrop * object. * @property ids * @type {string: string} * @private * @static */ ids: {}, /** * Array of element ids defined as drag handles. Used to determine * if the element that generated the mousedown event is actually the * handle and not the html element itself. * @property handleIds * @type {string: string} * @private * @static */ handleIds: {}, /** * the DragDrop object that is currently being dragged * @property dragCurrent * @type DragDrop * @private * @static **/ dragCurrent: null, /** * the DragDrop object(s) that are being hovered over * @property dragOvers * @type Array * @private * @static */ dragOvers: {}, /** * the X distance between the cursor and the object being dragged * @property deltaX * @type int * @private * @static */ deltaX: 0, /** * the Y distance between the cursor and the object being dragged * @property deltaY * @type int * @private * @static */ deltaY: 0, /** * Flag to determine if we should prevent the default behavior of the * events we define. By default this is true, but this can be set to * false if you need the default behavior (not recommended) * @property preventDefault * @type boolean * @static */ preventDefault: true, /** * Flag to determine if we should stop the propagation of the events * we generate. This is true by default but you may want to set it to * false if the html element contains other features that require the * mouse click. * @property stopPropagation * @type boolean * @static */ stopPropagation: true, /** * Internal flag that is set to true when drag and drop has been * intialized * @property initialized * @private * @static */ initialized: false, /** * All drag and drop can be disabled. * @property locked * @private * @static */ locked: false, /** * Called the first time an element is registered. * @method init * @private * @static */ init: function() { this.initialized = true; }, /** * In point mode, drag and drop interaction is defined by the * location of the cursor during the drag/drop * @property POINT * @type int * @static */ POINT: 0, /** * In intersect mode, drag and drop interaction is defined by the * overlap of two or more drag and drop objects. * @property INTERSECT * @type int * @static */ INTERSECT: 1, /** * The current drag and drop mode. Default: POINT * @property mode * @type int * @static */ mode: 0, /** * Runs method on all drag and drop objects * @method _execOnAll * @private * @static */ _execOnAll: function(sMethod, args) { for (var i in this.ids) { for (var j in this.ids[i]) { var oDD = this.ids[i][j]; if (! this.isTypeOfDD(oDD)) { continue; } oDD[sMethod].apply(oDD, args); } } }, /** * Drag and drop initialization. Sets up the global event handlers * @method _onLoad * @private * @static */ _onLoad: function() { this.init(); Event.on(document, "mouseup", this.handleMouseUp, this, true); Event.on(document, "mousemove", this.handleMouseMove, this, true); Event.on(window, "unload", this._onUnload, this, true); Event.on(window, "resize", this._onResize, this, true); // Event.on(window, "mouseout", this._test); }, /** * Reset constraints on all drag and drop objs * @method _onResize * @private * @static */ _onResize: function(e) { this._execOnAll("resetConstraints", []); }, /** * Lock all drag and drop functionality * @method lock * @static */ lock: function() { this.locked = true; }, /** * Unlock all drag and drop functionality * @method unlock * @static */ unlock: function() { this.locked = false; }, /** * Is drag and drop locked? * @method isLocked * @return {boolean} True if drag and drop is locked, false otherwise. * @static */ isLocked: function() { return this.locked; }, /** * Location cache that is set for all drag drop objects when a drag is * initiated, cleared when the drag is finished. * @property locationCache * @private * @static */ locationCache: {}, /** * Set useCache to false if you want to force object the lookup of each * drag and drop linked element constantly during a drag. * @property useCache * @type boolean * @static */ useCache: true, /** * The number of pixels that the mouse needs to move after the * mousedown before the drag is initiated. Default=3; * @property clickPixelThresh * @type int * @static */ clickPixelThresh: 3, /** * The number of milliseconds after the mousedown event to initiate the * drag if we don't get a mouseup event. Default=1000 * @property clickTimeThresh * @type int * @static */ clickTimeThresh: 350, /** * Flag that indicates that either the drag pixel threshold or the * mousdown time threshold has been met * @property dragThreshMet * @type boolean * @private * @static */ dragThreshMet: false, /** * Timeout used for the click time threshold * @property clickTimeout * @type Object * @private * @static */ clickTimeout: null, /** * The X position of the mousedown event stored for later use when a * drag threshold is met. * @property startX * @type int * @private * @static */ startX: 0, /** * The Y position of the mousedown event stored for later use when a * drag threshold is met. * @property startY * @type int * @private * @static */ startY: 0, /** * Each DragDrop instance must be registered with the DragDropMgr. * This is executed in DragDrop.init() * @method regDragDrop * @param {DragDrop} oDD the DragDrop object to register * @param {String} sGroup the name of the group this element belongs to * @static */ regDragDrop: function(oDD, sGroup) { if (!this.initialized) { this.init(); } if (!this.ids[sGroup]) { this.ids[sGroup] = {}; } this.ids[sGroup][oDD.id] = oDD; }, /** * Removes the supplied dd instance from the supplied group. Executed * by DragDrop.removeFromGroup, so don't call this function directly. * @method removeDDFromGroup * @private * @static */ removeDDFromGroup: function(oDD, sGroup) { if (!this.ids[sGroup]) { this.ids[sGroup] = {}; } var obj = this.ids[sGroup]; if (obj && obj[oDD.id]) { delete obj[oDD.id]; } }, /** * Unregisters a drag and drop item. This is executed in * DragDrop.unreg, use that method instead of calling this directly. * @method _remove * @private * @static */ _remove: function(oDD) { for (var g in oDD.groups) { if (g && this.ids[g] && this.ids[g][oDD.id]) { delete this.ids[g][oDD.id]; } } delete this.handleIds[oDD.id]; }, /** * Each DragDrop handle element must be registered. This is done * automatically when executing DragDrop.setHandleElId() * @method regHandle * @param {String} sDDId the DragDrop id this element is a handle for * @param {String} sHandleId the id of the element that is the drag * handle * @static */ regHandle: function(sDDId, sHandleId) { if (!this.handleIds[sDDId]) { this.handleIds[sDDId] = {}; } this.handleIds[sDDId][sHandleId] = sHandleId; }, /** * Utility function to determine if a given element has been * registered as a drag drop item. * @method isDragDrop * @param {String} id the element id to check * @return {boolean} true if this element is a DragDrop item, * false otherwise * @static */ isDragDrop: function(id) { return ( this.getDDById(id) ) ? true : false; }, /** * Returns the drag and drop instances that are in all groups the * passed in instance belongs to. * @method getRelated * @param {DragDrop} p_oDD the obj to get related data for * @param {boolean} bTargetsOnly if true, only return targetable objs * @return {DragDrop[]} the related instances * @static */ getRelated: function(p_oDD, bTargetsOnly) { var oDDs = []; for (var i in p_oDD.groups) { for (var j in this.ids[i]) { var dd = this.ids[i][j]; if (! this.isTypeOfDD(dd)) { continue; } if (!bTargetsOnly || dd.isTarget) { oDDs[oDDs.length] = dd; } } } return oDDs; }, /** * Returns true if the specified dd target is a legal target for * the specifice drag obj * @method isLegalTarget * @param {DragDrop} the drag obj * @param {DragDrop} the target * @return {boolean} true if the target is a legal target for the * dd obj * @static */ isLegalTarget: function (oDD, oTargetDD) { var targets = this.getRelated(oDD, true); for (var i=0, len=targets.length;i<len;++i) { if (targets[i].id == oTargetDD.id) { return true; } } return false; }, /** * My goal is to be able to transparently determine if an object is * typeof DragDrop, and the exact subclass of DragDrop. typeof * returns "object", oDD.constructor.toString() always returns * "DragDrop" and not the name of the subclass. So for now it just * evaluates a well-known variable in DragDrop. * @method isTypeOfDD * @param {Object} the object to evaluate * @return {boolean} true if typeof oDD = DragDrop * @static */ isTypeOfDD: function (oDD) { return (oDD && oDD.__ygDragDrop); }, /** * Utility function to determine if a given element has been * registered as a drag drop handle for the given Drag Drop object. * @method isHandle * @param {String} id the element id to check * @return {boolean} true if this element is a DragDrop handle, false * otherwise * @static */ isHandle: function(sDDId, sHandleId) { return ( this.handleIds[sDDId] && this.handleIds[sDDId][sHandleId] ); }, /** * Returns the DragDrop instance for a given id * @method getDDById * @param {String} id the id of the DragDrop object * @return {DragDrop} the drag drop object, null if it is not found * @static */ getDDById: function(id) { for (var i in this.ids) { if (this.ids[i][id]) { return this.ids[i][id]; } } return null; }, /** * Fired after a registered DragDrop object gets the mousedown event. * Sets up the events required to track the object being dragged * @method handleMouseDown * @param {Event} e the event * @param oDD the DragDrop object being dragged * @private * @static */ handleMouseDown: function(e, oDD) { if(Ext.QuickTips){ Ext.QuickTips.disable(); } if(this.dragCurrent){ // the original browser mouseup wasn't handled (e.g. outside FF browser window) // so clean up first to avoid breaking the next drag this.handleMouseUp(e); } this.currentTarget = e.getTarget(); this.dragCurrent = oDD; var el = oDD.getEl(); // track start position this.startX = e.getPageX(); this.startY = e.getPageY(); this.deltaX = this.startX - el.offsetLeft; this.deltaY = this.startY - el.offsetTop; this.dragThreshMet = false; this.clickTimeout = setTimeout( function() { var DDM = Ext.dd.DDM; DDM.startDrag(DDM.startX, DDM.startY); }, this.clickTimeThresh ); }, /** * Fired when either the drag pixel threshol or the mousedown hold * time threshold has been met. * @method startDrag * @param x {int} the X position of the original mousedown * @param y {int} the Y position of the original mousedown * @static */ startDrag: function(x, y) { clearTimeout(this.clickTimeout); if (this.dragCurrent) { this.dragCurrent.b4StartDrag(x, y); this.dragCurrent.startDrag(x, y); } this.dragThreshMet = true; }, /** * Internal function to handle the mouseup event. Will be invoked * from the context of the document. * @method handleMouseUp * @param {Event} e the event * @private * @static */ handleMouseUp: function(e) { if(Ext.QuickTips){ Ext.QuickTips.enable(); } if (! this.dragCurrent) { return; } clearTimeout(this.clickTimeout); if (this.dragThreshMet) { this.fireEvents(e, true); } else { } this.stopDrag(e); this.stopEvent(e); }, /** * Utility to stop event propagation and event default, if these * features are turned on. * @method stopEvent * @param {Event} e the event as returned by this.getEvent() * @static */ stopEvent: function(e){ if(this.stopPropagation) { e.stopPropagation(); } if (this.preventDefault) { e.preventDefault(); } }, /** * Internal function to clean up event handlers after the drag * operation is complete * @method stopDrag * @param {Event} e the event * @private * @static */ stopDrag: function(e) { // Fire the drag end event for the item that was dragged if (this.dragCurrent) { if (this.dragThreshMet) { this.dragCurrent.b4EndDrag(e); this.dragCurrent.endDrag(e); } this.dragCurrent.onMouseUp(e); } this.dragCurrent = null; this.dragOvers = {}; }, /** * Internal function to handle the mousemove event. Will be invoked * from the context of the html element. * * @TODO figure out what we can do about mouse events lost when the * user drags objects beyond the window boundary. Currently we can * detect this in internet explorer by verifying that the mouse is * down during the mousemove event. Firefox doesn't give us the * button state on the mousemove event. * @method handleMouseMove * @param {Event} e the event * @private * @static */ handleMouseMove: function(e) { if (! this.dragCurrent) { return true; } // var button = e.which || e.button; // check for IE mouseup outside of page boundary if (Ext.isIE && (e.button !== 0 && e.button !== 1 && e.button !== 2)) { this.stopEvent(e); return this.handleMouseUp(e); } if (!this.dragThreshMet) { var diffX = Math.abs(this.startX - e.getPageX()); var diffY = Math.abs(this.startY - e.getPageY()); if (diffX > this.clickPixelThresh || diffY > this.clickPixelThresh) { this.startDrag(this.startX, this.startY); } } if (this.dragThreshMet) { this.dragCurrent.b4Drag(e); this.dragCurrent.onDrag(e); if(!this.dragCurrent.moveOnly){ this.fireEvents(e, false); } } this.stopEvent(e); return true; }, /** * Iterates over all of the DragDrop elements to find ones we are * hovering over or dropping on * @method fireEvents * @param {Event} e the event * @param {boolean} isDrop is this a drop op or a mouseover op? * @private * @static */ fireEvents: function(e, isDrop) { var dc = this.dragCurrent; // If the user did the mouse up outside of the window, we could // get here even though we have ended the drag. if (!dc || dc.isLocked()) { return; } var pt = e.getPoint(); // cache the previous dragOver array var oldOvers = []; var outEvts = []; var overEvts = []; var dropEvts = []; var enterEvts = []; // Check to see if the object(s) we were hovering over is no longer // being hovered over so we can fire the onDragOut event for (var i in this.dragOvers) { var ddo = this.dragOvers[i]; if (! this.isTypeOfDD(ddo)) { continue; } if (! this.isOverTarget(pt, ddo, this.mode)) { outEvts.push( ddo ); } oldOvers[i] = true; delete this.dragOvers[i]; } for (var sGroup in dc.groups) { if ("string" != typeof sGroup) { continue; } for (i in this.ids[sGroup]) { var oDD = this.ids[sGroup][i]; if (! this.isTypeOfDD(oDD)) { continue; } if (oDD.isTarget && !oDD.isLocked() && ((oDD != dc) || (dc.ignoreSelf === false))) { if (this.isOverTarget(pt, oDD, this.mode)) { // look for drop interactions if (isDrop) { dropEvts.push( oDD ); // look for drag enter and drag over interactions } else { // initial drag over: dragEnter fires if (!oldOvers[oDD.id]) { enterEvts.push( oDD ); // subsequent drag overs: dragOver fires } else { overEvts.push( oDD ); } this.dragOvers[oDD.id] = oDD; } } } } } if (this.mode) { if (outEvts.length) { dc.b4DragOut(e, outEvts); dc.onDragOut(e, outEvts); } if (enterEvts.length) { dc.onDragEnter(e, enterEvts); } if (overEvts.length) { dc.b4DragOver(e, overEvts); dc.onDragOver(e, overEvts); } if (dropEvts.length) { dc.b4DragDrop(e, dropEvts); dc.onDragDrop(e, dropEvts); } } else { // fire dragout events var len = 0; for (i=0, len=outEvts.length; i<len; ++i) { dc.b4DragOut(e, outEvts[i].id); dc.onDragOut(e, outEvts[i].id); } // fire enter events for (i=0,len=enterEvts.length; i<len; ++i) { // dc.b4DragEnter(e, oDD.id); dc.onDragEnter(e, enterEvts[i].id); } // fire over events for (i=0,len=overEvts.length; i<len; ++i) { dc.b4DragOver(e, overEvts[i].id); dc.onDragOver(e, overEvts[i].id); } // fire drop events for (i=0, len=dropEvts.length; i<len; ++i) { dc.b4DragDrop(e, dropEvts[i].id); dc.onDragDrop(e, dropEvts[i].id); } } // notify about a drop that did not find a target if (isDrop && !dropEvts.length) { dc.onInvalidDrop(e); } }, /** * Helper function for getting the best match from the list of drag * and drop objects returned by the drag and drop events when we are * in INTERSECT mode. It returns either the first object that the * cursor is over, or the object that has the greatest overlap with * the dragged element. * @method getBestMatch * @param {DragDrop[]} dds The array of drag and drop objects * targeted * @return {DragDrop} The best single match * @static */ getBestMatch: function(dds) { var winner = null; // Return null if the input is not what we expect //if (!dds || !dds.length || dds.length == 0) { // winner = null; // If there is only one item, it wins //} else if (dds.length == 1) { var len = dds.length; if (len == 1) { winner = dds[0]; } else { // Loop through the targeted items for (var i=0; i<len; ++i) { var dd = dds[i]; // If the cursor is over the object, it wins. If the // cursor is over multiple matches, the first one we come // to wins. if (dd.cursorIsOver) { winner = dd; break; // Otherwise the object with the most overlap wins } else { if (!winner || winner.overlap.getArea() < dd.overlap.getArea()) { winner = dd; } } } } return winner; }, /** * Refreshes the cache of the top-left and bottom-right points of the * drag and drop objects in the specified group(s). This is in the * format that is stored in the drag and drop instance, so typical * usage is: * <code> * Ext.dd.DragDropMgr.refreshCache(ddinstance.groups); * </code> * Alternatively: * <code> * Ext.dd.DragDropMgr.refreshCache({group1:true, group2:true}); * </code> * @TODO this really should be an indexed array. Alternatively this * method could accept both. * @method refreshCache * @param {Object} groups an associative array of groups to refresh * @static */ refreshCache: function(groups) { for (var sGroup in groups) { if ("string" != typeof sGroup) { continue; } for (var i in this.ids[sGroup]) { var oDD = this.ids[sGroup][i]; if (this.isTypeOfDD(oDD)) { // if (this.isTypeOfDD(oDD) && oDD.isTarget) { var loc = this.getLocation(oDD); if (loc) { this.locationCache[oDD.id] = loc; } else { delete this.locationCache[oDD.id]; // this will unregister the drag and drop object if // the element is not in a usable state // oDD.unreg(); } } } } }, /** * This checks to make sure an element exists and is in the DOM. The * main purpose is to handle cases where innerHTML is used to remove * drag and drop objects from the DOM. IE provides an 'unspecified * error' when trying to access the offsetParent of such an element * @method verifyEl * @param {HTMLElement} el the element to check * @return {boolean} true if the element looks usable * @static */ verifyEl: function(el) { if (el) { var parent; if(Ext.isIE){ try{ parent = el.offsetParent; }catch(e){} }else{ parent = el.offsetParent; } if (parent) { return true; } } return false; }, /** * Returns a Region object containing the drag and drop element's position * and size, including the padding configured for it * @method getLocation * @param {DragDrop} oDD the drag and drop object to get the * location for * @return {Ext.lib.Region} a Region object representing the total area * the element occupies, including any padding * the instance is configured for. * @static */ getLocation: function(oDD) { if (! this.isTypeOfDD(oDD)) { return null; } var el = oDD.getEl(), pos, x1, x2, y1, y2, t, r, b, l; try { pos= Ext.lib.Dom.getXY(el); } catch (e) { } if (!pos) { return null; } x1 = pos[0]; x2 = x1 + el.offsetWidth; y1 = pos[1]; y2 = y1 + el.offsetHeight; t = y1 - oDD.padding[0]; r = x2 + oDD.padding[1]; b = y2 + oDD.padding[2]; l = x1 - oDD.padding[3]; return new Ext.lib.Region( t, r, b, l ); }, /** * Checks the cursor location to see if it over the target * @method isOverTarget * @param {Ext.lib.Point} pt The point to evaluate * @param {DragDrop} oTarget the DragDrop object we are inspecting * @return {boolean} true if the mouse is over the target * @private * @static */ isOverTarget: function(pt, oTarget, intersect) { // use cache if available var loc = this.locationCache[oTarget.id]; if (!loc || !this.useCache) { loc = this.getLocation(oTarget); this.locationCache[oTarget.id] = loc; } if (!loc) { return false; } oTarget.cursorIsOver = loc.contains( pt ); // DragDrop is using this as a sanity check for the initial mousedown // in this case we are done. In POINT mode, if the drag obj has no // contraints, we are also done. Otherwise we need to evaluate the // location of the target as related to the actual location of the // dragged element. var dc = this.dragCurrent; if (!dc || !dc.getTargetCoord || (!intersect && !dc.constrainX && !dc.constrainY)) { return oTarget.cursorIsOver; } oTarget.overlap = null; // Get the current location of the drag element, this is the // location of the mouse event less the delta that represents // where the original mousedown happened on the element. We // need to consider constraints and ticks as well. var pos = dc.getTargetCoord(pt.x, pt.y); var el = dc.getDragEl(); var curRegion = new Ext.lib.Region( pos.y, pos.x + el.offsetWidth, pos.y + el.offsetHeight, pos.x ); var overlap = curRegion.intersect(loc); if (overlap) { oTarget.overlap = overlap; return (intersect) ? true : oTarget.cursorIsOver; } else { return false; } }, /** * unload event handler * @method _onUnload * @private * @static */ _onUnload: function(e, me) { Ext.dd.DragDropMgr.unregAll(); }, /** * Cleans up the drag and drop events and objects. * @method unregAll * @private * @static */ unregAll: function() { if (this.dragCurrent) { this.stopDrag(); this.dragCurrent = null; } this._execOnAll("unreg", []); for (var i in this.elementCache) { delete this.elementCache[i]; } this.elementCache = {}; this.ids = {}; }, /** * A cache of DOM elements * @property elementCache * @private * @static */ elementCache: {}, /** * Get the wrapper for the DOM element specified * @method getElWrapper * @param {String} id the id of the element to get * @return {Ext.dd.DDM.ElementWrapper} the wrapped element * @private * @deprecated This wrapper isn't that useful * @static */ getElWrapper: function(id) { var oWrapper = this.elementCache[id]; if (!oWrapper || !oWrapper.el) { oWrapper = this.elementCache[id] = new this.ElementWrapper(Ext.getDom(id)); } return oWrapper; }, /** * Returns the actual DOM element * @method getElement * @param {String} id the id of the elment to get * @return {Object} The element * @deprecated use Ext.lib.Ext.getDom instead * @static */ getElement: function(id) { return Ext.getDom(id); }, /** * Returns the style property for the DOM element (i.e., * document.getElById(id).style) * @method getCss * @param {String} id the id of the elment to get * @return {Object} The style property of the element * @deprecated use Ext.lib.Dom instead * @static */ getCss: function(id) { var el = Ext.getDom(id); return (el) ? el.style : null; }, /** * Inner class for cached elements * @class DragDropMgr.ElementWrapper * @for DragDropMgr * @private * @deprecated */ ElementWrapper: function(el) { /** * The element * @property el */ this.el = el || null; /** * The element id * @property id */ this.id = this.el && el.id; /** * A reference to the style property * @property css */ this.css = this.el && el.style; }, /** * Returns the X position of an html element * @method getPosX * @param el the element for which to get the position * @return {int} the X coordinate * @for DragDropMgr * @deprecated use Ext.lib.Dom.getX instead * @static */ getPosX: function(el) { return Ext.lib.Dom.getX(el); }, /** * Returns the Y position of an html element * @method getPosY * @param el the element for which to get the position * @return {int} the Y coordinate * @deprecated use Ext.lib.Dom.getY instead * @static */ getPosY: function(el) { return Ext.lib.Dom.getY(el); }, /** * Swap two nodes. In IE, we use the native method, for others we * emulate the IE behavior * @method swapNode * @param n1 the first node to swap * @param n2 the other node to swap * @static */ swapNode: function(n1, n2) { if (n1.swapNode) { n1.swapNode(n2); } else { var p = n2.parentNode; var s = n2.nextSibling; if (s == n1) { p.insertBefore(n1, n2); } else if (n2 == n1.nextSibling) { p.insertBefore(n2, n1); } else { n1.parentNode.replaceChild(n2, n1); p.insertBefore(n1, s); } } }, /** * Returns the current scroll position * @method getScroll * @private * @static */ getScroll: function () { var t, l, dde=document.documentElement, db=document.body; if (dde && (dde.scrollTop || dde.scrollLeft)) { t = dde.scrollTop; l = dde.scrollLeft; } else if (db) { t = db.scrollTop; l = db.scrollLeft; } else { } return { top: t, left: l }; }, /** * Returns the specified element style property * @method getStyle * @param {HTMLElement} el the element * @param {string} styleProp the style property * @return {string} The value of the style property * @deprecated use Ext.lib.Dom.getStyle * @static */ getStyle: function(el, styleProp) { return Ext.fly(el).getStyle(styleProp); }, /** * Gets the scrollTop * @method getScrollTop * @return {int} the document's scrollTop * @static */ getScrollTop: function () { return this.getScroll().top; }, /** * Gets the scrollLeft * @method getScrollLeft * @return {int} the document's scrollTop * @static */ getScrollLeft: function () { return this.getScroll().left; }, /** * Sets the x/y position of an element to the location of the * target element. * @method moveToEl * @param {HTMLElement} moveEl The element to move * @param {HTMLElement} targetEl The position reference element * @static */ moveToEl: function (moveEl, targetEl) { var aCoord = Ext.lib.Dom.getXY(targetEl); Ext.lib.Dom.setXY(moveEl, aCoord); }, /** * Numeric array sort function * @method numericSort * @static */ numericSort: function(a, b) { return (a - b); }, /** * Internal counter * @property _timeoutCount * @private * @static */ _timeoutCount: 0, /** * Trying to make the load order less important. Without this we get * an error if this file is loaded before the Event Utility. * @method _addListeners * @private * @static */ _addListeners: function() { var DDM = Ext.dd.DDM; if ( Ext.lib.Event && document ) { DDM._onLoad(); } else { if (DDM._timeoutCount > 2000) { } else { setTimeout(DDM._addListeners, 10); if (document && document.body) { DDM._timeoutCount += 1; } } } }, /** * Recursively searches the immediate parent and all child nodes for * the handle element in order to determine wheter or not it was * clicked. * @method handleWasClicked * @param node the html element to inspect * @static */ handleWasClicked: function(node, id) { if (this.isHandle(id, node.id)) { return true; } else { // check to see if this is a text node child of the one we want var p = node.parentNode; while (p) { if (this.isHandle(id, p.id)) { return true; } else { p = p.parentNode; } } } return false; } }; }(); // shorter alias, save a few bytes Ext.dd.DDM = Ext.dd.DragDropMgr; Ext.dd.DDM._addListeners(); } /** * @class Ext.dd.DD * A DragDrop implementation where the linked element follows the * mouse cursor during a drag. * @extends Ext.dd.DragDrop * @constructor * @param {String} id the id of the linked element * @param {String} sGroup the group of related DragDrop items * @param {object} config an object containing configurable attributes * Valid properties for DD: * scroll */ Ext.dd.DD = function(id, sGroup, config) { if (id) { this.init(id, sGroup, config); } }; Ext.extend(Ext.dd.DD, Ext.dd.DragDrop, { /** * When set to true, the utility automatically tries to scroll the browser * window when a drag and drop element is dragged near the viewport boundary. * Defaults to true. * @property scroll * @type boolean */ scroll: true, /** * Sets the pointer offset to the distance between the linked element's top * left corner and the location the element was clicked * @method autoOffset * @param {int} iPageX the X coordinate of the click * @param {int} iPageY the Y coordinate of the click */ autoOffset: function(iPageX, iPageY) { var x = iPageX - this.startPageX; var y = iPageY - this.startPageY; this.setDelta(x, y); }, /** * Sets the pointer offset. You can call this directly to force the * offset to be in a particular location (e.g., pass in 0,0 to set it * to the center of the object) * @method setDelta * @param {int} iDeltaX the distance from the left * @param {int} iDeltaY the distance from the top */ setDelta: function(iDeltaX, iDeltaY) { this.deltaX = iDeltaX; this.deltaY = iDeltaY; }, /** * Sets the drag element to the location of the mousedown or click event, * maintaining the cursor location relative to the location on the element * that was clicked. Override this if you want to place the element in a * location other than where the cursor is. * @method setDragElPos * @param {int} iPageX the X coordinate of the mousedown or drag event * @param {int} iPageY the Y coordinate of the mousedown or drag event */ setDragElPos: function(iPageX, iPageY) { // the first time we do this, we are going to check to make sure // the element has css positioning var el = this.getDragEl(); this.alignElWithMouse(el, iPageX, iPageY); }, /** * Sets the element to the location of the mousedown or click event, * maintaining the cursor location relative to the location on the element * that was clicked. Override this if you want to place the element in a * location other than where the cursor is. * @method alignElWithMouse * @param {HTMLElement} el the element to move * @param {int} iPageX the X coordinate of the mousedown or drag event * @param {int} iPageY the Y coordinate of the mousedown or drag event */ alignElWithMouse: function(el, iPageX, iPageY) { var oCoord = this.getTargetCoord(iPageX, iPageY); var fly = el.dom ? el : Ext.fly(el, '_dd'); if (!this.deltaSetXY) { var aCoord = [oCoord.x, oCoord.y]; fly.setXY(aCoord); var newLeft = fly.getLeft(true); var newTop = fly.getTop(true); this.deltaSetXY = [ newLeft - oCoord.x, newTop - oCoord.y ]; } else { fly.setLeftTop(oCoord.x + this.deltaSetXY[0], oCoord.y + this.deltaSetXY[1]); } this.cachePosition(oCoord.x, oCoord.y); this.autoScroll(oCoord.x, oCoord.y, el.offsetHeight, el.offsetWidth); return oCoord; }, /** * Saves the most recent position so that we can reset the constraints and * tick marks on-demand. We need to know this so that we can calculate the * number of pixels the element is offset from its original position. * @method cachePosition * @param iPageX the current x position (optional, this just makes it so we * don't have to look it up again) * @param iPageY the current y position (optional, this just makes it so we * don't have to look it up again) */ cachePosition: function(iPageX, iPageY) { if (iPageX) { this.lastPageX = iPageX; this.lastPageY = iPageY; } else { var aCoord = Ext.lib.Dom.getXY(this.getEl()); this.lastPageX = aCoord[0]; this.lastPageY = aCoord[1]; } }, /** * Auto-scroll the window if the dragged object has been moved beyond the * visible window boundary. * @method autoScroll * @param {int} x the drag element's x position * @param {int} y the drag element's y position * @param {int} h the height of the drag element * @param {int} w the width of the drag element * @private */ autoScroll: function(x, y, h, w) { if (this.scroll) { // The client height var clientH = Ext.lib.Dom.getViewHeight(); // The client width var clientW = Ext.lib.Dom.getViewWidth(); // The amt scrolled down var st = this.DDM.getScrollTop(); // The amt scrolled right var sl = this.DDM.getScrollLeft(); // Location of the bottom of the element var bot = h + y; // Location of the right of the element var right = w + x; // The distance from the cursor to the bottom of the visible area, // adjusted so that we don't scroll if the cursor is beyond the // element drag constraints var toBot = (clientH + st - y - this.deltaY); // The distance from the cursor to the right of the visible area var toRight = (clientW + sl - x - this.deltaX); // How close to the edge the cursor must be before we scroll // var thresh = (document.all) ? 100 : 40; var thresh = 40; // How many pixels to scroll per autoscroll op. This helps to reduce // clunky scrolling. IE is more sensitive about this ... it needs this // value to be higher. var scrAmt = (document.all) ? 80 : 30; // Scroll down if we are near the bottom of the visible page and the // obj extends below the crease if ( bot > clientH && toBot < thresh ) { window.scrollTo(sl, st + scrAmt); } // Scroll up if the window is scrolled down and the top of the object // goes above the top border if ( y < st && st > 0 && y - st < thresh ) { window.scrollTo(sl, st - scrAmt); } // Scroll right if the obj is beyond the right border and the cursor is // near the border. if ( right > clientW && toRight < thresh ) { window.scrollTo(sl + scrAmt, st); } // Scroll left if the window has been scrolled to the right and the obj // extends past the left border if ( x < sl && sl > 0 && x - sl < thresh ) { window.scrollTo(sl - scrAmt, st); } } }, /** * Finds the location the element should be placed if we want to move * it to where the mouse location less the click offset would place us. * @method getTargetCoord * @param {int} iPageX the X coordinate of the click * @param {int} iPageY the Y coordinate of the click * @return an object that contains the coordinates (Object.x and Object.y) * @private */ getTargetCoord: function(iPageX, iPageY) { var x = iPageX - this.deltaX; var y = iPageY - this.deltaY; if (this.constrainX) { if (x < this.minX) { x = this.minX; } if (x > this.maxX) { x = this.maxX; } } if (this.constrainY) { if (y < this.minY) { y = this.minY; } if (y > this.maxY) { y = this.maxY; } } x = this.getTick(x, this.xTicks); y = this.getTick(y, this.yTicks); return {x:x, y:y}; }, /** * Sets up config options specific to this class. Overrides * Ext.dd.DragDrop, but all versions of this method through the * inheritance chain are called */ applyConfig: function() { Ext.dd.DD.superclass.applyConfig.call(this); this.scroll = (this.config.scroll !== false); }, /** * Event that fires prior to the onMouseDown event. Overrides * Ext.dd.DragDrop. */ b4MouseDown: function(e) { // this.resetConstraints(); this.autoOffset(e.getPageX(), e.getPageY()); }, /** * Event that fires prior to the onDrag event. Overrides * Ext.dd.DragDrop. */ b4Drag: function(e) { this.setDragElPos(e.getPageX(), e.getPageY()); }, toString: function() { return ("DD " + this.id); } ////////////////////////////////////////////////////////////////////////// // Debugging ygDragDrop events that can be overridden ////////////////////////////////////////////////////////////////////////// /* startDrag: function(x, y) { }, onDrag: function(e) { }, onDragEnter: function(e, id) { }, onDragOver: function(e, id) { }, onDragOut: function(e, id) { }, onDragDrop: function(e, id) { }, endDrag: function(e) { } */ }); /** * @class Ext.dd.DDProxy * A DragDrop implementation that inserts an empty, bordered div into * the document that follows the cursor during drag operations. At the time of * the click, the frame div is resized to the dimensions of the linked html * element, and moved to the exact location of the linked element. * * References to the "frame" element refer to the single proxy element that * was created to be dragged in place of all DDProxy elements on the * page. * * @extends Ext.dd.DD * @constructor * @param {String} id the id of the linked html element * @param {String} sGroup the group of related DragDrop objects * @param {object} config an object containing configurable attributes * Valid properties for DDProxy in addition to those in DragDrop: * resizeFrame, centerFrame, dragElId */ Ext.dd.DDProxy = function(id, sGroup, config) { if (id) { this.init(id, sGroup, config); this.initFrame(); } }; /** * The default drag frame div id * @property Ext.dd.DDProxy.dragElId * @type String * @static */ Ext.dd.DDProxy.dragElId = "ygddfdiv"; Ext.extend(Ext.dd.DDProxy, Ext.dd.DD, { /** * By default we resize the drag frame to be the same size as the element * we want to drag (this is to get the frame effect). We can turn it off * if we want a different behavior. * @property resizeFrame * @type boolean */ resizeFrame: true, /** * By default the frame is positioned exactly where the drag element is, so * we use the cursor offset provided by Ext.dd.DD. Another option that works only if * you do not have constraints on the obj is to have the drag frame centered * around the cursor. Set centerFrame to true for this effect. * @property centerFrame * @type boolean */ centerFrame: false, /** * Creates the proxy element if it does not yet exist * @method createFrame */ createFrame: function() { var self = this; var body = document.body; if (!body || !body.firstChild) { setTimeout( function() { self.createFrame(); }, 50 ); return; } var div = this.getDragEl(); if (!div) { div = document.createElement("div"); div.id = this.dragElId; var s = div.style; s.position = "absolute"; s.visibility = "hidden"; s.cursor = "move"; s.border = "2px solid #aaa"; s.zIndex = 999; // appendChild can blow up IE if invoked prior to the window load event // while rendering a table. It is possible there are other scenarios // that would cause this to happen as well. body.insertBefore(div, body.firstChild); } }, /** * Initialization for the drag frame element. Must be called in the * constructor of all subclasses * @method initFrame */ initFrame: function() { this.createFrame(); }, applyConfig: function() { Ext.dd.DDProxy.superclass.applyConfig.call(this); this.resizeFrame = (this.config.resizeFrame !== false); this.centerFrame = (this.config.centerFrame); this.setDragElId(this.config.dragElId || Ext.dd.DDProxy.dragElId); }, /** * Resizes the drag frame to the dimensions of the clicked object, positions * it over the object, and finally displays it * @method showFrame * @param {int} iPageX X click position * @param {int} iPageY Y click position * @private */ showFrame: function(iPageX, iPageY) { var el = this.getEl(); var dragEl = this.getDragEl(); var s = dragEl.style; this._resizeProxy(); if (this.centerFrame) { this.setDelta( Math.round(parseInt(s.width, 10)/2), Math.round(parseInt(s.height, 10)/2) ); } this.setDragElPos(iPageX, iPageY); Ext.fly(dragEl).show(); }, /** * The proxy is automatically resized to the dimensions of the linked * element when a drag is initiated, unless resizeFrame is set to false * @method _resizeProxy * @private */ _resizeProxy: function() { if (this.resizeFrame) { var el = this.getEl(); Ext.fly(this.getDragEl()).setSize(el.offsetWidth, el.offsetHeight); } }, // overrides Ext.dd.DragDrop b4MouseDown: function(e) { var x = e.getPageX(); var y = e.getPageY(); this.autoOffset(x, y); this.setDragElPos(x, y); }, // overrides Ext.dd.DragDrop b4StartDrag: function(x, y) { // show the drag frame this.showFrame(x, y); }, // overrides Ext.dd.DragDrop b4EndDrag: function(e) { Ext.fly(this.getDragEl()).hide(); }, // overrides Ext.dd.DragDrop // By default we try to move the element to the last location of the frame. // This is so that the default behavior mirrors that of Ext.dd.DD. endDrag: function(e) { var lel = this.getEl(); var del = this.getDragEl(); // Show the drag frame briefly so we can get its position del.style.visibility = ""; this.beforeMove(); // Hide the linked element before the move to get around a Safari // rendering bug. lel.style.visibility = "hidden"; Ext.dd.DDM.moveToEl(lel, del); del.style.visibility = "hidden"; lel.style.visibility = ""; this.afterDrag(); }, beforeMove : function(){ }, afterDrag : function(){ }, toString: function() { return ("DDProxy " + this.id); } }); /** * @class Ext.dd.DDTarget * A DragDrop implementation that does not move, but can be a drop * target. You would get the same result by simply omitting implementation * for the event callbacks, but this way we reduce the processing cost of the * event listener and the callbacks. * @extends Ext.dd.DragDrop * @constructor * @param {String} id the id of the element that is a drop target * @param {String} sGroup the group of related DragDrop objects * @param {object} config an object containing configurable attributes * Valid properties for DDTarget in addition to those in * DragDrop: * none */ Ext.dd.DDTarget = function(id, sGroup, config) { if (id) { this.initTarget(id, sGroup, config); } }; // Ext.dd.DDTarget.prototype = new Ext.dd.DragDrop(); Ext.extend(Ext.dd.DDTarget, Ext.dd.DragDrop, { toString: function() { return ("DDTarget " + this.id); } }); /**
- * @class Ext.dd.DragTracker
- * @extends Ext.util.Observable
- */
- Ext.dd.DragTracker = function(config){
- Ext.apply(this, config);
- this.addEvents(
- /**
- * @event mousedown
- * @param {Object} this
- * @param {Object} e event object
- */
- 'mousedown',
- /**
- * @event mouseup
- * @param {Object} this
- * @param {Object} e event object
- */
- 'mouseup',
- /**
- * @event mousemove
- * @param {Object} this
- * @param {Object} e event object
- */
- 'mousemove',
- /**
- * @event dragstart
- * @param {Object} this
- * @param {Object} startXY the page coordinates of the event
- */
- 'dragstart',
- /**
- * @event dragend
- * @param {Object} this
- * @param {Object} e event object
- */
- 'dragend',
- /**
- * @event drag
- * @param {Object} this
- * @param {Object} e event object
- */
- 'drag'
- );
- this.dragRegion = new Ext.lib.Region(0,0,0,0);
- if(this.el){
- this.initEl(this.el);
- }
- }
- Ext.extend(Ext.dd.DragTracker, Ext.util.Observable, {
- /**
- * @cfg {Boolean} active
- * Defaults to <tt>false</tt>.
- */
- active: false,
- /**
- * @cfg {Number} tolerance
- * Defaults to <tt>5</tt>.
- */
- tolerance: 5,
- /**
- * @cfg {Boolean/Number} autoStart
- * Defaults to <tt>false</tt>. Specify <tt>true</tt> to defer trigger start by 1000 ms.
- * Specify a Number for the number of milliseconds to defer trigger start.
- */
- autoStart: false,
- initEl: function(el){
- this.el = Ext.get(el);
- el.on('mousedown', this.onMouseDown, this,
- this.delegate ? {delegate: this.delegate} : undefined);
- },
- destroy : function(){
- this.el.un('mousedown', this.onMouseDown, this);
- },
- onMouseDown: function(e, target){
- if(this.fireEvent('mousedown', this, e) !== false && this.onBeforeStart(e) !== false){
- this.startXY = this.lastXY = e.getXY();
- this.dragTarget = this.delegate ? target : this.el.dom;
- if(this.preventDefault !== false){
- e.preventDefault();
- }
- var doc = Ext.getDoc();
- doc.on('mouseup', this.onMouseUp, this);
- doc.on('mousemove', this.onMouseMove, this);
- doc.on('selectstart', this.stopSelect, this);
- if(this.autoStart){
- this.timer = this.triggerStart.defer(this.autoStart === true ? 1000 : this.autoStart, this);
- }
- }
- },
- onMouseMove: function(e, target){
- // HACK: IE hack to see if button was released outside of window. */
- if(this.active && Ext.isIE && !e.browserEvent.button){
- e.preventDefault();
- this.onMouseUp(e);
- return;
- }
- e.preventDefault();
- var xy = e.getXY(), s = this.startXY;
- this.lastXY = xy;
- if(!this.active){
- if(Math.abs(s[0]-xy[0]) > this.tolerance || Math.abs(s[1]-xy[1]) > this.tolerance){
- this.triggerStart();
- }else{
- return;
- }
- }
- this.fireEvent('mousemove', this, e);
- this.onDrag(e);
- this.fireEvent('drag', this, e);
- },
- onMouseUp: function(e){
- var doc = Ext.getDoc();
- doc.un('mousemove', this.onMouseMove, this);
- doc.un('mouseup', this.onMouseUp, this);
- doc.un('selectstart', this.stopSelect, this);
- e.preventDefault();
- this.clearStart();
- var wasActive = this.active;
- this.active = false;
- delete this.elRegion;
- this.fireEvent('mouseup', this, e);
- if(wasActive){
- this.onEnd(e);
- this.fireEvent('dragend', this, e);
- }
- },
- triggerStart: function(isTimer){
- this.clearStart();
- this.active = true;
- this.onStart(this.startXY);
- this.fireEvent('dragstart', this, this.startXY);
- },
- clearStart : function(){
- if(this.timer){
- clearTimeout(this.timer);
- delete this.timer;
- }
- },
- stopSelect : function(e){
- e.stopEvent();
- return false;
- },
- onBeforeStart : function(e){
- },
- onStart : function(xy){
- },
- onDrag : function(e){
- },
- onEnd : function(e){
- },
- getDragTarget : function(){
- return this.dragTarget;
- },
- getDragCt : function(){
- return this.el;
- },
- getXY : function(constrain){
- return constrain ?
- this.constrainModes[constrain].call(this, this.lastXY) : this.lastXY;
- },
- getOffset : function(constrain){
- var xy = this.getXY(constrain);
- var s = this.startXY;
- return [s[0]-xy[0], s[1]-xy[1]];
- },
- constrainModes: {
- 'point' : function(xy){
- if(!this.elRegion){
- this.elRegion = this.getDragCt().getRegion();
- }
- var dr = this.dragRegion;
- dr.left = xy[0];
- dr.top = xy[1];
- dr.right = xy[0];
- dr.bottom = xy[1];
- dr.constrainTo(this.elRegion);
- return [dr.left, dr.top];
- }
- }
- });/**
- * @class Ext.dd.ScrollManager
- * <p>Provides automatic scrolling of overflow regions in the page during drag operations.</p>
- * <p>The ScrollManager configs will be used as the defaults for any scroll container registered with it,
- * but you can also override most of the configs per scroll container by adding a
- * <tt>ddScrollConfig</tt> object to the target element that contains these properties: {@link #hthresh},
- * {@link #vthresh}, {@link #increment} and {@link #frequency}. Example usage:
- * <pre><code>
- var el = Ext.get('scroll-ct');
- el.ddScrollConfig = {
- vthresh: 50,
- hthresh: -1,
- frequency: 100,
- increment: 200
- };
- Ext.dd.ScrollManager.register(el);
- </code></pre>
- * <b>Note: This class uses "Point Mode" and is untested in "Intersect Mode".</b>
- * @singleton
- */
- Ext.dd.ScrollManager = function(){
- var ddm = Ext.dd.DragDropMgr;
- var els = {};
- var dragEl = null;
- var proc = {};
- var onStop = function(e){
- dragEl = null;
- clearProc();
- };
- var triggerRefresh = function(){
- if(ddm.dragCurrent){
- ddm.refreshCache(ddm.dragCurrent.groups);
- }
- };
- var doScroll = function(){
- if(ddm.dragCurrent){
- var dds = Ext.dd.ScrollManager;
- var inc = proc.el.ddScrollConfig ?
- proc.el.ddScrollConfig.increment : dds.increment;
- if(!dds.animate){
- if(proc.el.scroll(proc.dir, inc)){
- triggerRefresh();
- }
- }else{
- proc.el.scroll(proc.dir, inc, true, dds.animDuration, triggerRefresh);
- }
- }
- };
- var clearProc = function(){
- if(proc.id){
- clearInterval(proc.id);
- }
- proc.id = 0;
- proc.el = null;
- proc.dir = "";
- };
- var startProc = function(el, dir){
- clearProc();
- proc.el = el;
- proc.dir = dir;
- var freq = (el.ddScrollConfig && el.ddScrollConfig.frequency) ?
- el.ddScrollConfig.frequency : Ext.dd.ScrollManager.frequency;
- proc.id = setInterval(doScroll, freq);
- };
- var onFire = function(e, isDrop){
- if(isDrop || !ddm.dragCurrent){ return; }
- var dds = Ext.dd.ScrollManager;
- if(!dragEl || dragEl != ddm.dragCurrent){
- dragEl = ddm.dragCurrent;
- // refresh regions on drag start
- dds.refreshCache();
- }
- var xy = Ext.lib.Event.getXY(e);
- var pt = new Ext.lib.Point(xy[0], xy[1]);
- for(var id in els){
- var el = els[id], r = el._region;
- var c = el.ddScrollConfig ? el.ddScrollConfig : dds;
- if(r && r.contains(pt) && el.isScrollable()){
- if(r.bottom - pt.y <= c.vthresh){
- if(proc.el != el){
- startProc(el, "down");
- }
- return;
- }else if(r.right - pt.x <= c.hthresh){
- if(proc.el != el){
- startProc(el, "left");
- }
- return;
- }else if(pt.y - r.top <= c.vthresh){
- if(proc.el != el){
- startProc(el, "up");
- }
- return;
- }else if(pt.x - r.left <= c.hthresh){
- if(proc.el != el){
- startProc(el, "right");
- }
- return;
- }
- }
- }
- clearProc();
- };
- ddm.fireEvents = ddm.fireEvents.createSequence(onFire, ddm);
- ddm.stopDrag = ddm.stopDrag.createSequence(onStop, ddm);
- return {
- /**
- * Registers new overflow element(s) to auto scroll
- * @param {Mixed/Array} el The id of or the element to be scrolled or an array of either
- */
- register : function(el){
- if(Ext.isArray(el)){
- for(var i = 0, len = el.length; i < len; i++) {
- this.register(el[i]);
- }
- }else{
- el = Ext.get(el);
- els[el.id] = el;
- }
- },
- /**
- * Unregisters overflow element(s) so they are no longer scrolled
- * @param {Mixed/Array} el The id of or the element to be removed or an array of either
- */
- unregister : function(el){
- if(Ext.isArray(el)){
- for(var i = 0, len = el.length; i < len; i++) {
- this.unregister(el[i]);
- }
- }else{
- el = Ext.get(el);
- delete els[el.id];
- }
- },
- /**
- * The number of pixels from the top or bottom edge of a container the pointer needs to be to
- * trigger scrolling (defaults to 25)
- * @type Number
- */
- vthresh : 25,
- /**
- * The number of pixels from the right or left edge of a container the pointer needs to be to
- * trigger scrolling (defaults to 25)
- * @type Number
- */
- hthresh : 25,
- /**
- * The number of pixels to scroll in each scroll increment (defaults to 50)
- * @type Number
- */
- increment : 100,
- /**
- * The frequency of scrolls in milliseconds (defaults to 500)
- * @type Number
- */
- frequency : 500,
- /**
- * True to animate the scroll (defaults to true)
- * @type Boolean
- */
- animate: true,
- /**
- * The animation duration in seconds -
- * MUST BE less than Ext.dd.ScrollManager.frequency! (defaults to .4)
- * @type Number
- */
- animDuration: .4,
- /**
- * Manually trigger a cache refresh.
- */
- refreshCache : function(){
- for(var id in els){
- if(typeof els[id] == 'object'){ // for people extending the object prototype
- els[id]._region = els[id].getRegion();
- }
- }
- }
- };
- }();/**
- * @class Ext.dd.Registry
- * Provides easy access to all drag drop components that are registered on a page. Items can be retrieved either
- * directly by DOM node id, or by passing in the drag drop event that occurred and looking up the event target.
- * @singleton
- */
- Ext.dd.Registry = function(){
- var elements = {};
- var handles = {};
- var autoIdSeed = 0;
- var getId = function(el, autogen){
- if(typeof el == "string"){
- return el;
- }
- var id = el.id;
- if(!id && autogen !== false){
- id = "extdd-" + (++autoIdSeed);
- el.id = id;
- }
- return id;
- };
- return {
- /**
- * Resgister a drag drop element
- * @param {String/HTMLElement) element The id or DOM node to register
- * @param {Object} data (optional) An custom data object that will be passed between the elements that are involved
- * in drag drop operations. You can populate this object with any arbitrary properties that your own code
- * knows how to interpret, plus there are some specific properties known to the Registry that should be
- * populated in the data object (if applicable):
- * <pre>
- Value Description<br />
- --------- ------------------------------------------<br />
- handles Array of DOM nodes that trigger dragging<br />
- for the element being registered<br />
- isHandle True if the element passed in triggers<br />
- dragging itself, else false
- </pre>
- */
- register : function(el, data){
- data = data || {};
- if(typeof el == "string"){
- el = document.getElementById(el);
- }
- data.ddel = el;
- elements[getId(el)] = data;
- if(data.isHandle !== false){
- handles[data.ddel.id] = data;
- }
- if(data.handles){
- var hs = data.handles;
- for(var i = 0, len = hs.length; i < len; i++){
- handles[getId(hs[i])] = data;
- }
- }
- },
- /**
- * Unregister a drag drop element
- * @param {String/HTMLElement) element The id or DOM node to unregister
- */
- unregister : function(el){
- var id = getId(el, false);
- var data = elements[id];
- if(data){
- delete elements[id];
- if(data.handles){
- var hs = data.handles;
- for(var i = 0, len = hs.length; i < len; i++){
- delete handles[getId(hs[i], false)];
- }
- }
- }
- },
- /**
- * Returns the handle registered for a DOM Node by id
- * @param {String/HTMLElement} id The DOM node or id to look up
- * @return {Object} handle The custom handle data
- */
- getHandle : function(id){
- if(typeof id != "string"){ // must be element?
- id = id.id;
- }
- return handles[id];
- },
- /**
- * Returns the handle that is registered for the DOM node that is the target of the event
- * @param {Event} e The event
- * @return {Object} handle The custom handle data
- */
- getHandleFromEvent : function(e){
- var t = Ext.lib.Event.getTarget(e);
- return t ? handles[t.id] : null;
- },
- /**
- * Returns a custom data object that is registered for a DOM node by id
- * @param {String/HTMLElement} id The DOM node or id to look up
- * @return {Object} data The custom data
- */
- getTarget : function(id){
- if(typeof id != "string"){ // must be element?
- id = id.id;
- }
- return elements[id];
- },
- /**
- * Returns a custom data object that is registered for the DOM node that is the target of the event
- * @param {Event} e The event
- * @return {Object} data The custom data
- */
- getTargetFromEvent : function(e){
- var t = Ext.lib.Event.getTarget(e);
- return t ? elements[t.id] || handles[t.id] : null;
- }
- };
- }();/**
- * @class Ext.dd.StatusProxy
- * A specialized drag proxy that supports a drop status icon, {@link Ext.Layer} styles and auto-repair. This is the
- * default drag proxy used by all Ext.dd components.
- * @constructor
- * @param {Object} config
- */
- Ext.dd.StatusProxy = function(config){
- Ext.apply(this, config);
- this.id = this.id || Ext.id();
- this.el = new Ext.Layer({
- dh: {
- id: this.id, tag: "div", cls: "x-dd-drag-proxy "+this.dropNotAllowed, children: [
- {tag: "div", cls: "x-dd-drop-icon"},
- {tag: "div", cls: "x-dd-drag-ghost"}
- ]
- },
- shadow: !config || config.shadow !== false
- });
- this.ghost = Ext.get(this.el.dom.childNodes[1]);
- this.dropStatus = this.dropNotAllowed;
- };
- Ext.dd.StatusProxy.prototype = {
- /**
- * @cfg {String} dropAllowed
- * The CSS class to apply to the status element when drop is allowed (defaults to "x-dd-drop-ok").
- */
- dropAllowed : "x-dd-drop-ok",
- /**
- * @cfg {String} dropNotAllowed
- * The CSS class to apply to the status element when drop is not allowed (defaults to "x-dd-drop-nodrop").
- */
- dropNotAllowed : "x-dd-drop-nodrop",
- /**
- * Updates the proxy's visual element to indicate the status of whether or not drop is allowed
- * over the current target element.
- * @param {String} cssClass The css class for the new drop status indicator image
- */
- setStatus : function(cssClass){
- cssClass = cssClass || this.dropNotAllowed;
- if(this.dropStatus != cssClass){
- this.el.replaceClass(this.dropStatus, cssClass);
- this.dropStatus = cssClass;
- }
- },
- /**
- * Resets the status indicator to the default dropNotAllowed value
- * @param {Boolean} clearGhost True to also remove all content from the ghost, false to preserve it
- */
- reset : function(clearGhost){
- this.el.dom.className = "x-dd-drag-proxy " + this.dropNotAllowed;
- this.dropStatus = this.dropNotAllowed;
- if(clearGhost){
- this.ghost.update("");
- }
- },
- /**
- * Updates the contents of the ghost element
- * @param {String/HTMLElement} html The html that will replace the current innerHTML of the ghost element, or a
- * DOM node to append as the child of the ghost element (in which case the innerHTML will be cleared first).
- */
- update : function(html){
- if(typeof html == "string"){
- this.ghost.update(html);
- }else{
- this.ghost.update("");
- html.style.margin = "0";
- this.ghost.dom.appendChild(html);
- }
- var el = this.ghost.dom.firstChild;
- if(el){
- Ext.fly(el).setStyle('float', 'none');
- }
- },
- /**
- * Returns the underlying proxy {@link Ext.Layer}
- * @return {Ext.Layer} el
- */
- getEl : function(){
- return this.el;
- },
- /**
- * Returns the ghost element
- * @return {Ext.Element} el
- */
- getGhost : function(){
- return this.ghost;
- },
- /**
- * Hides the proxy
- * @param {Boolean} clear True to reset the status and clear the ghost contents, false to preserve them
- */
- hide : function(clear){
- this.el.hide();
- if(clear){
- this.reset(true);
- }
- },
- /**
- * Stops the repair animation if it's currently running
- */
- stop : function(){
- if(this.anim && this.anim.isAnimated && this.anim.isAnimated()){
- this.anim.stop();
- }
- },
- /**
- * Displays this proxy
- */
- show : function(){
- this.el.show();
- },
- /**
- * Force the Layer to sync its shadow and shim positions to the element
- */
- sync : function(){
- this.el.sync();
- },
- /**
- * Causes the proxy to return to its position of origin via an animation. Should be called after an
- * invalid drop operation by the item being dragged.
- * @param {Array} xy The XY position of the element ([x, y])
- * @param {Function} callback The function to call after the repair is complete
- * @param {Object} scope The scope in which to execute the callback
- */
- repair : function(xy, callback, scope){
- this.callback = callback;
- this.scope = scope;
- if(xy && this.animRepair !== false){
- this.el.addClass("x-dd-drag-repair");
- this.el.hideUnders(true);
- this.anim = this.el.shift({
- duration: this.repairDuration || .5,
- easing: 'easeOut',
- xy: xy,
- stopFx: true,
- callback: this.afterRepair,
- scope: this
- });
- }else{
- this.afterRepair();
- }
- },
- // private
- afterRepair : function(){
- this.hide(true);
- if(typeof this.callback == "function"){
- this.callback.call(this.scope || this);
- }
- this.callback = null;
- this.scope = null;
- }
- };/**
- * @class Ext.dd.DragSource
- * @extends Ext.dd.DDProxy
- * A simple class that provides the basic implementation needed to make any element draggable.
- * @constructor
- * @param {Mixed} el The container element
- * @param {Object} config
- */
- Ext.dd.DragSource = function(el, config){
- this.el = Ext.get(el);
- if(!this.dragData){
- this.dragData = {};
- }
- Ext.apply(this, config);
- if(!this.proxy){
- this.proxy = new Ext.dd.StatusProxy();
- }
- Ext.dd.DragSource.superclass.constructor.call(this, this.el.dom, this.ddGroup || this.group,
- {dragElId : this.proxy.id, resizeFrame: false, isTarget: false, scroll: this.scroll === true});
- this.dragging = false;
- };
- Ext.extend(Ext.dd.DragSource, Ext.dd.DDProxy, {
- /**
- * @cfg {String} ddGroup
- * A named drag drop group to which this object belongs. If a group is specified, then this object will only
- * interact with other drag drop objects in the same group (defaults to undefined).
- */
- /**
- * @cfg {String} dropAllowed
- * The CSS class returned to the drag source when drop is allowed (defaults to "x-dd-drop-ok").
- */
- dropAllowed : "x-dd-drop-ok",
- /**
- * @cfg {String} dropNotAllowed
- * The CSS class returned to the drag source when drop is not allowed (defaults to "x-dd-drop-nodrop").
- */
- dropNotAllowed : "x-dd-drop-nodrop",
- /**
- * Returns the data object associated with this drag source
- * @return {Object} data An object containing arbitrary data
- */
- getDragData : function(e){
- return this.dragData;
- },
- // private
- onDragEnter : function(e, id){
- var target = Ext.dd.DragDropMgr.getDDById(id);
- this.cachedTarget = target;
- if(this.beforeDragEnter(target, e, id) !== false){
- if(target.isNotifyTarget){
- var status = target.notifyEnter(this, e, this.dragData);
- this.proxy.setStatus(status);
- }else{
- this.proxy.setStatus(this.dropAllowed);
- }
- if(this.afterDragEnter){
- /**
- * An empty function by default, but provided so that you can perform a custom action
- * when the dragged item enters the drop target by providing an implementation.
- * @param {Ext.dd.DragDrop} target The drop target
- * @param {Event} e The event object
- * @param {String} id The id of the dragged element
- * @method afterDragEnter
- */
- this.afterDragEnter(target, e, id);
- }
- }
- },
- /**
- * An empty function by default, but provided so that you can perform a custom action
- * before the dragged item enters the drop target and optionally cancel the onDragEnter.
- * @param {Ext.dd.DragDrop} target The drop target
- * @param {Event} e The event object
- * @param {String} id The id of the dragged element
- * @return {Boolean} isValid True if the drag event is valid, else false to cancel
- */
- beforeDragEnter : function(target, e, id){
- return true;
- },
- // private
- alignElWithMouse: function() {
- Ext.dd.DragSource.superclass.alignElWithMouse.apply(this, arguments);
- this.proxy.sync();
- },