/**
* @class Roo.dd.DragDrop
+ * @extends Roo.util.Observable
* 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.
*/
success : false,
/**
- * @cfg {boolean|String} valid true/false or string (add/sub/ok/nodrop)
+ * @cfg {boolean|String} valid true/false or string (ok-add/ok-sub/ok/nodrop)
* if the drop point is valid for over/enter..
*/
valid : false,
/**
* @hide
*/
- notifyEnter : function(dd, e, data){
+ notifyEnter : function(dd, e, data)
+ {
this.valid = true;
- this.fireEvent('enter', this, dd, e, data);
+ this.fireEvent('enter', dd, e, data);
if(this.overClass){
this.el.addClass(this.overClass);
}
/**
* @hide
*/
- notifyOver : function(dd, e, data){
+ notifyOver : function(dd, e, data)
+ {
this.valid = true;
- this.fireEvent('over', this, dd, e, data);
+ this.fireEvent('over', dd, e, data);
return typeof(this.valid) == 'string' ? 'x-dd-drop-' + this.valid : (
this.valid ? this.dropAllowed : this.dropNotAllowed
);
/**
* @hide
*/
- notifyOut : function(dd, e, data){
- this.fireEvent('out', this, dd, e, data);
+ notifyOut : function(dd, e, data)
+ {
+ this.fireEvent('out', dd, e, data);
if(this.overClass){
this.el.removeClass(this.overClass);
}
/**
* @hide
*/
- notifyDrop : function(dd, e, data){
+ notifyDrop : function(dd, e, data)
+ {
this.success = false;
- this.fireEvent('drop', this, dd, e, data);
+ this.fireEvent('drop', dd, e, data);
return this.success;
}
});/*
}
}
});
-})();/*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
- */
-
-
-/**
- * @class Roo.Shadow
- * Simple class that can provide a shadow effect for any element. Note that the element MUST be absolutely positioned,
- * and the shadow does not provide any shimming. This should be used only in simple cases -- for more advanced
- * functionality that can also provide the same shadow effect, see the {@link Roo.Layer} class.
- * @constructor
- * Create a new Shadow
- * @param {Object} config The config object
- */
-Roo.Shadow = function(config){
- Roo.apply(this, config);
- if(typeof this.mode != "string"){
- this.mode = this.defaultMode;
- }
- var o = this.offset, a = {h: 0};
- var rad = Math.floor(this.offset/2);
- switch(this.mode.toLowerCase()){ // all this hideous nonsense calculates the various offsets for shadows
- case "drop":
- a.w = 0;
- a.l = a.t = o;
- a.t -= 1;
- if(Roo.isIE){
- a.l -= this.offset + rad;
- a.t -= this.offset + rad;
- a.w -= rad;
- a.h -= rad;
- a.t += 1;
- }
- break;
- case "sides":
- a.w = (o*2);
- a.l = -o;
- a.t = o-1;
- if(Roo.isIE){
- a.l -= (this.offset - rad);
- a.t -= this.offset + rad;
- a.l += 1;
- a.w -= (this.offset - rad)*2;
- a.w -= rad + 1;
- a.h -= 1;
- }
- break;
- case "frame":
- a.w = a.h = (o*2);
- a.l = a.t = -o;
- a.t += 1;
- a.h -= 2;
- if(Roo.isIE){
- a.l -= (this.offset - rad);
- a.t -= (this.offset - rad);
- a.l += 1;
- a.w -= (this.offset + rad + 1);
- a.h -= (this.offset + rad);
- a.h += 1;
- }
- break;
- };
-
- this.adjusts = a;
-};
-
-Roo.Shadow.prototype = {
- /**
- * @cfg {String} mode
- * The shadow display mode. Supports the following options:<br />
- * sides: Shadow displays on both sides and bottom only<br />
- * frame: Shadow displays equally on all four sides<br />
- * drop: Traditional bottom-right drop shadow (default)
- */
- /**
- * @cfg {String} offset
- * The number of pixels to offset the shadow from the element (defaults to 4)
- */
- offset: 4,
-
- // private
- defaultMode: "drop",
-
- /**
- * Displays the shadow under the target element
- * @param {String/HTMLElement/Element} targetEl The id or element under which the shadow should display
- */
- show : function(target){
- target = Roo.get(target);
- if(!this.el){
- this.el = Roo.Shadow.Pool.pull();
- if(this.el.dom.nextSibling != target.dom){
- this.el.insertBefore(target);
- }
- }
- this.el.setStyle("z-index", this.zIndex || parseInt(target.getStyle("z-index"), 10)-1);
- if(Roo.isIE){
- this.el.dom.style.filter="progid:DXImageTransform.Microsoft.alpha(opacity=50) progid:DXImageTransform.Microsoft.Blur(pixelradius="+(this.offset)+")";
- }
- this.realign(
- target.getLeft(true),
- target.getTop(true),
- target.getWidth(),
- target.getHeight()
- );
- this.el.dom.style.display = "block";
- },
-
- /**
- * Returns true if the shadow is visible, else false
- */
- isVisible : function(){
- return this.el ? true : false;
- },
-
- /**
- * Direct alignment when values are already available. Show must be called at least once before
- * calling this method to ensure it is initialized.
- * @param {Number} left The target element left position
- * @param {Number} top The target element top position
- * @param {Number} width The target element width
- * @param {Number} height The target element height
- */
- realign : function(l, t, w, h){
- if(!this.el){
- return;
- }
- var a = this.adjusts, d = this.el.dom, s = d.style;
- var iea = 0;
- s.left = (l+a.l)+"px";
- s.top = (t+a.t)+"px";
- var sw = (w+a.w), sh = (h+a.h), sws = sw +"px", shs = sh + "px";
-
- if(s.width != sws || s.height != shs){
- s.width = sws;
- s.height = shs;
- if(!Roo.isIE){
- var cn = d.childNodes;
- var sww = Math.max(0, (sw-12))+"px";
- cn[0].childNodes[1].style.width = sww;
- cn[1].childNodes[1].style.width = sww;
- cn[2].childNodes[1].style.width = sww;
- cn[1].style.height = Math.max(0, (sh-12))+"px";
- }
- }
- },
-
- /**
- * Hides this shadow
- */
- hide : function(){
- if(this.el){
- this.el.dom.style.display = "none";
- Roo.Shadow.Pool.push(this.el);
- delete this.el;
- }
- },
-
- /**
- * Adjust the z-index of this shadow
- * @param {Number} zindex The new z-index
- */
- setZIndex : function(z){
- this.zIndex = z;
- if(this.el){
- this.el.setStyle("z-index", z);
- }
- }
-};
-
-// Private utility class that manages the internal Shadow cache
-Roo.Shadow.Pool = function(){
- var p = [];
- var markup = Roo.isIE ?
- '<div class="x-ie-shadow"></div>' :
- '<div class="x-shadow"><div class="xst"><div class="xstl"></div><div class="xstc"></div><div class="xstr"></div></div><div class="xsc"><div class="xsml"></div><div class="xsmc"></div><div class="xsmr"></div></div><div class="xsb"><div class="xsbl"></div><div class="xsbc"></div><div class="xsbr"></div></div></div>';
- return {
- pull : function(){
- var sh = p.shift();
- if(!sh){
- sh = Roo.get(Roo.DomHelper.insertHtml("beforeBegin", document.body.firstChild, markup));
- sh.autoBoxAdjust = false;
- }
- return sh;
- },
-
- push : function(sh){
- p.push(sh);
- }
- };
-}();/*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
- */
-
-/**
- * @class Roo.BoxComponent
- * @extends Roo.Component
- * Base class for any visual {@link Roo.Component} that uses a box container. BoxComponent provides automatic box
- * model adjustments for sizing and positioning and will work correctly withnin the Component rendering model. All
- * container classes should subclass BoxComponent so that they will work consistently when nested within other Ext
- * layout containers.
- * @constructor
- * @param {Roo.Element/String/Object} config The configuration options.
- */
-Roo.BoxComponent = function(config){
- Roo.Component.call(this, config);
- this.addEvents({
- /**
- * @event resize
- * Fires after the component is resized.
- * @param {Roo.Component} this
- * @param {Number} adjWidth The box-adjusted width that was set
- * @param {Number} adjHeight The box-adjusted height that was set
- * @param {Number} rawWidth The width that was originally specified
- * @param {Number} rawHeight The height that was originally specified
- */
- resize : true,
- /**
- * @event move
- * Fires after the component is moved.
- * @param {Roo.Component} this
- * @param {Number} x The new x position
- * @param {Number} y The new y position
- */
- move : true
- });
-};
-
-Roo.extend(Roo.BoxComponent, Roo.Component, {
- // private, set in afterRender to signify that the component has been rendered
- boxReady : false,
- // private, used to defer height settings to subclasses
- deferHeight: false,
- /** @cfg {Number} width
- * width (optional) size of component
- */
- /** @cfg {Number} height
- * height (optional) size of component
- */
-
- /**
- * Sets the width and height of the component. This method fires the resize event. This method can accept
- * either width and height as separate numeric arguments, or you can pass a size object like {width:10, height:20}.
- * @param {Number/Object} width The new width to set, or a size object in the format {width, height}
- * @param {Number} height The new height to set (not required if a size object is passed as the first arg)
- * @return {Roo.BoxComponent} this
- */
- setSize : function(w, h){
- // support for standard size objects
- if(typeof w == 'object'){
- h = w.height;
- w = w.width;
- }
- // not rendered
- if(!this.boxReady){
- this.width = w;
- this.height = h;
- return this;
- }
-
- // prevent recalcs when not needed
- if(this.lastSize && this.lastSize.width == w && this.lastSize.height == h){
- return this;
- }
- this.lastSize = {width: w, height: h};
-
- var adj = this.adjustSize(w, h);
- var aw = adj.width, ah = adj.height;
- if(aw !== undefined || ah !== undefined){ // this code is nasty but performs better with floaters
- var rz = this.getResizeEl();
- if(!this.deferHeight && aw !== undefined && ah !== undefined){
- rz.setSize(aw, ah);
- }else if(!this.deferHeight && ah !== undefined){
- rz.setHeight(ah);
- }else if(aw !== undefined){
- rz.setWidth(aw);
- }
- this.onResize(aw, ah, w, h);
- this.fireEvent('resize', this, aw, ah, w, h);
- }
- return this;
- },
-
- /**
- * Gets the current size of the component's underlying element.
- * @return {Object} An object containing the element's size {width: (element width), height: (element height)}
- */
- getSize : function(){
- return this.el.getSize();
- },
-
- /**
- * Gets the current XY position of the component's underlying element.
- * @param {Boolean} local (optional) If true the element's left and top are returned instead of page XY (defaults to false)
- * @return {Array} The XY position of the element (e.g., [100, 200])
- */
- getPosition : function(local){
- if(local === true){
- return [this.el.getLeft(true), this.el.getTop(true)];
- }
- return this.xy || this.el.getXY();
- },
-
- /**
- * Gets the current box measurements of the component's underlying element.
- * @param {Boolean} local (optional) If true the element's left and top are returned instead of page XY (defaults to false)
- * @returns {Object} box An object in the format {x, y, width, height}
- */
- getBox : function(local){
- var s = this.el.getSize();
- if(local){
- s.x = this.el.getLeft(true);
- s.y = this.el.getTop(true);
- }else{
- var xy = this.xy || this.el.getXY();
- s.x = xy[0];
- s.y = xy[1];
- }
- return s;
- },
-
- /**
- * Sets the current box measurements of the component's underlying element.
- * @param {Object} box An object in the format {x, y, width, height}
- * @returns {Roo.BoxComponent} this
- */
- updateBox : function(box){
- this.setSize(box.width, box.height);
- this.setPagePosition(box.x, box.y);
- return this;
- },
-
- // protected
- getResizeEl : function(){
- return this.resizeEl || this.el;
- },
-
- // protected
- getPositionEl : function(){
- return this.positionEl || this.el;
- },
-
- /**
- * Sets the left and top of the component. To set the page XY position instead, use {@link #setPagePosition}.
- * This method fires the move event.
- * @param {Number} left The new left
- * @param {Number} top The new top
- * @returns {Roo.BoxComponent} this
- */
- setPosition : function(x, y){
- this.x = x;
- this.y = y;
- if(!this.boxReady){
- return this;
- }
- var adj = this.adjustPosition(x, y);
- var ax = adj.x, ay = adj.y;
-
- var el = this.getPositionEl();
- if(ax !== undefined || ay !== undefined){
- if(ax !== undefined && ay !== undefined){
- el.setLeftTop(ax, ay);
- }else if(ax !== undefined){
- el.setLeft(ax);
- }else if(ay !== undefined){
- el.setTop(ay);
- }
- this.onPosition(ax, ay);
- this.fireEvent('move', this, ax, ay);
- }
- return this;
- },
-
- /**
- * Sets the page XY position of the component. To set the left and top instead, use {@link #setPosition}.
- * This method fires the move event.
- * @param {Number} x The new x position
- * @param {Number} y The new y position
- * @returns {Roo.BoxComponent} this
- */
- setPagePosition : function(x, y){
- this.pageX = x;
- this.pageY = y;
- if(!this.boxReady){
- return;
- }
- if(x === undefined || y === undefined){ // cannot translate undefined points
- return;
- }
- var p = this.el.translatePoints(x, y);
- this.setPosition(p.left, p.top);
- return this;
- },
-
- // private
- onRender : function(ct, position){
- Roo.BoxComponent.superclass.onRender.call(this, ct, position);
- if(this.resizeEl){
- this.resizeEl = Roo.get(this.resizeEl);
- }
- if(this.positionEl){
- this.positionEl = Roo.get(this.positionEl);
- }
- },
-
- // private
- afterRender : function(){
- Roo.BoxComponent.superclass.afterRender.call(this);
- this.boxReady = true;
- this.setSize(this.width, this.height);
- if(this.x || this.y){
- this.setPosition(this.x, this.y);
- }
- if(this.pageX || this.pageY){
- this.setPagePosition(this.pageX, this.pageY);
- }
- },
-
- /**
- * Force the component's size to recalculate based on the underlying element's current height and width.
- * @returns {Roo.BoxComponent} this
- */
- syncSize : function(){
- delete this.lastSize;
- this.setSize(this.el.getWidth(), this.el.getHeight());
- return this;
- },
-
- /**
- * Called after the component is resized, this method is empty by default but can be implemented by any
- * subclass that needs to perform custom logic after a resize occurs.
- * @param {Number} adjWidth The box-adjusted width that was set
- * @param {Number} adjHeight The box-adjusted height that was set
- * @param {Number} rawWidth The width that was originally specified
- * @param {Number} rawHeight The height that was originally specified
- */
- onResize : function(adjWidth, adjHeight, rawWidth, rawHeight){
-
- },
-
- /**
- * Called after the component is moved, this method is empty by default but can be implemented by any
- * subclass that needs to perform custom logic after a move occurs.
- * @param {Number} x The new x position
- * @param {Number} y The new y position
- */
- onPosition : function(x, y){
-
- },
-
- // private
- adjustSize : function(w, h){
- if(this.autoWidth){
- w = 'auto';
- }
- if(this.autoHeight){
- h = 'auto';
- }
- return {width : w, height: h};
- },
-
- // private
- adjustPosition : function(x, y){
- return {x : x, y: y};
- }
-});/*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
- */
-
-
-/**
- * @class Roo.SplitBar
- * @extends Roo.util.Observable
- * Creates draggable splitter bar functionality from two elements (element to be dragged and element to be resized).
- * <br><br>
- * Usage:
- * <pre><code>
-var split = new Roo.SplitBar("elementToDrag", "elementToSize",
- Roo.SplitBar.HORIZONTAL, Roo.SplitBar.LEFT);
-split.setAdapter(new Roo.SplitBar.AbsoluteLayoutAdapter("container"));
-split.minSize = 100;
-split.maxSize = 600;
-split.animate = true;
-split.on('moved', splitterMoved);
-</code></pre>
- * @constructor
- * Create a new SplitBar
- * @param {String/HTMLElement/Roo.Element} dragElement The element to be dragged and act as the SplitBar.
- * @param {String/HTMLElement/Roo.Element} resizingElement The element to be resized based on where the SplitBar element is dragged
- * @param {Number} orientation (optional) Either Roo.SplitBar.HORIZONTAL or Roo.SplitBar.VERTICAL. (Defaults to HORIZONTAL)
- * @param {Number} placement (optional) Either Roo.SplitBar.LEFT or Roo.SplitBar.RIGHT for horizontal or
- Roo.SplitBar.TOP or Roo.SplitBar.BOTTOM for vertical. (By default, this is determined automatically by the initial
- position of the SplitBar).
- */
-Roo.SplitBar = function(dragElement, resizingElement, orientation, placement, existingProxy){
-
- /** @private */
- this.el = Roo.get(dragElement, true);
- this.el.dom.unselectable = "on";
- /** @private */
- this.resizingEl = Roo.get(resizingElement, true);
-
- /**
- * @private
- * The orientation of the split. Either Roo.SplitBar.HORIZONTAL or Roo.SplitBar.VERTICAL. (Defaults to HORIZONTAL)
- * Note: If this is changed after creating the SplitBar, the placement property must be manually updated
- * @type Number
- */
- this.orientation = orientation || Roo.SplitBar.HORIZONTAL;
-
- /**
- * The minimum size of the resizing element. (Defaults to 0)
- * @type Number
- */
- this.minSize = 0;
-
- /**
- * The maximum size of the resizing element. (Defaults to 2000)
- * @type Number
- */
- this.maxSize = 2000;
-
- /**
- * Whether to animate the transition to the new size
- * @type Boolean
- */
- this.animate = false;
-
- /**
- * Whether to create a transparent shim that overlays the page when dragging, enables dragging across iframes.
- * @type Boolean
- */
- this.useShim = false;
-
- /** @private */
- this.shim = null;
-
- if(!existingProxy){
- /** @private */
- this.proxy = Roo.SplitBar.createProxy(this.orientation);
- }else{
- this.proxy = Roo.get(existingProxy).dom;
- }
- /** @private */
- this.dd = new Roo.dd.DDProxy(this.el.dom.id, "XSplitBars", {dragElId : this.proxy.id});
-
- /** @private */
- this.dd.b4StartDrag = this.onStartProxyDrag.createDelegate(this);
-
- /** @private */
- this.dd.endDrag = this.onEndProxyDrag.createDelegate(this);
-
- /** @private */
- this.dragSpecs = {};
-
- /**
- * @private The adapter to use to positon and resize elements
- */
- this.adapter = new Roo.SplitBar.BasicLayoutAdapter();
- this.adapter.init(this);
-
- if(this.orientation == Roo.SplitBar.HORIZONTAL){
- /** @private */
- this.placement = placement || (this.el.getX() > this.resizingEl.getX() ? Roo.SplitBar.LEFT : Roo.SplitBar.RIGHT);
- this.el.addClass("x-splitbar-h");
- }else{
- /** @private */
- this.placement = placement || (this.el.getY() > this.resizingEl.getY() ? Roo.SplitBar.TOP : Roo.SplitBar.BOTTOM);
- this.el.addClass("x-splitbar-v");
- }
-
- this.addEvents({
- /**
- * @event resize
- * Fires when the splitter is moved (alias for {@link #event-moved})
- * @param {Roo.SplitBar} this
- * @param {Number} newSize the new width or height
- */
- "resize" : true,
- /**
- * @event moved
- * Fires when the splitter is moved
- * @param {Roo.SplitBar} this
- * @param {Number} newSize the new width or height
- */
- "moved" : true,
- /**
- * @event beforeresize
- * Fires before the splitter is dragged
- * @param {Roo.SplitBar} this
- */
- "beforeresize" : true,
-
- "beforeapply" : true
- });
-
- Roo.util.Observable.call(this);
-};
-
-Roo.extend(Roo.SplitBar, Roo.util.Observable, {
- onStartProxyDrag : function(x, y){
- this.fireEvent("beforeresize", this);
- if(!this.overlay){
- var o = Roo.DomHelper.insertFirst(document.body, {cls: "x-drag-overlay", html: " "}, true);
- o.unselectable();
- o.enableDisplayMode("block");
- // all splitbars share the same overlay
- Roo.SplitBar.prototype.overlay = o;
- }
- this.overlay.setSize(Roo.lib.Dom.getViewWidth(true), Roo.lib.Dom.getViewHeight(true));
- this.overlay.show();
- Roo.get(this.proxy).setDisplayed("block");
- var size = this.adapter.getElementSize(this);
- this.activeMinSize = this.getMinimumSize();;
- this.activeMaxSize = this.getMaximumSize();;
- var c1 = size - this.activeMinSize;
- var c2 = Math.max(this.activeMaxSize - size, 0);
- if(this.orientation == Roo.SplitBar.HORIZONTAL){
- this.dd.resetConstraints();
- this.dd.setXConstraint(
- this.placement == Roo.SplitBar.LEFT ? c1 : c2,
- this.placement == Roo.SplitBar.LEFT ? c2 : c1
- );
- this.dd.setYConstraint(0, 0);
- }else{
- this.dd.resetConstraints();
- this.dd.setXConstraint(0, 0);
- this.dd.setYConstraint(
- this.placement == Roo.SplitBar.TOP ? c1 : c2,
- this.placement == Roo.SplitBar.TOP ? c2 : c1
- );
- }
- this.dragSpecs.startSize = size;
- this.dragSpecs.startPoint = [x, y];
- Roo.dd.DDProxy.prototype.b4StartDrag.call(this.dd, x, y);
- },
-
- /**
- * @private Called after the drag operation by the DDProxy
- */
- onEndProxyDrag : function(e){
- Roo.get(this.proxy).setDisplayed(false);
- var endPoint = Roo.lib.Event.getXY(e);
- if(this.overlay){
- this.overlay.hide();
- }
- var newSize;
- if(this.orientation == Roo.SplitBar.HORIZONTAL){
- newSize = this.dragSpecs.startSize +
- (this.placement == Roo.SplitBar.LEFT ?
- endPoint[0] - this.dragSpecs.startPoint[0] :
- this.dragSpecs.startPoint[0] - endPoint[0]
- );
- }else{
- newSize = this.dragSpecs.startSize +
- (this.placement == Roo.SplitBar.TOP ?
- endPoint[1] - this.dragSpecs.startPoint[1] :
- this.dragSpecs.startPoint[1] - endPoint[1]
- );
- }
- newSize = Math.min(Math.max(newSize, this.activeMinSize), this.activeMaxSize);
- if(newSize != this.dragSpecs.startSize){
- if(this.fireEvent('beforeapply', this, newSize) !== false){
- this.adapter.setElementSize(this, newSize);
- this.fireEvent("moved", this, newSize);
- this.fireEvent("resize", this, newSize);
- }
- }
- },
-
- /**
- * Get the adapter this SplitBar uses
- * @return The adapter object
- */
- getAdapter : function(){
- return this.adapter;
- },
-
- /**
- * Set the adapter this SplitBar uses
- * @param {Object} adapter A SplitBar adapter object
- */
- setAdapter : function(adapter){
- this.adapter = adapter;
- this.adapter.init(this);
- },
-
- /**
- * Gets the minimum size for the resizing element
- * @return {Number} The minimum size
- */
- getMinimumSize : function(){
- return this.minSize;
- },
-
- /**
- * Sets the minimum size for the resizing element
- * @param {Number} minSize The minimum size
- */
- setMinimumSize : function(minSize){
- this.minSize = minSize;
- },
-
- /**
- * Gets the maximum size for the resizing element
- * @return {Number} The maximum size
- */
- getMaximumSize : function(){
- return this.maxSize;
- },
-
- /**
- * Sets the maximum size for the resizing element
- * @param {Number} maxSize The maximum size
- */
- setMaximumSize : function(maxSize){
- this.maxSize = maxSize;
- },
-
- /**
- * Sets the initialize size for the resizing element
- * @param {Number} size The initial size
- */
- setCurrentSize : function(size){
- var oldAnimate = this.animate;
- this.animate = false;
- this.adapter.setElementSize(this, size);
- this.animate = oldAnimate;
- },
-
- /**
- * Destroy this splitbar.
- * @param {Boolean} removeEl True to remove the element
- */
- destroy : function(removeEl){
- if(this.shim){
- this.shim.remove();
- }
- this.dd.unreg();
- this.proxy.parentNode.removeChild(this.proxy);
- if(removeEl){
- this.el.remove();
- }
- }
-});
-
-/**
- * @private static Create our own proxy element element. So it will be the same same size on all browsers, we won't use borders. Instead we use a background color.
- */
-Roo.SplitBar.createProxy = function(dir){
- var proxy = new Roo.Element(document.createElement("div"));
- proxy.unselectable();
- var cls = 'x-splitbar-proxy';
- proxy.addClass(cls + ' ' + (dir == Roo.SplitBar.HORIZONTAL ? cls +'-h' : cls + '-v'));
- document.body.appendChild(proxy.dom);
- return proxy.dom;
-};
-
-/**
- * @class Roo.SplitBar.BasicLayoutAdapter
- * Default Adapter. It assumes the splitter and resizing element are not positioned
- * elements and only gets/sets the width of the element. Generally used for table based layouts.
- */
-Roo.SplitBar.BasicLayoutAdapter = function(){
-};
-
-Roo.SplitBar.BasicLayoutAdapter.prototype = {
- // do nothing for now
- init : function(s){
-
- },
- /**
- * Called before drag operations to get the current size of the resizing element.
- * @param {Roo.SplitBar} s The SplitBar using this adapter
- */
- getElementSize : function(s){
- if(s.orientation == Roo.SplitBar.HORIZONTAL){
- return s.resizingEl.getWidth();
- }else{
- return s.resizingEl.getHeight();
- }
- },
-
- /**
- * Called after drag operations to set the size of the resizing element.
- * @param {Roo.SplitBar} s The SplitBar using this adapter
- * @param {Number} newSize The new size to set
- * @param {Function} onComplete A function to be invoked when resizing is complete
- */
- setElementSize : function(s, newSize, onComplete){
- if(s.orientation == Roo.SplitBar.HORIZONTAL){
- if(!s.animate){
- s.resizingEl.setWidth(newSize);
- if(onComplete){
- onComplete(s, newSize);
- }
- }else{
- s.resizingEl.setWidth(newSize, true, .1, onComplete, 'easeOut');
- }
- }else{
-
- if(!s.animate){
- s.resizingEl.setHeight(newSize);
- if(onComplete){
- onComplete(s, newSize);
- }
- }else{
- s.resizingEl.setHeight(newSize, true, .1, onComplete, 'easeOut');
- }
- }
- }
-};
-
-/**
- *@class Roo.SplitBar.AbsoluteLayoutAdapter
- * @extends Roo.SplitBar.BasicLayoutAdapter
- * Adapter that moves the splitter element to align with the resized sizing element.
- * Used with an absolute positioned SplitBar.
- * @param {String/HTMLElement/Roo.Element} container The container that wraps around the absolute positioned content. If it's
- * document.body, make sure you assign an id to the body element.
- */
-Roo.SplitBar.AbsoluteLayoutAdapter = function(container){
- this.basic = new Roo.SplitBar.BasicLayoutAdapter();
- this.container = Roo.get(container);
-};
-
-Roo.SplitBar.AbsoluteLayoutAdapter.prototype = {
- init : function(s){
- this.basic.init(s);
- },
-
- getElementSize : function(s){
- return this.basic.getElementSize(s);
- },
-
- setElementSize : function(s, newSize, onComplete){
- this.basic.setElementSize(s, newSize, this.moveSplitter.createDelegate(this, [s]));
- },
-
- moveSplitter : function(s){
- var yes = Roo.SplitBar;
- switch(s.placement){
- case yes.LEFT:
- s.el.setX(s.resizingEl.getRight());
- break;
- case yes.RIGHT:
- s.el.setStyle("right", (this.container.getWidth() - s.resizingEl.getLeft()) + "px");
- break;
- case yes.TOP:
- s.el.setY(s.resizingEl.getBottom());
- break;
- case yes.BOTTOM:
- s.el.setY(s.resizingEl.getTop() - s.el.getHeight());
- break;
- }
- }
-};
-
-/**
- * Orientation constant - Create a vertical SplitBar
- * @static
- * @type Number
- */
-Roo.SplitBar.VERTICAL = 1;
-
-/**
- * Orientation constant - Create a horizontal SplitBar
- * @static
- * @type Number
- */
-Roo.SplitBar.HORIZONTAL = 2;
-
-/**
- * Placement constant - The resizing element is to the left of the splitter element
- * @static
- * @type Number
- */
-Roo.SplitBar.LEFT = 1;
-
-/**
- * Placement constant - The resizing element is to the right of the splitter element
- * @static
- * @type Number
- */
-Roo.SplitBar.RIGHT = 2;
-
-/**
- * Placement constant - The resizing element is positioned above the splitter element
- * @static
- * @type Number
- */
-Roo.SplitBar.TOP = 3;
-
-/**
- * Placement constant - The resizing element is positioned under splitter element
- * @static
- * @type Number
- */
-Roo.SplitBar.BOTTOM = 4;
-/*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
- */
-
-/**
- * @class Roo.View
- * @extends Roo.util.Observable
- * Create a "View" for an element based on a data model or UpdateManager and the supplied DomHelper template.
- * This class also supports single and multi selection modes. <br>
- * Create a data model bound view:
- <pre><code>
- var store = new Roo.data.Store(...);
-
- var view = new Roo.View({
- el : "my-element",
- tpl : '<div id="{0}">{2} - {1}</div>', // auto create template
-
- singleSelect: true,
- selectedClass: "ydataview-selected",
- store: store
- });
-
- // listen for node click?
- view.on("click", function(vw, index, node, e){
- alert('Node "' + node.id + '" at index: ' + index + " was clicked.");
- });
-
- // load XML data
- dataModel.load("foobar.xml");
- </code></pre>
- For an example of creating a JSON/UpdateManager view, see {@link Roo.JsonView}.
- * <br><br>
- * <b>Note: The root of your template must be a single node. Table/row implementations may work but are not supported due to
- * IE"s limited insertion support with tables and Opera"s faulty event bubbling.</b>
- *
- * Note: old style constructor is still suported (container, template, config)
- *
- * @constructor
- * Create a new View
- * @param {Object} config The config object
- *
- */
-Roo.View = function(config, depreciated_tpl, depreciated_config){
-
- if (typeof(depreciated_tpl) == 'undefined') {
- // new way.. - universal constructor.
- Roo.apply(this, config);
- this.el = Roo.get(this.el);
- } else {
- // old format..
- this.el = Roo.get(config);
- this.tpl = depreciated_tpl;
- Roo.apply(this, depreciated_config);
- }
-
-
- if(typeof(this.tpl) == "string"){
- this.tpl = new Roo.Template(this.tpl);
- } else {
- // support xtype ctors..
- this.tpl = new Roo.factory(this.tpl, Roo);
- }
-
-
- this.tpl.compile();
-
-
-
- /** @private */
- this.addEvents({
- /**
- * @event beforeclick
- * Fires before a click is processed. Returns false to cancel the default action.
- * @param {Roo.View} this
- * @param {Number} index The index of the target node
- * @param {HTMLElement} node The target node
- * @param {Roo.EventObject} e The raw event object
- */
- "beforeclick" : true,
- /**
- * @event click
- * Fires when a template node is clicked.
- * @param {Roo.View} this
- * @param {Number} index The index of the target node
- * @param {HTMLElement} node The target node
- * @param {Roo.EventObject} e The raw event object
- */
- "click" : true,
- /**
- * @event dblclick
- * Fires when a template node is double clicked.
- * @param {Roo.View} this
- * @param {Number} index The index of the target node
- * @param {HTMLElement} node The target node
- * @param {Roo.EventObject} e The raw event object
- */
- "dblclick" : true,
- /**
- * @event contextmenu
- * Fires when a template node is right clicked.
- * @param {Roo.View} this
- * @param {Number} index The index of the target node
- * @param {HTMLElement} node The target node
- * @param {Roo.EventObject} e The raw event object
- */
- "contextmenu" : true,
- /**
- * @event selectionchange
- * Fires when the selected nodes change.
- * @param {Roo.View} this
- * @param {Array} selections Array of the selected nodes
- */
- "selectionchange" : true,
-
- /**
- * @event beforeselect
- * Fires before a selection is made. If any handlers return false, the selection is cancelled.
- * @param {Roo.View} this
- * @param {HTMLElement} node The node to be selected
- * @param {Array} selections Array of currently selected nodes
- */
- "beforeselect" : true
- });
-
- this.el.on({
- "click": this.onClick,
- "dblclick": this.onDblClick,
- "contextmenu": this.onContextMenu,
- scope:this
- });
-
- this.selections = [];
- this.nodes = [];
- this.cmp = new Roo.CompositeElementLite([]);
- if(this.store){
- this.store = Roo.factory(this.store, Roo.data);
- this.setStore(this.store, true);
- }
- Roo.View.superclass.constructor.call(this);
-};
-
-Roo.extend(Roo.View, Roo.util.Observable, {
-
- /**
- * @cfg {Roo.data.Store} store Data store to load data from.
- */
- store : false,
-
- /**
- * @cfg {String|Roo.Element} el The container element.
- */
- el : '',
-
- /**
- * @cfg {String|Roo.Template} tpl The template used by this View
- */
- tpl : false,
-
- /**
- * @cfg {String} selectedClass The css class to add to selected nodes
- */
- selectedClass : "x-view-selected",
- /**
- * @cfg {String} emptyText The empty text to show when nothing is loaded.
- */
- emptyText : "",
- /**
- * @cfg {Boolean} multiSelect Allow multiple selection
- */
-
- multiSelect : false,
- /**
- * @cfg {Boolean} singleSelect Allow single selection
- */
- singleSelect: false,
-
- /**
- * Returns the element this view is bound to.
- * @return {Roo.Element}
- */
- getEl : function(){
- return this.el;
- },
-
- /**
- * Refreshes the view.
- */
- refresh : function(){
- var t = this.tpl;
- this.clearSelections();
- this.el.update("");
- var html = [];
- var records = this.store.getRange();
- if(records.length < 1){
- this.el.update(this.emptyText);
- return;
- }
- for(var i = 0, len = records.length; i < len; i++){
- var data = this.prepareData(records[i].data, i, records[i]);
- html[html.length] = t.apply(data);
- }
- this.el.update(html.join(""));
- this.nodes = this.el.dom.childNodes;
- this.updateIndexes(0);
- },
-
- /**
- * Function to override to reformat the data that is sent to
- * the template for each node.
- * @param {Array/Object} data The raw data (array of colData for a data model bound view or
- * a JSON object for an UpdateManager bound view).
- */
- prepareData : function(data){
- return data;
- },
-
- onUpdate : function(ds, record){
- this.clearSelections();
- var index = this.store.indexOf(record);
- var n = this.nodes[index];
- this.tpl.insertBefore(n, this.prepareData(record.data));
- n.parentNode.removeChild(n);
- this.updateIndexes(index, index);
- },
-
- onAdd : function(ds, records, index){
- this.clearSelections();
- if(this.nodes.length == 0){
- this.refresh();
- return;
- }
- var n = this.nodes[index];
- for(var i = 0, len = records.length; i < len; i++){
- var d = this.prepareData(records[i].data);
- if(n){
- this.tpl.insertBefore(n, d);
- }else{
- this.tpl.append(this.el, d);
- }
- }
- this.updateIndexes(index);
- },
-
- onRemove : function(ds, record, index){
- this.clearSelections();
- this.el.dom.removeChild(this.nodes[index]);
- this.updateIndexes(index);
- },
-
- /**
- * Refresh an individual node.
- * @param {Number} index
- */
- refreshNode : function(index){
- this.onUpdate(this.store, this.store.getAt(index));
- },
-
- updateIndexes : function(startIndex, endIndex){
- var ns = this.nodes;
- startIndex = startIndex || 0;
- endIndex = endIndex || ns.length - 1;
- for(var i = startIndex; i <= endIndex; i++){
- ns[i].nodeIndex = i;
- }
- },
-
- /**
- * Changes the data store this view uses and refresh the view.
- * @param {Store} store
- */
- setStore : function(store, initial){
- if(!initial && this.store){
- this.store.un("datachanged", this.refresh);
- this.store.un("add", this.onAdd);
- this.store.un("remove", this.onRemove);
- this.store.un("update", this.onUpdate);
- this.store.un("clear", this.refresh);
- }
- if(store){
-
- store.on("datachanged", this.refresh, this);
- store.on("add", this.onAdd, this);
- store.on("remove", this.onRemove, this);
- store.on("update", this.onUpdate, this);
- store.on("clear", this.refresh, this);
- }
-
- if(store){
- this.refresh();
- }
- },
-
- /**
- * Returns the template node the passed child belongs to or null if it doesn't belong to one.
- * @param {HTMLElement} node
- * @return {HTMLElement} The template node
- */
- findItemFromChild : function(node){
- var el = this.el.dom;
- if(!node || node.parentNode == el){
- return node;
- }
- var p = node.parentNode;
- while(p && p != el){
- if(p.parentNode == el){
- return p;
- }
- p = p.parentNode;
- }
- return null;
- },
-
- /** @ignore */
- onClick : function(e){
- var item = this.findItemFromChild(e.getTarget());
- if(item){
- var index = this.indexOf(item);
- if(this.onItemClick(item, index, e) !== false){
- this.fireEvent("click", this, index, item, e);
- }
- }else{
- this.clearSelections();
- }
- },
-
- /** @ignore */
- onContextMenu : function(e){
- var item = this.findItemFromChild(e.getTarget());
- if(item){
- this.fireEvent("contextmenu", this, this.indexOf(item), item, e);
- }
- },
-
- /** @ignore */
- onDblClick : function(e){
- var item = this.findItemFromChild(e.getTarget());
- if(item){
- this.fireEvent("dblclick", this, this.indexOf(item), item, e);
- }
- },
-
- onItemClick : function(item, index, e){
- if(this.fireEvent("beforeclick", this, index, item, e) === false){
- return false;
- }
- if(this.multiSelect || this.singleSelect){
- if(this.multiSelect && e.shiftKey && this.lastSelection){
- this.select(this.getNodes(this.indexOf(this.lastSelection), index), false);
- }else{
- this.select(item, this.multiSelect && e.ctrlKey);
- this.lastSelection = item;
- }
- e.preventDefault();
- }
- return true;
- },
-
- /**
- * Get the number of selected nodes.
- * @return {Number}
- */
- getSelectionCount : function(){
- return this.selections.length;
- },
-
- /**
- * Get the currently selected nodes.
- * @return {Array} An array of HTMLElements
- */
- getSelectedNodes : function(){
- return this.selections;
- },
-
- /**
- * Get the indexes of the selected nodes.
- * @return {Array}
- */
- getSelectedIndexes : function(){
- var indexes = [], s = this.selections;
- for(var i = 0, len = s.length; i < len; i++){
- indexes.push(s[i].nodeIndex);
- }
- return indexes;
- },
-
- /**
- * Clear all selections
- * @param {Boolean} suppressEvent (optional) true to skip firing of the selectionchange event
- */
- clearSelections : function(suppressEvent){
- if(this.nodes && (this.multiSelect || this.singleSelect) && this.selections.length > 0){
- this.cmp.elements = this.selections;
- this.cmp.removeClass(this.selectedClass);
- this.selections = [];
- if(!suppressEvent){
- this.fireEvent("selectionchange", this, this.selections);
- }
- }
- },
-
- /**
- * Returns true if the passed node is selected
- * @param {HTMLElement/Number} node The node or node index
- * @return {Boolean}
- */
- isSelected : function(node){
- var s = this.selections;
- if(s.length < 1){
- return false;
- }
- node = this.getNode(node);
- return s.indexOf(node) !== -1;
- },
-
- /**
- * Selects nodes.
- * @param {Array/HTMLElement/String/Number} nodeInfo An HTMLElement template node, index of a template node, id of a template node or an array of any of those to select
- * @param {Boolean} keepExisting (optional) true to keep existing selections
- * @param {Boolean} suppressEvent (optional) true to skip firing of the selectionchange vent
- */
- select : function(nodeInfo, keepExisting, suppressEvent){
- if(nodeInfo instanceof Array){
- if(!keepExisting){
- this.clearSelections(true);
- }
- for(var i = 0, len = nodeInfo.length; i < len; i++){
- this.select(nodeInfo[i], true, true);
- }
- } else{
- var node = this.getNode(nodeInfo);
- if(node && !this.isSelected(node)){
- if(!keepExisting){
- this.clearSelections(true);
- }
- if(this.fireEvent("beforeselect", this, node, this.selections) !== false){
- Roo.fly(node).addClass(this.selectedClass);
- this.selections.push(node);
- if(!suppressEvent){
- this.fireEvent("selectionchange", this, this.selections);
- }
- }
- }
- }
- },
-
- /**
- * Gets a template node.
- * @param {HTMLElement/String/Number} nodeInfo An HTMLElement template node, index of a template node or the id of a template node
- * @return {HTMLElement} The node or null if it wasn't found
- */
- getNode : function(nodeInfo){
- if(typeof nodeInfo == "string"){
- return document.getElementById(nodeInfo);
- }else if(typeof nodeInfo == "number"){
- return this.nodes[nodeInfo];
- }
- return nodeInfo;
- },
-
- /**
- * Gets a range template nodes.
- * @param {Number} startIndex
- * @param {Number} endIndex
- * @return {Array} An array of nodes
- */
- getNodes : function(start, end){
- var ns = this.nodes;
- start = start || 0;
- end = typeof end == "undefined" ? ns.length - 1 : end;
- var nodes = [];
- if(start <= end){
- for(var i = start; i <= end; i++){
- nodes.push(ns[i]);
- }
- } else{
- for(var i = start; i >= end; i--){
- nodes.push(ns[i]);
- }
- }
- return nodes;
- },
-
- /**
- * Finds the index of the passed node
- * @param {HTMLElement/String/Number} nodeInfo An HTMLElement template node, index of a template node or the id of a template node
- * @return {Number} The index of the node or -1
- */
- indexOf : function(node){
- node = this.getNode(node);
- if(typeof node.nodeIndex == "number"){
- return node.nodeIndex;
- }
- var ns = this.nodes;
- for(var i = 0, len = ns.length; i < len; i++){
- if(ns[i] == node){
- return i;
- }
- }
- return -1;
- }
-});
-/*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
- */
-
-/**
- * @class Roo.JsonView
- * @extends Roo.View
- * Shortcut class to create a JSON + {@link Roo.UpdateManager} template view. Usage:
-<pre><code>
-var view = new Roo.JsonView({
- container: "my-element",
- tpl: '<div id="{id}">{foo} - {bar}</div>', // auto create template
- multiSelect: true,
- jsonRoot: "data"
-});
-
-// listen for node click?
-view.on("click", function(vw, index, node, e){
- alert('Node "' + node.id + '" at index: ' + index + " was clicked.");
-});
-
-// direct load of JSON data
-view.load("foobar.php");
-
-// Example from my blog list
-var tpl = new Roo.Template(
- '<div class="entry">' +
- '<a class="entry-title" href="{link}">{title}</a>' +
- "<h4>{date} by {author} | {comments} Comments</h4>{description}" +
- "</div><hr />"
-);
-
-var moreView = new Roo.JsonView({
- container : "entry-list",
- template : tpl,
- jsonRoot: "posts"
-});
-moreView.on("beforerender", this.sortEntries, this);
-moreView.load({
- url: "/blog/get-posts.php",
- params: "allposts=true",
- text: "Loading Blog Entries..."
-});
-</code></pre>
-*
-* Note: old code is supported with arguments : (container, template, config)
-*
-*
- * @constructor
- * Create a new JsonView
- *
- * @param {Object} config The config object
- *
- */
-Roo.JsonView = function(config, depreciated_tpl, depreciated_config){
-
-
- Roo.JsonView.superclass.constructor.call(this, config, depreciated_tpl, depreciated_config);
-
- var um = this.el.getUpdateManager();
- um.setRenderer(this);
- um.on("update", this.onLoad, this);
- um.on("failure", this.onLoadException, this);
-
- /**
- * @event beforerender
- * Fires before rendering of the downloaded JSON data.
- * @param {Roo.JsonView} this
- * @param {Object} data The JSON data loaded
- */
- /**
- * @event load
- * Fires when data is loaded.
- * @param {Roo.JsonView} this
- * @param {Object} data The JSON data loaded
- * @param {Object} response The raw Connect response object
- */
- /**
- * @event loadexception
- * Fires when loading fails.
- * @param {Roo.JsonView} this
- * @param {Object} response The raw Connect response object
- */
- this.addEvents({
- 'beforerender' : true,
- 'load' : true,
- 'loadexception' : true
- });
-};
-Roo.extend(Roo.JsonView, Roo.View, {
- /**
- * @type {String} The root property in the loaded JSON object that contains the data
- */
- jsonRoot : "",
-
- /**
- * Refreshes the view.
- */
- refresh : function(){
- this.clearSelections();
- this.el.update("");
- var html = [];
- var o = this.jsonData;
- if(o && o.length > 0){
- for(var i = 0, len = o.length; i < len; i++){
- var data = this.prepareData(o[i], i, o);
- html[html.length] = this.tpl.apply(data);
- }
- }else{
- html.push(this.emptyText);
- }
- this.el.update(html.join(""));
- this.nodes = this.el.dom.childNodes;
- this.updateIndexes(0);
- },
-
- /**
- * Performs an async HTTP request, and loads the JSON from the response. If <i>params</i> are specified it uses POST, otherwise it uses GET.
- * @param {Object/String/Function} url The URL for this request, or a function to call to get the URL, or a config object containing any of the following options:
- <pre><code>
- view.load({
- url: "your-url.php",
- params: {param1: "foo", param2: "bar"}, // or a URL encoded string
- callback: yourFunction,
- scope: yourObject, //(optional scope)
- discardUrl: false,
- nocache: false,
- text: "Loading...",
- timeout: 30,
- scripts: false
- });
- </code></pre>
- * The only required property is <i>url</i>. The optional properties <i>nocache</i>, <i>text</i> and <i>scripts</i>
- * are respectively shorthand for <i>disableCaching</i>, <i>indicatorText</i>, and <i>loadScripts</i> and are used to set their associated property on this UpdateManager instance.
- * @param {String/Object} params (optional) The parameters to pass, as either a URL encoded string "param1=1&param2=2" or an object {param1: 1, param2: 2}
- * @param {Function} callback (optional) Callback when transaction is complete - called with signature (oElement, bSuccess)
- * @param {Boolean} discardUrl (optional) By default when you execute an update the defaultUrl is changed to the last used URL. If true, it will not store the URL.
- */
- load : function(){
- var um = this.el.getUpdateManager();
- um.update.apply(um, arguments);
- },
-
- render : function(el, response){
- this.clearSelections();
- this.el.update("");
- var o;
- try{
- o = Roo.util.JSON.decode(response.responseText);
- if(this.jsonRoot){
-
- o = o[this.jsonRoot];
- }
- } catch(e){
- }
- /**
- * The current JSON data or null
- */
- this.jsonData = o;
- this.beforeRender();
- this.refresh();
- },
-
-/**
- * Get the number of records in the current JSON dataset
- * @return {Number}
- */
- getCount : function(){
- return this.jsonData ? this.jsonData.length : 0;
- },
-
-/**
- * Returns the JSON object for the specified node(s)
- * @param {HTMLElement/Array} node The node or an array of nodes
- * @return {Object/Array} If you pass in an array, you get an array back, otherwise
- * you get the JSON object for the node
- */
- getNodeData : function(node){
- if(node instanceof Array){
- var data = [];
- for(var i = 0, len = node.length; i < len; i++){
- data.push(this.getNodeData(node[i]));
- }
- return data;
- }
- return this.jsonData[this.indexOf(node)] || null;
- },
-
- beforeRender : function(){
- this.snapshot = this.jsonData;
- if(this.sortInfo){
- this.sort.apply(this, this.sortInfo);
- }
- this.fireEvent("beforerender", this, this.jsonData);
- },
-
- onLoad : function(el, o){
- this.fireEvent("load", this, this.jsonData, o);
- },
-
- onLoadException : function(el, o){
- this.fireEvent("loadexception", this, o);
- },
-
-/**
- * Filter the data by a specific property.
- * @param {String} property A property on your JSON objects
- * @param {String/RegExp} value Either string that the property values
- * should start with, or a RegExp to test against the property
- */
- filter : function(property, value){
- if(this.jsonData){
- var data = [];
- var ss = this.snapshot;
- if(typeof value == "string"){
- var vlen = value.length;
- if(vlen == 0){
- this.clearFilter();
- return;
- }
- value = value.toLowerCase();
- for(var i = 0, len = ss.length; i < len; i++){
- var o = ss[i];
- if(o[property].substr(0, vlen).toLowerCase() == value){
- data.push(o);
- }
- }
- } else if(value.exec){ // regex?
- for(var i = 0, len = ss.length; i < len; i++){
- var o = ss[i];
- if(value.test(o[property])){
- data.push(o);
- }
- }
- } else{
- return;
- }
- this.jsonData = data;
- this.refresh();
- }
- },
-
-/**
- * Filter by a function. The passed function will be called with each
- * object in the current dataset. If the function returns true the value is kept,
- * otherwise it is filtered.
- * @param {Function} fn
- * @param {Object} scope (optional) The scope of the function (defaults to this JsonView)
- */
- filterBy : function(fn, scope){
- if(this.jsonData){
- var data = [];
- var ss = this.snapshot;
- for(var i = 0, len = ss.length; i < len; i++){
- var o = ss[i];
- if(fn.call(scope || this, o)){
- data.push(o);
- }
- }
- this.jsonData = data;
- this.refresh();
- }
- },
-
-/**
- * Clears the current filter.
- */
- clearFilter : function(){
- if(this.snapshot && this.jsonData != this.snapshot){
- this.jsonData = this.snapshot;
- this.refresh();
- }
- },
-
-
-/**
- * Sorts the data for this view and refreshes it.
- * @param {String} property A property on your JSON objects to sort on
- * @param {String} direction (optional) "desc" or "asc" (defaults to "asc")
- * @param {Function} sortType (optional) A function to call to convert the data to a sortable value.
- */
- sort : function(property, dir, sortType){
- this.sortInfo = Array.prototype.slice.call(arguments, 0);
- if(this.jsonData){
- var p = property;
- var dsc = dir && dir.toLowerCase() == "desc";
- var f = function(o1, o2){
- var v1 = sortType ? sortType(o1[p]) : o1[p];
- var v2 = sortType ? sortType(o2[p]) : o2[p];
- ;
- if(v1 < v2){
- return dsc ? +1 : -1;
- } else if(v1 > v2){
- return dsc ? -1 : +1;
- } else{
- return 0;
- }
- };
- this.jsonData.sort(f);
- this.refresh();
- if(this.jsonData != this.snapshot){
- this.snapshot.sort(f);
- }
- }
- }
-});/*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
- */
-
-
-/**
- * @class Roo.ColorPalette
- * @extends Roo.Component
- * Simple color palette class for choosing colors. The palette can be rendered to any container.<br />
- * Here's an example of typical usage:
- * <pre><code>
-var cp = new Roo.ColorPalette({value:'993300'}); // initial selected color
-cp.render('my-div');
-
-cp.on('select', function(palette, selColor){
- // do something with selColor
-});
-</code></pre>
- * @constructor
- * Create a new ColorPalette
- * @param {Object} config The config object
- */
-Roo.ColorPalette = function(config){
- Roo.ColorPalette.superclass.constructor.call(this, config);
- this.addEvents({
- /**
- * @event select
- * Fires when a color is selected
- * @param {ColorPalette} this
- * @param {String} color The 6-digit color hex code (without the # symbol)
- */
- select: true
- });
-
- if(this.handler){
- this.on("select", this.handler, this.scope, true);
- }
-};
-Roo.extend(Roo.ColorPalette, Roo.Component, {
- /**
- * @cfg {String} itemCls
- * The CSS class to apply to the containing element (defaults to "x-color-palette")
- */
- itemCls : "x-color-palette",
- /**
- * @cfg {String} value
- * The initial color to highlight (should be a valid 6-digit color hex code without the # symbol). Note that
- * the hex codes are case-sensitive.
- */
- value : null,
- clickEvent:'click',
- // private
- ctype: "Roo.ColorPalette",
-
- /**
- * @cfg {Boolean} allowReselect If set to true then reselecting a color that is already selected fires the selection event
- */
- allowReselect : false,
-
- /**
- * <p>An array of 6-digit color hex code strings (without the # symbol). This array can contain any number
- * of colors, and each hex code should be unique. The width of the palette is controlled via CSS by adjusting
- * the width property of the 'x-color-palette' class (or assigning a custom class), so you can balance the number
- * of colors with the width setting until the box is symmetrical.</p>
- * <p>You can override individual colors if needed:</p>
- * <pre><code>
-var cp = new Roo.ColorPalette();
-cp.colors[0] = "FF0000"; // change the first box to red
-</code></pre>
-
-Or you can provide a custom array of your own for complete control:
-<pre><code>
-var cp = new Roo.ColorPalette();
-cp.colors = ["000000", "993300", "333300"];
-</code></pre>
- * @type Array
- */
- colors : [
- "000000", "993300", "333300", "003300", "003366", "000080", "333399", "333333",
- "800000", "FF6600", "808000", "008000", "008080", "0000FF", "666699", "808080",
- "FF0000", "FF9900", "99CC00", "339966", "33CCCC", "3366FF", "800080", "969696",
- "FF00FF", "FFCC00", "FFFF00", "00FF00", "00FFFF", "00CCFF", "993366", "C0C0C0",
- "FF99CC", "FFCC99", "FFFF99", "CCFFCC", "CCFFFF", "99CCFF", "CC99FF", "FFFFFF"
- ],
-
- // private
- onRender : function(container, position){
- var t = new Roo.MasterTemplate(
- '<tpl><a href="#" class="color-{0}" hidefocus="on"><em><span style="background:#{0}" unselectable="on"> </span></em></a></tpl>'
- );
- var c = this.colors;
- for(var i = 0, len = c.length; i < len; i++){
- t.add([c[i]]);
- }
- var el = document.createElement("div");
- el.className = this.itemCls;
- t.overwrite(el);
- container.dom.insertBefore(el, position);
- this.el = Roo.get(el);
- this.el.on(this.clickEvent, this.handleClick, this, {delegate: "a"});
- if(this.clickEvent != 'click'){
- this.el.on('click', Roo.emptyFn, this, {delegate: "a", preventDefault:true});
- }
- },
-
- // private
- afterRender : function(){
- Roo.ColorPalette.superclass.afterRender.call(this);
- if(this.value){
- var s = this.value;
- this.value = null;
- this.select(s);
- }
- },
-
- // private
- handleClick : function(e, t){
- e.preventDefault();
- if(!this.disabled){
- var c = t.className.match(/(?:^|\s)color-(.{6})(?:\s|$)/)[1];
- this.select(c.toUpperCase());
- }
- },
-
- /**
- * Selects the specified color in the palette (fires the select event)
- * @param {String} color A valid 6-digit color hex code (# will be stripped if included)
- */
- select : function(color){
- color = color.replace("#", "");
- if(color != this.value || this.allowReselect){
- var el = this.el;
- if(this.value){
- el.child("a.color-"+this.value).removeClass("x-color-palette-sel");
- }
- el.child("a.color-"+color).addClass("x-color-palette-sel");
- this.value = color;
- this.fireEvent("select", this, color);
- }
- }
-});/*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
- */
-
-/**
- * @class Roo.DatePicker
- * @extends Roo.Component
- * Simple date picker class.
- * @constructor
- * Create a new DatePicker
- * @param {Object} config The config object
- */
-Roo.DatePicker = function(config){
- Roo.DatePicker.superclass.constructor.call(this, config);
-
- this.value = config && config.value ?
- config.value.clearTime() : new Date().clearTime();
-
- this.addEvents({
- /**
- * @event select
- * Fires when a date is selected
- * @param {DatePicker} this
- * @param {Date} date The selected date
- */
- select: true
- });
-
- if(this.handler){
- this.on("select", this.handler, this.scope || this);
- }
- // build the disabledDatesRE
- if(!this.disabledDatesRE && this.disabledDates){
- var dd = this.disabledDates;
- var re = "(?:";
- for(var i = 0; i < dd.length; i++){
- re += dd[i];
- if(i != dd.length-1) re += "|";
- }
- this.disabledDatesRE = new RegExp(re + ")");
- }
-};
-
-Roo.extend(Roo.DatePicker, Roo.Component, {
- /**
- * @cfg {String} todayText
- * The text to display on the button that selects the current date (defaults to "Today")
- */
- todayText : "Today",
- /**
- * @cfg {String} okText
- * The text to display on the ok button
- */
- okText : " OK ", //   to give the user extra clicking room
- /**
- * @cfg {String} cancelText
- * The text to display on the cancel button
- */
- cancelText : "Cancel",
- /**
- * @cfg {String} todayTip
- * The tooltip to display for the button that selects the current date (defaults to "{current date} (Spacebar)")
- */
- todayTip : "{0} (Spacebar)",
- /**
- * @cfg {Date} minDate
- * Minimum allowable date (JavaScript date object, defaults to null)
- */
- minDate : null,
- /**
- * @cfg {Date} maxDate
- * Maximum allowable date (JavaScript date object, defaults to null)
- */
- maxDate : null,
- /**
- * @cfg {String} minText
- * The error text to display if the minDate validation fails (defaults to "This date is before the minimum date")
- */
- minText : "This date is before the minimum date",
- /**
- * @cfg {String} maxText
- * The error text to display if the maxDate validation fails (defaults to "This date is after the maximum date")
- */
- maxText : "This date is after the maximum date",
- /**
- * @cfg {String} format
- * The default date format string which can be overriden for localization support. The format must be
- * valid according to {@link Date#parseDate} (defaults to 'm/d/y').
- */
- format : "m/d/y",
- /**
- * @cfg {Array} disabledDays
- * An array of days to disable, 0-based. For example, [0, 6] disables Sunday and Saturday (defaults to null).
- */
- disabledDays : null,
- /**
- * @cfg {String} disabledDaysText
- * The tooltip to display when the date falls on a disabled day (defaults to "")
- */
- disabledDaysText : "",
- /**
- * @cfg {RegExp} disabledDatesRE
- * JavaScript regular expression used to disable a pattern of dates (defaults to null)
- */
- disabledDatesRE : null,
- /**
- * @cfg {String} disabledDatesText
- * The tooltip text to display when the date falls on a disabled date (defaults to "")
- */
- disabledDatesText : "",
- /**
- * @cfg {Boolean} constrainToViewport
- * True to constrain the date picker to the viewport (defaults to true)
- */
- constrainToViewport : true,
- /**
- * @cfg {Array} monthNames
- * An array of textual month names which can be overriden for localization support (defaults to Date.monthNames)
- */
- monthNames : Date.monthNames,
- /**
- * @cfg {Array} dayNames
- * An array of textual day names which can be overriden for localization support (defaults to Date.dayNames)
- */
- dayNames : Date.dayNames,
- /**
- * @cfg {String} nextText
- * The next month navigation button tooltip (defaults to 'Next Month (Control+Right)')
- */
- nextText: 'Next Month (Control+Right)',
- /**
- * @cfg {String} prevText
- * The previous month navigation button tooltip (defaults to 'Previous Month (Control+Left)')
- */
- prevText: 'Previous Month (Control+Left)',
- /**
- * @cfg {String} monthYearText
- * The header month selector tooltip (defaults to 'Choose a month (Control+Up/Down to move years)')
- */
- monthYearText: 'Choose a month (Control+Up/Down to move years)',
- /**
- * @cfg {Number} startDay
- * Day index at which the week should begin, 0-based (defaults to 0, which is Sunday)
- */
- startDay : 0,
- /**
- * @cfg {Bool} showClear
- * Show a clear button (usefull for date form elements that can be blank.)
- */
-
- showClear: false,
-
- /**
- * Sets the value of the date field
- * @param {Date} value The date to set
- */
- setValue : function(value){
- var old = this.value;
- this.value = value.clearTime(true);
- if(this.el){
- this.update(this.value);
- }
- },
-
- /**
- * Gets the current selected value of the date field
- * @return {Date} The selected date
- */
- getValue : function(){
- return this.value;
- },
-
- // private
- focus : function(){
- if(this.el){
- this.update(this.activeDate);
- }
- },
-
- // private
- onRender : function(container, position){
- var m = [
- '<table cellspacing="0">',
- '<tr><td class="x-date-left"><a href="#" title="', this.prevText ,'"> </a></td><td class="x-date-middle" align="center"></td><td class="x-date-right"><a href="#" title="', this.nextText ,'"> </a></td></tr>',
- '<tr><td colspan="3"><table class="x-date-inner" cellspacing="0"><thead><tr>'];
- var dn = this.dayNames;
- for(var i = 0; i < 7; i++){
- var d = this.startDay+i;
- if(d > 6){
- d = d-7;
- }
- m.push("<th><span>", dn[d].substr(0,1), "</span></th>");
- }
- m[m.length] = "</tr></thead><tbody><tr>";
- for(var i = 0; i < 42; i++) {
- if(i % 7 == 0 && i != 0){
- m[m.length] = "</tr><tr>";
- }
- m[m.length] = '<td><a href="#" hidefocus="on" class="x-date-date" tabIndex="1"><em><span></span></em></a></td>';
- }
- m[m.length] = '</tr></tbody></table></td></tr><tr>'+
- '<td colspan="3" class="x-date-bottom" align="center"></td></tr></table><div class="x-date-mp"></div>';
-
- var el = document.createElement("div");
- el.className = "x-date-picker";
- el.innerHTML = m.join("");
-
- container.dom.insertBefore(el, position);
-
- this.el = Roo.get(el);
- this.eventEl = Roo.get(el.firstChild);
-
- new Roo.util.ClickRepeater(this.el.child("td.x-date-left a"), {
- handler: this.showPrevMonth,
- scope: this,
- preventDefault:true,
- stopDefault:true
- });
-
- new Roo.util.ClickRepeater(this.el.child("td.x-date-right a"), {
- handler: this.showNextMonth,
- scope: this,
- preventDefault:true,
- stopDefault:true
- });
-
- this.eventEl.on("mousewheel", this.handleMouseWheel, this);
-
- this.monthPicker = this.el.down('div.x-date-mp');
- this.monthPicker.enableDisplayMode('block');
-
- var kn = new Roo.KeyNav(this.eventEl, {
- "left" : function(e){
- e.ctrlKey ?
- this.showPrevMonth() :
- this.update(this.activeDate.add("d", -1));
- },
-
- "right" : function(e){
- e.ctrlKey ?
- this.showNextMonth() :
- this.update(this.activeDate.add("d", 1));
- },
-
- "up" : function(e){
- e.ctrlKey ?
- this.showNextYear() :
- this.update(this.activeDate.add("d", -7));
- },
-
- "down" : function(e){
- e.ctrlKey ?
- this.showPrevYear() :
- this.update(this.activeDate.add("d", 7));
- },
-
- "pageUp" : function(e){
- this.showNextMonth();
- },
-
- "pageDown" : function(e){
- this.showPrevMonth();
- },
-
- "enter" : function(e){
- e.stopPropagation();
- return true;
- },
-
- scope : this
- });
-
- this.eventEl.on("click", this.handleDateClick, this, {delegate: "a.x-date-date"});
-
- this.eventEl.addKeyListener(Roo.EventObject.SPACE, this.selectToday, this);
-
- this.el.unselectable();
-
- this.cells = this.el.select("table.x-date-inner tbody td");
- this.textNodes = this.el.query("table.x-date-inner tbody span");
-
- this.mbtn = new Roo.Button(this.el.child("td.x-date-middle", true), {
- text: " ",
- tooltip: this.monthYearText
- });
-
- this.mbtn.on('click', this.showMonthPicker, this);
- this.mbtn.el.child(this.mbtn.menuClassTarget).addClass("x-btn-with-menu");
-
-
- var today = (new Date()).dateFormat(this.format);
-
- var baseTb = new Roo.Toolbar(this.el.child("td.x-date-bottom", true));
- if (this.showClear) {
- baseTb.add( new Roo.Toolbar.Fill());
- }
- baseTb.add({
- text: String.format(this.todayText, today),
- tooltip: String.format(this.todayTip, today),
- handler: this.selectToday,
- scope: this
- });
-
- //var todayBtn = new Roo.Button(this.el.child("td.x-date-bottom", true), {
-
- //});
- if (this.showClear) {
-
- baseTb.add( new Roo.Toolbar.Fill());
- baseTb.add({
- text: ' ',
- cls: 'x-btn-icon x-btn-clear',
- handler: function() {
- //this.value = '';
- this.fireEvent("select", this, '');
- },
- scope: this
- });
- }
-
-
- if(Roo.isIE){
- this.el.repaint();
- }
- this.update(this.value);
- },
-
- createMonthPicker : function(){
- if(!this.monthPicker.dom.firstChild){
- var buf = ['<table border="0" cellspacing="0">'];
- for(var i = 0; i < 6; i++){
- buf.push(
- '<tr><td class="x-date-mp-month"><a href="#">', this.monthNames[i].substr(0, 3), '</a></td>',
- '<td class="x-date-mp-month x-date-mp-sep"><a href="#">', this.monthNames[i+6].substr(0, 3), '</a></td>',
- i == 0 ?
- '<td class="x-date-mp-ybtn" align="center"><a class="x-date-mp-prev"></a></td><td class="x-date-mp-ybtn" align="center"><a class="x-date-mp-next"></a></td></tr>' :
- '<td class="x-date-mp-year"><a href="#"></a></td><td class="x-date-mp-year"><a href="#"></a></td></tr>'
- );
- }
- buf.push(
- '<tr class="x-date-mp-btns"><td colspan="4"><button type="button" class="x-date-mp-ok">',
- this.okText,
- '</button><button type="button" class="x-date-mp-cancel">',
- this.cancelText,
- '</button></td></tr>',
- '</table>'
- );
- this.monthPicker.update(buf.join(''));
- this.monthPicker.on('click', this.onMonthClick, this);
- this.monthPicker.on('dblclick', this.onMonthDblClick, this);
-
- this.mpMonths = this.monthPicker.select('td.x-date-mp-month');
- this.mpYears = this.monthPicker.select('td.x-date-mp-year');
-
- this.mpMonths.each(function(m, a, i){
- i += 1;
- if((i%2) == 0){
- m.dom.xmonth = 5 + Math.round(i * .5);
- }else{
- m.dom.xmonth = Math.round((i-1) * .5);
- }
- });
- }
- },
-
- showMonthPicker : function(){
- this.createMonthPicker();
- var size = this.el.getSize();
- this.monthPicker.setSize(size);
- this.monthPicker.child('table').setSize(size);
-
- this.mpSelMonth = (this.activeDate || this.value).getMonth();
- this.updateMPMonth(this.mpSelMonth);
- this.mpSelYear = (this.activeDate || this.value).getFullYear();
- this.updateMPYear(this.mpSelYear);
-
- this.monthPicker.slideIn('t', {duration:.2});
- },
-
- updateMPYear : function(y){
- this.mpyear = y;
- var ys = this.mpYears.elements;
- for(var i = 1; i <= 10; i++){
- var td = ys[i-1], y2;
- if((i%2) == 0){
- y2 = y + Math.round(i * .5);
- td.firstChild.innerHTML = y2;
- td.xyear = y2;
- }else{
- y2 = y - (5-Math.round(i * .5));
- td.firstChild.innerHTML = y2;
- td.xyear = y2;
- }
- this.mpYears.item(i-1)[y2 == this.mpSelYear ? 'addClass' : 'removeClass']('x-date-mp-sel');
- }
- },
-
- updateMPMonth : function(sm){
- this.mpMonths.each(function(m, a, i){
- m[m.dom.xmonth == sm ? 'addClass' : 'removeClass']('x-date-mp-sel');
- });
- },
-
- selectMPMonth: function(m){
-
- },
-
- onMonthClick : function(e, t){
- e.stopEvent();
- var el = new Roo.Element(t), pn;
- if(el.is('button.x-date-mp-cancel')){
- this.hideMonthPicker();
- }
- else if(el.is('button.x-date-mp-ok')){
- this.update(new Date(this.mpSelYear, this.mpSelMonth, (this.activeDate || this.value).getDate()));
- this.hideMonthPicker();
- }
- else if(pn = el.up('td.x-date-mp-month', 2)){
- this.mpMonths.removeClass('x-date-mp-sel');
- pn.addClass('x-date-mp-sel');
- this.mpSelMonth = pn.dom.xmonth;
- }
- else if(pn = el.up('td.x-date-mp-year', 2)){
- this.mpYears.removeClass('x-date-mp-sel');
- pn.addClass('x-date-mp-sel');
- this.mpSelYear = pn.dom.xyear;
- }
- else if(el.is('a.x-date-mp-prev')){
- this.updateMPYear(this.mpyear-10);
- }
- else if(el.is('a.x-date-mp-next')){
- this.updateMPYear(this.mpyear+10);
- }
- },
-
- onMonthDblClick : function(e, t){
- e.stopEvent();
- var el = new Roo.Element(t), pn;
- if(pn = el.up('td.x-date-mp-month', 2)){
- this.update(new Date(this.mpSelYear, pn.dom.xmonth, (this.activeDate || this.value).getDate()));
- this.hideMonthPicker();
- }
- else if(pn = el.up('td.x-date-mp-year', 2)){
- this.update(new Date(pn.dom.xyear, this.mpSelMonth, (this.activeDate || this.value).getDate()));
- this.hideMonthPicker();
- }
- },
-
- hideMonthPicker : function(disableAnim){
- if(this.monthPicker){
- if(disableAnim === true){
- this.monthPicker.hide();
- }else{
- this.monthPicker.slideOut('t', {duration:.2});
- }
- }
- },
-
- // private
- showPrevMonth : function(e){
- this.update(this.activeDate.add("mo", -1));
- },
-
- // private
- showNextMonth : function(e){
- this.update(this.activeDate.add("mo", 1));
- },
-
- // private
- showPrevYear : function(){
- this.update(this.activeDate.add("y", -1));
- },
-
- // private
- showNextYear : function(){
- this.update(this.activeDate.add("y", 1));
- },
-
- // private
- handleMouseWheel : function(e){
- var delta = e.getWheelDelta();
- if(delta > 0){
- this.showPrevMonth();
- e.stopEvent();
- } else if(delta < 0){
- this.showNextMonth();
- e.stopEvent();
- }
- },
-
- // private
- handleDateClick : function(e, t){
- e.stopEvent();
- if(t.dateValue && !Roo.fly(t.parentNode).hasClass("x-date-disabled")){
- this.setValue(new Date(t.dateValue));
- this.fireEvent("select", this, this.value);
- }
- },
-
- // private
- selectToday : function(){
- this.setValue(new Date().clearTime());
- this.fireEvent("select", this, this.value);
- },
-
- // private
- update : function(date){
- var vd = this.activeDate;
- this.activeDate = date;
- if(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");
- setTimeout(function(){
- try{c.dom.firstChild.focus();}catch(e){}
- }, 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;
-
- 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";
- setTimeout(function(){
- try{cell.firstChild.focus();}catch(e){}
- }, 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++){
- 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"));
- Roo.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(Roo.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]);
- }
- }
- }
-});/*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
- */
-/**
- * @class Roo.TabPanel
- * @extends Roo.util.Observable
- * A lightweight tab container.
- * <br><br>
- * Usage:
- * <pre><code>
-// basic tabs 1, built from existing content
-var tabs = new Roo.TabPanel("tabs1");
-tabs.addTab("script", "View Script");
-tabs.addTab("markup", "View Markup");
-tabs.activate("script");
-
-// more advanced tabs, built from javascript
-var jtabs = new Roo.TabPanel("jtabs");
-jtabs.addTab("jtabs-1", "Normal Tab", "My content was added during construction.");
-
-// set up the UpdateManager
-var tab2 = jtabs.addTab("jtabs-2", "Ajax Tab 1");
-var updater = tab2.getUpdateManager();
-updater.setDefaultUrl("ajax1.htm");
-tab2.on('activate', updater.refresh, updater, true);
-
-// Use setUrl for Ajax loading
-var tab3 = jtabs.addTab("jtabs-3", "Ajax Tab 2");
-tab3.setUrl("ajax2.htm", null, true);
-
-// Disabled tab
-var tab4 = jtabs.addTab("tabs1-5", "Disabled Tab", "Can't see me cause I'm disabled");
-tab4.disable();
-
-jtabs.activate("jtabs-1");
- * </code></pre>
- * @constructor
- * Create a new TabPanel.
- * @param {String/HTMLElement/Roo.Element} container The id, DOM element or Roo.Element container where this TabPanel is to be rendered.
- * @param {Object/Boolean} config Config object to set any properties for this TabPanel, or true to render the tabs on the bottom.
- */
-Roo.TabPanel = function(container, config){
- /**
- * The container element for this TabPanel.
- * @type Roo.Element
- */
- this.el = Roo.get(container, true);
- if(config){
- if(typeof config == "boolean"){
- this.tabPosition = config ? "bottom" : "top";
- }else{
- Roo.apply(this, config);
- }
- }
- if(this.tabPosition == "bottom"){
- this.bodyEl = Roo.get(this.createBody(this.el.dom));
- this.el.addClass("x-tabs-bottom");
- }
- this.stripWrap = Roo.get(this.createStrip(this.el.dom), true);
- this.stripEl = Roo.get(this.createStripList(this.stripWrap.dom), true);
- this.stripBody = Roo.get(this.stripWrap.dom.firstChild.firstChild, true);
- if(Roo.isIE){
- Roo.fly(this.stripWrap.dom.firstChild).setStyle("overflow-x", "hidden");
- }
- if(this.tabPosition != "bottom"){
- /** The body element that contains {@link Roo.TabPanelItem} bodies.
- * @type Roo.Element
- */
- this.bodyEl = Roo.get(this.createBody(this.el.dom));
- this.el.addClass("x-tabs-top");
- }
- this.items = [];
-
- this.bodyEl.setStyle("position", "relative");
-
- this.active = null;
- this.activateDelegate = this.activate.createDelegate(this);
-
- this.addEvents({
- /**
- * @event tabchange
- * Fires when the active tab changes
- * @param {Roo.TabPanel} this
- * @param {Roo.TabPanelItem} activePanel The new active tab
- */
- "tabchange": true,
- /**
- * @event beforetabchange
- * Fires before the active tab changes, set cancel to true on the "e" parameter to cancel the change
- * @param {Roo.TabPanel} this
- * @param {Object} e Set cancel to true on this object to cancel the tab change
- * @param {Roo.TabPanelItem} tab The tab being changed to
- */
- "beforetabchange" : true
- });
-
- Roo.EventManager.onWindowResize(this.onResize, this);
- this.cpad = this.el.getPadding("lr");
- this.hiddenCount = 0;
-
- Roo.TabPanel.superclass.constructor.call(this);
-};
-
-Roo.extend(Roo.TabPanel, Roo.util.Observable, {
- /*
- *@cfg {String} tabPosition "top" or "bottom" (defaults to "top")
- */
- tabPosition : "top",
- /*
- *@cfg {Number} currentTabWidth The width of the current tab (defaults to 0)
- */
- currentTabWidth : 0,
- /*
- *@cfg {Number} minTabWidth The minimum width of a tab (defaults to 40) (ignored if {@link #resizeTabs} is not true)
- */
- minTabWidth : 40,
- /*
- *@cfg {Number} maxTabWidth The maximum width of a tab (defaults to 250) (ignored if {@link #resizeTabs} is not true)
- */
- maxTabWidth : 250,
- /*
- *@cfg {Number} preferredTabWidth The preferred (default) width of a tab (defaults to 175) (ignored if {@link #resizeTabs} is not true)
- */
- preferredTabWidth : 175,
- /*
- *@cfg {Boolean} resizeTabs True to enable dynamic tab resizing (defaults to false)
- */
- resizeTabs : false,
- /*
- *@cfg {Boolean} monitorResize Set this to true to turn on window resize monitoring (ignored if {@link #resizeTabs} is not true) (defaults to true)
- */
- monitorResize : true,
-
- /**
- * Creates a new {@link Roo.TabPanelItem} by looking for an existing element with the provided id -- if it's not found it creates one.
- * @param {String} id The id of the div to use <b>or create</b>
- * @param {String} text The text for the tab
- * @param {String} content (optional) Content to put in the TabPanelItem body
- * @param {Boolean} closable (optional) True to create a close icon on the tab
- * @return {Roo.TabPanelItem} The created TabPanelItem
- */
- addTab : function(id, text, content, closable){
- var item = new Roo.TabPanelItem(this, id, text, closable);
- this.addTabItem(item);
- if(content){
- item.setContent(content);
- }
- return item;
- },
-
- /**
- * Returns the {@link Roo.TabPanelItem} with the specified id/index
- * @param {String/Number} id The id or index of the TabPanelItem to fetch.
- * @return {Roo.TabPanelItem}
- */
- getTab : function(id){
- return this.items[id];
- },
-
- /**
- * Hides the {@link Roo.TabPanelItem} with the specified id/index
- * @param {String/Number} id The id or index of the TabPanelItem to hide.
- */
- hideTab : function(id){
- var t = this.items[id];
- if(!t.isHidden()){
- t.setHidden(true);
- this.hiddenCount++;
- this.autoSizeTabs();
- }
- },
-
- /**
- * "Unhides" the {@link Roo.TabPanelItem} with the specified id/index.
- * @param {String/Number} id The id or index of the TabPanelItem to unhide.
- */
- unhideTab : function(id){
- var t = this.items[id];
- if(t.isHidden()){
- t.setHidden(false);
- this.hiddenCount--;
- this.autoSizeTabs();
- }
- },
-
- /**
- * Adds an existing {@link Roo.TabPanelItem}.
- * @param {Roo.TabPanelItem} item The TabPanelItem to add
- */
- addTabItem : function(item){
- this.items[item.id] = item;
- this.items.push(item);
- if(this.resizeTabs){
- item.setWidth(this.currentTabWidth || this.preferredTabWidth);
- this.autoSizeTabs();
- }else{
- item.autoSize();
- }
- },
-
- /**
- * Removes a {@link Roo.TabPanelItem}.
- * @param {String/Number} id The id or index of the TabPanelItem to remove.
- */
- removeTab : function(id){
- var items = this.items;
- var tab = items[id];
- if(!tab) { return; }
- var index = items.indexOf(tab);
- if(this.active == tab && items.length > 1){
- var newTab = this.getNextAvailable(index);
- if(newTab) {
- newTab.activate();
- }
- }
- this.stripEl.dom.removeChild(tab.pnode.dom);
- if(tab.bodyEl.dom.parentNode == this.bodyEl.dom){ // if it was moved already prevent error
- this.bodyEl.dom.removeChild(tab.bodyEl.dom);
- }
- items.splice(index, 1);
- delete this.items[tab.id];
- tab.fireEvent("close", tab);
- tab.purgeListeners();
- this.autoSizeTabs();
- },
-
- getNextAvailable : function(start){
- var items = this.items;
- var index = start;
- // look for a next tab that will slide over to
- // replace the one being removed
- while(index < items.length){
- var item = items[++index];
- if(item && !item.isHidden()){
- return item;
- }
- }
- // if one isn't found select the previous tab (on the left)
- index = start;
- while(index >= 0){
- var item = items[--index];
- if(item && !item.isHidden()){
- return item;
- }
- }
- return null;
- },
-
- /**
- * Disables a {@link Roo.TabPanelItem}. It cannot be the active tab, if it is this call is ignored.
- * @param {String/Number} id The id or index of the TabPanelItem to disable.
- */
- disableTab : function(id){
- var tab = this.items[id];
- if(tab && this.active != tab){
- tab.disable();
- }
- },
-
- /**
- * Enables a {@link Roo.TabPanelItem} that is disabled.
- * @param {String/Number} id The id or index of the TabPanelItem to enable.
- */
- enableTab : function(id){
- var tab = this.items[id];
- tab.enable();
- },
-
- /**
- * Activates a {@link Roo.TabPanelItem}. The currently active one will be deactivated.
- * @param {String/Number} id The id or index of the TabPanelItem to activate.
- * @return {Roo.TabPanelItem} The TabPanelItem.
- */
- activate : function(id){
- var tab = this.items[id];
- if(!tab){
- return null;
- }
- if(tab == this.active || tab.disabled){
- return tab;
- }
- var e = {};
- this.fireEvent("beforetabchange", this, e, tab);
- if(e.cancel !== true && !tab.disabled){
- if(this.active){
- this.active.hide();
- }
- this.active = this.items[id];
- this.active.show();
- this.fireEvent("tabchange", this, this.active);
- }
- return tab;
- },
-
- /**
- * Gets the active {@link Roo.TabPanelItem}.
- * @return {Roo.TabPanelItem} The active TabPanelItem or null if none are active.
- */
- getActiveTab : function(){
- return this.active;
- },
-
- /**
- * Updates the tab body element to fit the height of the container element
- * for overflow scrolling
- * @param {Number} targetHeight (optional) Override the starting height from the elements height
- */
- syncHeight : function(targetHeight){
- var height = (targetHeight || this.el.getHeight())-this.el.getBorderWidth("tb")-this.el.getPadding("tb");
- var bm = this.bodyEl.getMargins();
- var newHeight = height-(this.stripWrap.getHeight()||0)-(bm.top+bm.bottom);
- this.bodyEl.setHeight(newHeight);
- return newHeight;
- },
-
- onResize : function(){
- if(this.monitorResize){
- this.autoSizeTabs();
- }
- },
-
- /**
- * Disables tab resizing while tabs are being added (if {@link #resizeTabs} is false this does nothing)
- */
- beginUpdate : function(){
- this.updating = true;
- },
-
- /**
- * Stops an update and resizes the tabs (if {@link #resizeTabs} is false this does nothing)
- */
- endUpdate : function(){
- this.updating = false;
- this.autoSizeTabs();
- },
-
- /**
- * Manual call to resize the tabs (if {@link #resizeTabs} is false this does nothing)
- */
- autoSizeTabs : function(){
- var count = this.items.length;
- var vcount = count - this.hiddenCount;
- if(!this.resizeTabs || count < 1 || vcount < 1 || this.updating) return;
- var w = Math.max(this.el.getWidth() - this.cpad, 10);
- var availWidth = Math.floor(w / vcount);
- var b = this.stripBody;
- if(b.getWidth() > w){
- var tabs = this.items;
- this.setTabWidth(Math.max(availWidth, this.minTabWidth)-2);
- if(availWidth < this.minTabWidth){
- /*if(!this.sleft){ // incomplete scrolling code
- this.createScrollButtons();
- }
- this.showScroll();
- this.stripClip.setWidth(w - (this.sleft.getWidth()+this.sright.getWidth()));*/
- }
- }else{
- if(this.currentTabWidth < this.preferredTabWidth){
- this.setTabWidth(Math.min(availWidth, this.preferredTabWidth)-2);
- }
- }
- },
-
- /**
- * Returns the number of tabs in this TabPanel.
- * @return {Number}
- */
- getCount : function(){
- return this.items.length;
- },
-
- /**
- * Resizes all the tabs to the passed width
- * @param {Number} The new width
- */
- setTabWidth : function(width){
- this.currentTabWidth = width;
- for(var i = 0, len = this.items.length; i < len; i++) {
- if(!this.items[i].isHidden())this.items[i].setWidth(width);
- }
- },
-
- /**
- * Destroys this TabPanel
- * @param {Boolean} removeEl (optional) True to remove the element from the DOM as well (defaults to undefined)
- */
- destroy : function(removeEl){
- Roo.EventManager.removeResizeListener(this.onResize, this);
- for(var i = 0, len = this.items.length; i < len; i++){
- this.items[i].purgeListeners();
- }
- if(removeEl === true){
- this.el.update("");
- this.el.remove();
- }
- }
-});
-
-/**
- * @class Roo.TabPanelItem
- * @extends Roo.util.Observable
- * Represents an individual item (tab plus body) in a TabPanel.
- * @param {Roo.TabPanel} tabPanel The {@link Roo.TabPanel} this TabPanelItem belongs to
- * @param {String} id The id of this TabPanelItem
- * @param {String} text The text for the tab of this TabPanelItem
- * @param {Boolean} closable True to allow this TabPanelItem to be closable (defaults to false)
- */
-Roo.TabPanelItem = function(tabPanel, id, text, closable){
- /**
- * The {@link Roo.TabPanel} this TabPanelItem belongs to
- * @type Roo.TabPanel
- */
- this.tabPanel = tabPanel;
- /**
- * The id for this TabPanelItem
- * @type String
- */
- this.id = id;
- /** @private */
- this.disabled = false;
- /** @private */
- this.text = text;
- /** @private */
- this.loaded = false;
- this.closable = closable;
-
- /**
- * The body element for this TabPanelItem.
- * @type Roo.Element
- */
- this.bodyEl = Roo.get(tabPanel.createItemBody(tabPanel.bodyEl.dom, id));
- this.bodyEl.setVisibilityMode(Roo.Element.VISIBILITY);
- this.bodyEl.setStyle("display", "block");
- this.bodyEl.setStyle("zoom", "1");
- this.hideAction();
-
- var els = tabPanel.createStripElements(tabPanel.stripEl.dom, text, closable);
- /** @private */
- this.el = Roo.get(els.el, true);
- this.inner = Roo.get(els.inner, true);
- this.textEl = Roo.get(this.el.dom.firstChild.firstChild.firstChild, true);
- this.pnode = Roo.get(els.el.parentNode, true);
- this.el.on("mousedown", this.onTabMouseDown, this);
- this.el.on("click", this.onTabClick, this);
- /** @private */
- if(closable){
- var c = Roo.get(els.close, true);
- c.dom.title = this.closeText;
- c.addClassOnOver("close-over");
- c.on("click", this.closeClick, this);
- }
-
- this.addEvents({
- /**
- * @event activate
- * Fires when this tab becomes the active tab.
- * @param {Roo.TabPanel} tabPanel The parent TabPanel
- * @param {Roo.TabPanelItem} this
- */
- "activate": true,
- /**
- * @event beforeclose
- * Fires before this tab is closed. To cancel the close, set cancel to true on e (e.cancel = true).
- * @param {Roo.TabPanelItem} this
- * @param {Object} e Set cancel to true on this object to cancel the close.
- */
- "beforeclose": true,
- /**
- * @event close
- * Fires when this tab is closed.
- * @param {Roo.TabPanelItem} this
- */
- "close": true,
- /**
- * @event deactivate
- * Fires when this tab is no longer the active tab.
- * @param {Roo.TabPanel} tabPanel The parent TabPanel
- * @param {Roo.TabPanelItem} this
- */
- "deactivate" : true
- });
- this.hidden = false;
-
- Roo.TabPanelItem.superclass.constructor.call(this);
-};
-
-Roo.extend(Roo.TabPanelItem, Roo.util.Observable, {
- purgeListeners : function(){
- Roo.util.Observable.prototype.purgeListeners.call(this);
- this.el.removeAllListeners();
- },
- /**
- * Shows this TabPanelItem -- this <b>does not</b> deactivate the currently active TabPanelItem.
- */
- show : function(){
- this.pnode.addClass("on");
- this.showAction();
- if(Roo.isOpera){
- this.tabPanel.stripWrap.repaint();
- }
- this.fireEvent("activate", this.tabPanel, this);
- },
-
- /**
- * Returns true if this tab is the active tab.
- * @return {Boolean}
- */
- isActive : function(){
- return this.tabPanel.getActiveTab() == this;
- },
-
- /**
- * Hides this TabPanelItem -- if you don't activate another TabPanelItem this could look odd.
- */
- hide : function(){
- this.pnode.removeClass("on");
- this.hideAction();
- this.fireEvent("deactivate", this.tabPanel, this);
- },
-
- hideAction : function(){
- this.bodyEl.hide();
- this.bodyEl.setStyle("position", "absolute");
- this.bodyEl.setLeft("-20000px");
- this.bodyEl.setTop("-20000px");
- },
-
- showAction : function(){
- this.bodyEl.setStyle("position", "relative");
- this.bodyEl.setTop("");
- this.bodyEl.setLeft("");
- this.bodyEl.show();
- },
-
- /**
- * Set the tooltip for the tab.
- * @param {String} tooltip The tab's tooltip
- */
- setTooltip : function(text){
- if(Roo.QuickTips && Roo.QuickTips.isEnabled()){
- this.textEl.dom.qtip = text;
- this.textEl.dom.removeAttribute('title');
- }else{
- this.textEl.dom.title = text;
- }
- },
-
- onTabClick : function(e){
- e.preventDefault();
- this.tabPanel.activate(this.id);
- },
-
- onTabMouseDown : function(e){
- e.preventDefault();
- this.tabPanel.activate(this.id);
- },
-
- getWidth : function(){
- return this.inner.getWidth();
- },
-
- setWidth : function(width){
- var iwidth = width - this.pnode.getPadding("lr");
- this.inner.setWidth(iwidth);
- this.textEl.setWidth(iwidth-this.inner.getPadding("lr"));
- this.pnode.setWidth(width);
- },
-
- /**
- * Show or hide the tab
- * @param {Boolean} hidden True to hide or false to show.
- */
- setHidden : function(hidden){
- this.hidden = hidden;
- this.pnode.setStyle("display", hidden ? "none" : "");
- },
-
- /**
- * Returns true if this tab is "hidden"
- * @return {Boolean}
- */
- isHidden : function(){
- return this.hidden;
- },
-
- /**
- * Returns the text for this tab
- * @return {String}
- */
- getText : function(){
- return this.text;
- },
-
- autoSize : function(){
- //this.el.beginMeasure();
- this.textEl.setWidth(1);
- this.setWidth(this.textEl.dom.scrollWidth+this.pnode.getPadding("lr")+this.inner.getPadding("lr"));
- //this.el.endMeasure();
- },
-
- /**
- * Sets the text for the tab (Note: this also sets the tooltip text)
- * @param {String} text The tab's text and tooltip
- */
- setText : function(text){
- this.text = text;
- this.textEl.update(text);
- this.setTooltip(text);
- if(!this.tabPanel.resizeTabs){
- this.autoSize();
- }
- },
- /**
- * Activates this TabPanelItem -- this <b>does</b> deactivate the currently active TabPanelItem.
- */
- activate : function(){
- this.tabPanel.activate(this.id);
- },
-
- /**
- * Disables this TabPanelItem -- this does nothing if this is the active TabPanelItem.
- */
- disable : function(){
- if(this.tabPanel.active != this){
- this.disabled = true;
- this.pnode.addClass("disabled");
- }
- },
-
- /**
- * Enables this TabPanelItem if it was previously disabled.
- */
- enable : function(){
- this.disabled = false;
- this.pnode.removeClass("disabled");
- },
-
- /**
- * Sets the content for this TabPanelItem.
- * @param {String} content The content
- * @param {Boolean} loadScripts true to look for and load scripts
- */
- setContent : function(content, loadScripts){
- this.bodyEl.update(content, loadScripts);
- },
-
- /**
- * Gets the {@link Roo.UpdateManager} for the body of this TabPanelItem. Enables you to perform Ajax updates.
- * @return {Roo.UpdateManager} The UpdateManager
- */
- getUpdateManager : function(){
- return this.bodyEl.getUpdateManager();
- },
-
- /**
- * Set a URL to be used to load the content for this TabPanelItem.
- * @param {String/Function} url The URL to load the content from, or a function to call to get the URL
- * @param {String/Object} params (optional) The string params for the update call or an object of the params. See {@link Roo.UpdateManager#update} for more details. (Defaults to null)
- * @param {Boolean} loadOnce (optional) Whether to only load the content once. If this is false it makes the Ajax call every time this TabPanelItem is activated. (Defaults to false)
- * @return {Roo.UpdateManager} The UpdateManager
- */
- setUrl : function(url, params, loadOnce){
- if(this.refreshDelegate){
- this.un('activate', this.refreshDelegate);
- }
- this.refreshDelegate = this._handleRefresh.createDelegate(this, [url, params, loadOnce]);
- this.on("activate", this.refreshDelegate);
- return this.bodyEl.getUpdateManager();
- },
-
- /** @private */
- _handleRefresh : function(url, params, loadOnce){
- if(!loadOnce || !this.loaded){
- var updater = this.bodyEl.getUpdateManager();
- updater.update(url, params, this._setLoaded.createDelegate(this));
- }
- },
-
- /**
- * Forces a content refresh from the URL specified in the {@link #setUrl} method.
- * Will fail silently if the setUrl method has not been called.
- * This does not activate the panel, just updates its content.
- */
- refresh : function(){
- if(this.refreshDelegate){
- this.loaded = false;
- this.refreshDelegate();
- }
- },
-
- /** @private */
- _setLoaded : function(){
- this.loaded = true;
- },
-
- /** @private */
- closeClick : function(e){
- var o = {};
- e.stopEvent();
- this.fireEvent("beforeclose", this, o);
- if(o.cancel !== true){
- this.tabPanel.removeTab(this.id);
- }
- },
- /**
- * The text displayed in the tooltip for the close icon.
- * @type String
- */
- closeText : "Close this tab"
-});
-
-/** @private */
-Roo.TabPanel.prototype.createStrip = function(container){
- var strip = document.createElement("div");
- strip.className = "x-tabs-wrap";
- container.appendChild(strip);
- return strip;
-};
-/** @private */
-Roo.TabPanel.prototype.createStripList = function(strip){
- // div wrapper for retard IE
- strip.innerHTML = '<div class="x-tabs-strip-wrap"><table class="x-tabs-strip" cellspacing="0" cellpadding="0" border="0"><tbody><tr></tr></tbody></table></div>';
- return strip.firstChild.firstChild.firstChild.firstChild;
-};
-/** @private */
-Roo.TabPanel.prototype.createBody = function(container){
- var body = document.createElement("div");
- Roo.id(body, "tab-body");
- Roo.fly(body).addClass("x-tabs-body");
- container.appendChild(body);
- return body;
-};
-/** @private */
-Roo.TabPanel.prototype.createItemBody = function(bodyEl, id){
- var body = Roo.getDom(id);
- if(!body){
- body = document.createElement("div");
- body.id = id;
- }
- Roo.fly(body).addClass("x-tabs-item-body");
- bodyEl.insertBefore(body, bodyEl.firstChild);
- return body;
-};
-/** @private */
-Roo.TabPanel.prototype.createStripElements = function(stripEl, text, closable){
- var td = document.createElement("td");
- stripEl.appendChild(td);
- if(closable){
- td.className = "x-tabs-closable";
- if(!this.closeTpl){
- this.closeTpl = new Roo.Template(
- '<a href="#" class="x-tabs-right"><span class="x-tabs-left"><em class="x-tabs-inner">' +
- '<span unselectable="on"' + (this.disableTooltips ? '' : ' title="{text}"') +' class="x-tabs-text">{text}</span>' +
- '<div unselectable="on" class="close-icon"> </div></em></span></a>'
- );
- }
- var el = this.closeTpl.overwrite(td, {"text": text});
- var close = el.getElementsByTagName("div")[0];
- var inner = el.getElementsByTagName("em")[0];
- return {"el": el, "close": close, "inner": inner};
- } else {
- if(!this.tabTpl){
- this.tabTpl = new Roo.Template(
- '<a href="#" class="x-tabs-right"><span class="x-tabs-left"><em class="x-tabs-inner">' +
- '<span unselectable="on"' + (this.disableTooltips ? '' : ' title="{text}"') +' class="x-tabs-text">{text}</span></em></span></a>'
- );
- }
- var el = this.tabTpl.overwrite(td, {"text": text});
- var inner = el.getElementsByTagName("em")[0];
- return {"el": el, "inner": inner};
- }
-};/*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
- */
-
-/**
- * @class Roo.Button
- * @extends Roo.util.Observable
- * Simple Button class
- * @cfg {String} text The button text
- * @cfg {String} icon The path to an image to display in the button (the image will be set as the background-image
- * CSS property of the button by default, so if you want a mixed icon/text button, set cls:"x-btn-text-icon")
- * @cfg {Function} handler A function called when the button is clicked (can be used instead of click event)
- * @cfg {Object} scope The scope of the handler
- * @cfg {Number} minWidth The minimum width for this button (used to give a set of buttons a common width)
- * @cfg {String/Object} tooltip The tooltip for the button - can be a string or QuickTips config object
- * @cfg {Boolean} hidden True to start hidden (defaults to false)
- * @cfg {Boolean} disabled True to start disabled (defaults to false)
- * @cfg {Boolean} pressed True to start pressed (only if enableToggle = true)
- * @cfg {String} toggleGroup The group this toggle button is a member of (only 1 per group can be pressed, only
- applies if enableToggle = true)
- * @cfg {String/HTMLElement/Element} renderTo The element to append the button to
- * @cfg {Boolean/Object} repeat True to repeat fire the click event while the mouse is down. This can also be
- an {@link Roo.util.ClickRepeater} config object (defaults to false).
- * @constructor
- * Create a new button
- * @param {Object} config The config object
- */
-Roo.Button = function(renderTo, config)
-{
- if (!config) {
- config = renderTo;
- renderTo = config.renderTo || false;
- }
-
- Roo.apply(this, config);
- this.addEvents({
- /**
- * @event click
- * Fires when this button is clicked
- * @param {Button} this
- * @param {EventObject} e The click event
- */
- "click" : true,
- /**
- * @event toggle
- * Fires when the "pressed" state of this button changes (only if enableToggle = true)
- * @param {Button} this
- * @param {Boolean} pressed
- */
- "toggle" : true,
- /**
- * @event mouseover
- * Fires when the mouse hovers over the button
- * @param {Button} this
- * @param {Event} e The event object
- */
- 'mouseover' : true,
- /**
- * @event mouseout
- * Fires when the mouse exits the button
- * @param {Button} this
- * @param {Event} e The event object
- */
- 'mouseout': true,
- /**
- * @event render
- * Fires when the button is rendered
- * @param {Button} this
- */
- 'render': true
- });
- if(this.menu){
- this.menu = Roo.menu.MenuMgr.get(this.menu);
- }
- // register listeners first!! - so render can be captured..
- Roo.util.Observable.call(this);
- if(renderTo){
- this.render(renderTo);
- }
-
-
-};
-
-Roo.extend(Roo.Button, Roo.util.Observable, {
- /**
- *
- */
-
- /**
- * Read-only. True if this button is hidden
- * @type Boolean
- */
- hidden : false,
- /**
- * Read-only. True if this button is disabled
- * @type Boolean
- */
- disabled : false,
- /**
- * Read-only. True if this button is pressed (only if enableToggle = true)
- * @type Boolean
- */
- pressed : false,
-
- /**
- * @cfg {Number} tabIndex
- * The DOM tabIndex for this button (defaults to undefined)
- */
- tabIndex : undefined,
-
- /**
- * @cfg {Boolean} enableToggle
- * True to enable pressed/not pressed toggling (defaults to false)
- */
- enableToggle: false,
- /**
- * @cfg {Mixed} menu
- * Standard menu attribute consisting of a reference to a menu object, a menu id or a menu config blob (defaults to undefined).
- */
- menu : undefined,
- /**
- * @cfg {String} menuAlign
- * The position to align the menu to (see {@link Roo.Element#alignTo} for more details, defaults to 'tl-bl?').
- */
- menuAlign : "tl-bl?",
-
- /**
- * @cfg {String} iconCls
- * A css class which sets a background image to be used as the icon for this button (defaults to undefined).
- */
- iconCls : undefined,
- /**
- * @cfg {String} type
- * The button's type, corresponding to the DOM input element type attribute. Either "submit," "reset" or "button" (default).
- */
- type : 'button',
-
- // private
- menuClassTarget: 'tr',
-
- /**
- * @cfg {String} clickEvent
- * The type of event to map to the button's event handler (defaults to 'click')
- */
- clickEvent : 'click',
-
- /**
- * @cfg {Boolean} handleMouseEvents
- * False to disable visual cues on mouseover, mouseout and mousedown (defaults to true)
- */
- handleMouseEvents : true,
-
- /**
- * @cfg {String} tooltipType
- * The type of tooltip to use. Either "qtip" (default) for QuickTips or "title" for title attribute.
- */
- tooltipType : 'qtip',
-
- /**
- * @cfg {String} cls
- * A CSS class to apply to the button's main element.
- */
-
- /**
- * @cfg {Roo.Template} template (Optional)
- * An {@link Roo.Template} with which to create the Button's main element. This Template must
- * contain numeric substitution parameter 0 if it is to display the tRoo property. Changing the template could
- * require code modifications if required elements (e.g. a button) aren't present.
- */
-
- // private
- render : function(renderTo){
- var btn;
- if(this.hideParent){
- this.parentEl = Roo.get(renderTo);
- }
- if(!this.dhconfig){
- if(!this.template){
- if(!Roo.Button.buttonTemplate){
- // hideous table template
- Roo.Button.buttonTemplate = new Roo.Template(
- '<table border="0" cellpadding="0" cellspacing="0" class="x-btn-wrap"><tbody><tr>',
- '<td class="x-btn-left"><i> </i></td><td class="x-btn-center"><em unselectable="on"><button class="x-btn-text" type="{1}">{0}</button></em></td><td class="x-btn-right"><i> </i></td>',
- "</tr></tbody></table>");
- }
- this.template = Roo.Button.buttonTemplate;
- }
- btn = this.template.append(renderTo, [this.text || ' ', this.type], true);
- var btnEl = btn.child("button:first");
- btnEl.on('focus', this.onFocus, this);
- btnEl.on('blur', this.onBlur, this);
- if(this.cls){
- btn.addClass(this.cls);
- }
- if(this.icon){
- btnEl.setStyle('background-image', 'url(' +this.icon +')');
- }
- if(this.iconCls){
- btnEl.addClass(this.iconCls);
- if(!this.cls){
- btn.addClass(this.text ? 'x-btn-text-icon' : 'x-btn-icon');
- }
- }
- if(this.tabIndex !== undefined){
- btnEl.dom.tabIndex = this.tabIndex;
- }
- if(this.tooltip){
- if(typeof this.tooltip == 'object'){
- Roo.QuickTips.tips(Roo.apply({
- target: btnEl.id
- }, this.tooltip));
- } else {
- btnEl.dom[this.tooltipType] = this.tooltip;
- }
- }
- }else{
- btn = Roo.DomHelper.append(Roo.get(renderTo).dom, this.dhconfig, true);
- }
- this.el = btn;
- if(this.id){
- this.el.dom.id = this.el.id = this.id;
- }
- if(this.menu){
- this.el.child(this.menuClassTarget).addClass("x-btn-with-menu");
- this.menu.on("show", this.onMenuShow, this);
- this.menu.on("hide", this.onMenuHide, this);
- }
- btn.addClass("x-btn");
- if(Roo.isIE && !Roo.isIE7){
- this.autoWidth.defer(1, this);
- }else{
- this.autoWidth();
- }
- if(this.handleMouseEvents){
- btn.on("mouseover", this.onMouseOver, this);
- btn.on("mouseout", this.onMouseOut, this);
- btn.on("mousedown", this.onMouseDown, this);
- }
- btn.on(this.clickEvent, this.onClick, this);
- //btn.on("mouseup", this.onMouseUp, this);
- if(this.hidden){
- this.hide();
- }
- if(this.disabled){
- this.disable();
- }
- Roo.ButtonToggleMgr.register(this);
- if(this.pressed){
- this.el.addClass("x-btn-pressed");
- }
- if(this.repeat){
- var repeater = new Roo.util.ClickRepeater(btn,
- typeof this.repeat == "object" ? this.repeat : {}
- );
- repeater.on("click", this.onClick, this);
- }
-
- this.fireEvent('render', this);
-
- },
- /**
- * Returns the button's underlying element
- * @return {Roo.Element} The element
- */
- getEl : function(){
- return this.el;
- },
-
- /**
- * Destroys this Button and removes any listeners.
- */
- destroy : function(){
- Roo.ButtonToggleMgr.unregister(this);
- this.el.removeAllListeners();
- this.purgeListeners();
- this.el.remove();
- },
-
- // private
- autoWidth : function(){
- if(this.el){
- this.el.setWidth("auto");
- if(Roo.isIE7 && Roo.isStrict){
- var ib = this.el.child('button');
- if(ib && ib.getWidth() > 20){
- ib.clip();
- ib.setWidth(Roo.util.TextMetrics.measure(ib, this.text).width+ib.getFrameWidth('lr'));
- }
- }
- if(this.minWidth){
- if(this.hidden){
- this.el.beginMeasure();
- }
- if(this.el.getWidth() < this.minWidth){
- this.el.setWidth(this.minWidth);
- }
- if(this.hidden){
- this.el.endMeasure();
- }
- }
- }
- },
-
- /**
- * Assigns this button's click handler
- * @param {Function} handler The function to call when the button is clicked
- * @param {Object} scope (optional) Scope for the function passed in
- */
- setHandler : function(handler, scope){
- this.handler = handler;
- this.scope = scope;
- },
-
- /**
- * Sets this button's text
- * @param {String} text The button text
- */
- setText : function(text){
- this.text = text;
- if(this.el){
- this.el.child("td.x-btn-center button.x-btn-text").update(text);
- }
- this.autoWidth();
- },
-
- /**
- * Gets the text for this button
- * @return {String} The button text
- */
- getText : function(){
- return this.text;
- },
-
- /**
- * Show this button
- */
- show: function(){
- this.hidden = false;
- if(this.el){
- this[this.hideParent? 'parentEl' : 'el'].setStyle("display", "");
- }
- },
-
- /**
- * Hide this button
- */
- hide: function(){
- this.hidden = true;
- if(this.el){
- this[this.hideParent? 'parentEl' : 'el'].setStyle("display", "none");
- }
- },
-
- /**
- * Convenience function for boolean show/hide
- * @param {Boolean} visible True to show, false to hide
- */
- setVisible: function(visible){
- if(visible) {
- this.show();
- }else{
- this.hide();
- }
- },
-
- /**
- * If a state it passed, it becomes the pressed state otherwise the current state is toggled.
- * @param {Boolean} state (optional) Force a particular state
- */
- toggle : function(state){
- state = state === undefined ? !this.pressed : state;
- if(state != this.pressed){
- if(state){
- this.el.addClass("x-btn-pressed");
- this.pressed = true;
- this.fireEvent("toggle", this, true);
- }else{
- this.el.removeClass("x-btn-pressed");
- this.pressed = false;
- this.fireEvent("toggle", this, false);
- }
- if(this.toggleHandler){
- this.toggleHandler.call(this.scope || this, this, state);
- }
- }
- },
-
- /**
- * Focus the button
- */
- focus : function(){
- this.el.child('button:first').focus();
- },
-
- /**
- * Disable this button
- */
- disable : function(){
- if(this.el){
- this.el.addClass("x-btn-disabled");
- }
- this.disabled = true;
- },
-
- /**
- * Enable this button
- */
- enable : function(){
- if(this.el){
- this.el.removeClass("x-btn-disabled");
- }
- this.disabled = false;
- },
-
- /**
- * Convenience function for boolean enable/disable
- * @param {Boolean} enabled True to enable, false to disable
- */
- setDisabled : function(v){
- this[v !== true ? "enable" : "disable"]();
- },
-
- // private
- onClick : function(e){
- if(e){
- e.preventDefault();
- }
- if(e.button != 0){
- return;
- }
- if(!this.disabled){
- if(this.enableToggle){
- this.toggle();
- }
- if(this.menu && !this.menu.isVisible()){
- this.menu.show(this.el, this.menuAlign);
- }
- this.fireEvent("click", this, e);
- if(this.handler){
- this.el.removeClass("x-btn-over");
- this.handler.call(this.scope || this, this, e);
- }
- }
- },
- // private
- onMouseOver : function(e){
- if(!this.disabled){
- this.el.addClass("x-btn-over");
- this.fireEvent('mouseover', this, e);
- }
- },
- // private
- onMouseOut : function(e){
- if(!e.within(this.el, true)){
- this.el.removeClass("x-btn-over");
- this.fireEvent('mouseout', this, e);
- }
- },
- // private
- onFocus : function(e){
- if(!this.disabled){
- this.el.addClass("x-btn-focus");
- }
- },
- // private
- onBlur : function(e){
- this.el.removeClass("x-btn-focus");
- },
- // private
- onMouseDown : function(e){
- if(!this.disabled && e.button == 0){
- this.el.addClass("x-btn-click");
- Roo.get(document).on('mouseup', this.onMouseUp, this);
- }
- },
- // private
- onMouseUp : function(e){
- if(e.button == 0){
- this.el.removeClass("x-btn-click");
- Roo.get(document).un('mouseup', this.onMouseUp, this);
- }
- },
- // private
- onMenuShow : function(e){
- this.el.addClass("x-btn-menu-active");
- },
- // private
- onMenuHide : function(e){
- this.el.removeClass("x-btn-menu-active");
- }
-});
-
-// Private utility class used by Button
-Roo.ButtonToggleMgr = function(){
- var groups = {};
-
- function toggleGroup(btn, state){
- if(state){
- var g = groups[btn.toggleGroup];
- for(var i = 0, l = g.length; i < l; i++){
- if(g[i] != btn){
- g[i].toggle(false);
- }
- }
- }
- }
-
- return {
- register : function(btn){
- if(!btn.toggleGroup){
- return;
- }
- var g = groups[btn.toggleGroup];
- if(!g){
- g = groups[btn.toggleGroup] = [];
- }
- g.push(btn);
- btn.on("toggle", toggleGroup);
- },
-
- unregister : function(btn){
- if(!btn.toggleGroup){
- return;
- }
- var g = groups[btn.toggleGroup];
- if(g){
- g.remove(btn);
- btn.un("toggle", toggleGroup);
- }
- }
- };
-}();/*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
- */
-
-/**
- * @class Roo.SplitButton
- * @extends Roo.Button
- * A split button that provides a built-in dropdown arrow that can fire an event separately from the default
- * click event of the button. Typically this would be used to display a dropdown menu that provides additional
- * options to the primary button action, but any custom handler can provide the arrowclick implementation.
- * @cfg {Function} arrowHandler A function called when the arrow button is clicked (can be used instead of click event)
- * @cfg {String} arrowTooltip The title attribute of the arrow
- * @constructor
- * Create a new menu button
- * @param {String/HTMLElement/Element} renderTo The element to append the button to
- * @param {Object} config The config object
- */
-Roo.SplitButton = function(renderTo, config){
- Roo.SplitButton.superclass.constructor.call(this, renderTo, config);
- /**
- * @event arrowclick
- * Fires when this button's arrow is clicked
- * @param {SplitButton} this
- * @param {EventObject} e The click event
- */
- this.addEvents({"arrowclick":true});
-};
-
-Roo.extend(Roo.SplitButton, Roo.Button, {
- render : function(renderTo){
- // this is one sweet looking template!
- var tpl = new Roo.Template(
- '<table cellspacing="0" class="x-btn-menu-wrap x-btn"><tr><td>',
- '<table cellspacing="0" class="x-btn-wrap x-btn-menu-text-wrap"><tbody>',
- '<tr><td class="x-btn-left"><i> </i></td><td class="x-btn-center"><button class="x-btn-text" type="{1}">{0}</button></td></tr>',
- "</tbody></table></td><td>",
- '<table cellspacing="0" class="x-btn-wrap x-btn-menu-arrow-wrap"><tbody>',
- '<tr><td class="x-btn-center"><button class="x-btn-menu-arrow-el" type="button"> </button></td><td class="x-btn-right"><i> </i></td></tr>',
- "</tbody></table></td></tr></table>"
- );
- var btn = tpl.append(renderTo, [this.text, this.type], true);
- var btnEl = btn.child("button");
- if(this.cls){
- btn.addClass(this.cls);
- }
- if(this.icon){
- btnEl.setStyle('background-image', 'url(' +this.icon +')');
- }
- if(this.iconCls){
- btnEl.addClass(this.iconCls);
- if(!this.cls){
- btn.addClass(this.text ? 'x-btn-text-icon' : 'x-btn-icon');
- }
- }
- this.el = btn;
- if(this.handleMouseEvents){
- btn.on("mouseover", this.onMouseOver, this);
- btn.on("mouseout", this.onMouseOut, this);
- btn.on("mousedown", this.onMouseDown, this);
- btn.on("mouseup", this.onMouseUp, this);
- }
- btn.on(this.clickEvent, this.onClick, this);
- if(this.tooltip){
- if(typeof this.tooltip == 'object'){
- Roo.QuickTips.tips(Roo.apply({
- target: btnEl.id
- }, this.tooltip));
- } else {
- btnEl.dom[this.tooltipType] = this.tooltip;
- }
- }
- if(this.arrowTooltip){
- btn.child("button:nth(2)").dom[this.tooltipType] = this.arrowTooltip;
- }
- if(this.hidden){
- this.hide();
- }
- if(this.disabled){
- this.disable();
- }
- if(this.pressed){
- this.el.addClass("x-btn-pressed");
- }
- if(Roo.isIE && !Roo.isIE7){
- this.autoWidth.defer(1, this);
- }else{
- this.autoWidth();
- }
- if(this.menu){
- this.menu.on("show", this.onMenuShow, this);
- this.menu.on("hide", this.onMenuHide, this);
- }
- this.fireEvent('render', this);
- },
-
- // private
- autoWidth : function(){
- if(this.el){
- var tbl = this.el.child("table:first");
- var tbl2 = this.el.child("table:last");
- this.el.setWidth("auto");
- tbl.setWidth("auto");
- if(Roo.isIE7 && Roo.isStrict){
- var ib = this.el.child('button:first');
- if(ib && ib.getWidth() > 20){
- ib.clip();
- ib.setWidth(Roo.util.TextMetrics.measure(ib, this.text).width+ib.getFrameWidth('lr'));
- }
- }
- if(this.minWidth){
- if(this.hidden){
- this.el.beginMeasure();
- }
- if((tbl.getWidth()+tbl2.getWidth()) < this.minWidth){
- tbl.setWidth(this.minWidth-tbl2.getWidth());
- }
- if(this.hidden){
- this.el.endMeasure();
- }
- }
- this.el.setWidth(tbl.getWidth()+tbl2.getWidth());
- }
- },
- /**
- * Sets this button's click handler
- * @param {Function} handler The function to call when the button is clicked
- * @param {Object} scope (optional) Scope for the function passed above
- */
- setHandler : function(handler, scope){
- this.handler = handler;
- this.scope = scope;
- },
-
- /**
- * Sets this button's arrow click handler
- * @param {Function} handler The function to call when the arrow is clicked
- * @param {Object} scope (optional) Scope for the function passed above
- */
- setArrowHandler : function(handler, scope){
- this.arrowHandler = handler;
- this.scope = scope;
- },
-
- /**
- * Focus the button
- */
- focus : function(){
- if(this.el){
- this.el.child("button:first").focus();
- }
- },
-
- // private
- onClick : function(e){
- e.preventDefault();
- if(!this.disabled){
- if(e.getTarget(".x-btn-menu-arrow-wrap")){
- if(this.menu && !this.menu.isVisible()){
- this.menu.show(this.el, this.menuAlign);
- }
- this.fireEvent("arrowclick", this, e);
- if(this.arrowHandler){
- this.arrowHandler.call(this.scope || this, this, e);
- }
- }else{
- this.fireEvent("click", this, e);
- if(this.handler){
- this.handler.call(this.scope || this, this, e);
- }
- }
- }
- },
- // private
- onMouseDown : function(e){
- if(!this.disabled){
- Roo.fly(e.getTarget("table")).addClass("x-btn-click");
- }
- },
- // private
- onMouseUp : function(e){
- Roo.fly(e.getTarget("table")).removeClass("x-btn-click");
- }
-});
-
-
-// backwards compat
-Roo.MenuButton = Roo.SplitButton;/*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
- */
-
-/**
- * @class Roo.Toolbar
- * Basic Toolbar class.
- * @constructor
- * Creates a new Toolbar
- * @param {Object} config The config object
- */
-Roo.Toolbar = function(container, buttons, config)
-{
- /// old consturctor format still supported..
- if(container instanceof Array){ // omit the container for later rendering
- buttons = container;
- config = buttons;
- container = null;
- }
- if (typeof(container) == 'object' && container.xtype) {
- config = container;
- container = config.container;
- buttons = config.buttons; // not really - use items!!
- }
- var xitems = [];
- if (config && config.items) {
- xitems = config.items;
- delete config.items;
- }
- Roo.apply(this, config);
- this.buttons = buttons;
-
- if(container){
- this.render(container);
- }
- Roo.each(xitems, function(b) {
- this.add(b);
- }, this);
-
-};
-
-Roo.Toolbar.prototype = {
- /**
- * @cfg {Roo.data.Store} items
- * array of button configs or elements to add
- */
-
- /**
- * @cfg {String/HTMLElement/Element} container
- * The id or element that will contain the toolbar
- */
- // private
- render : function(ct){
- this.el = Roo.get(ct);
- if(this.cls){
- this.el.addClass(this.cls);
- }
- // using a table allows for vertical alignment
- // 100% width is needed by Safari...
- this.el.update('<div class="x-toolbar x-small-editor"><table cellspacing="0"><tr></tr></table></div>');
- this.tr = this.el.child("tr", true);
- var autoId = 0;
- this.items = new Roo.util.MixedCollection(false, function(o){
- return o.id || ("item" + (++autoId));
- });
- if(this.buttons){
- this.add.apply(this, this.buttons);
- delete this.buttons;
- }
- },
-
- /**
- * Adds element(s) to the toolbar -- this function takes a variable number of
- * arguments of mixed type and adds them to the toolbar.
- * @param {Mixed} arg1 The following types of arguments are all valid:<br />
- * <ul>
- * <li>{@link Roo.Toolbar.Button} config: A valid button config object (equivalent to {@link #addButton})</li>
- * <li>HtmlElement: Any standard HTML element (equivalent to {@link #addElement})</li>
- * <li>Field: Any form field (equivalent to {@link #addField})</li>
- * <li>Item: Any subclass of {@link Roo.Toolbar.Item} (equivalent to {@link #addItem})</li>
- * <li>String: Any generic string (gets wrapped in a {@link Roo.Toolbar.TextItem}, equivalent to {@link #addText}).
- * Note that there are a few special strings that are treated differently as explained nRoo.</li>
- * <li>'separator' or '-': Creates a separator element (equivalent to {@link #addSeparator})</li>
- * <li>' ': Creates a spacer element (equivalent to {@link #addSpacer})</li>
- * <li>'->': Creates a fill element (equivalent to {@link #addFill})</li>
- * </ul>
- * @param {Mixed} arg2
- * @param {Mixed} etc.
- */
- add : function(){
- var a = arguments, l = a.length;
- for(var i = 0; i < l; i++){
- this._add(a[i]);
- }
- },
- // private..
- _add : function(el) {
-
- if (el.xtype) {
- el = Roo.factory(el, typeof(Roo.Toolbar[el.xtype]) == 'undefined' ? Roo.form : Roo.Toolbar);
- }
-
- if (el.applyTo){ // some kind of form field
- return this.addField(el);
- }
- if (el.render){ // some kind of Toolbar.Item
- return this.addItem(el);
- }
- if (typeof el == "string"){ // string
- if(el == "separator" || el == "-"){
- return this.addSeparator();
- }
- if (el == " "){
- return this.addSpacer();
- }
- if(el == "->"){
- return this.addFill();
- }
- return this.addText(el);
-
- }
- if(el.tagName){ // element
- return this.addElement(el);
- }
- if(typeof el == "object"){ // must be button config?
- return this.addButton(el);
- }
- // and now what?!?!
- return false;
-
- },
-
- /**
- * Add an Xtype element
- * @param {Object} xtype Xtype Object
- * @return {Object} created Object
- */
- addxtype : function(e){
- return this.add(e);
- },
-
- /**
- * Returns the Element for this toolbar.
- * @return {Roo.Element}
- */
- getEl : function(){
- return this.el;
- },
-
- /**
- * Adds a separator
- * @return {Roo.Toolbar.Item} The separator item
- */
- addSeparator : function(){
- return this.addItem(new Roo.Toolbar.Separator());
- },
-
- /**
- * Adds a spacer element
- * @return {Roo.Toolbar.Spacer} The spacer item
- */
- addSpacer : function(){
- return this.addItem(new Roo.Toolbar.Spacer());
- },
-
- /**
- * Adds a fill element that forces subsequent additions to the right side of the toolbar
- * @return {Roo.Toolbar.Fill} The fill item
- */
- addFill : function(){
- return this.addItem(new Roo.Toolbar.Fill());
- },
-
- /**
- * Adds any standard HTML element to the toolbar
- * @param {String/HTMLElement/Element} el The element or id of the element to add
- * @return {Roo.Toolbar.Item} The element's item
- */
- addElement : function(el){
- return this.addItem(new Roo.Toolbar.Item(el));
- },
- /**
- * Collection of items on the toolbar.. (only Toolbar Items, so use fields to retrieve fields)
- * @type Roo.util.MixedCollection
- */
- items : false,
-
- /**
- * Adds any Toolbar.Item or subclass
- * @param {Roo.Toolbar.Item} item
- * @return {Roo.Toolbar.Item} The item
- */
- addItem : function(item){
- var td = this.nextBlock();
- item.render(td);
- this.items.add(item);
- return item;
- },
-
- /**
- * Adds a button (or buttons). See {@link Roo.Toolbar.Button} for more info on the config.
- * @param {Object/Array} config A button config or array of configs
- * @return {Roo.Toolbar.Button/Array}
- */
- addButton : function(config){
- if(config instanceof Array){
- var buttons = [];
- for(var i = 0, len = config.length; i < len; i++) {
- buttons.push(this.addButton(config[i]));
- }
- return buttons;
- }
- var b = config;
- if(!(config instanceof Roo.Toolbar.Button)){
- b = config.split ?
- new Roo.Toolbar.SplitButton(config) :
- new Roo.Toolbar.Button(config);
- }
- var td = this.nextBlock();
- b.render(td);
- this.items.add(b);
- return b;
- },
-
- /**
- * Adds text to the toolbar
- * @param {String} text The text to add
- * @return {Roo.Toolbar.Item} The element's item
- */
- addText : function(text){
- return this.addItem(new Roo.Toolbar.TextItem(text));
- },
-
- /**
- * Inserts any {@link Roo.Toolbar.Item}/{@link Roo.Toolbar.Button} at the specified index.
- * @param {Number} index The index where the item is to be inserted
- * @param {Object/Roo.Toolbar.Item/Roo.Toolbar.Button (may be Array)} item The button, or button config object to be inserted.
- * @return {Roo.Toolbar.Button/Item}
- */
- insertButton : function(index, item){
- if(item instanceof Array){
- var buttons = [];
- for(var i = 0, len = item.length; i < len; i++) {
- buttons.push(this.insertButton(index + i, item[i]));
- }
- return buttons;
- }
- if (!(item instanceof Roo.Toolbar.Button)){
- item = new Roo.Toolbar.Button(item);
- }
- var td = document.createElement("td");
- this.tr.insertBefore(td, this.tr.childNodes[index]);
- item.render(td);
- this.items.insert(index, item);
- return item;
- },
-
- /**
- * Adds a new element to the toolbar from the passed {@link Roo.DomHelper} config.
- * @param {Object} config
- * @return {Roo.Toolbar.Item} The element's item
- */
- addDom : function(config, returnEl){
- var td = this.nextBlock();
- Roo.DomHelper.overwrite(td, config);
- var ti = new Roo.Toolbar.Item(td.firstChild);
- ti.render(td);
- this.items.add(ti);
- return ti;
- },
-
- /**
- * Collection of fields on the toolbar.. usefull for quering (value is false if there are no fields)
- * @type Roo.util.MixedCollection
- */
- fields : false,
-
- /**
- * Adds a dynamically rendered Roo.form field (TextField, ComboBox, etc). Note: the field should not have
- * been rendered yet. For a field that has already been rendered, use {@link #addElement}.
- * @param {Roo.form.Field} field
- * @return {Roo.ToolbarItem}
- */
-
-
- addField : function(field) {
- if (!this.fields) {
- var autoId = 0;
- this.fields = new Roo.util.MixedCollection(false, function(o){
- return o.id || ("item" + (++autoId));
- });
-
- }
-
- var td = this.nextBlock();
- field.render(td);
- var ti = new Roo.Toolbar.Item(td.firstChild);
- ti.render(td);
- this.items.add(ti);
- this.fields.add(field);
- return ti;
- },
- /**
- * Hide the toolbar
- * @method hide
- */
-
-
- hide : function()
- {
- this.el.child('div').setVisibilityMode(Roo.Element.DISPLAY);
- this.el.child('div').hide();
- },
- /**
- * Show the toolbar
- * @method show
- */
- show : function()
- {
- this.el.child('div').show();
- },
-
- // private
- nextBlock : function(){
- var td = document.createElement("td");
- this.tr.appendChild(td);
- return td;
- },
-
- // private
- destroy : function(){
- if(this.items){ // rendered?
- Roo.destroy.apply(Roo, this.items.items);
- }
- if(this.fields){ // rendered?
- Roo.destroy.apply(Roo, this.fields.items);
- }
- Roo.Element.uncache(this.el, this.tr);
- }
-};
-
-/**
- * @class Roo.Toolbar.Item
- * The base class that other classes should extend in order to get some basic common toolbar item functionality.
- * @constructor
- * Creates a new Item
- * @param {HTMLElement} el
- */
-Roo.Toolbar.Item = function(el){
- this.el = Roo.getDom(el);
- this.id = Roo.id(this.el);
- this.hidden = false;
-};
-
-Roo.Toolbar.Item.prototype = {
-
- /**
- * Get this item's HTML Element
- * @return {HTMLElement}
- */
- getEl : function(){
- return this.el;
- },
-
- // private
- render : function(td){
- this.td = td;
- td.appendChild(this.el);
- },
-
- /**
- * Removes and destroys this item.
- */
- destroy : function(){
- this.td.parentNode.removeChild(this.td);
- },
-
- /**
- * Shows this item.
- */
- show: function(){
- this.hidden = false;
- this.td.style.display = "";
- },
-
- /**
- * Hides this item.
- */
- hide: function(){
- this.hidden = true;
- this.td.style.display = "none";
- },
-
- /**
- * Convenience function for boolean show/hide.
- * @param {Boolean} visible true to show/false to hide
- */
- setVisible: function(visible){
- if(visible) {
- this.show();
- }else{
- this.hide();
- }
- },
-
- /**
- * Try to focus this item.
- */
- focus : function(){
- Roo.fly(this.el).focus();
- },
-
- /**
- * Disables this item.
- */
- disable : function(){
- Roo.fly(this.td).addClass("x-item-disabled");
- this.disabled = true;
- this.el.disabled = true;
- },
-
- /**
- * Enables this item.
- */
- enable : function(){
- Roo.fly(this.td).removeClass("x-item-disabled");
- this.disabled = false;
- this.el.disabled = false;
- }
-};
-
-
-/**
- * @class Roo.Toolbar.Separator
- * @extends Roo.Toolbar.Item
- * A simple toolbar separator class
- * @constructor
- * Creates a new Separator
- */
-Roo.Toolbar.Separator = function(){
- var s = document.createElement("span");
- s.className = "ytb-sep";
- Roo.Toolbar.Separator.superclass.constructor.call(this, s);
-};
-Roo.extend(Roo.Toolbar.Separator, Roo.Toolbar.Item, {
- enable:Roo.emptyFn,
- disable:Roo.emptyFn,
- focus:Roo.emptyFn
-});
-
-/**
- * @class Roo.Toolbar.Spacer
- * @extends Roo.Toolbar.Item
- * A simple element that adds extra horizontal space to a toolbar.
- * @constructor
- * Creates a new Spacer
- */
-Roo.Toolbar.Spacer = function(){
- var s = document.createElement("div");
- s.className = "ytb-spacer";
- Roo.Toolbar.Spacer.superclass.constructor.call(this, s);
-};
-Roo.extend(Roo.Toolbar.Spacer, Roo.Toolbar.Item, {
- enable:Roo.emptyFn,
- disable:Roo.emptyFn,
- focus:Roo.emptyFn
-});
-
-/**
- * @class Roo.Toolbar.Fill
- * @extends Roo.Toolbar.Spacer
- * A simple element that adds a greedy (100% width) horizontal space to a toolbar.
- * @constructor
- * Creates a new Spacer
- */
-Roo.Toolbar.Fill = Roo.extend(Roo.Toolbar.Spacer, {
- // private
- render : function(td){
- td.style.width = '100%';
- Roo.Toolbar.Fill.superclass.render.call(this, td);
- }
-});
-
-/**
- * @class Roo.Toolbar.TextItem
- * @extends Roo.Toolbar.Item
- * A simple class that renders text directly into a toolbar.
- * @constructor
- * Creates a new TextItem
- * @param {String} text
- */
-Roo.Toolbar.TextItem = function(text){
- if (typeof(text) == 'object') {
- text = text.text;
- }
- var s = document.createElement("span");
- s.className = "ytb-text";
- s.innerHTML = text;
- Roo.Toolbar.TextItem.superclass.constructor.call(this, s);
-};
-Roo.extend(Roo.Toolbar.TextItem, Roo.Toolbar.Item, {
- enable:Roo.emptyFn,
- disable:Roo.emptyFn,
- focus:Roo.emptyFn
-});
-
-/**
- * @class Roo.Toolbar.Button
- * @extends Roo.Button
- * A button that renders into a toolbar.
- * @constructor
- * Creates a new Button
- * @param {Object} config A standard {@link Roo.Button} config object
- */
-Roo.Toolbar.Button = function(config){
- Roo.Toolbar.Button.superclass.constructor.call(this, null, config);
-};
-Roo.extend(Roo.Toolbar.Button, Roo.Button, {
- render : function(td){
- this.td = td;
- Roo.Toolbar.Button.superclass.render.call(this, td);
- },
-
- /**
- * Removes and destroys this button
- */
- destroy : function(){
- Roo.Toolbar.Button.superclass.destroy.call(this);
- this.td.parentNode.removeChild(this.td);
- },
-
- /**
- * Shows this button
- */
- show: function(){
- this.hidden = false;
- this.td.style.display = "";
- },
-
- /**
- * Hides this button
- */
- hide: function(){
- this.hidden = true;
- this.td.style.display = "none";
- },
-
- /**
- * Disables this item
- */
- disable : function(){
- Roo.fly(this.td).addClass("x-item-disabled");
- this.disabled = true;
- },
-
- /**
- * Enables this item
- */
- enable : function(){
- Roo.fly(this.td).removeClass("x-item-disabled");
- this.disabled = false;
- }
-});
-// backwards compat
-Roo.ToolbarButton = Roo.Toolbar.Button;
-
-/**
- * @class Roo.Toolbar.SplitButton
- * @extends Roo.SplitButton
- * A menu button that renders into a toolbar.
- * @constructor
- * Creates a new SplitButton
- * @param {Object} config A standard {@link Roo.SplitButton} config object
- */
-Roo.Toolbar.SplitButton = function(config){
- Roo.Toolbar.SplitButton.superclass.constructor.call(this, null, config);
-};
-Roo.extend(Roo.Toolbar.SplitButton, Roo.SplitButton, {
- render : function(td){
- this.td = td;
- Roo.Toolbar.SplitButton.superclass.render.call(this, td);
- },
-
- /**
- * Removes and destroys this button
- */
- destroy : function(){
- Roo.Toolbar.SplitButton.superclass.destroy.call(this);
- this.td.parentNode.removeChild(this.td);
- },
-
- /**
- * Shows this button
- */
- show: function(){
- this.hidden = false;
- this.td.style.display = "";
- },
-
- /**
- * Hides this button
- */
- hide: function(){
- this.hidden = true;
- this.td.style.display = "none";
- }
-});
-
-// backwards compat
-Roo.Toolbar.MenuButton = Roo.Toolbar.SplitButton;/*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
- */
-
-/**
- * @class Roo.PagingToolbar
- * @extends Roo.Toolbar
- * A specialized toolbar that is bound to a {@link Roo.data.Store} and provides automatic paging controls.
- * @constructor
- * Create a new PagingToolbar
- * @param {Object} config The config object
- */
-Roo.PagingToolbar = function(el, ds, config)
-{
- // old args format still supported... - xtype is prefered..
- if (typeof(el) == 'object' && el.xtype) {
- // created from xtype...
- config = el;
- ds = el.dataSource;
- el = config.container;
- }
- var items = [];
- if (config.items) {
- items = config.items;
- config.items = [];
- }
-
- Roo.PagingToolbar.superclass.constructor.call(this, el, null, config);
- this.ds = ds;
- this.cursor = 0;
- this.renderButtons(this.el);
- this.bind(ds);
-
- // supprot items array.
-
- Roo.each(items, function(e) {
- this.add(Roo.factory(e));
- },this);
-
-};
-
-Roo.extend(Roo.PagingToolbar, Roo.Toolbar, {
- /**
- * @cfg {Roo.data.Store} dataSource
- * The underlying data store providing the paged data
- */
- /**
- * @cfg {String/HTMLElement/Element} container
- * container The id or element that will contain the toolbar
- */
- /**
- * @cfg {Boolean} displayInfo
- * True to display the displayMsg (defaults to false)
- */
- /**
- * @cfg {Number} pageSize
- * The number of records to display per page (defaults to 20)
- */
- pageSize: 20,
- /**
- * @cfg {String} displayMsg
- * The paging status message to display (defaults to "Displaying {start} - {end} of {total}")
- */
- displayMsg : 'Displaying {0} - {1} of {2}',
- /**
- * @cfg {String} emptyMsg
- * The message to display when no records are found (defaults to "No data to display")
- */
- emptyMsg : 'No data to display',
- /**
- * Customizable piece of the default paging text (defaults to "Page")
- * @type String
- */
- beforePageText : "Page",
- /**
- * Customizable piece of the default paging text (defaults to "of %0")
- * @type String
- */
- afterPageText : "of {0}",
- /**
- * Customizable piece of the default paging text (defaults to "First Page")
- * @type String
- */
- firstText : "First Page",
- /**
- * Customizable piece of the default paging text (defaults to "Previous Page")
- * @type String
- */
- prevText : "Previous Page",
- /**
- * Customizable piece of the default paging text (defaults to "Next Page")
- * @type String
- */
- nextText : "Next Page",
- /**
- * Customizable piece of the default paging text (defaults to "Last Page")
- * @type String
- */
- lastText : "Last Page",
- /**
- * Customizable piece of the default paging text (defaults to "Refresh")
- * @type String
- */
- refreshText : "Refresh",
-
- // private
- renderButtons : function(el){
- Roo.PagingToolbar.superclass.render.call(this, el);
- this.first = this.addButton({
- tooltip: this.firstText,
- cls: "x-btn-icon x-grid-page-first",
- disabled: true,
- handler: this.onClick.createDelegate(this, ["first"])
- });
- this.prev = this.addButton({
- tooltip: this.prevText,
- cls: "x-btn-icon x-grid-page-prev",
- disabled: true,
- handler: this.onClick.createDelegate(this, ["prev"])
- });
- //this.addSeparator();
- this.add(this.beforePageText);
- this.field = Roo.get(this.addDom({
- tag: "input",
- type: "text",
- size: "3",
- value: "1",
- cls: "x-grid-page-number"
- }).el);
- this.field.on("keydown", this.onPagingKeydown, this);
- this.field.on("focus", function(){this.dom.select();});
- this.afterTextEl = this.addText(String.format(this.afterPageText, 1));
- this.field.setHeight(18);
- //this.addSeparator();
- this.next = this.addButton({
- tooltip: this.nextText,
- cls: "x-btn-icon x-grid-page-next",
- disabled: true,
- handler: this.onClick.createDelegate(this, ["next"])
- });
- this.last = this.addButton({
- tooltip: this.lastText,
- cls: "x-btn-icon x-grid-page-last",
- disabled: true,
- handler: this.onClick.createDelegate(this, ["last"])
- });
- //this.addSeparator();
- this.loading = this.addButton({
- tooltip: this.refreshText,
- cls: "x-btn-icon x-grid-loading",
- handler: this.onClick.createDelegate(this, ["refresh"])
- });
-
- if(this.displayInfo){
- this.displayEl = Roo.fly(this.el.dom.firstChild).createChild({cls:'x-paging-info'});
- }
- },
-
- // private
- updateInfo : function(){
- if(this.displayEl){
- var count = this.ds.getCount();
- var msg = count == 0 ?
- this.emptyMsg :
- String.format(
- this.displayMsg,
- this.cursor+1, this.cursor+count, this.ds.getTotalCount()
- );
- this.displayEl.update(msg);
- }
- },
-
- // private
- onLoad : function(ds, r, o){
- this.cursor = o.params ? o.params.start : 0;
- var d = this.getPageData(), ap = d.activePage, ps = d.pages;
-
- this.afterTextEl.el.innerHTML = String.format(this.afterPageText, d.pages);
- this.field.dom.value = ap;
- this.first.setDisabled(ap == 1);
- this.prev.setDisabled(ap == 1);
- this.next.setDisabled(ap == ps);
- this.last.setDisabled(ap == ps);
- this.loading.enable();
- this.updateInfo();
- },
-
- // private
- getPageData : function(){
- var total = this.ds.getTotalCount();
- return {
- total : total,
- activePage : Math.ceil((this.cursor+this.pageSize)/this.pageSize),
- pages : total < this.pageSize ? 1 : Math.ceil(total/this.pageSize)
- };
- },
-
- // private
- onLoadError : function(){
- this.loading.enable();
- },
-
- // private
- onPagingKeydown : function(e){
- var k = e.getKey();
- var d = this.getPageData();
- if(k == e.RETURN){
- var v = this.field.dom.value, pageNum;
- if(!v || isNaN(pageNum = parseInt(v, 10))){
- this.field.dom.value = d.activePage;
- return;
- }
- pageNum = Math.min(Math.max(1, pageNum), d.pages) - 1;
- this.ds.load({params:{start: pageNum * this.pageSize, limit: this.pageSize}});
- e.stopEvent();
- }
- else if(k == e.HOME || (k == e.UP && e.ctrlKey) || (k == e.PAGEUP && e.ctrlKey) || (k == e.RIGHT && e.ctrlKey) || k == e.END || (k == e.DOWN && e.ctrlKey) || (k == e.LEFT && e.ctrlKey) || (k == e.PAGEDOWN && e.ctrlKey))
- {
- var pageNum = (k == e.HOME || (k == e.DOWN && e.ctrlKey) || (k == e.LEFT && e.ctrlKey) || (k == e.PAGEDOWN && e.ctrlKey)) ? 1 : d.pages;
- this.field.dom.value = pageNum;
- this.ds.load({params:{start: (pageNum - 1) * this.pageSize, limit: this.pageSize}});
- e.stopEvent();
- }
- else if(k == e.UP || k == e.RIGHT || k == e.PAGEUP || k == e.DOWN || k == e.LEFT || k == e.PAGEDOWN)
- {
- var v = this.field.dom.value, pageNum;
- var increment = (e.shiftKey) ? 10 : 1;
- if(k == e.DOWN || k == e.LEFT || k == e.PAGEDOWN)
- increment *= -1;
- if(!v || isNaN(pageNum = parseInt(v, 10))) {
- this.field.dom.value = d.activePage;
- return;
- }
- else if(parseInt(v, 10) + increment >= 1 & parseInt(v, 10) + increment <= d.pages)
- {
- this.field.dom.value = parseInt(v, 10) + increment;
- pageNum = Math.min(Math.max(1, pageNum + increment), d.pages) - 1;
- this.ds.load({params:{start: pageNum * this.pageSize, limit: this.pageSize}});
- }
- e.stopEvent();
- }
- },
-
- // private
- beforeLoad : function(){
- if(this.loading){
- this.loading.disable();
- }
- },
-
- // private
- onClick : function(which){
- var ds = this.ds;
- switch(which){
- case "first":
- ds.load({params:{start: 0, limit: this.pageSize}});
- break;
- case "prev":
- ds.load({params:{start: Math.max(0, this.cursor-this.pageSize), limit: this.pageSize}});
- break;
- case "next":
- ds.load({params:{start: this.cursor+this.pageSize, limit: this.pageSize}});
- break;
- case "last":
- var total = ds.getTotalCount();
- var extra = total % this.pageSize;
- var lastStart = extra ? (total - extra) : total-this.pageSize;
- ds.load({params:{start: lastStart, limit: this.pageSize}});
- break;
- case "refresh":
- ds.load({params:{start: this.cursor, limit: this.pageSize}});
- break;
- }
- },
-
- /**
- * Unbinds the paging toolbar from the specified {@link Roo.data.Store}
- * @param {Roo.data.Store} store The data store to unbind
- */
- unbind : function(ds){
- ds.un("beforeload", this.beforeLoad, this);
- ds.un("load", this.onLoad, this);
- ds.un("loadexception", this.onLoadError, this);
- ds.un("remove", this.updateInfo, this);
- ds.un("add", this.updateInfo, this);
- this.ds = undefined;
- },
-
- /**
- * Binds the paging toolbar to the specified {@link Roo.data.Store}
- * @param {Roo.data.Store} store The data store to bind
- */
- bind : function(ds){
- ds.on("beforeload", this.beforeLoad, this);
- ds.on("load", this.onLoad, this);
- ds.on("loadexception", this.onLoadError, this);
- ds.on("remove", this.updateInfo, this);
- ds.on("add", this.updateInfo, this);
- this.ds = ds;
- }
-});/*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
- */
-
-/**
- * @class Roo.Resizable
- * @extends Roo.util.Observable
- * <p>Applies drag handles to an element to make it resizable. The drag handles are inserted into the element
- * and positioned absolute. Some elements, such as a textarea or image, don't support this. To overcome that, you can wrap
- * the textarea in a div and set "resizeChild" to true (or to the id of the element), <b>or</b> set wrap:true in your config and
- * the element will be wrapped for you automatically.</p>
- * <p>Here is the list of valid resize handles:</p>
- * <pre>
-Value Description
------- -------------------
- 'n' north
- 's' south
- 'e' east
- 'w' west
- 'nw' northwest
- 'sw' southwest
- 'se' southeast
- 'ne' northeast
- 'hd' horizontal drag
- 'all' all
-</pre>
- * <p>Here's an example showing the creation of a typical Resizable:</p>
- * <pre><code>
-var resizer = new Roo.Resizable("element-id", {
- handles: 'all',
- minWidth: 200,
- minHeight: 100,
- maxWidth: 500,
- maxHeight: 400,
- pinned: true
-});
-resizer.on("resize", myHandler);
-</code></pre>
- * <p>To hide a particular handle, set its display to none in CSS, or through script:<br>
- * resizer.east.setDisplayed(false);</p>
- * @cfg {Boolean/String/Element} resizeChild True to resize the first child, or id/element to resize (defaults to false)
- * @cfg {Array/String} adjustments String "auto" or an array [width, height] with values to be <b>added</b> to the
- * resize operation's new size (defaults to [0, 0])
- * @cfg {Number} minWidth The minimum width for the element (defaults to 5)
- * @cfg {Number} minHeight The minimum height for the element (defaults to 5)
- * @cfg {Number} maxWidth The maximum width for the element (defaults to 10000)
- * @cfg {Number} maxHeight The maximum height for the element (defaults to 10000)
- * @cfg {Boolean} enabled False to disable resizing (defaults to true)
- * @cfg {Boolean} wrap True to wrap an element with a div if needed (required for textareas and images, defaults to false)
- * @cfg {Number} width The width of the element in pixels (defaults to null)
- * @cfg {Number} height The height of the element in pixels (defaults to null)
- * @cfg {Boolean} animate True to animate the resize (not compatible with dynamic sizing, defaults to false)
- * @cfg {Number} duration Animation duration if animate = true (defaults to .35)
- * @cfg {Boolean} dynamic True to resize the element while dragging instead of using a proxy (defaults to false)
- * @cfg {String} handles String consisting of the resize handles to display (defaults to undefined)
- * @cfg {Boolean} multiDirectional <b>Deprecated</b>. The old style of adding multi-direction resize handles, deprecated
- * in favor of the handles config option (defaults to false)
- * @cfg {Boolean} disableTrackOver True to disable mouse tracking. This is only applied at config time. (defaults to false)
- * @cfg {String} easing Animation easing if animate = true (defaults to 'easingOutStrong')
- * @cfg {Number} widthIncrement The increment to snap the width resize in pixels (dynamic must be true, defaults to 0)
- * @cfg {Number} heightIncrement The increment to snap the height resize in pixels (dynamic must be true, defaults to 0)
- * @cfg {Boolean} pinned True to ensure that the resize handles are always visible, false to display them only when the
- * user mouses over the resizable borders. This is only applied at config time. (defaults to false)
- * @cfg {Boolean} preserveRatio True to preserve the original ratio between height and width during resize (defaults to false)
- * @cfg {Boolean} transparent True for transparent handles. This is only applied at config time. (defaults to false)
- * @cfg {Number} minX The minimum allowed page X for the element (only used for west resizing, defaults to 0)
- * @cfg {Number} minY The minimum allowed page Y for the element (only used for north resizing, defaults to 0)
- * @cfg {Boolean} draggable Convenience to initialize drag drop (defaults to false)
- * @constructor
- * Create a new resizable component
- * @param {String/HTMLElement/Roo.Element} el The id or element to resize
- * @param {Object} config configuration options
- */
-Roo.Resizable = function(el, config)
-{
- this.el = Roo.get(el);
-
- if(config && config.wrap){
- config.resizeChild = this.el;
- this.el = this.el.wrap(typeof config.wrap == "object" ? config.wrap : {cls:"xresizable-wrap"});
- this.el.id = this.el.dom.id = config.resizeChild.id + "-rzwrap";
- this.el.setStyle("overflow", "hidden");
- this.el.setPositioning(config.resizeChild.getPositioning());
- config.resizeChild.clearPositioning();
- if(!config.width || !config.height){
- var csize = config.resizeChild.getSize();
- this.el.setSize(csize.width, csize.height);
- }
- if(config.pinned && !config.adjustments){
- config.adjustments = "auto";
- }
- }
-
- this.proxy = this.el.createProxy({tag: "div", cls: "x-resizable-proxy", id: this.el.id + "-rzproxy"});
- this.proxy.unselectable();
- this.proxy.enableDisplayMode('block');
-
- Roo.apply(this, config);
-
- if(this.pinned){
- this.disableTrackOver = true;
- this.el.addClass("x-resizable-pinned");
- }
- // if the element isn't positioned, make it relative
- var position = this.el.getStyle("position");
- if(position != "absolute" && position != "fixed"){
- this.el.setStyle("position", "relative");
- }
- if(!this.handles){ // no handles passed, must be legacy style
- this.handles = 's,e,se';
- if(this.multiDirectional){
- this.handles += ',n,w';
- }
- }
- if(this.handles == "all"){
- this.handles = "n s e w ne nw se sw";
- }
- var hs = this.handles.split(/\s*?[,;]\s*?| /);
- var ps = Roo.Resizable.positions;
- for(var i = 0, len = hs.length; i < len; i++){
- if(hs[i] && ps[hs[i]]){
- var pos = ps[hs[i]];
- this[pos] = new Roo.Resizable.Handle(this, pos, this.disableTrackOver, this.transparent);
- }
- }
- // legacy
- this.corner = this.southeast;
-
- // updateBox = the box can move..
- if(this.handles.indexOf("n") != -1 || this.handles.indexOf("w") != -1 || this.handles.indexOf("hd") != -1) {
- this.updateBox = true;
- }
-
- this.activeHandle = null;
-
- if(this.resizeChild){
- if(typeof this.resizeChild == "boolean"){
- this.resizeChild = Roo.get(this.el.dom.firstChild, true);
- }else{
- this.resizeChild = Roo.get(this.resizeChild, true);
- }
- }
-
- if(this.adjustments == "auto"){
- var rc = this.resizeChild;
- var hw = this.west, he = this.east, hn = this.north, hs = this.south;
- if(rc && (hw || hn)){
- rc.position("relative");
- rc.setLeft(hw ? hw.el.getWidth() : 0);
- rc.setTop(hn ? hn.el.getHeight() : 0);
- }
- this.adjustments = [
- (he ? -he.el.getWidth() : 0) + (hw ? -hw.el.getWidth() : 0),
- (hn ? -hn.el.getHeight() : 0) + (hs ? -hs.el.getHeight() : 0) -1
- ];
- }
-
- if(this.draggable){
- this.dd = this.dynamic ?
- this.el.initDD(null) : this.el.initDDProxy(null, {dragElId: this.proxy.id});
- this.dd.setHandleElId(this.resizeChild ? this.resizeChild.id : this.el.id);
- }
-
- // public events
- this.addEvents({
- /**
- * @event beforeresize
- * Fired before resize is allowed. Set enabled to false to cancel resize.
- * @param {Roo.Resizable} this
- * @param {Roo.EventObject} e The mousedown event
- */
- "beforeresize" : true,
- /**
- * @event resize
- * Fired after a resize.
- * @param {Roo.Resizable} this
- * @param {Number} width The new width
- * @param {Number} height The new height
- * @param {Roo.EventObject} e The mouseup event
- */
- "resize" : true
- });
-
- if(this.width !== null && this.height !== null){
- this.resizeTo(this.width, this.height);
- }else{
- this.updateChildSize();
- }
- if(Roo.isIE){
- this.el.dom.style.zoom = 1;
- }
- Roo.Resizable.superclass.constructor.call(this);
-};
-
-Roo.extend(Roo.Resizable, Roo.util.Observable, {
- resizeChild : false,
- adjustments : [0, 0],
- minWidth : 5,
- minHeight : 5,
- maxWidth : 10000,
- maxHeight : 10000,
- enabled : true,
- animate : false,
- duration : .35,
- dynamic : false,
- handles : false,
- multiDirectional : false,
- disableTrackOver : false,
- easing : 'easeOutStrong',
- widthIncrement : 0,
- heightIncrement : 0,
- pinned : false,
- width : null,
- height : null,
- preserveRatio : false,
- transparent: false,
- minX: 0,
- minY: 0,
- draggable: false,
-
- /**
- * @cfg {String/HTMLElement/Element} constrainTo Constrain the resize to a particular element
- */
- constrainTo: undefined,
- /**
- * @cfg {Roo.lib.Region} resizeRegion Constrain the resize to a particular region
- */
- resizeRegion: undefined,
-
-
- /**
- * Perform a manual resize
- * @param {Number} width
- * @param {Number} height
- */
- resizeTo : function(width, height){
- this.el.setSize(width, height);
- this.updateChildSize();
- this.fireEvent("resize", this, width, height, null);
- },
-
- // private
- startSizing : function(e, handle){
- this.fireEvent("beforeresize", this, e);
- if(this.enabled){ // 2nd enabled check in case disabled before beforeresize handler
-
- if(!this.overlay){
- this.overlay = this.el.createProxy({tag: "div", cls: "x-resizable-overlay", html: " "});
- this.overlay.unselectable();
- this.overlay.enableDisplayMode("block");
- this.overlay.on("mousemove", this.onMouseMove, this);
- this.overlay.on("mouseup", this.onMouseUp, this);
- }
- this.overlay.setStyle("cursor", handle.el.getStyle("cursor"));
-
- this.resizing = true;
- this.startBox = this.el.getBox();
- this.startPoint = e.getXY();
- this.offsets = [(this.startBox.x + this.startBox.width) - this.startPoint[0],
- (this.startBox.y + this.startBox.height) - this.startPoint[1]];
-
- this.overlay.setSize(Roo.lib.Dom.getViewWidth(true), Roo.lib.Dom.getViewHeight(true));
- this.overlay.show();
-
- if(this.constrainTo) {
- var ct = Roo.get(this.constrainTo);
- this.resizeRegion = ct.getRegion().adjust(
- ct.getFrameWidth('t'),
- ct.getFrameWidth('l'),
- -ct.getFrameWidth('b'),
- -ct.getFrameWidth('r')
- );
- }
-
- this.proxy.setStyle('visibility', 'hidden'); // workaround display none
- this.proxy.show();
- this.proxy.setBox(this.startBox);
- if(!this.dynamic){
- this.proxy.setStyle('visibility', 'visible');
- }
- }
- },
-
- // private
- onMouseDown : function(handle, e){
- if(this.enabled){
- e.stopEvent();
- this.activeHandle = handle;
- this.startSizing(e, handle);
- }
- },
-
- // private
- onMouseUp : function(e){
- var size = this.resizeElement();
- this.resizing = false;
- this.handleOut();
- this.overlay.hide();
- this.proxy.hide();
- this.fireEvent("resize", this, size.width, size.height, e);
- },
-
- // private
- updateChildSize : function(){
- if(this.resizeChild){
- var el = this.el;
- var child = this.resizeChild;
- var adj = this.adjustments;
- if(el.dom.offsetWidth){
- var b = el.getSize(true);
- child.setSize(b.width+adj[0], b.height+adj[1]);
- }
- // Second call here for IE
- // The first call enables instant resizing and
- // the second call corrects scroll bars if they
- // exist
- if(Roo.isIE){
- setTimeout(function(){
- if(el.dom.offsetWidth){
- var b = el.getSize(true);
- child.setSize(b.width+adj[0], b.height+adj[1]);
- }
- }, 10);
- }
- }
- },
-
- // private
- snap : function(value, inc, min){
- if(!inc || !value) return value;
- var newValue = value;
- var m = value % inc;
- if(m > 0){
- if(m > (inc/2)){
- newValue = value + (inc-m);
- }else{
- newValue = value - m;
- }
- }
- return Math.max(min, newValue);
- },
-
- // private
- resizeElement : function(){
- var box = this.proxy.getBox();
- if(this.updateBox){
- this.el.setBox(box, false, this.animate, this.duration, null, this.easing);
- }else{
- this.el.setSize(box.width, box.height, this.animate, this.duration, null, this.easing);
- }
- this.updateChildSize();
- if(!this.dynamic){
- this.proxy.hide();
- }
- return box;
- },
-
- // private
- constrain : function(v, diff, m, mx){
- if(v - diff < m){
- diff = v - m;
- }else if(v - diff > mx){
- diff = mx - v;
- }
- return diff;
- },
-
- // private
- onMouseMove : function(e){
- if(this.enabled){
- try{// try catch so if something goes wrong the user doesn't get hung
-
- if(this.resizeRegion && !this.resizeRegion.contains(e.getPoint())) {
- return;
- }
-
- //var curXY = this.startPoint;
- var curSize = this.curSize || this.startBox;
- var x = this.startBox.x, y = this.startBox.y;
- var ox = x, oy = y;
- var w = curSize.width, h = curSize.height;
- var ow = w, oh = h;
- var mw = this.minWidth, mh = this.minHeight;
- var mxw = this.maxWidth, mxh = this.maxHeight;
- var wi = this.widthIncrement;
- var hi = this.heightIncrement;
-
- var eventXY = e.getXY();
- var diffX = -(this.startPoint[0] - Math.max(this.minX, eventXY[0]));
- var diffY = -(this.startPoint[1] - Math.max(this.minY, eventXY[1]));
-
- var pos = this.activeHandle.position;
-
- switch(pos){
- case "east":
- w += diffX;
- w = Math.min(Math.max(mw, w), mxw);
- break;
-
- case "south":
- h += diffY;
- h = Math.min(Math.max(mh, h), mxh);
- break;
- case "southeast":
- w += diffX;
- h += diffY;
- w = Math.min(Math.max(mw, w), mxw);
- h = Math.min(Math.max(mh, h), mxh);
- break;
- case "north":
- diffY = this.constrain(h, diffY, mh, mxh);
- y += diffY;
- h -= diffY;
- break;
- case "hdrag":
-
- if (wi) {
- var adiffX = Math.abs(diffX);
- var sub = (adiffX % wi); // how much
- if (sub > (wi/2)) { // far enough to snap
- diffX = (diffX > 0) ? diffX-sub + wi : diffX+sub - wi;
- } else {
- // remove difference..
- diffX = (diffX > 0) ? diffX-sub : diffX+sub;
- }
- }
- x += diffX;
- x = Math.max(this.minX, x);
- break;
- case "west":
- diffX = this.constrain(w, diffX, mw, mxw);
- x += diffX;
- w -= diffX;
- break;
- case "northeast":
- w += diffX;
- w = Math.min(Math.max(mw, w), mxw);
- diffY = this.constrain(h, diffY, mh, mxh);
- y += diffY;
- h -= diffY;
- break;
- case "northwest":
- diffX = this.constrain(w, diffX, mw, mxw);
- diffY = this.constrain(h, diffY, mh, mxh);
- y += diffY;
- h -= diffY;
- x += diffX;
- w -= diffX;
- break;
- case "southwest":
- diffX = this.constrain(w, diffX, mw, mxw);
- h += diffY;
- h = Math.min(Math.max(mh, h), mxh);
- x += diffX;
- w -= diffX;
- break;
- }
-
- var sw = this.snap(w, wi, mw);
- var sh = this.snap(h, hi, mh);
- if(sw != w || sh != h){
- switch(pos){
- case "northeast":
- y -= sh - h;
- break;
- case "north":
- y -= sh - h;
- break;
- case "southwest":
- x -= sw - w;
- break;
- case "west":
- x -= sw - w;
- break;
- case "northwest":
- x -= sw - w;
- y -= sh - h;
- break;
- }
- w = sw;
- h = sh;
- }
-
- if(this.preserveRatio){
- switch(pos){
- case "southeast":
- case "east":
- h = oh * (w/ow);
- h = Math.min(Math.max(mh, h), mxh);
- w = ow * (h/oh);
- break;
- case "south":
- w = ow * (h/oh);
- w = Math.min(Math.max(mw, w), mxw);
- h = oh * (w/ow);
- break;
- case "northeast":
- w = ow * (h/oh);
- w = Math.min(Math.max(mw, w), mxw);
- h = oh * (w/ow);
- break;
- case "north":
- var tw = w;
- w = ow * (h/oh);
- w = Math.min(Math.max(mw, w), mxw);
- h = oh * (w/ow);
- x += (tw - w) / 2;
- break;
- case "southwest":
- h = oh * (w/ow);
- h = Math.min(Math.max(mh, h), mxh);
- var tw = w;
- w = ow * (h/oh);
- x += tw - w;
- break;
- case "west":
- var th = h;
- h = oh * (w/ow);
- h = Math.min(Math.max(mh, h), mxh);
- y += (th - h) / 2;
- var tw = w;
- w = ow * (h/oh);
- x += tw - w;
- break;
- case "northwest":
- var tw = w;
- var th = h;
- h = oh * (w/ow);
- h = Math.min(Math.max(mh, h), mxh);
- w = ow * (h/oh);
- y += th - h;
- x += tw - w;
- break;
-
- }
- }
- if (pos == 'hdrag') {
- w = ow;
- }
- this.proxy.setBounds(x, y, w, h);
- if(this.dynamic){
- this.resizeElement();
- }
- }catch(e){}
- }
- },
-
- // private
- handleOver : function(){
- if(this.enabled){
- this.el.addClass("x-resizable-over");
- }
- },
-
- // private
- handleOut : function(){
- if(!this.resizing){
- this.el.removeClass("x-resizable-over");
- }
- },
-
- /**
- * Returns the element this component is bound to.
- * @return {Roo.Element}
- */
- getEl : function(){
- return this.el;
- },
-
- /**
- * Returns the resizeChild element (or null).
- * @return {Roo.Element}
- */
- getResizeChild : function(){
- return this.resizeChild;
- },
-
- /**
- * Destroys this resizable. If the element was wrapped and
- * removeEl is not true then the element remains.
- * @param {Boolean} removeEl (optional) true to remove the element from the DOM
- */
- destroy : function(removeEl){
- this.proxy.remove();
- if(this.overlay){
- this.overlay.removeAllListeners();
- this.overlay.remove();
- }
- var ps = Roo.Resizable.positions;
- for(var k in ps){
- if(typeof ps[k] != "function" && this[ps[k]]){
- var h = this[ps[k]];
- h.el.removeAllListeners();
- h.el.remove();
- }
- }
- if(removeEl){
- this.el.update("");
- this.el.remove();
- }
- }
-});
-
-// private
-// hash to map config positions to true positions
-Roo.Resizable.positions = {
- n: "north", s: "south", e: "east", w: "west", se: "southeast", sw: "southwest", nw: "northwest", ne: "northeast",
- hd: "hdrag"
-};
-
-// private
-Roo.Resizable.Handle = function(rz, pos, disableTrackOver, transparent){
- if(!this.tpl){
- // only initialize the template if resizable is used
- var tpl = Roo.DomHelper.createTemplate(
- {tag: "div", cls: "x-resizable-handle x-resizable-handle-{0}"}
- );
- tpl.compile();
- Roo.Resizable.Handle.prototype.tpl = tpl;
- }
- this.position = pos;
- this.rz = rz;
- // show north drag fro topdra
- var handlepos = pos == 'hdrag' ? 'north' : pos;
-
- this.el = this.tpl.append(rz.el.dom, [handlepos], true);
- if (pos == 'hdrag') {
- this.el.setStyle('cursor', 'pointer');
- }
- this.el.unselectable();
- if(transparent){
- this.el.setOpacity(0);
- }
- this.el.on("mousedown", this.onMouseDown, this);
- if(!disableTrackOver){
- this.el.on("mouseover", this.onMouseOver, this);
- this.el.on("mouseout", this.onMouseOut, this);
- }
-};
-
-// private
-Roo.Resizable.Handle.prototype = {
- afterResize : function(rz){
- // do nothing
- },
- // private
- onMouseDown : function(e){
- this.rz.onMouseDown(this, e);
- },
- // private
- onMouseOver : function(e){
- this.rz.handleOver(this, e);
- },
- // private
- onMouseOut : function(e){
- this.rz.handleOut(this, e);
- }
-};/*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
- */
-
-/**
- * @class Roo.Editor
- * @extends Roo.Component
- * A base editor field that handles displaying/hiding on demand and has some built-in sizing and event handling logic.
- * @constructor
- * Create a new Editor
- * @param {Roo.form.Field} field The Field object (or descendant)
- * @param {Object} config The config object
- */
-Roo.Editor = function(field, config){
- Roo.Editor.superclass.constructor.call(this, config);
- this.field = field;
- this.addEvents({
- /**
- * @event beforestartedit
- * Fires when editing is initiated, but before the value changes. Editing can be canceled by returning
- * false from the handler of this event.
- * @param {Editor} this
- * @param {Roo.Element} boundEl The underlying element bound to this editor
- * @param {Mixed} value The field value being set
- */
- "beforestartedit" : true,
- /**
- * @event startedit
- * Fires when this editor is displayed
- * @param {Roo.Element} boundEl The underlying element bound to this editor
- * @param {Mixed} value The starting field value
- */
- "startedit" : true,
- /**
- * @event beforecomplete
- * Fires after a change has been made to the field, but before the change is reflected in the underlying
- * field. Saving the change to the field can be canceled by returning false from the handler of this event.
- * Note that if the value has not changed and ignoreNoChange = true, the editing will still end but this
- * event will not fire since no edit actually occurred.
- * @param {Editor} this
- * @param {Mixed} value The current field value
- * @param {Mixed} startValue The original field value
- */
- "beforecomplete" : true,
- /**
- * @event complete
- * Fires after editing is complete and any changed value has been written to the underlying field.
- * @param {Editor} this
- * @param {Mixed} value The current field value
- * @param {Mixed} startValue The original field value
- */
- "complete" : true,
- /**
- * @event specialkey
- * Fires when any key related to navigation (arrows, tab, enter, esc, etc.) is pressed. You can check
- * {@link Roo.EventObject#getKey} to determine which key was pressed.
- * @param {Roo.form.Field} this
- * @param {Roo.EventObject} e The event object
- */
- "specialkey" : true
- });
-};
-
-Roo.extend(Roo.Editor, Roo.Component, {
- /**
- * @cfg {Boolean/String} autosize
- * True for the editor to automatically adopt the size of the underlying field, "width" to adopt the width only,
- * or "height" to adopt the height only (defaults to false)
- */
- /**
- * @cfg {Boolean} revertInvalid
- * True to automatically revert the field value and cancel the edit when the user completes an edit and the field
- * validation fails (defaults to true)
- */
- /**
- * @cfg {Boolean} ignoreNoChange
- * True to skip the the edit completion process (no save, no events fired) if the user completes an edit and
- * the value has not changed (defaults to false). Applies only to string values - edits for other data types
- * will never be ignored.
- */
- /**
- * @cfg {Boolean} hideEl
- * False to keep the bound element visible while the editor is displayed (defaults to true)
- */
- /**
- * @cfg {Mixed} value
- * The data value of the underlying field (defaults to "")
- */
- value : "",
- /**
- * @cfg {String} alignment
- * The position to align to (see {@link Roo.Element#alignTo} for more details, defaults to "c-c?").
- */
- alignment: "c-c?",
- /**
- * @cfg {Boolean/String} shadow "sides" for sides/bottom only, "frame" for 4-way shadow, and "drop"
- * for bottom-right shadow (defaults to "frame")
- */
- shadow : "frame",
- /**
- * @cfg {Boolean} constrain True to constrain the editor to the viewport
- */
- constrain : false,
- /**
- * @cfg {Boolean} completeOnEnter True to complete the edit when the enter key is pressed (defaults to false)
- */
- completeOnEnter : false,
- /**
- * @cfg {Boolean} cancelOnEsc True to cancel the edit when the escape key is pressed (defaults to false)
- */
- cancelOnEsc : false,
- /**
- * @cfg {Boolean} updateEl True to update the innerHTML of the bound element when the update completes (defaults to false)
- */
- updateEl : false,
-
- // private
- onRender : function(ct, position){
- this.el = new Roo.Layer({
- shadow: this.shadow,
- cls: "x-editor",
- parentEl : ct,
- shim : this.shim,
- shadowOffset:4,
- id: this.id,
- constrain: this.constrain
- });
- this.el.setStyle("overflow", Roo.isGecko ? "auto" : "hidden");
- if(this.field.msgTarget != 'title'){
- this.field.msgTarget = 'qtip';
- }
- this.field.render(this.el);
- if(Roo.isGecko){
- this.field.el.dom.setAttribute('autocomplete', 'off');
- }
- this.field.on("specialkey", this.onSpecialKey, this);
- if(this.swallowKeys){
- this.field.el.swallowEvent(['keydown','keypress']);
- }
- this.field.show();
- this.field.on("blur", this.onBlur, this);
- if(this.field.grow){
- this.field.on("autosize", this.el.sync, this.el, {delay:1});
- }
- },
-
- onSpecialKey : function(field, e){
- //Roo.log('editor onSpecialKey');
- if(this.completeOnEnter && e.getKey() == e.ENTER){
- e.stopEvent();
- this.completeEdit();
- }else if(this.cancelOnEsc && e.getKey() == e.ESC){
- this.cancelEdit();
- }else{
- this.fireEvent('specialkey', field, e);
- }
- },
-
- /**
- * Starts the editing process and shows the editor.
- * @param {String/HTMLElement/Element} el The element to edit
- * @param {String} value (optional) A value to initialize the editor with. If a value is not provided, it defaults
- * to the innerHTML of el.
- */
- startEdit : function(el, value){
- if(this.editing){
- this.completeEdit();
- }
- this.boundEl = Roo.get(el);
- var v = value !== undefined ? value : this.boundEl.dom.innerHTML;
- if(!this.rendered){
- this.render(this.parentEl || document.body);
- }
- if(this.fireEvent("beforestartedit", this, this.boundEl, v) === false){
- return;
- }
- this.startValue = v;
- this.field.setValue(v);
- if(this.autoSize){
- var sz = this.boundEl.getSize();
- switch(this.autoSize){
- case "width":
- this.setSize(sz.width, "");
- break;
- case "height":
- this.setSize("", sz.height);
- break;
- default:
- this.setSize(sz.width, sz.height);
- }
- }
- this.el.alignTo(this.boundEl, this.alignment);
- this.editing = true;
- if(Roo.QuickTips){
- Roo.QuickTips.disable();
- }
- this.show();
- },
-
- /**
- * Sets the height and width of this editor.
- * @param {Number} width The new width
- * @param {Number} height The new height
- */
- setSize : function(w, h){
- this.field.setSize(w, h);
- if(this.el){
- this.el.sync();
- }
- },
-
- /**
- * Realigns the editor to the bound field based on the current alignment config value.
- */
- realign : function(){
- this.el.alignTo(this.boundEl, this.alignment);
- },
-
- /**
- * Ends the editing process, persists the changed value to the underlying field, and hides the editor.
- * @param {Boolean} remainVisible Override the default behavior and keep the editor visible after edit (defaults to false)
- */
- completeEdit : function(remainVisible){
- if(!this.editing){
- return;
- }
- var v = this.getValue();
- if(this.revertInvalid !== false && !this.field.isValid()){
- v = this.startValue;
- this.cancelEdit(true);
- }
- if(String(v) === String(this.startValue) && this.ignoreNoChange){
- this.editing = false;
- this.hide();
- return;
- }
- if(this.fireEvent("beforecomplete", this, v, this.startValue) !== false){
- this.editing = false;
- if(this.updateEl && this.boundEl){
- this.boundEl.update(v);
- }
- if(remainVisible !== true){
- this.hide();
- }
- this.fireEvent("complete", this, v, this.startValue);
- }
- },
-
- // private
- onShow : function(){
- this.el.show();
- if(this.hideEl !== false){
- this.boundEl.hide();
- }
- this.field.show();
- if(Roo.isIE && !this.fixIEFocus){ // IE has problems with focusing the first time
- this.fixIEFocus = true;
- this.deferredFocus.defer(50, this);
- }else{
- this.field.focus();
- }
- this.fireEvent("startedit", this.boundEl, this.startValue);
- },
-
- deferredFocus : function(){
- if(this.editing){
- this.field.focus();
- }
- },
-
- /**
- * Cancels the editing process and hides the editor without persisting any changes. The field value will be
- * reverted to the original starting value.
- * @param {Boolean} remainVisible Override the default behavior and keep the editor visible after
- * cancel (defaults to false)
- */
- cancelEdit : function(remainVisible){
- if(this.editing){
- this.setValue(this.startValue);
- if(remainVisible !== true){
- this.hide();
- }
- }
- },
-
- // private
- onBlur : function(){
- if(this.allowBlur !== true && this.editing){
- this.completeEdit();
- }
- },
-
- // private
- onHide : function(){
- if(this.editing){
- this.completeEdit();
- return;
- }
- this.field.blur();
- if(this.field.collapse){
- this.field.collapse();
- }
- this.el.hide();
- if(this.hideEl !== false){
- this.boundEl.show();
- }
- if(Roo.QuickTips){
- Roo.QuickTips.enable();
- }
- },
-
- /**
- * Sets the data value of the editor
- * @param {Mixed} value Any valid value supported by the underlying field
- */
- setValue : function(v){
- this.field.setValue(v);
- },
-
- /**
- * Gets the data value of the editor
- * @return {Mixed} The data value
- */
- getValue : function(){
- return this.field.getValue();
- }
-});/*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
- */
-
-/**
- * @class Roo.BasicDialog
- * @extends Roo.util.Observable
- * Lightweight Dialog Class. The code below shows the creation of a typical dialog using existing HTML markup:
- * <pre><code>
-var dlg = new Roo.BasicDialog("my-dlg", {
- height: 200,
- width: 300,
- minHeight: 100,
- minWidth: 150,
- modal: true,
- proxyDrag: true,
- shadow: true
-});
-dlg.addKeyListener(27, dlg.hide, dlg); // ESC can also close the dialog
-dlg.addButton('OK', dlg.hide, dlg); // Could call a save function instead of hiding
-dlg.addButton('Cancel', dlg.hide, dlg);
-dlg.show();
-</code></pre>
- <b>A Dialog should always be a direct child of the body element.</b>
- * @cfg {Boolean/DomHelper} autoCreate True to auto create from scratch, or using a DomHelper Object (defaults to false)
- * @cfg {String} title Default text to display in the title bar (defaults to null)
- * @cfg {Number} width Width of the dialog in pixels (can also be set via CSS). Determined by browser if unspecified.
- * @cfg {Number} height Height of the dialog in pixels (can also be set via CSS). Determined by browser if unspecified.
- * @cfg {Number} x The default left page coordinate of the dialog (defaults to center screen)
- * @cfg {Number} y The default top page coordinate of the dialog (defaults to center screen)
- * @cfg {String/Element} animateTarget Id or element from which the dialog should animate while opening
- * (defaults to null with no animation)
- * @cfg {Boolean} resizable False to disable manual dialog resizing (defaults to true)
- * @cfg {String} resizeHandles Which resize handles to display - see the {@link Roo.Resizable} handles config
- * property for valid values (defaults to 'all')
- * @cfg {Number} minHeight The minimum allowable height for a resizable dialog (defaults to 80)
- * @cfg {Number} minWidth The minimum allowable width for a resizable dialog (defaults to 200)
- * @cfg {Boolean} modal True to show the dialog modally, preventing user interaction with the rest of the page (defaults to false)
- * @cfg {Boolean} autoScroll True to allow the dialog body contents to overflow and display scrollbars (defaults to false)
- * @cfg {Boolean} closable False to remove the built-in top-right corner close button (defaults to true)
- * @cfg {Boolean} collapsible False to remove the built-in top-right corner collapse button (defaults to true)
- * @cfg {Boolean} constraintoviewport True to keep the dialog constrained within the visible viewport boundaries (defaults to true)
- * @cfg {Boolean} syncHeightBeforeShow True to cause the dimensions to be recalculated before the dialog is shown (defaults to false)
- * @cfg {Boolean} draggable False to disable dragging of the dialog within the viewport (defaults to true)
- * @cfg {Boolean} autoTabs If true, all elements with class 'x-dlg-tab' will get automatically converted to tabs (defaults to false)
- * @cfg {String} tabTag The tag name of tab elements, used when autoTabs = true (defaults to 'div')
- * @cfg {Boolean} proxyDrag True to drag a lightweight proxy element rather than the dialog itself, used when
- * draggable = true (defaults to false)
- * @cfg {Boolean} fixedcenter True to ensure that anytime the dialog is shown or resized it gets centered (defaults to false)
- * @cfg {Boolean/String} shadow True or "sides" for the default effect, "frame" for 4-way shadow, and "drop" for bottom-right
- * shadow (defaults to false)
- * @cfg {Number} shadowOffset The number of pixels to offset the shadow if displayed (defaults to 5)
- * @cfg {String} buttonAlign Valid values are "left," "center" and "right" (defaults to "right")
- * @cfg {Number} minButtonWidth Minimum width of all dialog buttons (defaults to 75)
- * @cfg {Array} buttons Array of buttons
- * @cfg {Boolean} shim True to create an iframe shim that prevents selects from showing through (defaults to false)
- * @constructor
- * Create a new BasicDialog.
- * @param {String/HTMLElement/Roo.Element} el The container element or DOM node, or its id
- * @param {Object} config Configuration options
- */
-Roo.BasicDialog = function(el, config){
- this.el = Roo.get(el);
- var dh = Roo.DomHelper;
- if(!this.el && config && config.autoCreate){
- if(typeof config.autoCreate == "object"){
- if(!config.autoCreate.id){
- config.autoCreate.id = el;
- }
- this.el = dh.append(document.body,
- config.autoCreate, true);
- }else{
- this.el = dh.append(document.body,
- {tag: "div", id: el, style:'visibility:hidden;'}, true);
- }
- }
- el = this.el;
- el.setDisplayed(true);
- el.hide = this.hideAction;
- this.id = el.id;
- el.addClass("x-dlg");
-
- Roo.apply(this, config);
-
- this.proxy = el.createProxy("x-dlg-proxy");
- this.proxy.hide = this.hideAction;
- this.proxy.setOpacity(.5);
- this.proxy.hide();
-
- if(config.width){
- el.setWidth(config.width);
- }
- if(config.height){
- el.setHeight(config.height);
- }
- this.size = el.getSize();
- if(typeof config.x != "undefined" && typeof config.y != "undefined"){
- this.xy = [config.x,config.y];
- }else{
- this.xy = el.getCenterXY(true);
- }
- /** The header element @type Roo.Element */
- this.header = el.child("> .x-dlg-hd");
- /** The body element @type Roo.Element */
- this.body = el.child("> .x-dlg-bd");
- /** The footer element @type Roo.Element */
- this.footer = el.child("> .x-dlg-ft");
-
- if(!this.header){
- this.header = el.createChild({tag: "div", cls:"x-dlg-hd", html: " "}, this.body ? this.body.dom : null);
- }
- if(!this.body){
- this.body = el.createChild({tag: "div", cls:"x-dlg-bd"});
- }
-
- this.header.unselectable();
- if(this.title){
- this.header.update(this.title);
- }
- // this element allows the dialog to be focused for keyboard event
- this.focusEl = el.createChild({tag: "a", href:"#", cls:"x-dlg-focus", tabIndex:"-1"});
- this.focusEl.swallowEvent("click", true);
-
- this.header.wrap({cls:"x-dlg-hd-right"}).wrap({cls:"x-dlg-hd-left"}, true);
-
- // wrap the body and footer for special rendering
- this.bwrap = this.body.wrap({tag: "div", cls:"x-dlg-dlg-body"});
- if(this.footer){
- this.bwrap.dom.appendChild(this.footer.dom);
- }
-
- this.bg = this.el.createChild({
- tag: "div", cls:"x-dlg-bg",
- html: '<div class="x-dlg-bg-left"><div class="x-dlg-bg-right"><div class="x-dlg-bg-center"> </div></div></div>'
- });
- this.centerBg = this.bg.child("div.x-dlg-bg-center");
-
-
- if(this.autoScroll !== false && !this.autoTabs){
- this.body.setStyle("overflow", "auto");
- }
-
- this.toolbox = this.el.createChild({cls: "x-dlg-toolbox"});
-
- if(this.closable !== false){
- this.el.addClass("x-dlg-closable");
- this.close = this.toolbox.createChild({cls:"x-dlg-close"});
- this.close.on("click", this.closeClick, this);
- this.close.addClassOnOver("x-dlg-close-over");
- }
- if(this.collapsible !== false){
- this.collapseBtn = this.toolbox.createChild({cls:"x-dlg-collapse"});
- this.collapseBtn.on("click", this.collapseClick, this);
- this.collapseBtn.addClassOnOver("x-dlg-collapse-over");
- this.header.on("dblclick", this.collapseClick, this);
- }
- if(this.resizable !== false){
- this.el.addClass("x-dlg-resizable");
- this.resizer = new Roo.Resizable(el, {
- minWidth: this.minWidth || 80,
- minHeight:this.minHeight || 80,
- handles: this.resizeHandles || "all",
- pinned: true
- });
- this.resizer.on("beforeresize", this.beforeResize, this);
- this.resizer.on("resize", this.onResize, this);
- }
- if(this.draggable !== false){
- el.addClass("x-dlg-draggable");
- if (!this.proxyDrag) {
- var dd = new Roo.dd.DD(el.dom.id, "WindowDrag");
- }
- else {
- var dd = new Roo.dd.DDProxy(el.dom.id, "WindowDrag", {dragElId: this.proxy.id});
- }
- dd.setHandleElId(this.header.id);
- dd.endDrag = this.endMove.createDelegate(this);
- dd.startDrag = this.startMove.createDelegate(this);
- dd.onDrag = this.onDrag.createDelegate(this);
- dd.scroll = false;
- this.dd = dd;
- }
- if(this.modal){
- this.mask = dh.append(document.body, {tag: "div", cls:"x-dlg-mask"}, true);
- this.mask.enableDisplayMode("block");
- this.mask.hide();
- this.el.addClass("x-dlg-modal");
- }
- if(this.shadow){
- this.shadow = new Roo.Shadow({
- mode : typeof this.shadow == "string" ? this.shadow : "sides",
- offset : this.shadowOffset
- });
- }else{
- this.shadowOffset = 0;
- }
- if(Roo.useShims && this.shim !== false){
- this.shim = this.el.createShim();
- this.shim.hide = this.hideAction;
- this.shim.hide();
- }else{
- this.shim = false;
- }
- if(this.autoTabs){
- this.initTabs();
- }
- if (this.buttons) {
- var bts= this.buttons;
- this.buttons = [];
- Roo.each(bts, function(b) {
- this.addButton(b);
- }, this);
- }
-
-
- this.addEvents({
- /**
- * @event keydown
- * Fires when a key is pressed
- * @param {Roo.BasicDialog} this
- * @param {Roo.EventObject} e
- */
- "keydown" : true,
- /**
- * @event move
- * Fires when this dialog is moved by the user.
- * @param {Roo.BasicDialog} this
- * @param {Number} x The new page X
- * @param {Number} y The new page Y
- */
- "move" : true,
- /**
- * @event resize
- * Fires when this dialog is resized by the user.
- * @param {Roo.BasicDialog} this
- * @param {Number} width The new width
- * @param {Number} height The new height
- */
- "resize" : true,
- /**
- * @event beforehide
- * Fires before this dialog is hidden.
- * @param {Roo.BasicDialog} this
- */
- "beforehide" : true,
- /**
- * @event hide
- * Fires when this dialog is hidden.
- * @param {Roo.BasicDialog} this
- */
- "hide" : true,
- /**
- * @event beforeshow
- * Fires before this dialog is shown.
- * @param {Roo.BasicDialog} this
- */
- "beforeshow" : true,
- /**
- * @event show
- * Fires when this dialog is shown.
- * @param {Roo.BasicDialog} this
- */
- "show" : true
- });
- el.on("keydown", this.onKeyDown, this);
- el.on("mousedown", this.toFront, this);
- Roo.EventManager.onWindowResize(this.adjustViewport, this, true);
- this.el.hide();
- Roo.DialogManager.register(this);
- Roo.BasicDialog.superclass.constructor.call(this);
-};
-
-Roo.extend(Roo.BasicDialog, Roo.util.Observable, {
- shadowOffset: Roo.isIE ? 6 : 5,
- minHeight: 80,
- minWidth: 200,
- minButtonWidth: 75,
- defaultButton: null,
- buttonAlign: "right",
- tabTag: 'div',
- firstShow: true,
-
- /**
- * Sets the dialog title text
- * @param {String} text The title text to display
- * @return {Roo.BasicDialog} this
- */
- setTitle : function(text){
- this.header.update(text);
- return this;
- },
-
- // private
- closeClick : function(){
- this.hide();
- },
-
- // private
- collapseClick : function(){
- this[this.collapsed ? "expand" : "collapse"]();
- },
-
- /**
- * Collapses the dialog to its minimized state (only the title bar is visible).
- * Equivalent to the user clicking the collapse dialog button.
- */
- collapse : function(){
- if(!this.collapsed){
- this.collapsed = true;
- this.el.addClass("x-dlg-collapsed");
- this.restoreHeight = this.el.getHeight();
- this.resizeTo(this.el.getWidth(), this.header.getHeight());
- }
- },
-
- /**
- * Expands a collapsed dialog back to its normal state. Equivalent to the user
- * clicking the expand dialog button.
- */
- expand : function(){
- if(this.collapsed){
- this.collapsed = false;
- this.el.removeClass("x-dlg-collapsed");
- this.resizeTo(this.el.getWidth(), this.restoreHeight);
- }
- },
-
- /**
- * Reinitializes the tabs component, clearing out old tabs and finding new ones.
- * @return {Roo.TabPanel} The tabs component
- */
- initTabs : function(){
- var tabs = this.getTabs();
- while(tabs.getTab(0)){
- tabs.removeTab(0);
- }
- this.el.select(this.tabTag+'.x-dlg-tab').each(function(el){
- var dom = el.dom;
- tabs.addTab(Roo.id(dom), dom.title);
- dom.title = "";
- });
- tabs.activate(0);
- return tabs;
- },
-
- // private
- beforeResize : function(){
- this.resizer.minHeight = Math.max(this.minHeight, this.getHeaderFooterHeight(true)+40);
- },
-
- // private
- onResize : function(){
- this.refreshSize();
- this.syncBodyHeight();
- this.adjustAssets();
- this.focus();
- this.fireEvent("resize", this, this.size.width, this.size.height);
- },
-
- // private
- onKeyDown : function(e){
- if(this.isVisible()){
- this.fireEvent("keydown", this, e);
- }
- },
-
- /**
- * Resizes the dialog.
- * @param {Number} width
- * @param {Number} height
- * @return {Roo.BasicDialog} this
- */
- resizeTo : function(width, height){
- this.el.setSize(width, height);
- this.size = {width: width, height: height};
- this.syncBodyHeight();
- if(this.fixedcenter){
- this.center();
- }
- if(this.isVisible()){
- this.constrainXY();
- this.adjustAssets();
- }
- this.fireEvent("resize", this, width, height);
- return this;
- },
-
-
- /**
- * Resizes the dialog to fit the specified content size.
- * @param {Number} width
- * @param {Number} height
- * @return {Roo.BasicDialog} this
- */
- setContentSize : function(w, h){
- h += this.getHeaderFooterHeight() + this.body.getMargins("tb");
- w += this.body.getMargins("lr") + this.bwrap.getMargins("lr") + this.centerBg.getPadding("lr");
- //if(!this.el.isBorderBox()){
- h += this.body.getPadding("tb") + this.bwrap.getBorderWidth("tb") + this.body.getBorderWidth("tb") + this.el.getBorderWidth("tb");
- w += this.body.getPadding("lr") + this.bwrap.getBorderWidth("lr") + this.body.getBorderWidth("lr") + this.bwrap.getPadding("lr") + this.el.getBorderWidth("lr");
- //}
- if(this.tabs){
- h += this.tabs.stripWrap.getHeight() + this.tabs.bodyEl.getMargins("tb") + this.tabs.bodyEl.getPadding("tb");
- w += this.tabs.bodyEl.getMargins("lr") + this.tabs.bodyEl.getPadding("lr");
- }
- this.resizeTo(w, h);
- return this;
- },
-
- /**
- * Adds a key listener for when this dialog is displayed. This allows you to hook in a function that will be
- * executed in response to a particular key being pressed while the dialog is active.
- * @param {Number/Array/Object} key Either the numeric key code, array of key codes or an object with the following options:
- * {key: (number or array), shift: (true/false), ctrl: (true/false), alt: (true/false)}
- * @param {Function} fn The function to call
- * @param {Object} scope (optional) The scope of the function
- * @return {Roo.BasicDialog} this
- */
- addKeyListener : function(key, fn, scope){
- var keyCode, shift, ctrl, alt;
- if(typeof key == "object" && !(key instanceof Array)){
- keyCode = key["key"];
- shift = key["shift"];
- ctrl = key["ctrl"];
- alt = key["alt"];
- }else{
- keyCode = key;
- }
- var handler = function(dlg, e){
- if((!shift || e.shiftKey) && (!ctrl || e.ctrlKey) && (!alt || e.altKey)){
- var k = e.getKey();
- if(keyCode instanceof Array){
- for(var i = 0, len = keyCode.length; i < len; i++){
- if(keyCode[i] == k){
- fn.call(scope || window, dlg, k, e);
- return;
- }
- }
- }else{
- if(k == keyCode){
- fn.call(scope || window, dlg, k, e);
- }
- }
- }
- };
- this.on("keydown", handler);
- return this;
- },
-
- /**
- * Returns the TabPanel component (creates it if it doesn't exist).
- * Note: If you wish to simply check for the existence of tabs without creating them,
- * check for a null 'tabs' property.
- * @return {Roo.TabPanel} The tabs component
- */
- getTabs : function(){
- if(!this.tabs){
- this.el.addClass("x-dlg-auto-tabs");
- this.body.addClass(this.tabPosition == "bottom" ? "x-tabs-bottom" : "x-tabs-top");
- this.tabs = new Roo.TabPanel(this.body.dom, this.tabPosition == "bottom");
- }
- return this.tabs;
- },
-
- /**
- * Adds a button to the footer section of the dialog.
- * @param {String/Object} config A string becomes the button text, an object can either be a Button config
- * object or a valid Roo.DomHelper element config
- * @param {Function} handler The function called when the button is clicked
- * @param {Object} scope (optional) The scope of the handler function (accepts position as a property)
- * @return {Roo.Button} The new button
- */
- addButton : function(config, handler, scope){
- var dh = Roo.DomHelper;
- if(!this.footer){
- this.footer = dh.append(this.bwrap, {tag: "div", cls:"x-dlg-ft"}, true);
- }
- if(!this.btnContainer){
- var tb = this.footer.createChild({
-
- cls:"x-dlg-btns x-dlg-btns-"+this.buttonAlign,
- html:'<table cellspacing="0"><tbody><tr></tr></tbody></table><div class="x-clear"></div>'
- }, null, true);
- this.btnContainer = tb.firstChild.firstChild.firstChild;
- }
- var bconfig = {
- handler: handler,
- scope: scope,
- minWidth: this.minButtonWidth,
- hideParent:true
- };
- if(typeof config == "string"){
- bconfig.text = config;
- }else{
- if(config.tag){
- bconfig.dhconfig = config;
- }else{
- Roo.apply(bconfig, config);
- }
- }
- var fc = false;
- if ((typeof(bconfig.position) != 'undefined') && bconfig.position < this.btnContainer.childNodes.length-1) {
- bconfig.position = Math.max(0, bconfig.position);
- fc = this.btnContainer.childNodes[bconfig.position];
- }
-
- var btn = new Roo.Button(
- fc ?
- this.btnContainer.insertBefore(document.createElement("td"),fc)
- : this.btnContainer.appendChild(document.createElement("td")),
- //Roo.get(this.btnContainer).createChild( { tag: 'td'}, fc ),
- bconfig
- );
- this.syncBodyHeight();
- if(!this.buttons){
- /**
- * Array of all the buttons that have been added to this dialog via addButton
- * @type Array
- */
- this.buttons = [];
- }
- this.buttons.push(btn);
- return btn;
- },
-
- /**
- * Sets the default button to be focused when the dialog is displayed.
- * @param {Roo.BasicDialog.Button} btn The button object returned by {@link #addButton}
- * @return {Roo.BasicDialog} this
- */
- setDefaultButton : function(btn){
- this.defaultButton = btn;
- return this;
- },
-
- // private
- getHeaderFooterHeight : function(safe){
- var height = 0;
- if(this.header){
- height += this.header.getHeight();
- }
- if(this.footer){
- var fm = this.footer.getMargins();
- height += (this.footer.getHeight()+fm.top+fm.bottom);
- }
- height += this.bwrap.getPadding("tb")+this.bwrap.getBorderWidth("tb");
- height += this.centerBg.getPadding("tb");
- return height;
- },
-
- // private
- syncBodyHeight : function(){
- var bd = this.body, cb = this.centerBg, bw = this.bwrap;
- var height = this.size.height - this.getHeaderFooterHeight(false);
- bd.setHeight(height-bd.getMargins("tb"));
- var hh = this.header.getHeight();
- var h = this.size.height-hh;
- cb.setHeight(h);
- bw.setLeftTop(cb.getPadding("l"), hh+cb.getPadding("t"));
- bw.setHeight(h-cb.getPadding("tb"));
- bw.setWidth(this.el.getWidth(true)-cb.getPadding("lr"));
- bd.setWidth(bw.getWidth(true));
- if(this.tabs){
- this.tabs.syncHeight();
- if(Roo.isIE){
- this.tabs.el.repaint();
- }
- }
- },
-
- /**
- * Restores the previous state of the dialog if Roo.state is configured.
- * @return {Roo.BasicDialog} this
- */
- restoreState : function(){
- var box = Roo.state.Manager.get(this.stateId || (this.el.id + "-state"));
- if(box && box.width){
- this.xy = [box.x, box.y];
- this.resizeTo(box.width, box.height);
- }
- return this;
- },
-
- // private
- beforeShow : function(){
- this.expand();
- if(this.fixedcenter){
- this.xy = this.el.getCenterXY(true);
- }
- if(this.modal){
- Roo.get(document.body).addClass("x-body-masked");
- this.mask.setSize(Roo.lib.Dom.getViewWidth(true), Roo.lib.Dom.getViewHeight(true));
- this.mask.show();
- }
- this.constrainXY();
- },
-
- // private
- animShow : function(){
- var b = Roo.get(this.animateTarget).getBox();
- this.proxy.setSize(b.width, b.height);
- this.proxy.setLocation(b.x, b.y);
- this.proxy.show();
- this.proxy.setBounds(this.xy[0], this.xy[1], this.size.width, this.size.height,
- true, .35, this.showEl.createDelegate(this));
- },
-
- /**
- * Shows the dialog.
- * @param {String/HTMLElement/Roo.Element} animateTarget (optional) Reset the animation target
- * @return {Roo.BasicDialog} this
- */
- show : function(animateTarget){
- if (this.fireEvent("beforeshow", this) === false){
- return;
- }
- if(this.syncHeightBeforeShow){
- this.syncBodyHeight();
- }else if(this.firstShow){
- this.firstShow = false;
- this.syncBodyHeight(); // sync the height on the first show instead of in the constructor
- }
- this.animateTarget = animateTarget || this.animateTarget;
- if(!this.el.isVisible()){
- this.beforeShow();
- if(this.animateTarget && Roo.get(this.animateTarget)){
- this.animShow();
- }else{
- this.showEl();
- }
- }
- return this;
- },
-
- // private
- showEl : function(){
- this.proxy.hide();
- this.el.setXY(this.xy);
- this.el.show();
- this.adjustAssets(true);
- this.toFront();
- this.focus();
- // IE peekaboo bug - fix found by Dave Fenwick
- if(Roo.isIE){
- this.el.repaint();
- }
- this.fireEvent("show", this);
- },
-
- /**
- * Focuses the dialog. If a defaultButton is set, it will receive focus, otherwise the
- * dialog itself will receive focus.
- */
- focus : function(){
- if(this.defaultButton){
- this.defaultButton.focus();
- }else{
- this.focusEl.focus();
- }
- },
-
- // private
- constrainXY : function(){
- if(this.constraintoviewport !== false){
- if(!this.viewSize){
- if(this.container){
- var s = this.container.getSize();
- this.viewSize = [s.width, s.height];
- }else{
- this.viewSize = [Roo.lib.Dom.getViewWidth(),Roo.lib.Dom.getViewHeight()];
- }
- }
- var s = Roo.get(this.container||document).getScroll();
-
- var x = this.xy[0], y = this.xy[1];
- var w = this.size.width, h = this.size.height;
- var vw = this.viewSize[0], vh = this.viewSize[1];
- // only move it if it needs it
- var moved = false;
- // first validate right/bottom
- if(x + w > vw+s.left){
- x = vw - w;
- moved = true;
- }
- if(y + h > vh+s.top){
- y = vh - h;
- moved = true;
- }
- // then make sure top/left isn't negative
- if(x < s.left){
- x = s.left;
- moved = true;
- }
- if(y < s.top){
- y = s.top;
- moved = true;
- }
- if(moved){
- // cache xy
- this.xy = [x, y];
- if(this.isVisible()){
- this.el.setLocation(x, y);
- this.adjustAssets();
- }
- }
- }
- },
-
- // private
- onDrag : function(){
- if(!this.proxyDrag){
- this.xy = this.el.getXY();
- this.adjustAssets();
- }
- },
-
- // private
- adjustAssets : function(doShow){
- var x = this.xy[0], y = this.xy[1];
- var w = this.size.width, h = this.size.height;
- if(doShow === true){
- if(this.shadow){
- this.shadow.show(this.el);
- }
- if(this.shim){
- this.shim.show();
- }
- }
- if(this.shadow && this.shadow.isVisible()){
- this.shadow.show(this.el);
- }
- if(this.shim && this.shim.isVisible()){
- this.shim.setBounds(x, y, w, h);
- }
- },
-
- // private
- adjustViewport : function(w, h){
- if(!w || !h){
- w = Roo.lib.Dom.getViewWidth();
- h = Roo.lib.Dom.getViewHeight();
- }
- // cache the size
- this.viewSize = [w, h];
- if(this.modal && this.mask.isVisible()){
- this.mask.setSize(w, h); // first make sure the mask isn't causing overflow
- this.mask.setSize(Roo.lib.Dom.getViewWidth(true), Roo.lib.Dom.getViewHeight(true));
- }
- if(this.isVisible()){
- this.constrainXY();
- }
- },
-
- /**
- * Destroys this dialog and all its supporting elements (including any tabs, shim,
- * shadow, proxy, mask, etc.) Also removes all event listeners.
- * @param {Boolean} removeEl (optional) true to remove the element from the DOM
- */
- destroy : function(removeEl){
- if(this.isVisible()){
- this.animateTarget = null;
- this.hide();
- }
- Roo.EventManager.removeResizeListener(this.adjustViewport, this);
- if(this.tabs){
- this.tabs.destroy(removeEl);
- }
- Roo.destroy(
- this.shim,
- this.proxy,
- this.resizer,
- this.close,
- this.mask
- );
- if(this.dd){
- this.dd.unreg();
- }
- if(this.buttons){
- for(var i = 0, len = this.buttons.length; i < len; i++){
- this.buttons[i].destroy();
- }
- }
- this.el.removeAllListeners();
- if(removeEl === true){
- this.el.update("");
- this.el.remove();
- }
- Roo.DialogManager.unregister(this);
- },
-
- // private
- startMove : function(){
- if(this.proxyDrag){
- this.proxy.show();
- }
- if(this.constraintoviewport !== false){
- this.dd.constrainTo(document.body, {right: this.shadowOffset, bottom: this.shadowOffset});
- }
- },
-
- // private
- endMove : function(){
- if(!this.proxyDrag){
- Roo.dd.DD.prototype.endDrag.apply(this.dd, arguments);
- }else{
- Roo.dd.DDProxy.prototype.endDrag.apply(this.dd, arguments);
- this.proxy.hide();
- }
- this.refreshSize();
- this.adjustAssets();
- this.focus();
- this.fireEvent("move", this, this.xy[0], this.xy[1]);
- },
-
- /**
- * Brings this dialog to the front of any other visible dialogs
- * @return {Roo.BasicDialog} this
- */
- toFront : function(){
- Roo.DialogManager.bringToFront(this);
- return this;
- },
-
- /**
- * Sends this dialog to the back (under) of any other visible dialogs
- * @return {Roo.BasicDialog} this
- */
- toBack : function(){
- Roo.DialogManager.sendToBack(this);
- return this;
- },
-
- /**
- * Centers this dialog in the viewport
- * @return {Roo.BasicDialog} this
- */
- center : function(){
- var xy = this.el.getCenterXY(true);
- this.moveTo(xy[0], xy[1]);
- return this;
- },
-
- /**
- * Moves the dialog's top-left corner to the specified point
- * @param {Number} x
- * @param {Number} y
- * @return {Roo.BasicDialog} this
- */
- moveTo : function(x, y){
- this.xy = [x,y];
- if(this.isVisible()){
- this.el.setXY(this.xy);
- this.adjustAssets();
- }
- return this;
- },
-
- /**
- * Aligns the dialog to the specified element
- * @param {String/HTMLElement/Roo.Element} element The element to align to.
- * @param {String} position The position to align to (see {@link Roo.Element#alignTo} for more details).
- * @param {Array} offsets (optional) Offset the positioning by [x, y]
- * @return {Roo.BasicDialog} this
- */
- alignTo : function(element, position, offsets){
- this.xy = this.el.getAlignToXY(element, position, offsets);
- if(this.isVisible()){
- this.el.setXY(this.xy);
- this.adjustAssets();
- }
- return this;
- },
-
- /**
- * Anchors an element to another element and realigns it when the window is resized.
- * @param {String/HTMLElement/Roo.Element} element The element to align to.
- * @param {String} position The position to align to (see {@link Roo.Element#alignTo} for more details)
- * @param {Array} offsets (optional) Offset the positioning by [x, y]
- * @param {Boolean/Number} monitorScroll (optional) true to monitor body scroll and reposition. If this parameter
- * is a number, it is used as the buffer delay (defaults to 50ms).
- * @return {Roo.BasicDialog} this
- */
- anchorTo : function(el, alignment, offsets, monitorScroll){
- var action = function(){
- this.alignTo(el, alignment, offsets);
- };
- Roo.EventManager.onWindowResize(action, this);
- var tm = typeof monitorScroll;
- if(tm != 'undefined'){
- Roo.EventManager.on(window, 'scroll', action, this,
- {buffer: tm == 'number' ? monitorScroll : 50});
- }
- action.call(this);
- return this;
- },
-
- /**
- * Returns true if the dialog is visible
- * @return {Boolean}
- */
- isVisible : function(){
- return this.el.isVisible();
- },
-
- // private
- animHide : function(callback){
- var b = Roo.get(this.animateTarget).getBox();
- this.proxy.show();
- this.proxy.setBounds(this.xy[0], this.xy[1], this.size.width, this.size.height);
- this.el.hide();
- this.proxy.setBounds(b.x, b.y, b.width, b.height, true, .35,
- this.hideEl.createDelegate(this, [callback]));
- },
-
- /**
- * Hides the dialog.
- * @param {Function} callback (optional) Function to call when the dialog is hidden
- * @return {Roo.BasicDialog} this
- */
- hide : function(callback){
- if (this.fireEvent("beforehide", this) === false){
- return;
- }
- if(this.shadow){
- this.shadow.hide();
- }
- if(this.shim) {
- this.shim.hide();
- }
- // sometimes animateTarget seems to get set.. causing problems...
- // this just double checks..
- if(this.animateTarget && Roo.get(this.animateTarget)) {
- this.animHide(callback);
- }else{
- this.el.hide();
- this.hideEl(callback);
- }
- return this;
- },
-
- // private
- hideEl : function(callback){
- this.proxy.hide();
- if(this.modal){
- this.mask.hide();
- Roo.get(document.body).removeClass("x-body-masked");
- }
- this.fireEvent("hide", this);
- if(typeof callback == "function"){
- callback();
- }
- },
-
- // private
- hideAction : function(){
- this.setLeft("-10000px");
- this.setTop("-10000px");
- this.setStyle("visibility", "hidden");
- },
-
- // private
- refreshSize : function(){
- this.size = this.el.getSize();
- this.xy = this.el.getXY();
- Roo.state.Manager.set(this.stateId || this.el.id + "-state", this.el.getBox());
- },
-
- // private
- // z-index is managed by the DialogManager and may be overwritten at any time
- setZIndex : function(index){
- if(this.modal){
- this.mask.setStyle("z-index", index);
- }
- if(this.shim){
- this.shim.setStyle("z-index", ++index);
- }
- if(this.shadow){
- this.shadow.setZIndex(++index);
- }
- this.el.setStyle("z-index", ++index);
- if(this.proxy){
- this.proxy.setStyle("z-index", ++index);
- }
- if(this.resizer){
- this.resizer.proxy.setStyle("z-index", ++index);
- }
-
- this.lastZIndex = index;
- },
-
- /**
- * Returns the element for this dialog
- * @return {Roo.Element} The underlying dialog Element
- */
- getEl : function(){
- return this.el;
- }
-});
-
-/**
- * @class Roo.DialogManager
- * Provides global access to BasicDialogs that have been created and
- * support for z-indexing (layering) multiple open dialogs.
- */
-Roo.DialogManager = function(){
- var list = {};
- var accessList = [];
- var front = null;
-
- // private
- var sortDialogs = function(d1, d2){
- return (!d1._lastAccess || d1._lastAccess < d2._lastAccess) ? -1 : 1;
- };
-
- // private
- var orderDialogs = function(){
- accessList.sort(sortDialogs);
- var seed = Roo.DialogManager.zseed;
- for(var i = 0, len = accessList.length; i < len; i++){
- var dlg = accessList[i];
- if(dlg){
- dlg.setZIndex(seed + (i*10));
- }
- }
- };
-
- return {
- /**
- * The starting z-index for BasicDialogs (defaults to 9000)
- * @type Number The z-index value
- */
- zseed : 9000,
-
- // private
- register : function(dlg){
- list[dlg.id] = dlg;
- accessList.push(dlg);
- },
-
- // private
- unregister : function(dlg){
- delete list[dlg.id];
- var i=0;
- var len=0;
- if(!accessList.indexOf){
- for( i = 0, len = accessList.length; i < len; i++){
- if(accessList[i] == dlg){
- accessList.splice(i, 1);
- return;
- }
- }
- }else{
- i = accessList.indexOf(dlg);
- if(i != -1){
- accessList.splice(i, 1);
- }
- }
- },
-
- /**
- * Gets a registered dialog by id
- * @param {String/Object} id The id of the dialog or a dialog
- * @return {Roo.BasicDialog} this
- */
- get : function(id){
- return typeof id == "object" ? id : list[id];
- },
-
- /**
- * Brings the specified dialog to the front
- * @param {String/Object} dlg The id of the dialog or a dialog
- * @return {Roo.BasicDialog} this
- */
- bringToFront : function(dlg){
- dlg = this.get(dlg);
- if(dlg != front){
- front = dlg;
- dlg._lastAccess = new Date().getTime();
- orderDialogs();
- }
- return dlg;
- },
-
- /**
- * Sends the specified dialog to the back
- * @param {String/Object} dlg The id of the dialog or a dialog
- * @return {Roo.BasicDialog} this
- */
- sendToBack : function(dlg){
- dlg = this.get(dlg);
- dlg._lastAccess = -(new Date().getTime());
- orderDialogs();
- return dlg;
- },
-
- /**
- * Hides all dialogs
- */
- hideAll : function(){
- for(var id in list){
- if(list[id] && typeof list[id] != "function" && list[id].isVisible()){
- list[id].hide();
- }
- }
- }
- };
-}();
-
-/**
- * @class Roo.LayoutDialog
- * @extends Roo.BasicDialog
- * Dialog which provides adjustments for working with a layout in a Dialog.
- * Add your necessary layout config options to the dialog's config.<br>
- * Example usage (including a nested layout):
- * <pre><code>
-if(!dialog){
- dialog = new Roo.LayoutDialog("download-dlg", {
- modal: true,
- width:600,
- height:450,
- shadow:true,
- minWidth:500,
- minHeight:350,
- autoTabs:true,
- proxyDrag:true,
- // layout config merges with the dialog config
- center:{
- tabPosition: "top",
- alwaysShowTabs: true
- }
- });
- dialog.addKeyListener(27, dialog.hide, dialog);
- dialog.setDefaultButton(dialog.addButton("Close", dialog.hide, dialog));
- dialog.addButton("Build It!", this.getDownload, this);
-
- // we can even add nested layouts
- var innerLayout = new Roo.BorderLayout("dl-inner", {
- east: {
- initialSize: 200,
- autoScroll:true,
- split:true
- },
- center: {
- autoScroll:true
- }
- });
- innerLayout.beginUpdate();
- innerLayout.add("east", new Roo.ContentPanel("dl-details"));
- innerLayout.add("center", new Roo.ContentPanel("selection-panel"));
- innerLayout.endUpdate(true);
-
- var layout = dialog.getLayout();
- layout.beginUpdate();
- layout.add("center", new Roo.ContentPanel("standard-panel",
- {title: "Download the Source", fitToFrame:true}));
- layout.add("center", new Roo.NestedLayoutPanel(innerLayout,
- {title: "Build your own roo.js"}));
- layout.getRegion("center").showPanel(sp);
- layout.endUpdate();
-}
-</code></pre>
- * @constructor
- * @param {String/HTMLElement/Roo.Element} el The id of or container element, or config
- * @param {Object} config configuration options
- */
-Roo.LayoutDialog = function(el, cfg){
-
- var config= cfg;
- if (typeof(cfg) == 'undefined') {
- config = Roo.apply({}, el);
- // not sure why we use documentElement here.. - it should always be body.
- // IE7 borks horribly if we use documentElement.
- el = Roo.get( Roo.isIE ? (document.body || document.documentElement) : (document.documentElement || document.body) ).createChild();
- //config.autoCreate = true;
- }
-
-
- config.autoTabs = false;
- Roo.LayoutDialog.superclass.constructor.call(this, el, config);
- this.body.setStyle({overflow:"hidden", position:"relative"});
- this.layout = new Roo.BorderLayout(this.body.dom, config);
- this.layout.monitorWindowResize = false;
- this.el.addClass("x-dlg-auto-layout");
- // fix case when center region overwrites center function
- this.center = Roo.BasicDialog.prototype.center;
- this.on("show", this.layout.layout, this.layout, true);
- if (config.items) {
- var xitems = config.items;
- delete config.items;
- Roo.each(xitems, this.addxtype, this);
- }
-
-
-};
-Roo.extend(Roo.LayoutDialog, Roo.BasicDialog, {
- /**
- * Ends update of the layout <strike>and resets display to none</strike>. Use standard beginUpdate/endUpdate on the layout.
- * @deprecated
- */
- endUpdate : function(){
- this.layout.endUpdate();
- },
-
- /**
- * Begins an update of the layout <strike>and sets display to block and visibility to hidden</strike>. Use standard beginUpdate/endUpdate on the layout.
- * @deprecated
- */
- beginUpdate : function(){
- this.layout.beginUpdate();
- },
-
- /**
- * Get the BorderLayout for this dialog
- * @return {Roo.BorderLayout}
- */
- getLayout : function(){
- return this.layout;
- },
-
- showEl : function(){
- Roo.LayoutDialog.superclass.showEl.apply(this, arguments);
- if(Roo.isIE7){
- this.layout.layout();
- }
- },
-
- // private
- // Use the syncHeightBeforeShow config option to control this automatically
- syncBodyHeight : function(){
- Roo.LayoutDialog.superclass.syncBodyHeight.call(this);
- if(this.layout){this.layout.layout();}
- },
-
- /**
- * Add an xtype element (actually adds to the layout.)
- * @return {Object} xdata xtype object data.
- */
-
- addxtype : function(c) {
- return this.layout.addxtype(c);
- }
-});/*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
- */
-
-/**
- * @class Roo.MessageBox
- * Utility class for generating different styles of message boxes. The alias Roo.Msg can also be used.
- * Example usage:
- *<pre><code>
-// Basic alert:
-Roo.Msg.alert('Status', 'Changes saved successfully.');
-
-// Prompt for user data:
-Roo.Msg.prompt('Name', 'Please enter your name:', function(btn, text){
- if (btn == 'ok'){
- // process text value...
- }
-});
-
-// Show a dialog using config options:
-Roo.Msg.show({
- title:'Save Changes?',
- msg: 'Your are closing a tab that has unsaved changes. Would you like to save your changes?',
- buttons: Roo.Msg.YESNOCANCEL,
- fn: processResult,
- animEl: 'elId'
-});
-</code></pre>
- * @singleton
- */
-Roo.MessageBox = function(){
- var dlg, opt, mask, waitTimer;
- var bodyEl, msgEl, textboxEl, textareaEl, progressEl, pp;
- var buttons, activeTextEl, bwidth;
-
- // private
- var handleButton = function(button){
- dlg.hide();
- Roo.callback(opt.fn, opt.scope||window, [button, activeTextEl.dom.value], 1);
- };
-
- // private
- var handleHide = function(){
- if(opt && opt.cls){
- dlg.el.removeClass(opt.cls);
- }
- if(waitTimer){
- Roo.TaskMgr.stop(waitTimer);
- waitTimer = null;
- }
- };
-
- // private
- var updateButtons = function(b){
- var width = 0;
- if(!b){
- buttons["ok"].hide();
- buttons["cancel"].hide();
- buttons["yes"].hide();
- buttons["no"].hide();
- dlg.footer.dom.style.display = 'none';
- return width;
- }
- dlg.footer.dom.style.display = '';
- for(var k in buttons){
- if(typeof buttons[k] != "function"){
- if(b[k]){
- buttons[k].show();
- buttons[k].setText(typeof b[k] == "string" ? b[k] : Roo.MessageBox.buttonText[k]);
- width += buttons[k].el.getWidth()+15;
- }else{
- buttons[k].hide();
- }
- }
- }
- return width;
- };
-
- // private
- var handleEsc = function(d, k, e){
- if(opt && opt.closable !== false){
- dlg.hide();
- }
- if(e){
- e.stopEvent();
- }
- };
-
- return {
- /**
- * Returns a reference to the underlying {@link Roo.BasicDialog} element
- * @return {Roo.BasicDialog} The BasicDialog element
- */
- getDialog : function(){
- if(!dlg){
- dlg = new Roo.BasicDialog("x-msg-box", {
- autoCreate : true,
- shadow: true,
- draggable: true,
- resizable:false,
- constraintoviewport:false,
- fixedcenter:true,
- collapsible : false,
- shim:true,
- modal: true,
- width:400, height:100,
- buttonAlign:"center",
- closeClick : function(){
- if(opt && opt.buttons && opt.buttons.no && !opt.buttons.cancel){
- handleButton("no");
- }else{
- handleButton("cancel");
- }
- }
- });
- dlg.on("hide", handleHide);
- mask = dlg.mask;
- dlg.addKeyListener(27, handleEsc);
- buttons = {};
- var bt = this.buttonText;
- buttons["ok"] = dlg.addButton(bt["ok"], handleButton.createCallback("ok"));
- buttons["yes"] = dlg.addButton(bt["yes"], handleButton.createCallback("yes"));
- buttons["no"] = dlg.addButton(bt["no"], handleButton.createCallback("no"));
- buttons["cancel"] = dlg.addButton(bt["cancel"], handleButton.createCallback("cancel"));
- bodyEl = dlg.body.createChild({
-
- html:'<span class="roo-mb-text"></span><br /><input type="text" class="roo-mb-input" /><textarea class="roo-mb-textarea"></textarea><div class="roo-mb-progress-wrap"><div class="roo-mb-progress"><div class="roo-mb-progress-bar"> </div></div></div>'
- });
- msgEl = bodyEl.dom.firstChild;
- textboxEl = Roo.get(bodyEl.dom.childNodes[2]);
- textboxEl.enableDisplayMode();
- textboxEl.addKeyListener([10,13], function(){
- if(dlg.isVisible() && opt && opt.buttons){
- if(opt.buttons.ok){
- handleButton("ok");
- }else if(opt.buttons.yes){
- handleButton("yes");
- }
- }
- });
- textareaEl = Roo.get(bodyEl.dom.childNodes[3]);
- textareaEl.enableDisplayMode();
- progressEl = Roo.get(bodyEl.dom.childNodes[4]);
- progressEl.enableDisplayMode();
- var pf = progressEl.dom.firstChild;
- if (pf) {
- pp = Roo.get(pf.firstChild);
- pp.setHeight(pf.offsetHeight);
- }
-
- }
- return dlg;
- },
-
- /**
- * Updates the message box body text
- * @param {String} text (optional) Replaces the message box element's innerHTML with the specified string (defaults to
- * the XHTML-compliant non-breaking space character '&#160;')
- * @return {Roo.MessageBox} This message box
- */
- updateText : function(text){
- if(!dlg.isVisible() && !opt.width){
- dlg.resizeTo(this.maxWidth, 100); // resize first so content is never clipped from previous shows
- }
- msgEl.innerHTML = text || ' ';
- var w = Math.max(Math.min(opt.width || msgEl.offsetWidth, this.maxWidth),
- Math.max(opt.minWidth || this.minWidth, bwidth));
- if(opt.prompt){
- activeTextEl.setWidth(w);
- }
- if(dlg.isVisible()){
- dlg.fixedcenter = false;
- }
- dlg.setContentSize(w, bodyEl.getHeight());
- if(dlg.isVisible()){
- dlg.fixedcenter = true;
- }
- return this;
- },
-
- /**
- * Updates a progress-style message box's text and progress bar. Only relevant on message boxes
- * initiated via {@link Roo.MessageBox#progress} or by calling {@link Roo.MessageBox#show} with progress: true.
- * @param {Number} value Any number between 0 and 1 (e.g., .5)
- * @param {String} text (optional) If defined, the message box's body text is replaced with the specified string (defaults to undefined)
- * @return {Roo.MessageBox} This message box
- */
- updateProgress : function(value, text){
- if(text){
- this.updateText(text);
- }
- if (pp) { // weird bug on my firefox - for some reason this is not defined
- pp.setWidth(Math.floor(value*progressEl.dom.firstChild.offsetWidth));
- }
- return this;
- },
-
- /**
- * Returns true if the message box is currently displayed
- * @return {Boolean} True if the message box is visible, else false
- */
- isVisible : function(){
- return dlg && dlg.isVisible();
- },
-
- /**
- * Hides the message box if it is displayed
- */
- hide : function(){
- if(this.isVisible()){
- dlg.hide();
- }
- },
-
- /**
- * Displays a new message box, or reinitializes an existing message box, based on the config options
- * passed in. All functions (e.g. prompt, alert, etc) on MessageBox call this function internally.
- * The following config object properties are supported:
- * <pre>
-Property Type Description
----------- --------------- ------------------------------------------------------------------------------------
-animEl String/Element An id or Element from which the message box should animate as it opens and
- closes (defaults to undefined)
-buttons Object/Boolean A button config object (e.g., Roo.MessageBox.OKCANCEL or {ok:'Foo',
- cancel:'Bar'}), or false to not show any buttons (defaults to false)
-closable Boolean False to hide the top-right close button (defaults to true). Note that
- progress and wait dialogs will ignore this property and always hide the
- close button as they can only be closed programmatically.
-cls String A custom CSS class to apply to the message box element
-defaultTextHeight Number The default height in pixels of the message box's multiline textarea if
- displayed (defaults to 75)
-fn Function A callback function to execute after closing the dialog. The arguments to the
- function will be btn (the name of the button that was clicked, if applicable,
- e.g. "ok"), and text (the value of the active text field, if applicable).
- Progress and wait dialogs will ignore this option since they do not respond to
- user actions and can only be closed programmatically, so any required function
- should be called by the same code after it closes the dialog.
-icon String A CSS class that provides a background image to be used as an icon for
- the dialog (e.g., Roo.MessageBox.WARNING or 'custom-class', defaults to '')
-maxWidth Number The maximum width in pixels of the message box (defaults to 600)
-minWidth Number The minimum width in pixels of the message box (defaults to 100)
-modal Boolean False to allow user interaction with the page while the message box is
- displayed (defaults to true)
-msg String A string that will replace the existing message box body text (defaults
- to the XHTML-compliant non-breaking space character ' ')
-multiline Boolean True to prompt the user to enter multi-line text (defaults to false)
-progress Boolean True to display a progress bar (defaults to false)
-progressText String The text to display inside the progress bar if progress = true (defaults to '')
-prompt Boolean True to prompt the user to enter single-line text (defaults to false)
-proxyDrag Boolean True to display a lightweight proxy while dragging (defaults to false)
-title String The title text
-value String The string value to set into the active textbox element if displayed
-wait Boolean True to display a progress bar (defaults to false)
-width Number The width of the dialog in pixels
-</pre>
- *
- * Example usage:
- * <pre><code>
-Roo.Msg.show({
- title: 'Address',
- msg: 'Please enter your address:',
- width: 300,
- buttons: Roo.MessageBox.OKCANCEL,
- multiline: true,
- fn: saveAddress,
- animEl: 'addAddressBtn'
-});
-</code></pre>
- * @param {Object} config Configuration options
- * @return {Roo.MessageBox} This message box
- */
- show : function(options){
- if(this.isVisible()){
- this.hide();
- }
- var d = this.getDialog();
- opt = options;
- d.setTitle(opt.title || " ");
- d.close.setDisplayed(opt.closable !== false);
- activeTextEl = textboxEl;
- opt.prompt = opt.prompt || (opt.multiline ? true : false);
- if(opt.prompt){
- if(opt.multiline){
- textboxEl.hide();
- textareaEl.show();
- textareaEl.setHeight(typeof opt.multiline == "number" ?
- opt.multiline : this.defaultTextHeight);
- activeTextEl = textareaEl;
- }else{
- textboxEl.show();
- textareaEl.hide();
- }
- }else{
- textboxEl.hide();
- textareaEl.hide();
- }
- progressEl.setDisplayed(opt.progress === true);
- this.updateProgress(0);
- activeTextEl.dom.value = opt.value || "";
- if(opt.prompt){
- dlg.setDefaultButton(activeTextEl);
- }else{
- var bs = opt.buttons;
- var db = null;
- if(bs && bs.ok){
- db = buttons["ok"];
- }else if(bs && bs.yes){
- db = buttons["yes"];
- }
- dlg.setDefaultButton(db);
- }
- bwidth = updateButtons(opt.buttons);
- this.updateText(opt.msg);
- if(opt.cls){
- d.el.addClass(opt.cls);
- }
- d.proxyDrag = opt.proxyDrag === true;
- d.modal = opt.modal !== false;
- d.mask = opt.modal !== false ? mask : false;
- if(!d.isVisible()){
- // force it to the end of the z-index stack so it gets a cursor in FF
- document.body.appendChild(dlg.el.dom);
- d.animateTarget = null;
- d.show(options.animEl);
- }
- return this;
- },
-
- /**
- * Displays a message box with a progress bar. This message box has no buttons and is not closeable by
- * the user. You are responsible for updating the progress bar as needed via {@link Roo.MessageBox#updateProgress}
- * and closing the message box when the process is complete.
- * @param {String} title The title bar text
- * @param {String} msg The message box body text
- * @return {Roo.MessageBox} This message box
- */
- progress : function(title, msg){
- this.show({
- title : title,
- msg : msg,
- buttons: false,
- progress:true,
- closable:false,
- minWidth: this.minProgressWidth,
- modal : true
- });
- return this;
- },
-
- /**
- * Displays a standard read-only message box with an OK button (comparable to the basic JavaScript Window.alert).
- * If a callback function is passed it will be called after the user clicks the button, and the
- * id of the button that was clicked will be passed as the only parameter to the callback
- * (could also be the top-right close button).
- * @param {String} title The title bar text
- * @param {String} msg The message box body text
- * @param {Function} fn (optional) The callback function invoked after the message box is closed
- * @param {Object} scope (optional) The scope of the callback function
- * @return {Roo.MessageBox} This message box
- */
- alert : function(title, msg, fn, scope){
- this.show({
- title : title,
- msg : msg,
- buttons: this.OK,
- fn: fn,
- scope : scope,
- modal : true
- });
- return this;
- },
-
- /**
- * Displays a message box with an infinitely auto-updating progress bar. This can be used to block user
- * interaction while waiting for a long-running process to complete that does not have defined intervals.
- * You are responsible for closing the message box when the process is complete.
- * @param {String} msg The message box body text
- * @param {String} title (optional) The title bar text
- * @return {Roo.MessageBox} This message box
- */
- wait : function(msg, title){
- this.show({
- title : title,
- msg : msg,
- buttons: false,
- closable:false,
- progress:true,
- modal:true,
- width:300,
- wait:true
- });
- waitTimer = Roo.TaskMgr.start({
- run: function(i){
- Roo.MessageBox.updateProgress(((((i+20)%20)+1)*5)*.01);
- },
- interval: 1000
- });
- return this;
- },
-
- /**
- * Displays a confirmation message box with Yes and No buttons (comparable to JavaScript's Window.confirm).
- * If a callback function is passed it will be called after the user clicks either button, and the id of the
- * button that was clicked will be passed as the only parameter to the callback (could also be the top-right close button).
- * @param {String} title The title bar text
- * @param {String} msg The message box body text
- * @param {Function} fn (optional) The callback function invoked after the message box is closed
- * @param {Object} scope (optional) The scope of the callback function
- * @return {Roo.MessageBox} This message box
- */
- confirm : function(title, msg, fn, scope){
- this.show({
- title : title,
- msg : msg,
- buttons: this.YESNO,
- fn: fn,
- scope : scope,
- modal : true
- });
- return this;
- },
-
- /**
- * Displays a message box with OK and Cancel buttons prompting the user to enter some text (comparable to
- * JavaScript's Window.prompt). The prompt can be a single-line or multi-line textbox. If a callback function
- * is passed it will be called after the user clicks either button, and the id of the button that was clicked
- * (could also be the top-right close button) and the text that was entered will be passed as the two
- * parameters to the callback.
- * @param {String} title The title bar text
- * @param {String} msg The message box body text
- * @param {Function} fn (optional) The callback function invoked after the message box is closed
- * @param {Object} scope (optional) The scope of the callback function
- * @param {Boolean/Number} multiline (optional) True to create a multiline textbox using the defaultTextHeight
- * property, or the height in pixels to create the textbox (defaults to false / single-line)
- * @return {Roo.MessageBox} This message box
- */
- prompt : function(title, msg, fn, scope, multiline){
- this.show({
- title : title,
- msg : msg,
- buttons: this.OKCANCEL,
- fn: fn,
- minWidth:250,
- scope : scope,
- prompt:true,
- multiline: multiline,
- modal : true
- });
- return this;
- },
-
- /**
- * Button config that displays a single OK button
- * @type Object
- */
- OK : {ok:true},
- /**
- * Button config that displays Yes and No buttons
- * @type Object
- */
- YESNO : {yes:true, no:true},
- /**
- * Button config that displays OK and Cancel buttons
- * @type Object
- */
- OKCANCEL : {ok:true, cancel:true},
- /**
- * Button config that displays Yes, No and Cancel buttons
- * @type Object
- */
- YESNOCANCEL : {yes:true, no:true, cancel:true},
-
- /**
- * The default height in pixels of the message box's multiline textarea if displayed (defaults to 75)
- * @type Number
- */
- defaultTextHeight : 75,
- /**
- * The maximum width in pixels of the message box (defaults to 600)
- * @type Number
- */
- maxWidth : 600,
- /**
- * The minimum width in pixels of the message box (defaults to 100)
- * @type Number
- */
- minWidth : 100,
- /**
- * The minimum width in pixels of the message box if it is a progress-style dialog. This is useful
- * for setting a different minimum width than text-only dialogs may need (defaults to 250)
- * @type Number
- */
- minProgressWidth : 250,
- /**
- * An object containing the default button text strings that can be overriden for localized language support.
- * Supported properties are: ok, cancel, yes and no.
- * Customize the default text like so: Roo.MessageBox.buttonText.yes = "S?";
- * @type Object
- */
- buttonText : {
- ok : "OK",
- cancel : "Cancel",
- yes : "Yes",
- no : "No"
- }
- };
-}();
-
-/**
- * Shorthand for {@link Roo.MessageBox}
- */
-Roo.Msg = Roo.MessageBox;/*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
- */
-/**
- * @class Roo.QuickTips
- * Provides attractive and customizable tooltips for any element.
- * @singleton
- */
-Roo.QuickTips = function(){
- var el, tipBody, tipBodyText, tipTitle, tm, cfg, close, tagEls = {}, esc, removeCls = null, bdLeft, bdRight;
- var ce, bd, xy, dd;
- var visible = false, disabled = true, inited = false;
- var showProc = 1, hideProc = 1, dismissProc = 1, locks = [];
-
- var onOver = function(e){
- if(disabled){
- return;
- }
- var t = e.getTarget();
- if(!t || t.nodeType !== 1 || t == document || t == document.body){
- return;
- }
- if(ce && t == ce.el){
- clearTimeout(hideProc);
- return;
- }
- if(t && tagEls[t.id]){
- tagEls[t.id].el = t;
- showProc = show.defer(tm.showDelay, tm, [tagEls[t.id]]);
- return;
- }
- var ttp, et = Roo.fly(t);
- var ns = cfg.namespace;
- if(tm.interceptTitles && t.title){
- ttp = t.title;
- t.qtip = ttp;
- t.removeAttribute("title");
- e.preventDefault();
- }else{
- ttp = t.qtip || et.getAttributeNS(ns, cfg.attribute);
- }
- if(ttp){
- showProc = show.defer(tm.showDelay, tm, [{
- el: t,
- text: ttp,
- width: et.getAttributeNS(ns, cfg.width),
- autoHide: et.getAttributeNS(ns, cfg.hide) != "user",
- title: et.getAttributeNS(ns, cfg.title),
- cls: et.getAttributeNS(ns, cfg.cls)
- }]);
- }
- };
-
- var onOut = function(e){
- clearTimeout(showProc);
- var t = e.getTarget();
- if(t && ce && ce.el == t && (tm.autoHide && ce.autoHide !== false)){
- hideProc = setTimeout(hide, tm.hideDelay);
- }
- };
-
- var onMove = function(e){
- if(disabled){
- return;
- }
- xy = e.getXY();
- xy[1] += 18;
- if(tm.trackMouse && ce){
- el.setXY(xy);
- }
- };
-
- var onDown = function(e){
- clearTimeout(showProc);
- clearTimeout(hideProc);
- if(!e.within(el)){
- if(tm.hideOnClick){
- hide();
- tm.disable();
- tm.enable.defer(100, tm);
- }
- }
- };
-
- var getPad = function(){
- return 2;//bdLeft.getPadding('l')+bdRight.getPadding('r');
- };
-
- var show = function(o){
- if(disabled){
- return;
- }
- clearTimeout(dismissProc);
- ce = o;
- if(removeCls){ // in case manually hidden
- el.removeClass(removeCls);
- removeCls = null;
- }
- if(ce.cls){
- el.addClass(ce.cls);
- removeCls = ce.cls;
- }
- if(ce.title){
- tipTitle.update(ce.title);
- tipTitle.show();
- }else{
- tipTitle.update('');
- tipTitle.hide();
- }
- el.dom.style.width = tm.maxWidth+'px';
- //tipBody.dom.style.width = '';
- tipBodyText.update(o.text);
- var p = getPad(), w = ce.width;
- if(!w){
- var td = tipBodyText.dom;
- var aw = Math.max(td.offsetWidth, td.clientWidth, td.scrollWidth);
- if(aw > tm.maxWidth){
- w = tm.maxWidth;
- }else if(aw < tm.minWidth){
- w = tm.minWidth;
- }else{
- w = aw;
- }
- }
- //tipBody.setWidth(w);
- el.setWidth(parseInt(w, 10) + p);
- if(ce.autoHide === false){
- close.setDisplayed(true);
- if(dd){
- dd.unlock();
- }
- }else{
- close.setDisplayed(false);
- if(dd){
- dd.lock();
- }
- }
- if(xy){
- el.avoidY = xy[1]-18;
- el.setXY(xy);
- }
- if(tm.animate){
- el.setOpacity(.1);
- el.setStyle("visibility", "visible");
- el.fadeIn({callback: afterShow});
- }else{
- afterShow();
- }
- };
-
- var afterShow = function(){
- if(ce){
- el.show();
- esc.enable();
- if(tm.autoDismiss && ce.autoHide !== false){
- dismissProc = setTimeout(hide, tm.autoDismissDelay);
- }
- }
- };
-
- var hide = function(noanim){
- clearTimeout(dismissProc);
- clearTimeout(hideProc);
- ce = null;
- if(el.isVisible()){
- esc.disable();
- if(noanim !== true && tm.animate){
- el.fadeOut({callback: afterHide});
- }else{
- afterHide();
- }
- }
- };
-
- var afterHide = function(){
- el.hide();
- if(removeCls){
- el.removeClass(removeCls);
- removeCls = null;
- }
- };
-
- return {
- /**
- * @cfg {Number} minWidth
- * The minimum width of the quick tip (defaults to 40)
- */
- minWidth : 40,
- /**
- * @cfg {Number} maxWidth
- * The maximum width of the quick tip (defaults to 300)
- */
- maxWidth : 300,
- /**
- * @cfg {Boolean} interceptTitles
- * True to automatically use the element's DOM title value if available (defaults to false)
- */
- interceptTitles : false,
- /**
- * @cfg {Boolean} trackMouse
- * True to have the quick tip follow the mouse as it moves over the target element (defaults to false)
- */
- trackMouse : false,
- /**
- * @cfg {Boolean} hideOnClick
- * True to hide the quick tip if the user clicks anywhere in the document (defaults to true)
- */
- hideOnClick : true,
- /**
- * @cfg {Number} showDelay
- * Delay in milliseconds before the quick tip displays after the mouse enters the target element (defaults to 500)
- */
- showDelay : 500,
- /**
- * @cfg {Number} hideDelay
- * Delay in milliseconds before the quick tip hides when autoHide = true (defaults to 200)
- */
- hideDelay : 200,
- /**
- * @cfg {Boolean} autoHide
- * True to automatically hide the quick tip after the mouse exits the target element (defaults to true).
- * Used in conjunction with hideDelay.
- */
- autoHide : true,
- /**
- * @cfg {Boolean}
- * True to automatically hide the quick tip after a set period of time, regardless of the user's actions
- * (defaults to true). Used in conjunction with autoDismissDelay.
- */
- autoDismiss : true,
- /**
- * @cfg {Number}
- * Delay in milliseconds before the quick tip hides when autoDismiss = true (defaults to 5000)
- */
- autoDismissDelay : 5000,
- /**
- * @cfg {Boolean} animate
- * True to turn on fade animation. Defaults to false (ClearType/scrollbar flicker issues in IE7).
- */
- animate : false,
-
- /**
- * @cfg {String} title
- * Title text to display (defaults to ''). This can be any valid HTML markup.
- */
- title: '',
- /**
- * @cfg {String} text
- * Body text to display (defaults to ''). This can be any valid HTML markup.
- */
- text : '',
- /**
- * @cfg {String} cls
- * A CSS class to apply to the base quick tip element (defaults to '').
- */
- cls : '',
- /**
- * @cfg {Number} width
- * Width in pixels of the quick tip (defaults to auto). Width will be ignored if it exceeds the bounds of
- * minWidth or maxWidth.
- */
- width : null,
-
- /**
- * Initialize and enable QuickTips for first use. This should be called once before the first attempt to access
- * or display QuickTips in a page.
- */
- init : function(){
- tm = Roo.QuickTips;
- cfg = tm.tagConfig;
- if(!inited){
- if(!Roo.isReady){ // allow calling of init() before onReady
- Roo.onReady(Roo.QuickTips.init, Roo.QuickTips);
- return;
- }
- el = new Roo.Layer({cls:"x-tip", shadow:"drop", shim: true, constrain:true, shadowOffset:4});
- el.fxDefaults = {stopFx: true};
- // maximum custom styling
- //el.update('<div class="x-tip-top-left"><div class="x-tip-top-right"><div class="x-tip-top"></div></div></div><div class="x-tip-bd-left"><div class="x-tip-bd-right"><div class="x-tip-bd"><div class="x-tip-close"></div><h3></h3><div class="x-tip-bd-inner"></div><div class="x-clear"></div></div></div></div><div class="x-tip-ft-left"><div class="x-tip-ft-right"><div class="x-tip-ft"></div></div></div>');
- el.update('<div class="x-tip-bd"><div class="x-tip-close"></div><h3></h3><div class="x-tip-bd-inner"></div><div class="x-clear"></div></div>');
- tipTitle = el.child('h3');
- tipTitle.enableDisplayMode("block");
- tipBody = el.child('div.x-tip-bd');
- tipBodyText = el.child('div.x-tip-bd-inner');
- //bdLeft = el.child('div.x-tip-bd-left');
- //bdRight = el.child('div.x-tip-bd-right');
- close = el.child('div.x-tip-close');
- close.enableDisplayMode("block");
- close.on("click", hide);
- var d = Roo.get(document);
- d.on("mousedown", onDown);
- d.on("mouseover", onOver);
- d.on("mouseout", onOut);
- d.on("mousemove", onMove);
- esc = d.addKeyListener(27, hide);
- esc.disable();
- if(Roo.dd.DD){
- dd = el.initDD("default", null, {
- onDrag : function(){
- el.sync();
- }
- });
- dd.setHandleElId(tipTitle.id);
- dd.lock();
- }
- inited = true;
- }
- this.enable();
- },
-
- /**
- * Configures a new quick tip instance and assigns it to a target element. The following config options
- * are supported:
- * <pre>
-Property Type Description
----------- --------------------- ------------------------------------------------------------------------
-target Element/String/Array An Element, id or array of ids that this quick tip should be tied to
- * </ul>
- * @param {Object} config The config object
- */
- register : function(config){
- var cs = config instanceof Array ? config : arguments;
- for(var i = 0, len = cs.length; i < len; i++) {
- var c = cs[i];
- var target = c.target;
- if(target){
- if(target instanceof Array){
- for(var j = 0, jlen = target.length; j < jlen; j++){
- tagEls[target[j]] = c;
- }
- }else{
- tagEls[typeof target == 'string' ? target : Roo.id(target)] = c;
- }
- }
- }
- },
-
- /**
- * Removes this quick tip from its element and destroys it.
- * @param {String/HTMLElement/Element} el The element from which the quick tip is to be removed.
- */
- unregister : function(el){
- delete tagEls[Roo.id(el)];
- },
-
- /**
- * Enable this quick tip.
- */
- enable : function(){
- if(inited && disabled){
- locks.pop();
- if(locks.length < 1){
- disabled = false;
- }
- }
- },
-
- /**
- * Disable this quick tip.
- */
- disable : function(){
- disabled = true;
- clearTimeout(showProc);
- clearTimeout(hideProc);
- clearTimeout(dismissProc);
- if(ce){
- hide(true);
- }
- locks.push(1);
- },
-
- /**
- * Returns true if the quick tip is enabled, else false.
- */
- isEnabled : function(){
- return !disabled;
- },
-
- // private
- tagConfig : {
- namespace : "ext",
- attribute : "qtip",
- width : "width",
- target : "target",
- title : "qtitle",
- hide : "hide",
- cls : "qclass"
- }
- };
-}();
-
-// backwards compat
-Roo.QuickTips.tips = Roo.QuickTips.register;/*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
- */
-
-
-/**
- * @class Roo.tree.TreePanel
- * @extends Roo.data.Tree
-
- * @cfg {Boolean} rootVisible false to hide the root node (defaults to true)
- * @cfg {Boolean} lines false to disable tree lines (defaults to true)
- * @cfg {Boolean} enableDD true to enable drag and drop
- * @cfg {Boolean} enableDrag true to enable just drag
- * @cfg {Boolean} enableDrop true to enable just drop
- * @cfg {Object} dragConfig Custom config to pass to the {@link Roo.tree.TreeDragZone} instance
- * @cfg {Object} dropConfig Custom config to pass to the {@link Roo.tree.TreeDropZone} instance
- * @cfg {String} ddGroup The DD group this TreePanel belongs to
- * @cfg {String} ddAppendOnly True if the tree should only allow append drops (use for trees which are sorted)
- * @cfg {Boolean} ddScroll true to enable YUI body scrolling
- * @cfg {Boolean} containerScroll true to register this container with ScrollManager
- * @cfg {Boolean} hlDrop false to disable node highlight on drop (defaults to the value of Roo.enableFx)
- * @cfg {String} hlColor The color of the node highlight (defaults to C3DAF9)
- * @cfg {Boolean} animate true to enable animated expand/collapse (defaults to the value of Roo.enableFx)
- * @cfg {Boolean} singleExpand true if only 1 node per branch may be expanded
- * @cfg {Boolean} selModel A tree selection model to use with this TreePanel (defaults to a {@link Roo.tree.DefaultSelectionModel})
- * @cfg {Boolean} loader A TreeLoader for use with this TreePanel
- * @cfg {String} pathSeparator The token used to separate sub-paths in path strings (defaults to '/')
- * @cfg {Function} renderer Sets the rendering (formatting) function for the nodes. to return HTML markup for the tree view. The render function is called with the following parameters:<ul><li>The {Object} The data for the node.</li></ul>
- * @cfg {Function} rendererTip Sets the rendering (formatting) function for the nodes hovertip to return HTML markup for the tree view. The render function is called with the following parameters:<ul><li>The {Object} The data for the node.</li></ul>
- *
- * @constructor
- * @param {String/HTMLElement/Element} el The container element
- * @param {Object} config
- */
-Roo.tree.TreePanel = function(el, config){
- var root = false;
- var loader = false;
- if (config.root) {
- root = config.root;
- delete config.root;
- }
- if (config.loader) {
- loader = config.loader;
- delete config.loader;
- }
-
- Roo.apply(this, config);
- Roo.tree.TreePanel.superclass.constructor.call(this);
- this.el = Roo.get(el);
- this.el.addClass('x-tree');
- //console.log(root);
- if (root) {
- this.setRootNode( Roo.factory(root, Roo.tree));
- }
- if (loader) {
- this.loader = Roo.factory(loader, Roo.tree);
- }
- /**
- * Read-only. The id of the container element becomes this TreePanel's id.
- */
- this.id = this.el.id;
- this.addEvents({
- /**
- * @event beforeload
- * Fires before a node is loaded, return false to cancel
- * @param {Node} node The node being loaded
- */
- "beforeload" : true,
- /**
- * @event load
- * Fires when a node is loaded
- * @param {Node} node The node that was loaded
- */
- "load" : true,
- /**
- * @event textchange
- * Fires when the text for a node is changed
- * @param {Node} node The node
- * @param {String} text The new text
- * @param {String} oldText The old text
- */
- "textchange" : true,
- /**
- * @event beforeexpand
- * Fires before a node is expanded, return false to cancel.
- * @param {Node} node The node
- * @param {Boolean} deep
- * @param {Boolean} anim
- */
- "beforeexpand" : true,
- /**
- * @event beforecollapse
- * Fires before a node is collapsed, return false to cancel.
- * @param {Node} node The node
- * @param {Boolean} deep
- * @param {Boolean} anim
- */
- "beforecollapse" : true,
- /**
- * @event expand
- * Fires when a node is expanded
- * @param {Node} node The node
- */
- "expand" : true,
- /**
- * @event disabledchange
- * Fires when the disabled status of a node changes
- * @param {Node} node The node
- * @param {Boolean} disabled
- */
- "disabledchange" : true,
- /**
- * @event collapse
- * Fires when a node is collapsed
- * @param {Node} node The node
- */
- "collapse" : true,
- /**
- * @event beforeclick
- * Fires before click processing on a node. Return false to cancel the default action.
- * @param {Node} node The node
- * @param {Roo.EventObject} e The event object
- */
- "beforeclick":true,
- /**
- * @event checkchange
- * Fires when a node with a checkbox's checked property changes
- * @param {Node} this This node
- * @param {Boolean} checked
- */
- "checkchange":true,
- /**
- * @event click
- * Fires when a node is clicked
- * @param {Node} node The node
- * @param {Roo.EventObject} e The event object
- */
- "click":true,
- /**
- * @event dblclick
- * Fires when a node is double clicked
- * @param {Node} node The node
- * @param {Roo.EventObject} e The event object
- */
- "dblclick":true,
- /**
- * @event contextmenu
- * Fires when a node is right clicked
- * @param {Node} node The node
- * @param {Roo.EventObject} e The event object
- */
- "contextmenu":true,
- /**
- * @event beforechildrenrendered
- * Fires right before the child nodes for a node are rendered
- * @param {Node} node The node
- */
- "beforechildrenrendered":true,
- /**
- * @event startdrag
- * Fires when a node starts being dragged
- * @param {Roo.tree.TreePanel} this
- * @param {Roo.tree.TreeNode} node
- * @param {event} e The raw browser event
- */
- "startdrag" : true,
- /**
- * @event enddrag
- * Fires when a drag operation is complete
- * @param {Roo.tree.TreePanel} this
- * @param {Roo.tree.TreeNode} node
- * @param {event} e The raw browser event
- */
- "enddrag" : true,
- /**
- * @event dragdrop
- * Fires when a dragged node is dropped on a valid DD target
- * @param {Roo.tree.TreePanel} this
- * @param {Roo.tree.TreeNode} node
- * @param {DD} dd The dd it was dropped on
- * @param {event} e The raw browser event
- */
- "dragdrop" : true,
- /**
- * @event beforenodedrop
- * Fires when a DD object is dropped on a node in this tree for preprocessing. Return false to cancel the drop. The dropEvent
- * passed to handlers has the following properties:<br />
- * <ul style="padding:5px;padding-left:16px;">
- * <li>tree - The TreePanel</li>
- * <li>target - The node being targeted for the drop</li>
- * <li>data - The drag data from the drag source</li>
- * <li>point - The point of the drop - append, above or below</li>
- * <li>source - The drag source</li>
- * <li>rawEvent - Raw mouse event</li>
- * <li>dropNode - Drop node(s) provided by the source <b>OR</b> you can supply node(s)
- * to be inserted by setting them on this object.</li>
- * <li>cancel - Set this to true to cancel the drop.</li>
- * </ul>
- * @param {Object} dropEvent
- */
- "beforenodedrop" : true,
- /**
- * @event nodedrop
- * Fires after a DD object is dropped on a node in this tree. The dropEvent
- * passed to handlers has the following properties:<br />
- * <ul style="padding:5px;padding-left:16px;">
- * <li>tree - The TreePanel</li>
- * <li>target - The node being targeted for the drop</li>
- * <li>data - The drag data from the drag source</li>
- * <li>point - The point of the drop - append, above or below</li>
- * <li>source - The drag source</li>
- * <li>rawEvent - Raw mouse event</li>
- * <li>dropNode - Dropped node(s).</li>
- * </ul>
- * @param {Object} dropEvent
- */
- "nodedrop" : true,
- /**
- * @event nodedragover
- * Fires when a tree node is being targeted for a drag drop, return false to signal drop not allowed. The dragOverEvent
- * passed to handlers has the following properties:<br />
- * <ul style="padding:5px;padding-left:16px;">
- * <li>tree - The TreePanel</li>
- * <li>target - The node being targeted for the drop</li>
- * <li>data - The drag data from the drag source</li>
- * <li>point - The point of the drop - append, above or below</li>
- * <li>source - The drag source</li>
- * <li>rawEvent - Raw mouse event</li>
- * <li>dropNode - Drop node(s) provided by the source.</li>
- * <li>cancel - Set this to true to signal drop not allowed.</li>
- * </ul>
- * @param {Object} dragOverEvent
- */
- "nodedragover" : true
-
- });
- if(this.singleExpand){
- this.on("beforeexpand", this.restrictExpand, this);
- }
-};
-Roo.extend(Roo.tree.TreePanel, Roo.data.Tree, {
- rootVisible : true,
- animate: Roo.enableFx,
- lines : true,
- enableDD : false,
- hlDrop : Roo.enableFx,
-
- renderer: false,
-
- rendererTip: false,
- // private
- restrictExpand : function(node){
- var p = node.parentNode;
- if(p){
- if(p.expandedChild && p.expandedChild.parentNode == p){
- p.expandedChild.collapse();
- }
- p.expandedChild = node;
- }
- },
-
- // private override
- setRootNode : function(node){
- Roo.tree.TreePanel.superclass.setRootNode.call(this, node);
- if(!this.rootVisible){
- node.ui = new Roo.tree.RootTreeNodeUI(node);
- }
- return node;
- },
-
- /**
- * Returns the container element for this TreePanel
- */
- getEl : function(){
- return this.el;
- },
-
- /**
- * Returns the default TreeLoader for this TreePanel
- */
- getLoader : function(){
- return this.loader;
- },
-
- /**
- * Expand all nodes
- */
- expandAll : function(){
- this.root.expand(true);
- },
-
- /**
- * Collapse all nodes
- */
- collapseAll : function(){
- this.root.collapse(true);
- },
-
- /**
- * Returns the selection model used by this TreePanel
- */
- getSelectionModel : function(){
- if(!this.selModel){
- this.selModel = new Roo.tree.DefaultSelectionModel();
- }
- return this.selModel;
- },
-
- /**
- * Retrieve an array of checked nodes, or an array of a specific attribute of checked nodes (e.g. "id")
- * @param {String} attribute (optional) Defaults to null (return the actual nodes)
- * @param {TreeNode} startNode (optional) The node to start from, defaults to the root
- * @return {Array}
- */
- getChecked : function(a, startNode){
- startNode = startNode || this.root;
- var r = [];
- var f = function(){
- if(this.attributes.checked){
- r.push(!a ? this : (a == 'id' ? this.id : this.attributes[a]));
- }
- }
- startNode.cascade(f);
- return r;
- },
-
- /**
- * Expands a specified path in this TreePanel. A path can be retrieved from a node with {@link Roo.data.Node#getPath}
- * @param {String} path
- * @param {String} attr (optional) The attribute used in the path (see {@link Roo.data.Node#getPath} for more info)
- * @param {Function} callback (optional) The callback to call when the expand is complete. The callback will be called with
- * (bSuccess, oLastNode) where bSuccess is if the expand was successful and oLastNode is the last node that was expanded.
- */
- expandPath : function(path, attr, callback){
- attr = attr || "id";
- var keys = path.split(this.pathSeparator);
- var curNode = this.root;
- if(curNode.attributes[attr] != keys[1]){ // invalid root
- if(callback){
- callback(false, null);
- }
- return;
- }
- var index = 1;
- var f = function(){
- if(++index == keys.length){
- if(callback){
- callback(true, curNode);
- }
- return;
- }
- var c = curNode.findChild(attr, keys[index]);
- if(!c){
- if(callback){
- callback(false, curNode);
- }
- return;
- }
- curNode = c;
- c.expand(false, false, f);
- };
- curNode.expand(false, false, f);
- },
-
- /**
- * Selects the node in this tree at the specified path. A path can be retrieved from a node with {@link Roo.data.Node#getPath}
- * @param {String} path
- * @param {String} attr (optional) The attribute used in the path (see {@link Roo.data.Node#getPath} for more info)
- * @param {Function} callback (optional) The callback to call when the selection is complete. The callback will be called with
- * (bSuccess, oSelNode) where bSuccess is if the selection was successful and oSelNode is the selected node.
- */
- selectPath : function(path, attr, callback){
- attr = attr || "id";
- var keys = path.split(this.pathSeparator);
- var v = keys.pop();
- if(keys.length > 0){
- var f = function(success, node){
- if(success && node){
- var n = node.findChild(attr, v);
- if(n){
- n.select();
- if(callback){
- callback(true, n);
- }
- }else if(callback){
- callback(false, n);
- }
- }else{
- if(callback){
- callback(false, n);
- }
- }
- };
- this.expandPath(keys.join(this.pathSeparator), attr, f);
- }else{
- this.root.select();
- if(callback){
- callback(true, this.root);
- }
- }
- },
-
- getTreeEl : function(){
- return this.el;
- },
-
- /**
- * Trigger rendering of this TreePanel
- */
- render : function(){
- if (this.innerCt) {
- return this; // stop it rendering more than once!!
- }
-
- this.innerCt = this.el.createChild({tag:"ul",
- cls:"x-tree-root-ct " +
- (this.lines ? "x-tree-lines" : "x-tree-no-lines")});
-
- if(this.containerScroll){
- Roo.dd.ScrollManager.register(this.el);
- }
- if((this.enableDD || this.enableDrop) && !this.dropZone){
- /**
- * The dropZone used by this tree if drop is enabled
- * @type Roo.tree.TreeDropZone
- */
- this.dropZone = new Roo.tree.TreeDropZone(this, this.dropConfig || {
- ddGroup: this.ddGroup || "TreeDD", appendOnly: this.ddAppendOnly === true
- });
- }
- if((this.enableDD || this.enableDrag) && !this.dragZone){
- /**
- * The dragZone used by this tree if drag is enabled
- * @type Roo.tree.TreeDragZone
- */
- this.dragZone = new Roo.tree.TreeDragZone(this, this.dragConfig || {
- ddGroup: this.ddGroup || "TreeDD",
- scroll: this.ddScroll
- });
- }
- this.getSelectionModel().init(this);
- if (!this.root) {
- console.log("ROOT not set in tree");
- return;
- }
- this.root.render();
- if(!this.rootVisible){
- this.root.renderChildren();
- }
- return this;
- }
-});/*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
- */
-
-
-/**
- * @class Roo.tree.DefaultSelectionModel
- * @extends Roo.util.Observable
- * The default single selection for a TreePanel.
- */
-Roo.tree.DefaultSelectionModel = function(){
- this.selNode = null;
-
- this.addEvents({
- /**
- * @event selectionchange
- * Fires when the selected node changes
- * @param {DefaultSelectionModel} this
- * @param {TreeNode} node the new selection
- */
- "selectionchange" : true,
-
- /**
- * @event beforeselect
- * Fires before the selected node changes, return false to cancel the change
- * @param {DefaultSelectionModel} this
- * @param {TreeNode} node the new selection
- * @param {TreeNode} node the old selection
- */
- "beforeselect" : true
- });
-};
-
-Roo.extend(Roo.tree.DefaultSelectionModel, Roo.util.Observable, {
- init : function(tree){
- this.tree = tree;
- tree.getTreeEl().on("keydown", this.onKeyDown, this);
- tree.on("click", this.onNodeClick, this);
- },
-
- onNodeClick : function(node, e){
- if (e.ctrlKey && this.selNode == node) {
- this.unselect(node);
- return;
- }
- this.select(node);
- },
-
- /**
- * Select a node.
- * @param {TreeNode} node The node to select
- * @return {TreeNode} The selected node
- */
- select : function(node){
- var last = this.selNode;
- if(last != node && this.fireEvent('beforeselect', this, node, last) !== false){
- if(last){
- last.ui.onSelectedChange(false);
- }
- this.selNode = node;
- node.ui.onSelectedChange(true);
- this.fireEvent("selectionchange", this, node, last);
- }
- return node;
- },
-
- /**
- * Deselect a node.
- * @param {TreeNode} node The node to unselect
- */
- unselect : function(node){
- if(this.selNode == node){
- this.clearSelections();
- }
- },
-
- /**
- * Clear all selections
- */
- clearSelections : function(){
- var n = this.selNode;
- if(n){
- n.ui.onSelectedChange(false);
- this.selNode = null;
- this.fireEvent("selectionchange", this, null);
- }
- return n;
- },
-
- /**
- * Get the selected node
- * @return {TreeNode} The selected node
- */
- getSelectedNode : function(){
- return this.selNode;
- },
-
- /**
- * Returns true if the node is selected
- * @param {TreeNode} node The node to check
- * @return {Boolean}
- */
- isSelected : function(node){
- return this.selNode == node;
- },
-
- /**
- * Selects the node above the selected node in the tree, intelligently walking the nodes
- * @return TreeNode The new selection
- */
- selectPrevious : function(){
- var s = this.selNode || this.lastSelNode;
- if(!s){
- return null;
- }
- var ps = s.previousSibling;
- if(ps){
- if(!ps.isExpanded() || ps.childNodes.length < 1){
- return this.select(ps);
- } else{
- var lc = ps.lastChild;
- while(lc && lc.isExpanded() && lc.childNodes.length > 0){
- lc = lc.lastChild;
- }
- return this.select(lc);
- }
- } else if(s.parentNode && (this.tree.rootVisible || !s.parentNode.isRoot)){
- return this.select(s.parentNode);
- }
- return null;
- },
-
- /**
- * Selects the node above the selected node in the tree, intelligently walking the nodes
- * @return TreeNode The new selection
- */
- selectNext : function(){
- var s = this.selNode || this.lastSelNode;
- if(!s){
- return null;
- }
- if(s.firstChild && s.isExpanded()){
- return this.select(s.firstChild);
- }else if(s.nextSibling){
- return this.select(s.nextSibling);
- }else if(s.parentNode){
- var newS = null;
- s.parentNode.bubble(function(){
- if(this.nextSibling){
- newS = this.getOwnerTree().selModel.select(this.nextSibling);
- return false;
- }
- });
- return newS;
- }
- return null;
- },
-
- onKeyDown : function(e){
- var s = this.selNode || this.lastSelNode;
- // undesirable, but required
- var sm = this;
- if(!s){
- return;
- }
- var k = e.getKey();
- switch(k){
- case e.DOWN:
- e.stopEvent();
- this.selectNext();
- break;
- case e.UP:
- e.stopEvent();
- this.selectPrevious();
- break;
- case e.RIGHT:
- e.preventDefault();
- if(s.hasChildNodes()){
- if(!s.isExpanded()){
- s.expand();
- }else if(s.firstChild){
- this.select(s.firstChild, e);
- }
- }
- break;
- case e.LEFT:
- e.preventDefault();
- if(s.hasChildNodes() && s.isExpanded()){
- s.collapse();
- }else if(s.parentNode && (this.tree.rootVisible || s.parentNode != this.tree.getRootNode())){
- this.select(s.parentNode, e);
- }
- break;
- };
- }
-});
-
-/**
- * @class Roo.tree.MultiSelectionModel
- * @extends Roo.util.Observable
- * Multi selection for a TreePanel.
- */
-Roo.tree.MultiSelectionModel = function(){
- this.selNodes = [];
- this.selMap = {};
- this.addEvents({
- /**
- * @event selectionchange
- * Fires when the selected nodes change
- * @param {MultiSelectionModel} this
- * @param {Array} nodes Array of the selected nodes
- */
- "selectionchange" : true
- });
-};
-
-Roo.extend(Roo.tree.MultiSelectionModel, Roo.util.Observable, {
- init : function(tree){
- this.tree = tree;
- tree.getTreeEl().on("keydown", this.onKeyDown, this);
- tree.on("click", this.onNodeClick, this);
- },
-
- onNodeClick : function(node, e){
- this.select(node, e, e.ctrlKey);
- },
-
- /**
- * Select a node.
- * @param {TreeNode} node The node to select
- * @param {EventObject} e (optional) An event associated with the selection
- * @param {Boolean} keepExisting True to retain existing selections
- * @return {TreeNode} The selected node
- */
- select : function(node, e, keepExisting){
- if(keepExisting !== true){
- this.clearSelections(true);
- }
- if(this.isSelected(node)){
- this.lastSelNode = node;
- return node;
- }
- this.selNodes.push(node);
- this.selMap[node.id] = node;
- this.lastSelNode = node;
- node.ui.onSelectedChange(true);
- this.fireEvent("selectionchange", this, this.selNodes);
- return node;
- },
-
- /**
- * Deselect a node.
- * @param {TreeNode} node The node to unselect
- */
- unselect : function(node){
- if(this.selMap[node.id]){
- node.ui.onSelectedChange(false);
- var sn = this.selNodes;
- var index = -1;
- if(sn.indexOf){
- index = sn.indexOf(node);
- }else{
- for(var i = 0, len = sn.length; i < len; i++){
- if(sn[i] == node){
- index = i;
- break;
- }
- }
- }
- if(index != -1){
- this.selNodes.splice(index, 1);
- }
- delete this.selMap[node.id];
- this.fireEvent("selectionchange", this, this.selNodes);
- }
- },
-
- /**
- * Clear all selections
- */
- clearSelections : function(suppressEvent){
- var sn = this.selNodes;
- if(sn.length > 0){
- for(var i = 0, len = sn.length; i < len; i++){
- sn[i].ui.onSelectedChange(false);
- }
- this.selNodes = [];
- this.selMap = {};
- if(suppressEvent !== true){
- this.fireEvent("selectionchange", this, this.selNodes);
- }
- }
- },
-
- /**
- * Returns true if the node is selected
- * @param {TreeNode} node The node to check
- * @return {Boolean}
- */
- isSelected : function(node){
- return this.selMap[node.id] ? true : false;
- },
-
- /**
- * Returns an array of the selected nodes
- * @return {Array}
- */
- getSelectedNodes : function(){
- return this.selNodes;
- },
-
- onKeyDown : Roo.tree.DefaultSelectionModel.prototype.onKeyDown,
-
- selectNext : Roo.tree.DefaultSelectionModel.prototype.selectNext,
-
- selectPrevious : Roo.tree.DefaultSelectionModel.prototype.selectPrevious
-});/*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
- */
-
-/**
- * @class Roo.tree.TreeNode
- * @extends Roo.data.Node
- * @cfg {String} text The text for this node
- * @cfg {Boolean} expanded true to start the node expanded
- * @cfg {Boolean} allowDrag false to make this node undraggable if DD is on (defaults to true)
- * @cfg {Boolean} allowDrop false if this node cannot be drop on
- * @cfg {Boolean} disabled true to start the node disabled
- * @cfg {String} icon The path to an icon for the node. The preferred way to do this
- * is to use the cls or iconCls attributes and add the icon via a CSS background image.
- * @cfg {String} cls A css class to be added to the node
- * @cfg {String} iconCls A css class to be added to the nodes icon element for applying css background images
- * @cfg {String} href URL of the link used for the node (defaults to #)
- * @cfg {String} hrefTarget target frame for the link
- * @cfg {String} qtip An Ext QuickTip for the node
- * @cfg {String} qtipCfg An Ext QuickTip config for the node (used instead of qtip)
- * @cfg {Boolean} singleClickExpand True for single click expand on this node
- * @cfg {Function} uiProvider A UI <b>class</b> to use for this node (defaults to Roo.tree.TreeNodeUI)
- * @cfg {Boolean} checked True to render a checked checkbox for this node, false to render an unchecked checkbox
- * (defaults to undefined with no checkbox rendered)
- * @constructor
- * @param {Object/String} attributes The attributes/config for the node or just a string with the text for the node
- */
-Roo.tree.TreeNode = function(attributes){
- attributes = attributes || {};
- if(typeof attributes == "string"){
- attributes = {text: attributes};
- }
- this.childrenRendered = false;
- this.rendered = false;
- Roo.tree.TreeNode.superclass.constructor.call(this, attributes);
- this.expanded = attributes.expanded === true;
- this.isTarget = attributes.isTarget !== false;
- this.draggable = attributes.draggable !== false && attributes.allowDrag !== false;
- this.allowChildren = attributes.allowChildren !== false && attributes.allowDrop !== false;
-
- /**
- * Read-only. The text for this node. To change it use setText().
- * @type String
- */
- this.text = attributes.text;
- /**
- * True if this node is disabled.
- * @type Boolean
- */
- this.disabled = attributes.disabled === true;
-
- this.addEvents({
- /**
- * @event textchange
- * Fires when the text for this node is changed
- * @param {Node} this This node
- * @param {String} text The new text
- * @param {String} oldText The old text
- */
- "textchange" : true,
- /**
- * @event beforeexpand
- * Fires before this node is expanded, return false to cancel.
- * @param {Node} this This node
- * @param {Boolean} deep
- * @param {Boolean} anim
- */
- "beforeexpand" : true,
- /**
- * @event beforecollapse
- * Fires before this node is collapsed, return false to cancel.
- * @param {Node} this This node
- * @param {Boolean} deep
- * @param {Boolean} anim
- */
- "beforecollapse" : true,
- /**
- * @event expand
- * Fires when this node is expanded
- * @param {Node} this This node
- */
- "expand" : true,
- /**
- * @event disabledchange
- * Fires when the disabled status of this node changes
- * @param {Node} this This node
- * @param {Boolean} disabled
- */
- "disabledchange" : true,
- /**
- * @event collapse
- * Fires when this node is collapsed
- * @param {Node} this This node
- */
- "collapse" : true,
- /**
- * @event beforeclick
- * Fires before click processing. Return false to cancel the default action.
- * @param {Node} this This node
- * @param {Roo.EventObject} e The event object
- */
- "beforeclick":true,
- /**
- * @event checkchange
- * Fires when a node with a checkbox's checked property changes
- * @param {Node} this This node
- * @param {Boolean} checked
- */
- "checkchange":true,
- /**
- * @event click
- * Fires when this node is clicked
- * @param {Node} this This node
- * @param {Roo.EventObject} e The event object
- */
- "click":true,
- /**
- * @event dblclick
- * Fires when this node is double clicked
- * @param {Node} this This node
- * @param {Roo.EventObject} e The event object
- */
- "dblclick":true,
- /**
- * @event contextmenu
- * Fires when this node is right clicked
- * @param {Node} this This node
- * @param {Roo.EventObject} e The event object
- */
- "contextmenu":true,
- /**
- * @event beforechildrenrendered
- * Fires right before the child nodes for this node are rendered
- * @param {Node} this This node
- */
- "beforechildrenrendered":true
- });
-
- var uiClass = this.attributes.uiProvider || Roo.tree.TreeNodeUI;
-
- /**
- * Read-only. The UI for this node
- * @type TreeNodeUI
- */
- this.ui = new uiClass(this);
-};
-Roo.extend(Roo.tree.TreeNode, Roo.data.Node, {
- preventHScroll: true,
- /**
- * Returns true if this node is expanded
- * @return {Boolean}
- */
- isExpanded : function(){
- return this.expanded;
- },
-
- /**
- * Returns the UI object for this node
- * @return {TreeNodeUI}
- */
- getUI : function(){
- return this.ui;
- },
-
- // private override
- setFirstChild : function(node){
- var of = this.firstChild;
- Roo.tree.TreeNode.superclass.setFirstChild.call(this, node);
- if(this.childrenRendered && of && node != of){
- of.renderIndent(true, true);
- }
- if(this.rendered){
- this.renderIndent(true, true);
- }
- },
-
- // private override
- setLastChild : function(node){
- var ol = this.lastChild;
- Roo.tree.TreeNode.superclass.setLastChild.call(this, node);
- if(this.childrenRendered && ol && node != ol){
- ol.renderIndent(true, true);
- }
- if(this.rendered){
- this.renderIndent(true, true);
- }
- },
-
- // these methods are overridden to provide lazy rendering support
- // private override
- appendChild : function(){
- var node = Roo.tree.TreeNode.superclass.appendChild.apply(this, arguments);
- if(node && this.childrenRendered){
- node.render();
- }
- this.ui.updateExpandIcon();
- return node;
- },
-
- // private override
- removeChild : function(node){
- this.ownerTree.getSelectionModel().unselect(node);
- Roo.tree.TreeNode.superclass.removeChild.apply(this, arguments);
- // if it's been rendered remove dom node
- if(this.childrenRendered){
- node.ui.remove();
- }
- if(this.childNodes.length < 1){
- this.collapse(false, false);
- }else{
- this.ui.updateExpandIcon();
- }
- if(!this.firstChild) {
- this.childrenRendered = false;
- }
- return node;
- },
-
- // private override
- insertBefore : function(node, refNode){
- var newNode = Roo.tree.TreeNode.superclass.insertBefore.apply(this, arguments);
- if(newNode && refNode && this.childrenRendered){
- node.render();
- }
- this.ui.updateExpandIcon();
- return newNode;
- },
-
- /**
- * Sets the text for this node
- * @param {String} text
- */
- setText : function(text){
- var oldText = this.text;
- this.text = text;
- this.attributes.text = text;
- if(this.rendered){ // event without subscribing
- this.ui.onTextChange(this, text, oldText);
- }
- this.fireEvent("textchange", this, text, oldText);
- },
-
- /**
- * Triggers selection of this node
- */
- select : function(){
- this.getOwnerTree().getSelectionModel().select(this);
- },
-
- /**
- * Triggers deselection of this node
- */
- unselect : function(){
- this.getOwnerTree().getSelectionModel().unselect(this);
- },
-
- /**
- * Returns true if this node is selected
- * @return {Boolean}
- */
- isSelected : function(){
- return this.getOwnerTree().getSelectionModel().isSelected(this);
- },
-
- /**
- * Expand this node.
- * @param {Boolean} deep (optional) True to expand all children as well
- * @param {Boolean} anim (optional) false to cancel the default animation
- * @param {Function} callback (optional) A callback to be called when
- * expanding this node completes (does not wait for deep expand to complete).
- * Called with 1 parameter, this node.
- */
- expand : function(deep, anim, callback){
- if(!this.expanded){
- if(this.fireEvent("beforeexpand", this, deep, anim) === false){
- return;
- }
- if(!this.childrenRendered){
- this.renderChildren();
- }
- this.expanded = true;
- if(!this.isHiddenRoot() && (this.getOwnerTree().animate && anim !== false) || anim){
- this.ui.animExpand(function(){
- this.fireEvent("expand", this);
- if(typeof callback == "function"){
- callback(this);
- }
- if(deep === true){
- this.expandChildNodes(true);
- }
- }.createDelegate(this));
- return;
- }else{
- this.ui.expand();
- this.fireEvent("expand", this);
- if(typeof callback == "function"){
- callback(this);
- }
- }
- }else{
- if(typeof callback == "function"){
- callback(this);
- }
- }
- if(deep === true){
- this.expandChildNodes(true);
- }
- },
-
- isHiddenRoot : function(){
- return this.isRoot && !this.getOwnerTree().rootVisible;
- },
-
- /**
- * Collapse this node.
- * @param {Boolean} deep (optional) True to collapse all children as well
- * @param {Boolean} anim (optional) false to cancel the default animation
- */
- collapse : function(deep, anim){
- if(this.expanded && !this.isHiddenRoot()){
- if(this.fireEvent("beforecollapse", this, deep, anim) === false){
- return;
- }
- this.expanded = false;
- if((this.getOwnerTree().animate && anim !== false) || anim){
- this.ui.animCollapse(function(){
- this.fireEvent("collapse", this);
- if(deep === true){
- this.collapseChildNodes(true);
- }
- }.createDelegate(this));
- return;
- }else{
- this.ui.collapse();
- this.fireEvent("collapse", this);
- }
- }
- if(deep === true){
- var cs = this.childNodes;
- for(var i = 0, len = cs.length; i < len; i++) {
- cs[i].collapse(true, false);
- }
- }
- },
-
- // private
- delayedExpand : function(delay){
- if(!this.expandProcId){
- this.expandProcId = this.expand.defer(delay, this);
- }
- },
-
- // private
- cancelExpand : function(){
- if(this.expandProcId){
- clearTimeout(this.expandProcId);
- }
- this.expandProcId = false;
- },
-
- /**
- * Toggles expanded/collapsed state of the node
- */
- toggle : function(){
- if(this.expanded){
- this.collapse();
- }else{
- this.expand();
- }
- },
-
- /**
- * Ensures all parent nodes are expanded
- */
- ensureVisible : function(callback){
- var tree = this.getOwnerTree();
- tree.expandPath(this.parentNode.getPath(), false, function(){
- tree.getTreeEl().scrollChildIntoView(this.ui.anchor);
- Roo.callback(callback);
- }.createDelegate(this));
- },
-
- /**
- * Expand all child nodes
- * @param {Boolean} deep (optional) true if the child nodes should also expand their child nodes
- */
- expandChildNodes : function(deep){
- var cs = this.childNodes;
- for(var i = 0, len = cs.length; i < len; i++) {
- cs[i].expand(deep);
- }
- },
-
- /**
- * Collapse all child nodes
- * @param {Boolean} deep (optional) true if the child nodes should also collapse their child nodes
- */
- collapseChildNodes : function(deep){
- var cs = this.childNodes;
- for(var i = 0, len = cs.length; i < len; i++) {
- cs[i].collapse(deep);
- }
- },
-
- /**
- * Disables this node
- */
- disable : function(){
- this.disabled = true;
- this.unselect();
- if(this.rendered && this.ui.onDisableChange){ // event without subscribing
- this.ui.onDisableChange(this, true);
- }
- this.fireEvent("disabledchange", this, true);
- },
-
- /**
- * Enables this node
- */
- enable : function(){
- this.disabled = false;
- if(this.rendered && this.ui.onDisableChange){ // event without subscribing
- this.ui.onDisableChange(this, false);
- }
- this.fireEvent("disabledchange", this, false);
- },
-
- // private
- renderChildren : function(suppressEvent){
- if(suppressEvent !== false){
- this.fireEvent("beforechildrenrendered", this);
- }
- var cs = this.childNodes;
- for(var i = 0, len = cs.length; i < len; i++){
- cs[i].render(true);
- }
- this.childrenRendered = true;
- },
-
- // private
- sort : function(fn, scope){
- Roo.tree.TreeNode.superclass.sort.apply(this, arguments);
- if(this.childrenRendered){
- var cs = this.childNodes;
- for(var i = 0, len = cs.length; i < len; i++){
- cs[i].render(true);
- }
- }
- },
-
- // private
- render : function(bulkRender){
- this.ui.render(bulkRender);
- if(!this.rendered){
- this.rendered = true;
- if(this.expanded){
- this.expanded = false;
- this.expand(false, false);
- }
- }
- },
-
- // private
- renderIndent : function(deep, refresh){
- if(refresh){
- this.ui.childIndent = null;
- }
- this.ui.renderIndent();
- if(deep === true && this.childrenRendered){
- var cs = this.childNodes;
- for(var i = 0, len = cs.length; i < len; i++){
- cs[i].renderIndent(true, refresh);
- }
- }
- }
-});/*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
- */
-
-/**
- * @class Roo.tree.AsyncTreeNode
- * @extends Roo.tree.TreeNode
- * @cfg {TreeLoader} loader A TreeLoader to be used by this node (defaults to the loader defined on the tree)
- * @constructor
- * @param {Object/String} attributes The attributes/config for the node or just a string with the text for the node
- */
- Roo.tree.AsyncTreeNode = function(config){
- this.loaded = false;
- this.loading = false;
- Roo.tree.AsyncTreeNode.superclass.constructor.apply(this, arguments);
- /**
- * @event beforeload
- * Fires before this node is loaded, return false to cancel
- * @param {Node} this This node
- */
- this.addEvents({'beforeload':true, 'load': true});
- /**
- * @event load
- * Fires when this node is loaded
- * @param {Node} this This node
- */
- /**
- * The loader used by this node (defaults to using the tree's defined loader)
- * @type TreeLoader
- * @property loader
- */
-};
-Roo.extend(Roo.tree.AsyncTreeNode, Roo.tree.TreeNode, {
- expand : function(deep, anim, callback){
- if(this.loading){ // if an async load is already running, waiting til it's done
- var timer;
- var f = function(){
- if(!this.loading){ // done loading
- clearInterval(timer);
- this.expand(deep, anim, callback);
- }
- }.createDelegate(this);
- timer = setInterval(f, 200);
- return;
- }
- if(!this.loaded){
- if(this.fireEvent("beforeload", this) === false){
- return;
- }
- this.loading = true;
- this.ui.beforeLoad(this);
- var loader = this.loader || this.attributes.loader || this.getOwnerTree().getLoader();
- if(loader){
- loader.load(this, this.loadComplete.createDelegate(this, [deep, anim, callback]));
- return;
- }
- }
- Roo.tree.AsyncTreeNode.superclass.expand.call(this, deep, anim, callback);
- },
-
- /**
- * Returns true if this node is currently loading
- * @return {Boolean}
- */
- isLoading : function(){
- return this.loading;
- },
-
- loadComplete : function(deep, anim, callback){
- this.loading = false;
- this.loaded = true;
- this.ui.afterLoad(this);
- this.fireEvent("load", this);
- this.expand(deep, anim, callback);
- },
-
- /**
- * Returns true if this node has been loaded
- * @return {Boolean}
- */
- isLoaded : function(){
- return this.loaded;
- },
-
- hasChildNodes : function(){
- if(!this.isLeaf() && !this.loaded){
- return true;
- }else{
- return Roo.tree.AsyncTreeNode.superclass.hasChildNodes.call(this);
- }
- },
-
- /**
- * Trigger a reload for this node
- * @param {Function} callback
- */
- reload : function(callback){
- this.collapse(false, false);
- while(this.firstChild){
- this.removeChild(this.firstChild);
- }
- this.childrenRendered = false;
- this.loaded = false;
- if(this.isHiddenRoot()){
- this.expanded = false;
- }
- this.expand(false, false, callback);
- }
-});/*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
- */
-
-/**
- * @class Roo.tree.TreeNodeUI
- * @constructor
- * @param {Object} node The node to render
- * The TreeNode UI implementation is separate from the
- * tree implementation. Unless you are customizing the tree UI,
- * you should never have to use this directly.
- */
-Roo.tree.TreeNodeUI = function(node){
- this.node = node;
- this.rendered = false;
- this.animating = false;
- this.emptyIcon = Roo.BLANK_IMAGE_URL;
-};
-
-Roo.tree.TreeNodeUI.prototype = {
- removeChild : function(node){
- if(this.rendered){
- this.ctNode.removeChild(node.ui.getEl());
- }
- },
-
- beforeLoad : function(){
- this.addClass("x-tree-node-loading");
- },
-
- afterLoad : function(){
- this.removeClass("x-tree-node-loading");
- },
-
- onTextChange : function(node, text, oldText){
- if(this.rendered){
- this.textNode.innerHTML = text;
- }
- },
-
- onDisableChange : function(node, state){
- this.disabled = state;
- if(state){
- this.addClass("x-tree-node-disabled");
- }else{
- this.removeClass("x-tree-node-disabled");
- }
- },
-
- onSelectedChange : function(state){
- if(state){
- this.focus();
- this.addClass("x-tree-selected");
- }else{
- //this.blur();
- this.removeClass("x-tree-selected");
- }
- },
-
- onMove : function(tree, node, oldParent, newParent, index, refNode){
- this.childIndent = null;
- if(this.rendered){
- var targetNode = newParent.ui.getContainer();
- if(!targetNode){//target not rendered
- this.holder = document.createElement("div");
- this.holder.appendChild(this.wrap);
- return;
- }
- var insertBefore = refNode ? refNode.ui.getEl() : null;
- if(insertBefore){
- targetNode.insertBefore(this.wrap, insertBefore);
- }else{
- targetNode.appendChild(this.wrap);
- }
- this.node.renderIndent(true);
- }
- },
-
- addClass : function(cls){
- if(this.elNode){
- Roo.fly(this.elNode).addClass(cls);
- }
- },
-
- removeClass : function(cls){
- if(this.elNode){
- Roo.fly(this.elNode).removeClass(cls);
- }
- },
-
- remove : function(){
- if(this.rendered){
- this.holder = document.createElement("div");
- this.holder.appendChild(this.wrap);
- }
- },
-
- fireEvent : function(){
- return this.node.fireEvent.apply(this.node, arguments);
- },
-
- initEvents : function(){
- this.node.on("move", this.onMove, this);
- var E = Roo.EventManager;
- var a = this.anchor;
-
- var el = Roo.fly(a, '_treeui');
-
- if(Roo.isOpera){ // opera render bug ignores the CSS
- el.setStyle("text-decoration", "none");
- }
-
- el.on("click", this.onClick, this);
- el.on("dblclick", this.onDblClick, this);
-
- if(this.checkbox){
- Roo.EventManager.on(this.checkbox,
- Roo.isIE ? 'click' : 'change', this.onCheckChange, this);
- }
-
- el.on("contextmenu", this.onContextMenu, this);
-
- var icon = Roo.fly(this.iconNode);
- icon.on("click", this.onClick, this);
- icon.on("dblclick", this.onDblClick, this);
- icon.on("contextmenu", this.onContextMenu, this);
- E.on(this.ecNode, "click", this.ecClick, this, true);
-
- if(this.node.disabled){
- this.addClass("x-tree-node-disabled");
- }
- if(this.node.hidden){
- this.addClass("x-tree-node-disabled");
- }
- var ot = this.node.getOwnerTree();
- var dd = ot.enableDD || ot.enableDrag || ot.enableDrop;
- if(dd && (!this.node.isRoot || ot.rootVisible)){
- Roo.dd.Registry.register(this.elNode, {
- node: this.node,
- handles: this.getDDHandles(),
- isHandle: false
- });
- }
- },
-
- getDDHandles : function(){
- return [this.iconNode, this.textNode];
- },
-
- hide : function(){
- if(this.rendered){
- this.wrap.style.display = "none";
- }
- },
-
- show : function(){
- if(this.rendered){
- this.wrap.style.display = "";
- }
- },
-
- onContextMenu : function(e){
- if (this.node.hasListener("contextmenu") || this.node.getOwnerTree().hasListener("contextmenu")) {
- e.preventDefault();
- this.focus();
- this.fireEvent("contextmenu", this.node, e);
- }
- },
-
- onClick : function(e){
- if(this.dropping){
- e.stopEvent();
- return;
- }
- if(this.fireEvent("beforeclick", this.node, e) !== false){
- if(!this.disabled && this.node.attributes.href){
- this.fireEvent("click", this.node, e);
- return;
- }
- e.preventDefault();
- if(this.disabled){
- return;
- }
-
- if(this.node.attributes.singleClickExpand && !this.animating && this.node.hasChildNodes()){
- this.node.toggle();
- }
-
- this.fireEvent("click", this.node, e);
- }else{
- e.stopEvent();
- }
- },
-
- onDblClick : function(e){
- e.preventDefault();
- if(this.disabled){
- return;
- }
- if(this.checkbox){
- this.toggleCheck();
- }
- if(!this.animating && this.node.hasChildNodes()){
- this.node.toggle();
- }
- this.fireEvent("dblclick", this.node, e);
- },
-
- onCheckChange : function(){
- var checked = this.checkbox.checked;
- this.node.attributes.checked = checked;
- this.fireEvent('checkchange', this.node, checked);
- },
-
- ecClick : function(e){
- if(!this.animating && this.node.hasChildNodes()){
- this.node.toggle();
- }
- },
-
- startDrop : function(){
- this.dropping = true;
- },
-
- // delayed drop so the click event doesn't get fired on a drop
- endDrop : function(){
- setTimeout(function(){
- this.dropping = false;
- }.createDelegate(this), 50);
- },
-
- expand : function(){
- this.updateExpandIcon();
- this.ctNode.style.display = "";
- },
-
- focus : function(){
- if(!this.node.preventHScroll){
- try{this.anchor.focus();
- }catch(e){}
- }else if(!Roo.isIE){
- try{
- var noscroll = this.node.getOwnerTree().getTreeEl().dom;
- var l = noscroll.scrollLeft;
- this.anchor.focus();
- noscroll.scrollLeft = l;
- }catch(e){}
- }
- },
-
- toggleCheck : function(value){
- var cb = this.checkbox;
- if(cb){
- cb.checked = (value === undefined ? !cb.checked : value);
- }
- },
-
- blur : function(){
- try{
- this.anchor.blur();
- }catch(e){}
- },
-
- animExpand : function(callback){
- var ct = Roo.get(this.ctNode);
- ct.stopFx();
- if(!this.node.hasChildNodes()){
- this.updateExpandIcon();
- this.ctNode.style.display = "";
- Roo.callback(callback);
- return;
- }
- this.animating = true;
- this.updateExpandIcon();
-
- ct.slideIn('t', {
- callback : function(){
- this.animating = false;
- Roo.callback(callback);
- },
- scope: this,
- duration: this.node.ownerTree.duration || .25
- });
- },
-
- highlight : function(){
- var tree = this.node.getOwnerTree();
- Roo.fly(this.wrap).highlight(
- tree.hlColor || "C3DAF9",
- {endColor: tree.hlBaseColor}
- );
- },
-
- collapse : function(){
- this.updateExpandIcon();
- this.ctNode.style.display = "none";
- },
-
- animCollapse : function(callback){
- var ct = Roo.get(this.ctNode);
- ct.enableDisplayMode('block');
- ct.stopFx();
-
- this.animating = true;
- this.updateExpandIcon();
-
- ct.slideOut('t', {
- callback : function(){
- this.animating = false;
- Roo.callback(callback);
- },
- scope: this,
- duration: this.node.ownerTree.duration || .25
- });
- },
-
- getContainer : function(){
- return this.ctNode;
- },
-
- getEl : function(){
- return this.wrap;
- },
-
- appendDDGhost : function(ghostNode){
- ghostNode.appendChild(this.elNode.cloneNode(true));
- },
-
- getDDRepairXY : function(){
- return Roo.lib.Dom.getXY(this.iconNode);
- },
-
- onRender : function(){
- this.render();
- },
-
- render : function(bulkRender){
- var n = this.node, a = n.attributes;
- var targetNode = n.parentNode ?
- n.parentNode.ui.getContainer() : n.ownerTree.innerCt.dom;
-
- if(!this.rendered){
- this.rendered = true;
-
- this.renderElements(n, a, targetNode, bulkRender);
-
- if(a.qtip){
- if(this.textNode.setAttributeNS){
- this.textNode.setAttributeNS("ext", "qtip", a.qtip);
- if(a.qtipTitle){
- this.textNode.setAttributeNS("ext", "qtitle", a.qtipTitle);
- }
- }else{
- this.textNode.setAttribute("ext:qtip", a.qtip);
- if(a.qtipTitle){
- this.textNode.setAttribute("ext:qtitle", a.qtipTitle);
- }
- }
- }else if(a.qtipCfg){
- a.qtipCfg.target = Roo.id(this.textNode);
- Roo.QuickTips.register(a.qtipCfg);
- }
- this.initEvents();
- if(!this.node.expanded){
- this.updateExpandIcon();
- }
- }else{
- if(bulkRender === true) {
- targetNode.appendChild(this.wrap);
- }
- }
- },
-
- renderElements : function(n, a, targetNode, bulkRender){
- // add some indent caching, this helps performance when rendering a large tree
- this.indentMarkup = n.parentNode ? n.parentNode.ui.getChildIndent() : '';
- var t = n.getOwnerTree();
- var txt = t.renderer ? t.renderer(n.attributes) : Roo.util.Format.htmlEncode(n.text);
- var tip = t.rendererTip ? t.rendererTip(n.attributes) : txt;
- var cb = typeof a.checked == 'boolean';
- var href = a.href ? a.href : Roo.isGecko ? "" : "#";
- var buf = ['<li class="x-tree-node"><div class="x-tree-node-el ', a.cls,'">',
- '<span class="x-tree-node-indent">',this.indentMarkup,"</span>",
- '<img src="', this.emptyIcon, '" class="x-tree-ec-icon" />',
- '<img src="', a.icon || this.emptyIcon, '" class="x-tree-node-icon',(a.icon ? " x-tree-node-inline-icon" : ""),(a.iconCls ? " "+a.iconCls : ""),'" unselectable="on" />',
- cb ? ('<input class="x-tree-node-cb" type="checkbox" ' + (a.checked ? 'checked="checked" />' : ' />')) : '',
- '<a hidefocus="on" href="',href,'" tabIndex="1" ',
- a.hrefTarget ? ' target="'+a.hrefTarget+'"' : "",
- '><span unselectable="on" qtip="' , tip ,'">',txt,"</span></a></div>",
- '<ul class="x-tree-node-ct" style="display:none;"></ul>',
- "</li>"];
-
- if(bulkRender !== true && n.nextSibling && n.nextSibling.ui.getEl()){
- this.wrap = Roo.DomHelper.insertHtml("beforeBegin",
- n.nextSibling.ui.getEl(), buf.join(""));
- }else{
- this.wrap = Roo.DomHelper.insertHtml("beforeEnd", targetNode, buf.join(""));
- }
-
- this.elNode = this.wrap.childNodes[0];
- this.ctNode = this.wrap.childNodes[1];
- var cs = this.elNode.childNodes;
- this.indentNode = cs[0];
- this.ecNode = cs[1];
- this.iconNode = cs[2];
- var index = 3;
- if(cb){
- this.checkbox = cs[3];
- index++;
- }
- this.anchor = cs[index];
- this.textNode = cs[index].firstChild;
- },
-
- getAnchor : function(){
- return this.anchor;
- },
-
- getTextEl : function(){
- return this.textNode;
- },
-
- getIconEl : function(){
- return this.iconNode;
- },
-
- isChecked : function(){
- return this.checkbox ? this.checkbox.checked : false;
- },
-
- updateExpandIcon : function(){
- if(this.rendered){
- var n = this.node, c1, c2;
- var cls = n.isLast() ? "x-tree-elbow-end" : "x-tree-elbow";
- var hasChild = n.hasChildNodes();
- if(hasChild){
- if(n.expanded){
- cls += "-minus";
- c1 = "x-tree-node-collapsed";
- c2 = "x-tree-node-expanded";
- }else{
- cls += "-plus";
- c1 = "x-tree-node-expanded";
- c2 = "x-tree-node-collapsed";
- }
- if(this.wasLeaf){
- this.removeClass("x-tree-node-leaf");
- this.wasLeaf = false;
- }
- if(this.c1 != c1 || this.c2 != c2){
- Roo.fly(this.elNode).replaceClass(c1, c2);
- this.c1 = c1; this.c2 = c2;
- }
- }else{
- if(!this.wasLeaf){
- Roo.fly(this.elNode).replaceClass("x-tree-node-expanded", "x-tree-node-leaf");
- delete this.c1;
- delete this.c2;
- this.wasLeaf = true;
- }
- }
- var ecc = "x-tree-ec-icon "+cls;
- if(this.ecc != ecc){
- this.ecNode.className = ecc;
- this.ecc = ecc;
- }
- }
- },
-
- getChildIndent : function(){
- if(!this.childIndent){
- var buf = [];
- var p = this.node;
- while(p){
- if(!p.isRoot || (p.isRoot && p.ownerTree.rootVisible)){
- if(!p.isLast()) {
- buf.unshift('<img src="'+this.emptyIcon+'" class="x-tree-elbow-line" />');
- } else {
- buf.unshift('<img src="'+this.emptyIcon+'" class="x-tree-icon" />');
- }
- }
- p = p.parentNode;
- }
- this.childIndent = buf.join("");
- }
- return this.childIndent;
- },
-
- renderIndent : function(){
- if(this.rendered){
- var indent = "";
- var p = this.node.parentNode;
- if(p){
- indent = p.ui.getChildIndent();
- }
- if(this.indentMarkup != indent){ // don't rerender if not required
- this.indentNode.innerHTML = indent;
- this.indentMarkup = indent;
- }
- this.updateExpandIcon();
- }
- }
-};
-
-Roo.tree.RootTreeNodeUI = function(){
- Roo.tree.RootTreeNodeUI.superclass.constructor.apply(this, arguments);
-};
-Roo.extend(Roo.tree.RootTreeNodeUI, Roo.tree.TreeNodeUI, {
- render : function(){
- if(!this.rendered){
- var targetNode = this.node.ownerTree.innerCt.dom;
- this.node.expanded = true;
- targetNode.innerHTML = '<div class="x-tree-root-node"></div>';
- this.wrap = this.ctNode = targetNode.firstChild;
- }
- },
- collapse : function(){
- },
- expand : function(){
- }
-});/*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
- */
-/**
- * @class Roo.tree.TreeLoader
- * @extends Roo.util.Observable
- * A TreeLoader provides for lazy loading of an {@link Roo.tree.TreeNode}'s child
- * nodes from a specified URL. The response must be a javascript Array definition
- * who's elements are node definition objects. eg:
- * <pre><code>
- [{ 'id': 1, 'text': 'A folder Node', 'leaf': false },
- { 'id': 2, 'text': 'A leaf Node', 'leaf': true }]
-</code></pre>
- * <br><br>
- * A server request is sent, and child nodes are loaded only when a node is expanded.
- * The loading node's id is passed to the server under the parameter name "node" to
- * enable the server to produce the correct child nodes.
- * <br><br>
- * To pass extra parameters, an event handler may be attached to the "beforeload"
- * event, and the parameters specified in the TreeLoader's baseParams property:
- * <pre><code>
- myTreeLoader.on("beforeload", function(treeLoader, node) {
- this.baseParams.category = node.attributes.category;
- }, this);
-</code></pre><
- * This would pass an HTTP parameter called "category" to the server containing
- * the value of the Node's "category" attribute.
- * @constructor
- * Creates a new Treeloader.
- * @param {Object} config A config object containing config properties.
- */
-Roo.tree.TreeLoader = function(config){
- this.baseParams = {};
- this.requestMethod = "POST";
- Roo.apply(this, config);
-
- this.addEvents({
-
- /**
- * @event beforeload
- * Fires before a network request is made to retrieve the Json text which specifies a node's children.
- * @param {Object} This TreeLoader object.
- * @param {Object} node The {@link Roo.tree.TreeNode} object being loaded.
- * @param {Object} callback The callback function specified in the {@link #load} call.
- */
- beforeload : true,
- /**
- * @event load
- * Fires when the node has been successfuly loaded.
- * @param {Object} This TreeLoader object.
- * @param {Object} node The {@link Roo.tree.TreeNode} object being loaded.
- * @param {Object} response The response object containing the data from the server.
- */
- load : true,
- /**
- * @event loadexception
- * Fires if the network request failed.
- * @param {Object} This TreeLoader object.
- * @param {Object} node The {@link Roo.tree.TreeNode} object being loaded.
- * @param {Object} response The response object containing the data from the server.
- */
- loadexception : true,
- /**
- * @event create
- * Fires before a node is created, enabling you to return custom Node types
- * @param {Object} This TreeLoader object.
- * @param {Object} attr - the data returned from the AJAX call (modify it to suit)
- */
- create : true
- });
-
- Roo.tree.TreeLoader.superclass.constructor.call(this);
-};
-
-Roo.extend(Roo.tree.TreeLoader, Roo.util.Observable, {
- /**
- * @cfg {String} dataUrl The URL from which to request a Json string which
- * specifies an array of node definition object representing the child nodes
- * to be loaded.
- */
- /**
- * @cfg {Object} baseParams (optional) An object containing properties which
- * specify HTTP parameters to be passed to each request for child nodes.
- */
- /**
- * @cfg {Object} baseAttrs (optional) An object containing attributes to be added to all nodes
- * created by this loader. If the attributes sent by the server have an attribute in this object,
- * they take priority.
- */
- /**
- * @cfg {Object} uiProviders (optional) An object containing properties which
- *
- * DEPRECIATED - use 'create' event handler to modify attributes - which affect creation.
- * specify custom {@link Roo.tree.TreeNodeUI} implementations. If the optional
- * <i>uiProvider</i> attribute of a returned child node is a string rather
- * than a reference to a TreeNodeUI implementation, this that string value
- * is used as a property name in the uiProviders object. You can define the provider named
- * 'default' , and this will be used for all nodes (if no uiProvider is delivered by the node data)
- */
- uiProviders : {},
-
- /**
- * @cfg {Boolean} clearOnLoad (optional) Default to true. Remove previously existing
- * child nodes before loading.
- */
- clearOnLoad : true,
-
- /**
- * @cfg {String} root (optional) Default to false. Use this to read data from an object
- * property on loading, rather than expecting an array. (eg. more compatible to a standard
- * Grid query { data : [ .....] }
- */
-
- root : false,
- /**
- * @cfg {String} queryParam (optional)
- * Name of the query as it will be passed on the querystring (defaults to 'node')
- * eg. the request will be ?node=[id]
- */
-
-
- queryParam: false,
-
- /**
- * Load an {@link Roo.tree.TreeNode} from the URL specified in the constructor.
- * This is called automatically when a node is expanded, but may be used to reload
- * a node (or append new children if the {@link #clearOnLoad} option is false.)
- * @param {Roo.tree.TreeNode} node
- * @param {Function} callback
- */
- load : function(node, callback){
- if(this.clearOnLoad){
- while(node.firstChild){
- node.removeChild(node.firstChild);
- }
- }
- if(node.attributes.children){ // preloaded json children
- var cs = node.attributes.children;
- for(var i = 0, len = cs.length; i < len; i++){
- node.appendChild(this.createNode(cs[i]));
- }
- if(typeof callback == "function"){
- callback();
- }
- }else if(this.dataUrl){
- this.requestData(node, callback);
- }
- },
-
- getParams: function(node){
- var buf = [], bp = this.baseParams;
- for(var key in bp){
- if(typeof bp[key] != "function"){
- buf.push(encodeURIComponent(key), "=", encodeURIComponent(bp[key]), "&");
- }
- }
- var n = this.queryParam === false ? 'node' : this.queryParam;
- buf.push(n + "=", encodeURIComponent(node.id));
- return buf.join("");
- },
-
- requestData : function(node, callback){
- if(this.fireEvent("beforeload", this, node, callback) !== false){
- this.transId = Roo.Ajax.request({
- method:this.requestMethod,
- url: this.dataUrl||this.url,
- success: this.handleResponse,
- failure: this.handleFailure,
- scope: this,
- argument: {callback: callback, node: node},
- params: this.getParams(node)
- });
- }else{
- // if the load is cancelled, make sure we notify
- // the node that we are done
- if(typeof callback == "function"){
- callback();
- }
- }
- },
-
- isLoading : function(){
- return this.transId ? true : false;
- },
-
- abort : function(){
- if(this.isLoading()){
- Roo.Ajax.abort(this.transId);
- }
- },
-
- // private
- createNode : function(attr){
- // apply baseAttrs, nice idea Corey!
- if(this.baseAttrs){
- Roo.applyIf(attr, this.baseAttrs);
- }
- if(this.applyLoader !== false){
- attr.loader = this;
- }
- // uiProvider = depreciated..
-
- if(typeof(attr.uiProvider) == 'string'){
- attr.uiProvider = this.uiProviders[attr.uiProvider] ||
- /** eval:var:attr */ eval(attr.uiProvider);
- }
- if(typeof(this.uiProviders['default']) != 'undefined') {
- attr.uiProvider = this.uiProviders['default'];
- }
-
- this.fireEvent('create', this, attr);
-
- attr.leaf = typeof(attr.leaf) == 'string' ? attr.leaf * 1 : attr.leaf;
- return(attr.leaf ?
- new Roo.tree.TreeNode(attr) :
- new Roo.tree.AsyncTreeNode(attr));
- },
-
- processResponse : function(response, node, callback){
- var json = response.responseText;
- try {
-
- var o = /** eval:var:zzzzzzzzzz */ eval("("+json+")");
- if (this.root !== false) {
- o = o[this.root];
- }
-
- for(var i = 0, len = o.length; i < len; i++){
- var n = this.createNode(o[i]);
- if(n){
- node.appendChild(n);
- }
- }
- if(typeof callback == "function"){
- callback(this, node);
- }
- }catch(e){
- this.handleFailure(response);
- }
- },
-
- handleResponse : function(response){
- this.transId = false;
- var a = response.argument;
- this.processResponse(response, a.node, a.callback);
- this.fireEvent("load", this, a.node, response);
- },
-
- handleFailure : function(response){
- this.transId = false;
- var a = response.argument;
- this.fireEvent("loadexception", this, a.node, response);
- if(typeof a.callback == "function"){
- a.callback(this, a.node);
- }
- }
-});/*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
- */
-
-/**
-* @class Roo.tree.TreeFilter
-* Note this class is experimental and doesn't update the indent (lines) or expand collapse icons of the nodes
-* @param {TreePanel} tree
-* @param {Object} config (optional)
- */
-Roo.tree.TreeFilter = function(tree, config){
- this.tree = tree;
- this.filtered = {};
- Roo.apply(this, config);
-};
-
-Roo.tree.TreeFilter.prototype = {
- clearBlank:false,
- reverse:false,
- autoClear:false,
- remove:false,
-
- /**
- * Filter the data by a specific attribute.
- * @param {String/RegExp} value Either string that the attribute value
- * should start with or a RegExp to test against the attribute
- * @param {String} attr (optional) The attribute passed in your node's attributes collection. Defaults to "text".
- * @param {TreeNode} startNode (optional) The node to start the filter at.
- */
- filter : function(value, attr, startNode){
- attr = attr || "text";
- var f;
- if(typeof value == "string"){
- var vlen = value.length;
- // auto clear empty filter
- if(vlen == 0 && this.clearBlank){
- this.clear();
- return;
- }
- value = value.toLowerCase();
- f = function(n){
- return n.attributes[attr].substr(0, vlen).toLowerCase() == value;
- };
- }else if(value.exec){ // regex?
- f = function(n){
- return value.test(n.attributes[attr]);
- };
- }else{
- throw 'Illegal filter type, must be string or regex';
- }
- this.filterBy(f, null, startNode);
- },
-
- /**
- * Filter by a function. The passed function will be called with each
- * node in the tree (or from the startNode). If the function returns true, the node is kept
- * otherwise it is filtered. If a node is filtered, its children are also filtered.
- * @param {Function} fn The filter function
- * @param {Object} scope (optional) The scope of the function (defaults to the current node)
- */
- filterBy : function(fn, scope, startNode){
- startNode = startNode || this.tree.root;
- if(this.autoClear){
- this.clear();
- }
- var af = this.filtered, rv = this.reverse;
- var f = function(n){
- if(n == startNode){
- return true;
- }
- if(af[n.id]){
- return false;
- }
- var m = fn.call(scope || n, n);
- if(!m || rv){
- af[n.id] = n;
- n.ui.hide();
- return false;
- }
- return true;
- };
- startNode.cascade(f);
- if(this.remove){
- for(var id in af){
- if(typeof id != "function"){
- var n = af[id];
- if(n && n.parentNode){
- n.parentNode.removeChild(n);
- }
- }
- }
- }
- },
-
- /**
- * Clears the current filter. Note: with the "remove" option
- * set a filter cannot be cleared.
- */
- clear : function(){
- var t = this.tree;
- var af = this.filtered;
- for(var id in af){
- if(typeof id != "function"){
- var n = af[id];
- if(n){
- n.ui.show();
- }
- }
- }
- this.filtered = {};
- }
-};
-/*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
- */
-
-
-/**
- * @class Roo.tree.TreeSorter
- * Provides sorting of nodes in a TreePanel
- *
- * @cfg {Boolean} folderSort True to sort leaf nodes under non leaf nodes
- * @cfg {String} property The named attribute on the node to sort by (defaults to text)
- * @cfg {String} dir The direction to sort (asc or desc) (defaults to asc)
- * @cfg {String} leafAttr The attribute used to determine leaf nodes in folder sort (defaults to "leaf")
- * @cfg {Boolean} caseSensitive true for case sensitive sort (defaults to false)
- * @cfg {Function} sortType A custom "casting" function used to convert node values before sorting
- * @constructor
- * @param {TreePanel} tree
- * @param {Object} config
- */
-Roo.tree.TreeSorter = function(tree, config){
- Roo.apply(this, config);
- tree.on("beforechildrenrendered", this.doSort, this);
- tree.on("append", this.updateSort, this);
- tree.on("insert", this.updateSort, this);
-
- var dsc = this.dir && this.dir.toLowerCase() == "desc";
- var p = this.property || "text";
- var sortType = this.sortType;
- var fs = this.folderSort;
- var cs = this.caseSensitive === true;
- var leafAttr = this.leafAttr || 'leaf';
-
- this.sortFn = function(n1, n2){
- if(fs){
- if(n1.attributes[leafAttr] && !n2.attributes[leafAttr]){
- return 1;
- }
- if(!n1.attributes[leafAttr] && n2.attributes[leafAttr]){
- return -1;
- }
- }
- var v1 = sortType ? sortType(n1) : (cs ? n1.attributes[p] : n1.attributes[p].toUpperCase());
- var v2 = sortType ? sortType(n2) : (cs ? n2.attributes[p] : n2.attributes[p].toUpperCase());
- if(v1 < v2){
- return dsc ? +1 : -1;
- }else if(v1 > v2){
- return dsc ? -1 : +1;
- }else{
- return 0;
- }
- };
-};
-
-Roo.tree.TreeSorter.prototype = {
- doSort : function(node){
- node.sort(this.sortFn);
- },
-
- compareNodes : function(n1, n2){
- return (n1.text.toUpperCase() > n2.text.toUpperCase() ? 1 : -1);
- },
-
- updateSort : function(tree, node){
- if(node.childrenRendered){
- this.doSort.defer(1, this, [node]);
- }
- }
-};/*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
- */
-
-if(Roo.dd.DropZone){
-
-Roo.tree.TreeDropZone = function(tree, config){
- this.allowParentInsert = false;
- this.allowContainerDrop = false;
- this.appendOnly = false;
- Roo.tree.TreeDropZone.superclass.constructor.call(this, tree.innerCt, config);
- this.tree = tree;
- this.lastInsertClass = "x-tree-no-status";
- this.dragOverData = {};
-};
-
-Roo.extend(Roo.tree.TreeDropZone, Roo.dd.DropZone, {
- ddGroup : "TreeDD",
-
- expandDelay : 1000,
-
- expandNode : function(node){
- if(node.hasChildNodes() && !node.isExpanded()){
- node.expand(false, null, this.triggerCacheRefresh.createDelegate(this));
- }
- },
-
- queueExpand : function(node){
- this.expandProcId = this.expandNode.defer(this.expandDelay, this, [node]);
- },
-
- cancelExpand : function(){
- if(this.expandProcId){
- clearTimeout(this.expandProcId);
- this.expandProcId = false;
- }
- },
-
- isValidDropPoint : function(n, pt, dd, e, data){
- if(!n || !data){ return false; }
- var targetNode = n.node;
- var dropNode = data.node;
- // default drop rules
- if(!(targetNode && targetNode.isTarget && pt)){
- return false;
- }
- if(pt == "append" && targetNode.allowChildren === false){
- return false;
- }
- if((pt == "above" || pt == "below") && (targetNode.parentNode && targetNode.parentNode.allowChildren === false)){
- return false;
- }
- if(dropNode && (targetNode == dropNode || dropNode.contains(targetNode))){
- return false;
- }
- // reuse the object
- var overEvent = this.dragOverData;
- overEvent.tree = this.tree;
- overEvent.target = targetNode;
- overEvent.data = data;
- overEvent.point = pt;
- overEvent.source = dd;
- overEvent.rawEvent = e;
- overEvent.dropNode = dropNode;
- overEvent.cancel = false;
- var result = this.tree.fireEvent("nodedragover", overEvent);
- return overEvent.cancel === false && result !== false;
- },
-
- getDropPoint : function(e, n, dd){
- var tn = n.node;
- if(tn.isRoot){
- return tn.allowChildren !== false ? "append" : false; // always append for root
- }
- var dragEl = n.ddel;
- var t = Roo.lib.Dom.getY(dragEl), b = t + dragEl.offsetHeight;
- var y = Roo.lib.Event.getPageY(e);
- //var noAppend = tn.allowChildren === false || tn.isLeaf();
-
- // we may drop nodes anywhere, as long as allowChildren has not been set to false..
- var noAppend = tn.allowChildren === false;
- if(this.appendOnly || tn.parentNode.allowChildren === false){
- return noAppend ? false : "append";
- }
- var noBelow = false;
- if(!this.allowParentInsert){
- noBelow = tn.hasChildNodes() && tn.isExpanded();
- }
- var q = (b - t) / (noAppend ? 2 : 3);
- if(y >= t && y < (t + q)){
- return "above";
- }else if(!noBelow && (noAppend || y >= b-q && y <= b)){
- return "below";
- }else{
- return "append";
- }
- },
-
- onNodeEnter : function(n, dd, e, data){
- this.cancelExpand();
- },
-
- onNodeOver : function(n, dd, e, data){
- var pt = this.getDropPoint(e, n, dd);
- var node = n.node;
-
- // auto node expand check
- if(!this.expandProcId && pt == "append" && node.hasChildNodes() && !n.node.isExpanded()){
- this.queueExpand(node);
- }else if(pt != "append"){
- this.cancelExpand();
- }
-
- // set the insert point style on the target node
- var returnCls = this.dropNotAllowed;
- if(this.isValidDropPoint(n, pt, dd, e, data)){
- if(pt){
- var el = n.ddel;
- var cls;
- if(pt == "above"){
- returnCls = n.node.isFirst() ? "x-tree-drop-ok-above" : "x-tree-drop-ok-between";
- cls = "x-tree-drag-insert-above";
- }else if(pt == "below"){
- returnCls = n.node.isLast() ? "x-tree-drop-ok-below" : "x-tree-drop-ok-between";
- cls = "x-tree-drag-insert-below";
- }else{
- returnCls = "x-tree-drop-ok-append";
- cls = "x-tree-drag-append";
- }
- if(this.lastInsertClass != cls){
- Roo.fly(el).replaceClass(this.lastInsertClass, cls);
- this.lastInsertClass = cls;
- }
- }
- }
- return returnCls;
- },
-
- onNodeOut : function(n, dd, e, data){
- this.cancelExpand();
- this.removeDropIndicators(n);
- },
-
- onNodeDrop : function(n, dd, e, data){
- var point = this.getDropPoint(e, n, dd);
- var targetNode = n.node;
- targetNode.ui.startDrop();
- if(!this.isValidDropPoint(n, point, dd, e, data)){
- targetNode.ui.endDrop();
- return false;
- }
- // first try to find the drop node
- var dropNode = data.node || (dd.getTreeNode ? dd.getTreeNode(data, targetNode, point, e) : null);
- var dropEvent = {
- tree : this.tree,
- target: targetNode,
- data: data,
- point: point,
- source: dd,
- rawEvent: e,
- dropNode: dropNode,
- cancel: !dropNode
- };
- var retval = this.tree.fireEvent("beforenodedrop", dropEvent);
- if(retval === false || dropEvent.cancel === true || !dropEvent.dropNode){
- targetNode.ui.endDrop();
- return false;
- }
- // allow target changing
- targetNode = dropEvent.target;
- if(point == "append" && !targetNode.isExpanded()){
- targetNode.expand(false, null, function(){
- this.completeDrop(dropEvent);
- }.createDelegate(this));
- }else{
- this.completeDrop(dropEvent);
- }
- return true;
- },
-
- completeDrop : function(de){
- var ns = de.dropNode, p = de.point, t = de.target;
- if(!(ns instanceof Array)){
- ns = [ns];
- }
- var n;
- for(var i = 0, len = ns.length; i < len; i++){
- n = ns[i];
- if(p == "above"){
- t.parentNode.insertBefore(n, t);
- }else if(p == "below"){
- t.parentNode.insertBefore(n, t.nextSibling);
- }else{
- t.appendChild(n);
- }
- }
- n.ui.focus();
- if(this.tree.hlDrop){
- n.ui.highlight();
- }
- t.ui.endDrop();
- this.tree.fireEvent("nodedrop", de);
- },
-
- afterNodeMoved : function(dd, data, e, targetNode, dropNode){
- if(this.tree.hlDrop){
- dropNode.ui.focus();
- dropNode.ui.highlight();
- }
- this.tree.fireEvent("nodedrop", this.tree, targetNode, data, dd, e);
- },
-
- getTree : function(){
- return this.tree;
- },
-
- removeDropIndicators : function(n){
- if(n && n.ddel){
- var el = n.ddel;
- Roo.fly(el).removeClass([
- "x-tree-drag-insert-above",
- "x-tree-drag-insert-below",
- "x-tree-drag-append"]);
- this.lastInsertClass = "_noclass";
- }
- },
-
- beforeDragDrop : function(target, e, id){
- this.cancelExpand();
- return true;
- },
-
- afterRepair : function(data){
- if(data && Roo.enableFx){
- data.node.ui.highlight();
- }
- this.hideProxy();
- }
-});
-
-}
-/*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
- */
-
-
-if(Roo.dd.DragZone){
-Roo.tree.TreeDragZone = function(tree, config){
- Roo.tree.TreeDragZone.superclass.constructor.call(this, tree.getTreeEl(), config);
- this.tree = tree;
-};
-
-Roo.extend(Roo.tree.TreeDragZone, Roo.dd.DragZone, {
- ddGroup : "TreeDD",
-
- onBeforeDrag : function(data, e){
- var n = data.node;
- return n && n.draggable && !n.disabled;
- },
-
- onInitDrag : function(e){
- var data = this.dragData;
- this.tree.getSelectionModel().select(data.node);
- this.proxy.update("");
- data.node.ui.appendDDGhost(this.proxy.ghost.dom);
- this.tree.fireEvent("startdrag", this.tree, data.node, e);
- },
-
- getRepairXY : function(e, data){
- return data.node.ui.getDDRepairXY();
- },
-
- onEndDrag : function(data, e){
- this.tree.fireEvent("enddrag", this.tree, data.node, e);
- },
-
- onValidDrop : function(dd, e, id){
- this.tree.fireEvent("dragdrop", this.tree, this.dragData.node, dd, e);
- this.hideProxy();
- },
-
- beforeInvalidDrop : function(e, id){
- // this scrolls the original position back into view
- var sm = this.tree.getSelectionModel();
- sm.clearSelections();
- sm.select(this.dragData.node);
- }
-});
-}/*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
- */
-/**
- * @class Roo.tree.TreeEditor
- * @extends Roo.Editor
- * Provides editor functionality for inline tree node editing. Any valid {@link Roo.form.Field} can be used
- * as the editor field.
- * @constructor
- * @param {TreePanel} tree
- * @param {Object} config Either a prebuilt {@link Roo.form.Field} instance or a Field config object
- */
-Roo.tree.TreeEditor = function(tree, config){
- config = config || {};
- var field = config.events ? config : new Roo.form.TextField(config);
- Roo.tree.TreeEditor.superclass.constructor.call(this, field);
-
- this.tree = tree;
-
- tree.on('beforeclick', this.beforeNodeClick, this);
- tree.getTreeEl().on('mousedown', this.hide, this);
- this.on('complete', this.updateNode, this);
- this.on('beforestartedit', this.fitToTree, this);
- this.on('startedit', this.bindScroll, this, {delay:10});
- this.on('specialkey', this.onSpecialKey, this);
-};
-
-Roo.extend(Roo.tree.TreeEditor, Roo.Editor, {
- /**
- * @cfg {String} alignment
- * The position to align to (see {@link Roo.Element#alignTo} for more details, defaults to "l-l").
- */
- alignment: "l-l",
- // inherit
- autoSize: false,
- /**
- * @cfg {Boolean} hideEl
- * True to hide the bound element while the editor is displayed (defaults to false)
- */
- hideEl : false,
- /**
- * @cfg {String} cls
- * CSS class to apply to the editor (defaults to "x-small-editor x-tree-editor")
- */
- cls: "x-small-editor x-tree-editor",
- /**
- * @cfg {Boolean} shim
- * True to shim the editor if selects/iframes could be displayed beneath it (defaults to false)
- */
- shim:false,
- // inherit
- shadow:"frame",
- /**
- * @cfg {Number} maxWidth
- * The maximum width in pixels of the editor field (defaults to 250). Note that if the maxWidth would exceed
- * the containing tree element's size, it will be automatically limited for you to the container width, taking
- * scroll and client offsets into account prior to each edit.
- */
- maxWidth: 250,
-
- editDelay : 350,
-
- // private
- fitToTree : function(ed, el){
- var td = this.tree.getTreeEl().dom, nd = el.dom;
- if(td.scrollLeft > nd.offsetLeft){ // ensure the node left point is visible
- td.scrollLeft = nd.offsetLeft;
- }
- var w = Math.min(
- this.maxWidth,
- (td.clientWidth > 20 ? td.clientWidth : td.offsetWidth) - Math.max(0, nd.offsetLeft-td.scrollLeft) - /*cushion*/5);
- this.setSize(w, '');
- },
-
- // private
- triggerEdit : function(node){
- this.completeEdit();
- this.editNode = node;
- this.startEdit(node.ui.textNode, node.text);
- },
-
- // private
- bindScroll : function(){
- this.tree.getTreeEl().on('scroll', this.cancelEdit, this);
- },
-
- // private
- beforeNodeClick : function(node, e){
- var sinceLast = (this.lastClick ? this.lastClick.getElapsed() : 0);
- this.lastClick = new Date();
- if(sinceLast > this.editDelay && this.tree.getSelectionModel().isSelected(node)){
- e.stopEvent();
- this.triggerEdit(node);
- return false;
- }
- },
-
- // private
- updateNode : function(ed, value){
- this.tree.getTreeEl().un('scroll', this.cancelEdit, this);
- this.editNode.setText(value);
- },
-
- // private
- onHide : function(){
- Roo.tree.TreeEditor.superclass.onHide.call(this);
- if(this.editNode){
- this.editNode.ui.focus();
- }
- },
-
- // private
- onSpecialKey : function(field, e){
- var k = e.getKey();
- if(k == e.ESC){
- e.stopEvent();
- this.cancelEdit();
- }else if(k == e.ENTER && !e.hasModifier()){
- e.stopEvent();
- this.completeEdit();
- }
- }
-});//<Script type="text/javascript">
-/*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
- */
-
-/**
- * Not documented??? - probably should be...
- */
-
-Roo.tree.ColumnNodeUI = Roo.extend(Roo.tree.TreeNodeUI, {
- //focus: Roo.emptyFn, // prevent odd scrolling behavior
-
- renderElements : function(n, a, targetNode, bulkRender){
- //consel.log("renderElements?");
- this.indentMarkup = n.parentNode ? n.parentNode.ui.getChildIndent() : '';
-
- var t = n.getOwnerTree();
- var tid = Pman.Tab.Document_TypesTree.tree.el.id;
-
- var cols = t.columns;
- var bw = t.borderWidth;
- var c = cols[0];
- var href = a.href ? a.href : Roo.isGecko ? "" : "#";
- var cb = typeof a.checked == "boolean";
- var tx = String.format('{0}',n.text || (c.renderer ? c.renderer(a[c.dataIndex], n, a) : a[c.dataIndex]));
- var colcls = 'x-t-' + tid + '-c0';
- var buf = [
- '<li class="x-tree-node">',
-
-
- '<div class="x-tree-node-el ', a.cls,'">',
- // extran...
- '<div class="x-tree-col ', colcls, '" style="width:', c.width-bw, 'px;">',
-
-
- '<span class="x-tree-node-indent">',this.indentMarkup,'</span>',
- '<img src="', this.emptyIcon, '" class="x-tree-ec-icon " />',
- '<img src="', a.icon || this.emptyIcon, '" class="x-tree-node-icon',
- (a.icon ? ' x-tree-node-inline-icon' : ''),
- (a.iconCls ? ' '+a.iconCls : ''),
- '" unselectable="on" />',
- (cb ? ('<input class="x-tree-node-cb" type="checkbox" ' +
- (a.checked ? 'checked="checked" />' : ' />')) : ''),
-
- '<a class="x-tree-node-anchor" hidefocus="on" href="',href,'" tabIndex="1" ',
- (a.hrefTarget ? ' target="' +a.hrefTarget + '"' : ''), '>',
- '<span unselectable="on" qtip="' + tx + '">',
- tx,
- '</span></a>' ,
- '</div>',
- '<a class="x-tree-node-anchor" hidefocus="on" href="',href,'" tabIndex="1" ',
- (a.hrefTarget ? ' target="' +a.hrefTarget + '"' : ''), '>'
- ];
- for(var i = 1, len = cols.length; i < len; i++){
- c = cols[i];
- colcls = 'x-t-' + tid + '-c' +i;
- tx = String.format('{0}', (c.renderer ? c.renderer(a[c.dataIndex], n, a) : a[c.dataIndex]));
- buf.push('<div class="x-tree-col ', colcls, ' ' ,(c.cls?c.cls:''),'" style="width:',c.width-bw,'px;">',
- '<div class="x-tree-col-text" qtip="' + tx +'">',tx,"</div>",
- "</div>");
- }
-
- buf.push(
- '</a>',
- '<div class="x-clear"></div></div>',
- '<ul class="x-tree-node-ct" style="display:none;"></ul>',
- "</li>");
-
- if(bulkRender !== true && n.nextSibling && n.nextSibling.ui.getEl()){
- this.wrap = Roo.DomHelper.insertHtml("beforeBegin",
- n.nextSibling.ui.getEl(), buf.join(""));
- }else{
- this.wrap = Roo.DomHelper.insertHtml("beforeEnd", targetNode, buf.join(""));
- }
- var el = this.wrap.firstChild;
- this.elRow = el;
- this.elNode = el.firstChild;
- this.ranchor = el.childNodes[1];
- this.ctNode = this.wrap.childNodes[1];
- var cs = el.firstChild.childNodes;
- this.indentNode = cs[0];
- this.ecNode = cs[1];
- this.iconNode = cs[2];
- var index = 3;
- if(cb){
- this.checkbox = cs[3];
- index++;
- }
- this.anchor = cs[index];
-
- this.textNode = cs[index].firstChild;
-
- //el.on("click", this.onClick, this);
- //el.on("dblclick", this.onDblClick, this);
-
-
- // console.log(this);
- },
- initEvents : function(){
- Roo.tree.ColumnNodeUI.superclass.initEvents.call(this);
-
-
- var a = this.ranchor;
-
- var el = Roo.get(a);
-
- if(Roo.isOpera){ // opera render bug ignores the CSS
- el.setStyle("text-decoration", "none");
- }
-
- el.on("click", this.onClick, this);
- el.on("dblclick", this.onDblClick, this);
- el.on("contextmenu", this.onContextMenu, this);
-
- },
-
- /*onSelectedChange : function(state){
- if(state){
- this.focus();
- this.addClass("x-tree-selected");
- }else{
- //this.blur();
- this.removeClass("x-tree-selected");
- }
- },*/
- addClass : function(cls){
- if(this.elRow){
- Roo.fly(this.elRow).addClass(cls);
- }
-
- },
-
-
- removeClass : function(cls){
- if(this.elRow){
- Roo.fly(this.elRow).removeClass(cls);
- }
- }
-
-
-
-});//<Script type="text/javascript">
-
-/*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
- */
-
-
-/**
- * @class Roo.tree.ColumnTree
- * @extends Roo.data.TreePanel
- * @cfg {Object} columns Including width, header, renderer, cls, dataIndex
- * @cfg {int} borderWidth compined right/left border allowance
- * @constructor
- * @param {String/HTMLElement/Element} el The container element
- * @param {Object} config
- */
-Roo.tree.ColumnTree = function(el, config)
-{
- Roo.tree.ColumnTree.superclass.constructor.call(this, el , config);
- this.addEvents({
- /**
- * @event resize
- * Fire this event on a container when it resizes
- * @param {int} w Width
- * @param {int} h Height
- */
- "resize" : true
- });
- this.on('resize', this.onResize, this);
-};
-
-Roo.extend(Roo.tree.ColumnTree, Roo.tree.TreePanel, {
- //lines:false,
-
-
- borderWidth: Roo.isBorderBox ? 0 : 2,
- headEls : false,
-
- render : function(){
- // add the header.....
-
- Roo.tree.ColumnTree.superclass.render.apply(this);
-
- this.el.addClass('x-column-tree');
-
- this.headers = this.el.createChild(
- {cls:'x-tree-headers'},this.innerCt.dom);
-
- var cols = this.columns, c;
- var totalWidth = 0;
- this.headEls = [];
- var len = cols.length;
- for(var i = 0; i < len; i++){
- c = cols[i];
- totalWidth += c.width;
- this.headEls.push(this.headers.createChild({
- cls:'x-tree-hd ' + (c.cls?c.cls+'-hd':''),
- cn: {
- cls:'x-tree-hd-text',
- html: c.header
- },
- style:'width:'+(c.width-this.borderWidth)+'px;'
- }));
- }
- this.headers.createChild({cls:'x-clear'});
- // prevent floats from wrapping when clipped
- this.headers.setWidth(totalWidth);
- //this.innerCt.setWidth(totalWidth);
- this.innerCt.setStyle({ overflow: 'auto' });
- this.onResize(this.width, this.height);
-
-
- },
- onResize : function(w,h)
- {
- this.height = h;
- this.width = w;
- // resize cols..
- this.innerCt.setWidth(this.width);
- this.innerCt.setHeight(this.height-20);
-
- // headers...
- var cols = this.columns, c;
- var totalWidth = 0;
- var expEl = false;
- var len = cols.length;
- for(var i = 0; i < len; i++){
- c = cols[i];
- if (this.autoExpandColumn !== false && c.dataIndex == this.autoExpandColumn) {
- // it's the expander..
- expEl = this.headEls[i];
- continue;
- }
- totalWidth += c.width;
-
- }
- if (expEl) {
- expEl.setWidth( ((w - totalWidth)-this.borderWidth - 20));
- }
- this.headers.setWidth(w-20);
-
-
-
-
- }
-});
-/*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
- */
-
-/**
- * @class Roo.menu.Menu
- * @extends Roo.util.Observable
- * A menu object. This is the container to which you add all other menu items. Menu can also serve a as a base class
- * when you want a specialzed menu based off of another component (like {@link Roo.menu.DateMenu} for example).
- * @constructor
- * Creates a new Menu
- * @param {Object} config Configuration options
- */
-Roo.menu.Menu = function(config){
- Roo.apply(this, config);
- this.id = this.id || Roo.id();
- this.addEvents({
- /**
- * @event beforeshow
- * Fires before this menu is displayed
- * @param {Roo.menu.Menu} this
- */
- beforeshow : true,
- /**
- * @event beforehide
- * Fires before this menu is hidden
- * @param {Roo.menu.Menu} this
- */
- beforehide : true,
- /**
- * @event show
- * Fires after this menu is displayed
- * @param {Roo.menu.Menu} this
- */
- show : true,
- /**
- * @event hide
- * Fires after this menu is hidden
- * @param {Roo.menu.Menu} this
- */
- hide : true,
- /**
- * @event click
- * Fires when this menu is clicked (or when the enter key is pressed while it is active)
- * @param {Roo.menu.Menu} this
- * @param {Roo.menu.Item} menuItem The menu item that was clicked
- * @param {Roo.EventObject} e
- */
- click : true,
- /**
- * @event mouseover
- * Fires when the mouse is hovering over this menu
- * @param {Roo.menu.Menu} this
- * @param {Roo.EventObject} e
- * @param {Roo.menu.Item} menuItem The menu item that was clicked
- */
- mouseover : true,
- /**
- * @event mouseout
- * Fires when the mouse exits this menu
- * @param {Roo.menu.Menu} this
- * @param {Roo.EventObject} e
- * @param {Roo.menu.Item} menuItem The menu item that was clicked
- */
- mouseout : true,
- /**
- * @event itemclick
- * Fires when a menu item contained in this menu is clicked
- * @param {Roo.menu.BaseItem} baseItem The BaseItem that was clicked
- * @param {Roo.EventObject} e
- */
- itemclick: true
- });
- if (this.registerMenu) {
- Roo.menu.MenuMgr.register(this);
- }
-
- var mis = this.items;
- this.items = new Roo.util.MixedCollection();
- if(mis){
- this.add.apply(this, mis);
- }
-};
-
-Roo.extend(Roo.menu.Menu, Roo.util.Observable, {
- /**
- * @cfg {Number} minWidth The minimum width of the menu in pixels (defaults to 120)
- */
- minWidth : 120,
- /**
- * @cfg {Boolean/String} shadow True or "sides" for the default effect, "frame" for 4-way shadow, and "drop"
- * for bottom-right shadow (defaults to "sides")
- */
- shadow : "sides",
- /**
- * @cfg {String} subMenuAlign The {@link Roo.Element#alignTo} anchor position value to use for submenus of
- * this menu (defaults to "tl-tr?")
- */
- subMenuAlign : "tl-tr?",
- /**
- * @cfg {String} defaultAlign The default {@link Roo.Element#alignTo) anchor position value for this menu
- * relative to its element of origin (defaults to "tl-bl?")
- */
- defaultAlign : "tl-bl?",
- /**
- * @cfg {Boolean} allowOtherMenus True to allow multiple menus to be displayed at the same time (defaults to false)
- */
- allowOtherMenus : false,
- /**
- * @cfg {Boolean} registerMenu True (default) - means that clicking on screen etc. hides it.
- */
- registerMenu : true,
-
- hidden:true,
-
- // private
- render : function(){
- if(this.el){
- return;
- }
- var el = this.el = new Roo.Layer({
- cls: "x-menu",
- shadow:this.shadow,
- constrain: false,
- parentEl: this.parentEl || document.body,
- zindex:15000
- });
-
- this.keyNav = new Roo.menu.MenuNav(this);
-
- if(this.plain){
- el.addClass("x-menu-plain");
- }
- if(this.cls){
- el.addClass(this.cls);
- }
- // generic focus element
- this.focusEl = el.createChild({
- tag: "a", cls: "x-menu-focus", href: "#", onclick: "return false;", tabIndex:"-1"
- });
- var ul = el.createChild({tag: "ul", cls: "x-menu-list"});
- ul.on("click", this.onClick, this);
- ul.on("mouseover", this.onMouseOver, this);
- ul.on("mouseout", this.onMouseOut, this);
- this.items.each(function(item){
- var li = document.createElement("li");
- li.className = "x-menu-list-item";
- ul.dom.appendChild(li);
- item.render(li, this);
- }, this);
- this.ul = ul;
- this.autoWidth();
- },
-
- // private
- autoWidth : function(){
- var el = this.el, ul = this.ul;
- if(!el){
- return;
- }
- var w = this.width;
- if(w){
- el.setWidth(w);
- }else if(Roo.isIE){
- el.setWidth(this.minWidth);
- var t = el.dom.offsetWidth; // force recalc
- el.setWidth(ul.getWidth()+el.getFrameWidth("lr"));
- }
- },
-
- // private
- delayAutoWidth : function(){
- if(this.rendered){
- if(!this.awTask){
- this.awTask = new Roo.util.DelayedTask(this.autoWidth, this);
- }
- this.awTask.delay(20);
- }
- },
-
- // private
- findTargetItem : function(e){
- var t = e.getTarget(".x-menu-list-item", this.ul, true);
- if(t && t.menuItemId){
- return this.items.get(t.menuItemId);
- }
- },
-
- // private
- onClick : function(e){
- var t;
- if(t = this.findTargetItem(e)){
- t.onClick(e);
- this.fireEvent("click", this, t, e);
- }
- },
-
- // private
- setActiveItem : function(item, autoExpand){
- if(item != this.activeItem){
- if(this.activeItem){
- this.activeItem.deactivate();
- }
- this.activeItem = item;
- item.activate(autoExpand);
- }else if(autoExpand){
- item.expandMenu();
- }
- },
-
- // private
- tryActivate : function(start, step){
- var items = this.items;
- for(var i = start, len = items.length; i >= 0 && i < len; i+= step){
- var item = items.get(i);
- if(!item.disabled && item.canActivate){
- this.setActiveItem(item, false);
- return item;
- }
- }
- return false;
- },
-
- // private
- onMouseOver : function(e){
- var t;
- if(t = this.findTargetItem(e)){
- if(t.canActivate && !t.disabled){
- this.setActiveItem(t, true);
- }
- }
- this.fireEvent("mouseover", this, e, t);
- },
-
- // private
- onMouseOut : function(e){
- var t;
- if(t = this.findTargetItem(e)){
- if(t == this.activeItem && t.shouldDeactivate(e)){
- this.activeItem.deactivate();
- delete this.activeItem;
- }
- }
- this.fireEvent("mouseout", this, e, t);
- },
-
- /**
- * Read-only. Returns true if the menu is currently displayed, else false.
- * @type Boolean
- */
- isVisible : function(){
- return this.el && !this.hidden;
- },
-
- /**
- * Displays this menu relative to another element
- * @param {String/HTMLElement/Roo.Element} element The element to align to
- * @param {String} position (optional) The {@link Roo.Element#alignTo} anchor position to use in aligning to
- * the element (defaults to this.defaultAlign)
- * @param {Roo.menu.Menu} parentMenu (optional) This menu's parent menu, if applicable (defaults to undefined)
- */
- show : function(el, pos, parentMenu){
- this.parentMenu = parentMenu;
- if(!this.el){
- this.render();
- }
- this.fireEvent("beforeshow", this);
- this.showAt(this.el.getAlignToXY(el, pos || this.defaultAlign), parentMenu, false);
- },
-
- /**
- * Displays this menu at a specific xy position
- * @param {Array} xyPosition Contains X & Y [x, y] values for the position at which to show the menu (coordinates are page-based)
- * @param {Roo.menu.Menu} parentMenu (optional) This menu's parent menu, if applicable (defaults to undefined)
- */
- showAt : function(xy, parentMenu, /* private: */_e){
- this.parentMenu = parentMenu;
- if(!this.el){
- this.render();
- }
- if(_e !== false){
- this.fireEvent("beforeshow", this);
- xy = this.el.adjustForConstraints(xy);
- }
- this.el.setXY(xy);
- this.el.show();
- this.hidden = false;
- this.focus();
- this.fireEvent("show", this);
- },
-
- focus : function(){
- if(!this.hidden){
- this.doFocus.defer(50, this);
- }
- },
-
- doFocus : function(){
- if(!this.hidden){
- this.focusEl.focus();
- }
- },
-
- /**
- * Hides this menu and optionally all parent menus
- * @param {Boolean} deep (optional) True to hide all parent menus recursively, if any (defaults to false)
- */
- hide : function(deep){
- if(this.el && this.isVisible()){
- this.fireEvent("beforehide", this);
- if(this.activeItem){
- this.activeItem.deactivate();
- this.activeItem = null;
- }
- this.el.hide();
- this.hidden = true;
- this.fireEvent("hide", this);
- }
- if(deep === true && this.parentMenu){
- this.parentMenu.hide(true);
- }
- },
-
- /**
- * Addds one or more items of any type supported by the Menu class, or that can be converted into menu items.
- * Any of the following are valid:
- * <ul>
- * <li>Any menu item object based on {@link Roo.menu.Item}</li>
- * <li>An HTMLElement object which will be converted to a menu item</li>
- * <li>A menu item config object that will be created as a new menu item</li>
- * <li>A string, which can either be '-' or 'separator' to add a menu separator, otherwise
- * it will be converted into a {@link Roo.menu.TextItem} and added</li>
- * </ul>
- * Usage:
- * <pre><code>
-// Create the menu
-var menu = new Roo.menu.Menu();
-
-// Create a menu item to add by reference
-var menuItem = new Roo.menu.Item({ text: 'New Item!' });
-
-// Add a bunch of items at once using different methods.
-// Only the last item added will be returned.
-var item = menu.add(
- menuItem, // add existing item by ref
- 'Dynamic Item', // new TextItem
- '-', // new separator
- { text: 'Config Item' } // new item by config
-);
-</code></pre>
- * @param {Mixed} args One or more menu items, menu item configs or other objects that can be converted to menu items
- * @return {Roo.menu.Item} The menu item that was added, or the last one if multiple items were added
- */
- add : function(){
- var a = arguments, l = a.length, item;
- for(var i = 0; i < l; i++){
- var el = a[i];
- if ((typeof(el) == "object") && el.xtype && el.xns) {
- el = Roo.factory(el, Roo.menu);
- }
-
- if(el.render){ // some kind of Item
- item = this.addItem(el);
- }else if(typeof el == "string"){ // string
- if(el == "separator" || el == "-"){
- item = this.addSeparator();
- }else{
- item = this.addText(el);
- }
- }else if(el.tagName || el.el){ // element
- item = this.addElement(el);
- }else if(typeof el == "object"){ // must be menu item config?
- item = this.addMenuItem(el);
- }
- }
- return item;
- },
-
- /**
- * Returns this menu's underlying {@link Roo.Element} object
- * @return {Roo.Element} The element
- */
- getEl : function(){
- if(!this.el){
- this.render();
- }
- return this.el;
- },
-
- /**
- * Adds a separator bar to the menu
- * @return {Roo.menu.Item} The menu item that was added
- */
- addSeparator : function(){
- return this.addItem(new Roo.menu.Separator());
- },
-
- /**
- * Adds an {@link Roo.Element} object to the menu
- * @param {String/HTMLElement/Roo.Element} el The element or DOM node to add, or its id
- * @return {Roo.menu.Item} The menu item that was added
- */
- addElement : function(el){
- return this.addItem(new Roo.menu.BaseItem(el));
- },
-
- /**
- * Adds an existing object based on {@link Roo.menu.Item} to the menu
- * @param {Roo.menu.Item} item The menu item to add
- * @return {Roo.menu.Item} The menu item that was added
- */
- addItem : function(item){
- this.items.add(item);
- if(this.ul){
- var li = document.createElement("li");
- li.className = "x-menu-list-item";
- this.ul.dom.appendChild(li);
- item.render(li, this);
- this.delayAutoWidth();
- }
- return item;
- },
-
- /**
- * Creates a new {@link Roo.menu.Item} based an the supplied config object and adds it to the menu
- * @param {Object} config A MenuItem config object
- * @return {Roo.menu.Item} The menu item that was added
- */
- addMenuItem : function(config){
- if(!(config instanceof Roo.menu.Item)){
- if(typeof config.checked == "boolean"){ // must be check menu item config?
- config = new Roo.menu.CheckItem(config);
- }else{
- config = new Roo.menu.Item(config);
- }
- }
- return this.addItem(config);
- },
-
- /**
- * Creates a new {@link Roo.menu.TextItem} with the supplied text and adds it to the menu
- * @param {String} text The text to display in the menu item
- * @return {Roo.menu.Item} The menu item that was added
- */
- addText : function(text){
- return this.addItem(new Roo.menu.TextItem({ text : text }));
- },
-
- /**
- * Inserts an existing object based on {@link Roo.menu.Item} to the menu at a specified index
- * @param {Number} index The index in the menu's list of current items where the new item should be inserted
- * @param {Roo.menu.Item} item The menu item to add
- * @return {Roo.menu.Item} The menu item that was added
- */
- insert : function(index, item){
- this.items.insert(index, item);
- if(this.ul){
- var li = document.createElement("li");
- li.className = "x-menu-list-item";
- this.ul.dom.insertBefore(li, this.ul.dom.childNodes[index]);
- item.render(li, this);
- this.delayAutoWidth();
- }
- return item;
- },
-
- /**
- * Removes an {@link Roo.menu.Item} from the menu and destroys the object
- * @param {Roo.menu.Item} item The menu item to remove
- */
- remove : function(item){
- this.items.removeKey(item.id);
- item.destroy();
- },
-
- /**
- * Removes and destroys all items in the menu
- */
- removeAll : function(){
- var f;
- while(f = this.items.first()){
- this.remove(f);
- }
- }
-});
-
-// MenuNav is a private utility class used internally by the Menu
-Roo.menu.MenuNav = function(menu){
- Roo.menu.MenuNav.superclass.constructor.call(this, menu.el);
- this.scope = this.menu = menu;
-};
-
-Roo.extend(Roo.menu.MenuNav, Roo.KeyNav, {
- doRelay : function(e, h){
- var k = e.getKey();
- if(!this.menu.activeItem && e.isNavKeyPress() && k != e.SPACE && k != e.RETURN){
- this.menu.tryActivate(0, 1);
- return false;
- }
- return h.call(this.scope || this, e, this.menu);
- },
-
- up : function(e, m){
- if(!m.tryActivate(m.items.indexOf(m.activeItem)-1, -1)){
- m.tryActivate(m.items.length-1, -1);
- }
- },
-
- down : function(e, m){
- if(!m.tryActivate(m.items.indexOf(m.activeItem)+1, 1)){
- m.tryActivate(0, 1);
- }
- },
-
- right : function(e, m){
- if(m.activeItem){
- m.activeItem.expandMenu(true);
- }
- },
-
- left : function(e, m){
- m.hide();
- if(m.parentMenu && m.parentMenu.activeItem){
- m.parentMenu.activeItem.activate();
- }
- },
-
- enter : function(e, m){
- if(m.activeItem){
- e.stopPropagation();
- m.activeItem.onClick(e);
- m.fireEvent("click", this, m.activeItem);
- return true;
- }
- }
-});/*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
- */
-
-/**
- * @class Roo.menu.MenuMgr
- * Provides a common registry of all menu items on a page so that they can be easily accessed by id.
- * @singleton
- */
-Roo.menu.MenuMgr = function(){
- var menus, active, groups = {}, attached = false, lastShow = new Date();
-
- // private - called when first menu is created
- function init(){
- menus = {};
- active = new Roo.util.MixedCollection();
- Roo.get(document).addKeyListener(27, function(){
- if(active.length > 0){
- hideAll();
- }
- });
- }
-
- // private
- function hideAll(){
- if(active && active.length > 0){
- var c = active.clone();
- c.each(function(m){
- m.hide();
- });
- }
- }
-
- // private
- function onHide(m){
- active.remove(m);
- if(active.length < 1){
- Roo.get(document).un("mousedown", onMouseDown);
- attached = false;
- }
- }
-
- // private
- function onShow(m){
- var last = active.last();
- lastShow = new Date();
- active.add(m);
- if(!attached){
- Roo.get(document).on("mousedown", onMouseDown);
- attached = true;
- }
- if(m.parentMenu){
- m.getEl().setZIndex(parseInt(m.parentMenu.getEl().getStyle("z-index"), 10) + 3);
- m.parentMenu.activeChild = m;
- }else if(last && last.isVisible()){
- m.getEl().setZIndex(parseInt(last.getEl().getStyle("z-index"), 10) + 3);
- }
- }
-
- // private
- function onBeforeHide(m){
- if(m.activeChild){
- m.activeChild.hide();
- }
- if(m.autoHideTimer){
- clearTimeout(m.autoHideTimer);
- delete m.autoHideTimer;
- }
- }
-
- // private
- function onBeforeShow(m){
- var pm = m.parentMenu;
- if(!pm && !m.allowOtherMenus){
- hideAll();
- }else if(pm && pm.activeChild && active != m){
- pm.activeChild.hide();
- }
- }
-
- // private
- function onMouseDown(e){
- if(lastShow.getElapsed() > 50 && active.length > 0 && !e.getTarget(".x-menu")){
- hideAll();
- }
- }
-
- // private
- function onBeforeCheck(mi, state){
- if(state){
- var g = groups[mi.group];
- for(var i = 0, l = g.length; i < l; i++){
- if(g[i] != mi){
- g[i].setChecked(false);
- }
- }
- }
- }
-
- return {
-
- /**
- * Hides all menus that are currently visible
- */
- hideAll : function(){
- hideAll();
- },
-
- // private
- register : function(menu){
- if(!menus){
- init();
- }
- menus[menu.id] = menu;
- menu.on("beforehide", onBeforeHide);
- menu.on("hide", onHide);
- menu.on("beforeshow", onBeforeShow);
- menu.on("show", onShow);
- var g = menu.group;
- if(g && menu.events["checkchange"]){
- if(!groups[g]){
- groups[g] = [];
- }
- groups[g].push(menu);
- menu.on("checkchange", onCheck);
- }
- },
-
- /**
- * Returns a {@link Roo.menu.Menu} object
- * @param {String/Object} menu The string menu id, an existing menu object reference, or a Menu config that will
- * be used to generate and return a new Menu instance.
- */
- get : function(menu){
- if(typeof menu == "string"){ // menu id
- return menus[menu];
- }else if(menu.events){ // menu instance
- return menu;
- }else if(typeof menu.length == 'number'){ // array of menu items?
- return new Roo.menu.Menu({items:menu});
- }else{ // otherwise, must be a config
- return new Roo.menu.Menu(menu);
- }
- },
-
- // private
- unregister : function(menu){
- delete menus[menu.id];
- menu.un("beforehide", onBeforeHide);
- menu.un("hide", onHide);
- menu.un("beforeshow", onBeforeShow);
- menu.un("show", onShow);
- var g = menu.group;
- if(g && menu.events["checkchange"]){
- groups[g].remove(menu);
- menu.un("checkchange", onCheck);
- }
- },
-
- // private
- registerCheckable : function(menuItem){
- var g = menuItem.group;
- if(g){
- if(!groups[g]){
- groups[g] = [];
- }
- groups[g].push(menuItem);
- menuItem.on("beforecheckchange", onBeforeCheck);
- }
- },
-
- // private
- unregisterCheckable : function(menuItem){
- var g = menuItem.group;
- if(g){
- groups[g].remove(menuItem);
- menuItem.un("beforecheckchange", onBeforeCheck);
- }
- }
- };
-}();/*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
- */
-
-
-/**
- * @class Roo.menu.BaseItem
- * @extends Roo.Component
- * The base class for all items that render into menus. BaseItem provides default rendering, activated state
- * management and base configuration options shared by all menu components.
- * @constructor
- * Creates a new BaseItem
- * @param {Object} config Configuration options
- */
-Roo.menu.BaseItem = function(config){
- Roo.menu.BaseItem.superclass.constructor.call(this, config);
-
- this.addEvents({
- /**
- * @event click
- * Fires when this item is clicked
- * @param {Roo.menu.BaseItem} this
- * @param {Roo.EventObject} e
- */
- click: true,
- /**
- * @event activate
- * Fires when this item is activated
- * @param {Roo.menu.BaseItem} this
- */
- activate : true,
- /**
- * @event deactivate
- * Fires when this item is deactivated
- * @param {Roo.menu.BaseItem} this
- */
- deactivate : true
- });
-
- if(this.handler){
- this.on("click", this.handler, this.scope, true);
- }
-};
-
-Roo.extend(Roo.menu.BaseItem, Roo.Component, {
- /**
- * @cfg {Function} handler
- * A function that will handle the click event of this menu item (defaults to undefined)
- */
- /**
- * @cfg {Boolean} canActivate True if this item can be visually activated (defaults to false)
- */
- canActivate : false,
- /**
- * @cfg {String} activeClass The CSS class to use when the item becomes activated (defaults to "x-menu-item-active")
- */
- activeClass : "x-menu-item-active",
- /**
- * @cfg {Boolean} hideOnClick True to hide the containing menu after this item is clicked (defaults to true)
- */
- hideOnClick : true,
- /**
- * @cfg {Number} hideDelay Length of time in milliseconds to wait before hiding after a click (defaults to 100)
- */
- hideDelay : 100,
-
- // private
- ctype: "Roo.menu.BaseItem",
-
- // private
- actionMode : "container",
-
- // private
- render : function(container, parentMenu){
- this.parentMenu = parentMenu;
- Roo.menu.BaseItem.superclass.render.call(this, container);
- this.container.menuItemId = this.id;
- },
-
- // private
- onRender : function(container, position){
- this.el = Roo.get(this.el);
- container.dom.appendChild(this.el.dom);
- },
-
- // private
- onClick : function(e){
- if(!this.disabled && this.fireEvent("click", this, e) !== false
- && this.parentMenu.fireEvent("itemclick", this, e) !== false){
- this.handleClick(e);
- }else{
- e.stopEvent();
- }
- },
-
- // private
- activate : function(){
- if(this.disabled){
- return false;
- }
- var li = this.container;
- li.addClass(this.activeClass);
- this.region = li.getRegion().adjust(2, 2, -2, -2);
- this.fireEvent("activate", this);
- return true;
- },
-
- // private
- deactivate : function(){
- this.container.removeClass(this.activeClass);
- this.fireEvent("deactivate", this);
- },
-
- // private
- shouldDeactivate : function(e){
- return !this.region || !this.region.contains(e.getPoint());
- },
-
- // private
- handleClick : function(e){
- if(this.hideOnClick){
- this.parentMenu.hide.defer(this.hideDelay, this.parentMenu, [true]);
- }
- },
-
- // private
- expandMenu : function(autoActivate){
- // do nothing
- },
-
- // private
- hideMenu : function(){
- // do nothing
- }
-});/*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
- */
-
-/**
- * @class Roo.menu.Adapter
- * @extends Roo.menu.BaseItem
- * A base utility class that adapts a non-menu component so that it can be wrapped by a menu item and added to a menu.
- * It provides basic rendering, activation management and enable/disable logic required to work in menus.
- * @constructor
- * Creates a new Adapter
- * @param {Object} config Configuration options
- */
-Roo.menu.Adapter = function(component, config){
- Roo.menu.Adapter.superclass.constructor.call(this, config);
- this.component = component;
-};
-Roo.extend(Roo.menu.Adapter, Roo.menu.BaseItem, {
- // private
- canActivate : true,
-
- // private
- onRender : function(container, position){
- this.component.render(container);
- this.el = this.component.getEl();
- },
-
- // private
- activate : function(){
- if(this.disabled){
- return false;
- }
- this.component.focus();
- this.fireEvent("activate", this);
- return true;
- },
-
- // private
- deactivate : function(){
- this.fireEvent("deactivate", this);
- },
-
- // private
- disable : function(){
- this.component.disable();
- Roo.menu.Adapter.superclass.disable.call(this);
- },
-
- // private
- enable : function(){
- this.component.enable();
- Roo.menu.Adapter.superclass.enable.call(this);
- }
-});/*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
- */
-
-/**
- * @class Roo.menu.TextItem
- * @extends Roo.menu.BaseItem
- * Adds a static text string to a menu, usually used as either a heading or group separator.
- * Note: old style constructor with text is still supported.
- *
- * @constructor
- * Creates a new TextItem
- * @param {Object} cfg Configuration
- */
-Roo.menu.TextItem = function(cfg){
- if (typeof(cfg) == 'string') {
- this.text = cfg;
- } else {
- Roo.apply(this,cfg);
- }
-
- Roo.menu.TextItem.superclass.constructor.call(this);
-};
-
-Roo.extend(Roo.menu.TextItem, Roo.menu.BaseItem, {
- /**
- * @cfg {Boolean} text Text to show on item.
- */
- text : '',
-
- /**
- * @cfg {Boolean} hideOnClick True to hide the containing menu after this item is clicked (defaults to false)
- */
- hideOnClick : false,
- /**
- * @cfg {String} itemCls The default CSS class to use for text items (defaults to "x-menu-text")
- */
- itemCls : "x-menu-text",
-
- // private
- onRender : function(){
- var s = document.createElement("span");
- s.className = this.itemCls;
- s.innerHTML = this.text;
- this.el = s;
- Roo.menu.TextItem.superclass.onRender.apply(this, arguments);
- }
-});/*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
- */
-
-/**
- * @class Roo.menu.Separator
- * @extends Roo.menu.BaseItem
- * Adds a separator bar to a menu, used to divide logical groups of menu items. Generally you will
- * add one of these by using "-" in you call to add() or in your items config rather than creating one directly.
- * @constructor
- * @param {Object} config Configuration options
- */
-Roo.menu.Separator = function(config){
- Roo.menu.Separator.superclass.constructor.call(this, config);
-};
-
-Roo.extend(Roo.menu.Separator, Roo.menu.BaseItem, {
- /**
- * @cfg {String} itemCls The default CSS class to use for separators (defaults to "x-menu-sep")
- */
- itemCls : "x-menu-sep",
- /**
- * @cfg {Boolean} hideOnClick True to hide the containing menu after this item is clicked (defaults to false)
- */
- hideOnClick : false,
-
- // private
- onRender : function(li){
- var s = document.createElement("span");
- s.className = this.itemCls;
- s.innerHTML = " ";
- this.el = s;
- li.addClass("x-menu-sep-li");
- Roo.menu.Separator.superclass.onRender.apply(this, arguments);
- }
-});/*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
- */
-/**
- * @class Roo.menu.Item
- * @extends Roo.menu.BaseItem
- * A base class for all menu items that require menu-related functionality (like sub-menus) and are not static
- * display items. Item extends the base functionality of {@link Roo.menu.BaseItem} by adding menu-specific
- * activation and click handling.
- * @constructor
- * Creates a new Item
- * @param {Object} config Configuration options
- */
-Roo.menu.Item = function(config){
- Roo.menu.Item.superclass.constructor.call(this, config);
- if(this.menu){
- this.menu = Roo.menu.MenuMgr.get(this.menu);
- }
-};
-Roo.extend(Roo.menu.Item, Roo.menu.BaseItem, {
-
- /**
- * @cfg {String} text
- * The text to show on the menu item.
- */
- text: '',
- /**
- * @cfg {String} HTML to render in menu
- * The text to show on the menu item (HTML version).
- */
- html: '',
- /**
- * @cfg {String} icon
- * The path to an icon to display in this menu item (defaults to Roo.BLANK_IMAGE_URL)
- */
- icon: undefined,
- /**
- * @cfg {String} itemCls The default CSS class to use for menu items (defaults to "x-menu-item")
- */
- itemCls : "x-menu-item",
- /**
- * @cfg {Boolean} canActivate True if this item can be visually activated (defaults to true)
- */
- canActivate : true,
- /**
- * @cfg {Number} showDelay Length of time in milliseconds to wait before showing this item (defaults to 200)
- */
- showDelay: 200,
- // doc'd in BaseItem
- hideDelay: 200,
-
- // private
- ctype: "Roo.menu.Item",
-
- // private
- onRender : function(container, position){
- var el = document.createElement("a");
- el.hideFocus = true;
- el.unselectable = "on";
- el.href = this.href || "#";
- if(this.hrefTarget){
- el.target = this.hrefTarget;
- }
- el.className = this.itemCls + (this.menu ? " x-menu-item-arrow" : "") + (this.cls ? " " + this.cls : "");
-
- var html = this.html.length ? this.html : String.format('{0}',this.text);
-
- el.innerHTML = String.format(
- '<img src="{0}" class="x-menu-item-icon {1}" />' + html,
- this.icon || Roo.BLANK_IMAGE_URL, this.iconCls || '');
- this.el = el;
- Roo.menu.Item.superclass.onRender.call(this, container, position);
- },
-
- /**
- * Sets the text to display in this menu item
- * @param {String} text The text to display
- * @param {Boolean} isHTML true to indicate text is pure html.
- */
- setText : function(text, isHTML){
- if (isHTML) {
- this.html = text;
- } else {
- this.text = text;
- this.html = '';
- }
- if(this.rendered){
- var html = this.html.length ? this.html : String.format('{0}',this.text);
-
- this.el.update(String.format(
- '<img src="{0}" class="x-menu-item-icon {2}">' + html,
- this.icon || Roo.BLANK_IMAGE_URL, this.text, this.iconCls || ''));
- this.parentMenu.autoWidth();
- }
- },
-
- // private
- handleClick : function(e){
- if(!this.href){ // if no link defined, stop the event automatically
- e.stopEvent();
- }
- Roo.menu.Item.superclass.handleClick.apply(this, arguments);
- },
-
- // private
- activate : function(autoExpand){
- if(Roo.menu.Item.superclass.activate.apply(this, arguments)){
- this.focus();
- if(autoExpand){
- this.expandMenu();
- }
- }
- return true;
- },
-
- // private
- shouldDeactivate : function(e){
- if(Roo.menu.Item.superclass.shouldDeactivate.call(this, e)){
- if(this.menu && this.menu.isVisible()){
- return !this.menu.getEl().getRegion().contains(e.getPoint());
- }
- return true;
- }
- return false;
- },
-
- // private
- deactivate : function(){
- Roo.menu.Item.superclass.deactivate.apply(this, arguments);
- this.hideMenu();
- },
-
- // private
- expandMenu : function(autoActivate){
- if(!this.disabled && this.menu){
- clearTimeout(this.hideTimer);
- delete this.hideTimer;
- if(!this.menu.isVisible() && !this.showTimer){
- this.showTimer = this.deferExpand.defer(this.showDelay, this, [autoActivate]);
- }else if (this.menu.isVisible() && autoActivate){
- this.menu.tryActivate(0, 1);
- }
- }
- },
-
- // private
- deferExpand : function(autoActivate){
- delete this.showTimer;
- this.menu.show(this.container, this.parentMenu.subMenuAlign || "tl-tr?", this.parentMenu);
- if(autoActivate){
- this.menu.tryActivate(0, 1);
- }
- },
-
- // private
- hideMenu : function(){
- clearTimeout(this.showTimer);
- delete this.showTimer;
- if(!this.hideTimer && this.menu && this.menu.isVisible()){
- this.hideTimer = this.deferHide.defer(this.hideDelay, this);
- }
- },
-
- // private
- deferHide : function(){
- delete this.hideTimer;
- this.menu.hide();
- }
-});/*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
- */
-
-/**
- * @class Roo.menu.CheckItem
- * @extends Roo.menu.Item
- * Adds a menu item that contains a checkbox by default, but can also be part of a radio group.
- * @constructor
- * Creates a new CheckItem
- * @param {Object} config Configuration options
- */
-Roo.menu.CheckItem = function(config){
- Roo.menu.CheckItem.superclass.constructor.call(this, config);
- this.addEvents({
- /**
- * @event beforecheckchange
- * Fires before the checked value is set, providing an opportunity to cancel if needed
- * @param {Roo.menu.CheckItem} this
- * @param {Boolean} checked The new checked value that will be set
- */
- "beforecheckchange" : true,
- /**
- * @event checkchange
- * Fires after the checked value has been set
- * @param {Roo.menu.CheckItem} this
- * @param {Boolean} checked The checked value that was set
- */
- "checkchange" : true
- });
- if(this.checkHandler){
- this.on('checkchange', this.checkHandler, this.scope);
- }
-};
-Roo.extend(Roo.menu.CheckItem, Roo.menu.Item, {
- /**
- * @cfg {String} group
- * All check items with the same group name will automatically be grouped into a single-select
- * radio button group (defaults to '')
- */
- /**
- * @cfg {String} itemCls The default CSS class to use for check items (defaults to "x-menu-item x-menu-check-item")
- */
- itemCls : "x-menu-item x-menu-check-item",
- /**
- * @cfg {String} groupClass The default CSS class to use for radio group check items (defaults to "x-menu-group-item")
- */
- groupClass : "x-menu-group-item",
-
- /**
- * @cfg {Boolean} checked True to initialize this checkbox as checked (defaults to false). Note that
- * if this checkbox is part of a radio group (group = true) only the last item in the group that is
- * initialized with checked = true will be rendered as checked.
- */
- checked: false,
-
- // private
- ctype: "Roo.menu.CheckItem",
-
- // private
- onRender : function(c){
- Roo.menu.CheckItem.superclass.onRender.apply(this, arguments);
- if(this.group){
- this.el.addClass(this.groupClass);
- }
- Roo.menu.MenuMgr.registerCheckable(this);
- if(this.checked){
- this.checked = false;
- this.setChecked(true, true);
- }
- },
-
- // private
- destroy : function(){
- if(this.rendered){
- Roo.menu.MenuMgr.unregisterCheckable(this);
- }
- Roo.menu.CheckItem.superclass.destroy.apply(this, arguments);
- },
-
- /**
- * Set the checked state of this item
- * @param {Boolean} checked The new checked value
- * @param {Boolean} suppressEvent (optional) True to prevent the checkchange event from firing (defaults to false)
- */
- setChecked : function(state, suppressEvent){
- if(this.checked != state && this.fireEvent("beforecheckchange", this, state) !== false){
- if(this.container){
- this.container[state ? "addClass" : "removeClass"]("x-menu-item-checked");
- }
- this.checked = state;
- if(suppressEvent !== true){
- this.fireEvent("checkchange", this, state);
- }
- }
- },
-
- // private
- handleClick : function(e){
- if(!this.disabled && !(this.checked && this.group)){// disable unselect on radio item
- this.setChecked(!this.checked);
- }
- Roo.menu.CheckItem.superclass.handleClick.apply(this, arguments);
- }
-});/*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
- */
-
-/**
- * @class Roo.menu.DateItem
- * @extends Roo.menu.Adapter
- * A menu item that wraps the {@link Roo.DatPicker} component.
- * @constructor
- * Creates a new DateItem
- * @param {Object} config Configuration options
- */
-Roo.menu.DateItem = function(config){
- Roo.menu.DateItem.superclass.constructor.call(this, new Roo.DatePicker(config), config);
- /** The Roo.DatePicker object @type Roo.DatePicker */
- this.picker = this.component;
- this.addEvents({select: true});
-
- this.picker.on("render", function(picker){
- picker.getEl().swallowEvent("click");
- picker.container.addClass("x-menu-date-item");
- });
-
- this.picker.on("select", this.onSelect, this);
-};
-
-Roo.extend(Roo.menu.DateItem, Roo.menu.Adapter, {
- // private
- onSelect : function(picker, date){
- this.fireEvent("select", this, date, picker);
- Roo.menu.DateItem.superclass.handleClick.call(this);
- }
-});/*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
- */
-
-/**
- * @class Roo.menu.ColorItem
- * @extends Roo.menu.Adapter
- * A menu item that wraps the {@link Roo.ColorPalette} component.
- * @constructor
- * Creates a new ColorItem
- * @param {Object} config Configuration options
- */
-Roo.menu.ColorItem = function(config){
- Roo.menu.ColorItem.superclass.constructor.call(this, new Roo.ColorPalette(config), config);
- /** The Roo.ColorPalette object @type Roo.ColorPalette */
- this.palette = this.component;
- this.relayEvents(this.palette, ["select"]);
- if(this.selectHandler){
- this.on('select', this.selectHandler, this.scope);
- }
-};
-Roo.extend(Roo.menu.ColorItem, Roo.menu.Adapter);/*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
- */
-
-
-/**
- * @class Roo.menu.DateMenu
- * @extends Roo.menu.Menu
- * A menu containing a {@link Roo.menu.DateItem} component (which provides a date picker).
- * @constructor
- * Creates a new DateMenu
- * @param {Object} config Configuration options
- */
-Roo.menu.DateMenu = function(config){
- Roo.menu.DateMenu.superclass.constructor.call(this, config);
- this.plain = true;
- var di = new Roo.menu.DateItem(config);
- this.add(di);
- /**
- * The {@link Roo.DatePicker} instance for this DateMenu
- * @type DatePicker
- */
- this.picker = di.picker;
- /**
- * @event select
- * @param {DatePicker} picker
- * @param {Date} date
- */
- this.relayEvents(di, ["select"]);
-
- this.on('beforeshow', function(){
- if(this.picker){
- this.picker.hideMonthPicker(true);
- }
- }, this);
-};
-Roo.extend(Roo.menu.DateMenu, Roo.menu.Menu, {
- cls:'x-date-menu'
-});/*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
- */
-
-
-/**
- * @class Roo.menu.ColorMenu
- * @extends Roo.menu.Menu
- * A menu containing a {@link Roo.menu.ColorItem} component (which provides a basic color picker).
- * @constructor
- * Creates a new ColorMenu
- * @param {Object} config Configuration options
- */
-Roo.menu.ColorMenu = function(config){
- Roo.menu.ColorMenu.superclass.constructor.call(this, config);
- this.plain = true;
- var ci = new Roo.menu.ColorItem(config);
- this.add(ci);
- /**
- * The {@link Roo.ColorPalette} instance for this ColorMenu
- * @type ColorPalette
- */
- this.palette = ci.palette;
- /**
- * @event select
- * @param {ColorPalette} palette
- * @param {String} color
- */
- this.relayEvents(ci, ["select"]);
-};
-Roo.extend(Roo.menu.ColorMenu, Roo.menu.Menu);/*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
- */
-
-/**
- * @class Roo.form.Field
- * @extends Roo.BoxComponent
- * Base class for form fields that provides default event handling, sizing, value handling and other functionality.
- * @constructor
- * Creates a new Field
- * @param {Object} config Configuration options
- */
-Roo.form.Field = function(config){
- Roo.form.Field.superclass.constructor.call(this, config);
-};
-
-Roo.extend(Roo.form.Field, Roo.BoxComponent, {
- /**
- * @cfg {String} fieldLabel Label to use when rendering a form.
- */
- /**
- * @cfg {String} qtip Mouse over tip
- */
-
- /**
- * @cfg {String} invalidClass The CSS class to use when marking a field invalid (defaults to "x-form-invalid")
- */
- invalidClass : "x-form-invalid",
- /**
- * @cfg {String} invalidText The error text to use when marking a field invalid and no message is provided (defaults to "The value in this field is invalid")
- */
- invalidText : "The value in this field is invalid",
- /**
- * @cfg {String} focusClass The CSS class to use when the field receives focus (defaults to "x-form-focus")
- */
- focusClass : "x-form-focus",
- /**
- * @cfg {String/Boolean} validationEvent The event that should initiate field validation. Set to false to disable
- automatic validation (defaults to "keyup").
- */
- validationEvent : "keyup",
- /**
- * @cfg {Boolean} validateOnBlur Whether the field should validate when it loses focus (defaults to true).
- */
- validateOnBlur : true,
- /**
- * @cfg {Number} validationDelay The length of time in milliseconds after user input begins until validation is initiated (defaults to 250)
- */
- validationDelay : 250,
- /**
- * @cfg {String/Object} autoCreate A DomHelper element spec, or true for a default element spec (defaults to
- * {tag: "input", type: "text", size: "20", autocomplete: "off"})
- */
- defaultAutoCreate : {tag: "input", type: "text", size: "20", autocomplete: "off"},
- /**
- * @cfg {String} fieldClass The default CSS class for the field (defaults to "x-form-field")
- */
- fieldClass : "x-form-field",
- /**
- * @cfg {String} msgTarget The location where error text should display. Should be one of the following values (defaults to 'qtip'):
- *<pre>
-Value Description
------------ ----------------------------------------------------------------------
-qtip Display a quick tip when the user hovers over the field
-title Display a default browser title attribute popup
-under Add a block div beneath the field containing the error text
-side Add an error icon to the right of the field with a popup on hover
-[element id] Add the error text directly to the innerHTML of the specified element
-</pre>
- */
- msgTarget : 'qtip',
- /**
- * @cfg {String} msgFx <b>Experimental</b> The effect used when displaying a validation message under the field (defaults to 'normal').
- */
- msgFx : 'normal',
-
- /**
- * @cfg {Boolean} readOnly True to mark the field as readOnly in HTML (defaults to false) -- Note: this only sets the element's readOnly DOM attribute.
- */
- readOnly : false,
-
- /**
- * @cfg {Boolean} disabled True to disable the field (defaults to false).
- */
- disabled : false,
-
- /**
- * @cfg {String} inputType The type attribute for input fields -- e.g. radio, text, password (defaults to "text").
- */
- inputType : undefined,
-
- /**
- * @cfg {Number} tabIndex The tabIndex for this field. Note this only applies to fields that are rendered, not those which are built via applyTo (defaults to undefined).
- */
- tabIndex : undefined,
-
- // private
- isFormField : true,
-
- // private
- hasFocus : false,
- /**
- * @property {Roo.Element} fieldEl
- * Element Containing the rendered Field (with label etc.)
- */
- /**
- * @cfg {Mixed} value A value to initialize this field with.
- */
- value : undefined,
-
- /**
- * @cfg {String} name The field's HTML name attribute.
- */
- /**
- * @cfg {String} cls A CSS class to apply to the field's underlying element.
- */
-
- // private ??
- initComponent : function(){
- Roo.form.Field.superclass.initComponent.call(this);
- this.addEvents({
- /**
- * @event focus
- * Fires when this field receives input focus.
- * @param {Roo.form.Field} this
- */
- focus : true,
- /**
- * @event blur
- * Fires when this field loses input focus.
- * @param {Roo.form.Field} this
- */
- blur : true,
- /**
- * @event specialkey
- * Fires when any key related to navigation (arrows, tab, enter, esc, etc.) is pressed. You can check
- * {@link Roo.EventObject#getKey} to determine which key was pressed.
- * @param {Roo.form.Field} this
- * @param {Roo.EventObject} e The event object
- */
- specialkey : true,
- /**
- * @event change
- * Fires just before the field blurs if the field value has changed.
- * @param {Roo.form.Field} this
- * @param {Mixed} newValue The new value
- * @param {Mixed} oldValue The original value
- */
- change : true,
- /**
- * @event invalid
- * Fires after the field has been marked as invalid.
- * @param {Roo.form.Field} this
- * @param {String} msg The validation message
- */
- invalid : true,
- /**
- * @event valid
- * Fires after the field has been validated with no errors.
- * @param {Roo.form.Field} this
- */
- valid : true,
- /**
- * @event keyup
- * Fires after the key up
- * @param {Roo.form.Field} this
- * @param {Roo.EventObject} e The event Object
- */
- keyup : true
- });
- },
-
- /**
- * Returns the name attribute of the field if available
- * @return {String} name The field name
- */
- getName: function(){
- return this.rendered && this.el.dom.name ? this.el.dom.name : (this.hiddenName || '');
- },
-
- // private
- onRender : function(ct, position){
- Roo.form.Field.superclass.onRender.call(this, ct, position);
- if(!this.el){
- var cfg = this.getAutoCreate();
- if(!cfg.name){
- cfg.name = this.name || this.id;
- }
- if(this.inputType){
- cfg.type = this.inputType;
- }
- this.el = ct.createChild(cfg, position);
- }
- var type = this.el.dom.type;
- if(type){
- if(type == 'password'){
- type = 'text';
- }
- this.el.addClass('x-form-'+type);
- }
- if(this.readOnly){
- this.el.dom.readOnly = true;
- }
- if(this.tabIndex !== undefined){
- this.el.dom.setAttribute('tabIndex', this.tabIndex);
- }
-
- this.el.addClass([this.fieldClass, this.cls]);
- this.initValue();
- },
-
- /**
- * Apply the behaviors of this component to an existing element. <b>This is used instead of render().</b>
- * @param {String/HTMLElement/Element} el The id of the node, a DOM node or an existing Element
- * @return {Roo.form.Field} this
- */
- applyTo : function(target){
- this.allowDomMove = false;
- this.el = Roo.get(target);
- this.render(this.el.dom.parentNode);
- return this;
- },
-
- // private
- initValue : function(){
- if(this.value !== undefined){
- this.setValue(this.value);
- }else if(this.el.dom.value.length > 0){
- this.setValue(this.el.dom.value);
- }
- },
-
- /**
- * Returns true if this field has been changed since it was originally loaded and is not disabled.
- */
- isDirty : function() {
- if(this.disabled) {
- return false;
- }
- return String(this.getValue()) !== String(this.originalValue);
- },
-
- // private
- afterRender : function(){
- Roo.form.Field.superclass.afterRender.call(this);
- this.initEvents();
- },
-
- // private
- fireKey : function(e){
- //Roo.log('field ' + e.getKey());
- if(e.isNavKeyPress()){
- this.fireEvent("specialkey", this, e);
- }
- },
-
- /**
- * Resets the current field value to the originally loaded value and clears any validation messages
- */
- reset : function(){
- this.setValue(this.originalValue);
- this.clearInvalid();
- },
-
- // private
- initEvents : function(){
- // safari killled keypress - so keydown is now used..
- this.el.on("keydown" , this.fireKey, this);
- this.el.on("focus", this.onFocus, this);
- this.el.on("blur", this.onBlur, this);
- this.el.relayEvent('keyup', this);
-
- // reference to original value for reset
- this.originalValue = this.getValue();
- },
-
- // private
- onFocus : function(){
- if(!Roo.isOpera && this.focusClass){ // don't touch in Opera
- this.el.addClass(this.focusClass);
- }
- if(!this.hasFocus){
- this.hasFocus = true;
- this.startValue = this.getValue();
- this.fireEvent("focus", this);
- }
- },
-
- beforeBlur : Roo.emptyFn,
-
- // private
- onBlur : function(){
- this.beforeBlur();
- if(!Roo.isOpera && this.focusClass){ // don't touch in Opera
- this.el.removeClass(this.focusClass);
- }
- this.hasFocus = false;
- if(this.validationEvent !== false && this.validateOnBlur && this.validationEvent != "blur"){
- this.validate();
- }
- var v = this.getValue();
- if(String(v) !== String(this.startValue)){
- this.fireEvent('change', this, v, this.startValue);
- }
- this.fireEvent("blur", this);
- },
-
- /**
- * Returns whether or not the field value is currently valid
- * @param {Boolean} preventMark True to disable marking the field invalid
- * @return {Boolean} True if the value is valid, else false
- */
- isValid : function(preventMark){
- if(this.disabled){
- return true;
- }
- var restore = this.preventMark;
- this.preventMark = preventMark === true;
- var v = this.validateValue(this.processValue(this.getRawValue()));
- this.preventMark = restore;
- return v;
- },
-
- /**
- * Validates the field value
- * @return {Boolean} True if the value is valid, else false
- */
- validate : function(){
- if(this.disabled || this.validateValue(this.processValue(this.getRawValue()))){
- this.clearInvalid();
- return true;
- }
- return false;
- },
-
- processValue : function(value){
- return value;
- },
-
- // private
- // Subclasses should provide the validation implementation by overriding this
- validateValue : function(value){
- return true;
- },
-
- /**
- * Mark this field as invalid
- * @param {String} msg The validation message
- */
- markInvalid : function(msg){
- if(!this.rendered || this.preventMark){ // not rendered
- return;
- }
- this.el.addClass(this.invalidClass);
- msg = msg || this.invalidText;
- switch(this.msgTarget){
- case 'qtip':
- this.el.dom.qtip = msg;
- this.el.dom.qclass = 'x-form-invalid-tip';
- if(Roo.QuickTips){ // fix for floating editors interacting with DND
- Roo.QuickTips.enable();
- }
- break;
- case 'title':
- this.el.dom.title = msg;
- break;
- case 'under':
- if(!this.errorEl){
- var elp = this.el.findParent('.x-form-element', 5, true);
- this.errorEl = elp.createChild({cls:'x-form-invalid-msg'});
- this.errorEl.setWidth(elp.getWidth(true)-20);
- }
- this.errorEl.update(msg);
- Roo.form.Field.msgFx[this.msgFx].show(this.errorEl, this);
- break;
- case 'side':
- if(!this.errorIcon){
- var elp = this.el.findParent('.x-form-element', 5, true);
- this.errorIcon = elp.createChild({cls:'x-form-invalid-icon'});
- }
- this.alignErrorIcon();
- this.errorIcon.dom.qtip = msg;
- this.errorIcon.dom.qclass = 'x-form-invalid-tip';
- this.errorIcon.show();
- this.on('resize', this.alignErrorIcon, this);
- break;
- default:
- var t = Roo.getDom(this.msgTarget);
- t.innerHTML = msg;
- t.style.display = this.msgDisplay;
- break;
- }
- this.fireEvent('invalid', this, msg);
- },
-
- // private
- alignErrorIcon : function(){
- this.errorIcon.alignTo(this.el, 'tl-tr', [2, 0]);
- },
-
- /**
- * Clear any invalid styles/messages for this field
- */
- clearInvalid : function(){
- if(!this.rendered || this.preventMark){ // not rendered
- return;
- }
- this.el.removeClass(this.invalidClass);
- switch(this.msgTarget){
- case 'qtip':
- this.el.dom.qtip = '';
- break;
- case 'title':
- this.el.dom.title = '';
- break;
- case 'under':
- if(this.errorEl){
- Roo.form.Field.msgFx[this.msgFx].hide(this.errorEl, this);
- }
- break;
- case 'side':
- if(this.errorIcon){
- this.errorIcon.dom.qtip = '';
- this.errorIcon.hide();
- this.un('resize', this.alignErrorIcon, this);
- }
- break;
- default:
- var t = Roo.getDom(this.msgTarget);
- t.innerHTML = '';
- t.style.display = 'none';
- break;
- }
- this.fireEvent('valid', this);
- },
-
- /**
- * Returns the raw data value which may or may not be a valid, defined value. To return a normalized value see {@link #getValue}.
- * @return {Mixed} value The field value
- */
- getRawValue : function(){
- var v = this.el.getValue();
- if(v === this.emptyText){
- v = '';
- }
- return v;
- },
-
- /**
- * Returns the normalized data value (undefined or emptyText will be returned as ''). To return the raw value see {@link #getRawValue}.
- * @return {Mixed} value The field value
- */
- getValue : function(){
- var v = this.el.getValue();
- if(v === this.emptyText || v === undefined){
- v = '';
- }
- return v;
- },
-
- /**
- * Sets the underlying DOM field's value directly, bypassing validation. To set the value with validation see {@link #setValue}.
- * @param {Mixed} value The value to set
- */
- setRawValue : function(v){
- return this.el.dom.value = (v === null || v === undefined ? '' : v);
- },
-
- /**
- * Sets a data value into the field and validates it. To set the value directly without validation see {@link #setRawValue}.
- * @param {Mixed} value The value to set
- */
- setValue : function(v){
- this.value = v;
- if(this.rendered){
- this.el.dom.value = (v === null || v === undefined ? '' : v);
- this.validate();
- }
- },
-
- adjustSize : function(w, h){
- var s = Roo.form.Field.superclass.adjustSize.call(this, w, h);
- s.width = this.adjustWidth(this.el.dom.tagName, s.width);
- return s;
- },
-
- adjustWidth : function(tag, w){
- tag = tag.toLowerCase();
- if(typeof w == 'number' && Roo.isStrict && !Roo.isSafari){
- if(Roo.isIE && (tag == 'input' || tag == 'textarea')){
- if(tag == 'input'){
- return w + 2;
- }
- if(tag = 'textarea'){
- return w-2;
- }
- }else if(Roo.isOpera){
- if(tag == 'input'){
- return w + 2;
- }
- if(tag = 'textarea'){
- return w-2;
- }
- }
- }
- return w;
- }
-});
-
-
-// anything other than normal should be considered experimental
-Roo.form.Field.msgFx = {
- normal : {
- show: function(msgEl, f){
- msgEl.setDisplayed('block');
- },
-
- hide : function(msgEl, f){
- msgEl.setDisplayed(false).update('');
- }
- },
-
- slide : {
- show: function(msgEl, f){
- msgEl.slideIn('t', {stopFx:true});
- },
-
- hide : function(msgEl, f){
- msgEl.slideOut('t', {stopFx:true,useDisplay:true});
- }
- },
-
- slideRight : {
- show: function(msgEl, f){
- msgEl.fixDisplay();
- msgEl.alignTo(f.el, 'tl-tr');
- msgEl.slideIn('l', {stopFx:true});
- },
-
- hide : function(msgEl, f){
- msgEl.slideOut('l', {stopFx:true,useDisplay:true});
- }
- }
-};/*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
- */
-
-
-/**
- * @class Roo.form.TextField
- * @extends Roo.form.Field
- * Basic text field. Can be used as a direct replacement for traditional text inputs, or as the base
- * class for more sophisticated input controls (like {@link Roo.form.TextArea} and {@link Roo.form.ComboBox}).
- * @constructor
- * Creates a new TextField
- * @param {Object} config Configuration options
- */
-Roo.form.TextField = function(config){
- Roo.form.TextField.superclass.constructor.call(this, config);
- this.addEvents({
- /**
- * @event autosize
- * Fires when the autosize function is triggered. The field may or may not have actually changed size
- * according to the default logic, but this event provides a hook for the developer to apply additional
- * logic at runtime to resize the field if needed.
- * @param {Roo.form.Field} this This text field
- * @param {Number} width The new field width
- */
- autosize : true
- });
-};
-
-Roo.extend(Roo.form.TextField, Roo.form.Field, {
- /**
- * @cfg {Boolean} grow True if this field should automatically grow and shrink to its content
- */
- grow : false,
- /**
- * @cfg {Number} growMin The minimum width to allow when grow = true (defaults to 30)
- */
- growMin : 30,
- /**
- * @cfg {Number} growMax The maximum width to allow when grow = true (defaults to 800)
- */
- growMax : 800,
- /**
- * @cfg {String} vtype A validation type name as defined in {@link Roo.form.VTypes} (defaults to null)
- */
- vtype : null,
- /**
- * @cfg {String} maskRe An input mask regular expression that will be used to filter keystrokes that don't match (defaults to null)
- */
- maskRe : null,
- /**
- * @cfg {Boolean} disableKeyFilter True to disable input keystroke filtering (defaults to false)
- */
- disableKeyFilter : false,
- /**
- * @cfg {Boolean} allowBlank False to validate that the value length > 0 (defaults to true)
- */
- allowBlank : true,
- /**
- * @cfg {Number} minLength Minimum input field length required (defaults to 0)
- */
- minLength : 0,
- /**
- * @cfg {Number} maxLength Maximum input field length allowed (defaults to Number.MAX_VALUE)
- */
- maxLength : Number.MAX_VALUE,
- /**
- * @cfg {String} minLengthText Error text to display if the minimum length validation fails (defaults to "The minimum length for this field is {minLength}")
- */
- minLengthText : "The minimum length for this field is {0}",
- /**
- * @cfg {String} maxLengthText Error text to display if the maximum length validation fails (defaults to "The maximum length for this field is {maxLength}")
- */
- maxLengthText : "The maximum length for this field is {0}",
- /**
- * @cfg {Boolean} selectOnFocus True to automatically select any existing field text when the field receives input focus (defaults to false)
- */
- selectOnFocus : false,
- /**
- * @cfg {String} blankText Error text to display if the allow blank validation fails (defaults to "This field is required")
- */
- blankText : "This field is required",
- /**
- * @cfg {Function} validator A custom validation function to be called during field validation (defaults to null).
- * If available, this function will be called only after the basic validators all return true, and will be passed the
- * current field value and expected to return boolean true if the value is valid or a string error message if invalid.
- */
- validator : null,
- /**
- * @cfg {RegExp} regex A JavaScript RegExp object to be tested against the field value during validation (defaults to null).
- * If available, this regex will be evaluated only after the basic validators all return true, and will be passed the
- * current field value. If the test fails, the field will be marked invalid using {@link #regexText}.
- */
- regex : null,
- /**
- * @cfg {String} regexText The error text to display if {@link #regex} is used and the test fails during validation (defaults to "")
- */
- regexText : "",
- /**
- * @cfg {String} emptyText The default text to display in an empty field (defaults to null).
- */
- emptyText : null,
- /**
- * @cfg {String} emptyClass The CSS class to apply to an empty field to style the {@link #emptyText} (defaults to
- * 'x-form-empty-field'). This class is automatically added and removed as needed depending on the current field value.
- */
- emptyClass : 'x-form-empty-field',
-
- // private
- initEvents : function(){
- Roo.form.TextField.superclass.initEvents.call(this);
- if(this.validationEvent == 'keyup'){
- this.validationTask = new Roo.util.DelayedTask(this.validate, this);
- this.el.on('keyup', this.filterValidation, this);
- }
- else if(this.validationEvent !== false){
- this.el.on(this.validationEvent, this.validate, this, {buffer: this.validationDelay});
- }
- if(this.selectOnFocus || this.emptyText){
- this.on("focus", this.preFocus, this);
- if(this.emptyText){
- this.on('blur', this.postBlur, this);
- this.applyEmptyText();
- }
- }
- if(this.maskRe || (this.vtype && this.disableKeyFilter !== true && (this.maskRe = Roo.form.VTypes[this.vtype+'Mask']))){
- this.el.on("keypress", this.filterKeys, this);
- }
- if(this.grow){
- this.el.on("keyup", this.onKeyUp, this, {buffer:50});
- this.el.on("click", this.autoSize, this);
- }
- },
-
- processValue : function(value){
- if(this.stripCharsRe){
- var newValue = value.replace(this.stripCharsRe, '');
- if(newValue !== value){
- this.setRawValue(newValue);
- return newValue;
- }
- }
- return value;
- },
-
- filterValidation : function(e){
- if(!e.isNavKeyPress()){
- this.validationTask.delay(this.validationDelay);
- }
- },
-
- // private
- onKeyUp : function(e){
- if(!e.isNavKeyPress()){
- this.autoSize();
- }
- },
-
- /**
- * Resets the current field value to the originally-loaded value and clears any validation messages.
- * Also adds emptyText and emptyClass if the original value was blank.
- */
- reset : function(){
- Roo.form.TextField.superclass.reset.call(this);
- this.applyEmptyText();
- },
-
- applyEmptyText : function(){
- if(this.rendered && this.emptyText && this.getRawValue().length < 1){
- this.setRawValue(this.emptyText);
- this.el.addClass(this.emptyClass);
- }
- },
-
- // private
- preFocus : function(){
- if(this.emptyText){
- if(this.el.dom.value == this.emptyText){
- this.setRawValue('');
- }
- this.el.removeClass(this.emptyClass);
- }
- if(this.selectOnFocus){
- this.el.dom.select();
- }
- },
-
- // private
- postBlur : function(){
- this.applyEmptyText();
- },
-
- // private
- filterKeys : function(e){
- var k = e.getKey();
- if(!Roo.isIE && (e.isNavKeyPress() || k == e.BACKSPACE || (k == e.DELETE && e.button == -1))){
- return;
- }
- var c = e.getCharCode(), cc = String.fromCharCode(c);
- if(Roo.isIE && (e.isSpecialKey() || !cc)){
- return;
- }
- if(!this.maskRe.test(cc)){
- e.stopEvent();
- }
- },
-
- setValue : function(v){
- if(this.emptyText && this.el && v !== undefined && v !== null && v !== ''){
- this.el.removeClass(this.emptyClass);
- }
- Roo.form.TextField.superclass.setValue.apply(this, arguments);
- this.applyEmptyText();
- this.autoSize();
- },
-
- /**
- * Validates a value according to the field's validation rules and marks the field as invalid
- * if the validation fails
- * @param {Mixed} value The value to validate
- * @return {Boolean} True if the value is valid, else false
- */
- validateValue : function(value){
- if(value.length < 1 || value === this.emptyText){ // if it's blank
- if(this.allowBlank){
- this.clearInvalid();
- return true;
- }else{
- this.markInvalid(this.blankText);
- return false;
- }
- }
- if(value.length < this.minLength){
- this.markInvalid(String.format(this.minLengthText, this.minLength));
- return false;
- }
- if(value.length > this.maxLength){
- this.markInvalid(String.format(this.maxLengthText, this.maxLength));
- return false;
- }
- if(this.vtype){
- var vt = Roo.form.VTypes;
- if(!vt[this.vtype](value, this)){
- this.markInvalid(this.vtypeText || vt[this.vtype +'Text']);
- return false;
- }
- }
- if(typeof this.validator == "function"){
- var msg = this.validator(value);
- if(msg !== true){
- this.markInvalid(msg);
- return false;
- }
- }
- if(this.regex && !this.regex.test(value)){
- this.markInvalid(this.regexText);
- return false;
- }
- return true;
- },
-
- /**
- * Selects text in this field
- * @param {Number} start (optional) The index where the selection should start (defaults to 0)
- * @param {Number} end (optional) The index where the selection should end (defaults to the text length)
- */
- selectText : function(start, end){
- var v = this.getRawValue();
- if(v.length > 0){
- start = start === undefined ? 0 : start;
- end = end === undefined ? v.length : end;
- var d = this.el.dom;
- if(d.setSelectionRange){
- d.setSelectionRange(start, end);
- }else if(d.createTextRange){
- var range = d.createTextRange();
- range.moveStart("character", start);
- range.moveEnd("character", v.length-end);
- range.select();
- }
- }
- },
-
- /**
- * Automatically grows the field to accomodate the width of the text up to the maximum field width allowed.
- * This only takes effect if grow = true, and fires the autosize event.
- */
- autoSize : function(){
- if(!this.grow || !this.rendered){
- return;
- }
- if(!this.metrics){
- this.metrics = Roo.util.TextMetrics.createInstance(this.el);
- }
- var el = this.el;
- var v = el.dom.value;
- var d = document.createElement('div');
- d.appendChild(document.createTextNode(v));
- v = d.innerHTML;
- d = null;
- v += " ";
- var w = Math.min(this.growMax, Math.max(this.metrics.getWidth(v) + /* add extra padding */ 10, this.growMin));
- this.el.setWidth(w);
- this.fireEvent("autosize", this, w);
- }
-});/*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
- */
-
-/**
- * @class Roo.form.Hidden
- * @extends Roo.form.TextField
- * Simple Hidden element used on forms
- *
- * usage: form.add(new Roo.form.HiddenField({ 'name' : 'test1' }));
- *
- * @constructor
- * Creates a new Hidden form element.
- * @param {Object} config Configuration options
- */
-
-
-
-// easy hidden field...
-Roo.form.Hidden = function(config){
- Roo.form.Hidden.superclass.constructor.call(this, config);
-};
-
-Roo.extend(Roo.form.Hidden, Roo.form.TextField, {
- fieldLabel: '',
- inputType: 'hidden',
- width: 50,
- allowBlank: true,
- labelSeparator: '',
- hidden: true,
- itemCls : 'x-form-item-display-none'
-
-
-});
-
-
-/*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
- */
-
-/**
- * @class Roo.form.TriggerField
- * @extends Roo.form.TextField
- * Provides a convenient wrapper for TextFields that adds a clickable trigger button (looks like a combobox by default).
- * The trigger has no default action, so you must assign a function to implement the trigger click handler by
- * overriding {@link #onTriggerClick}. You can create a TriggerField directly, as it renders exactly like a combobox
- * for which you can provide a custom implementation. For example:
- * <pre><code>
-var trigger = new Roo.form.TriggerField();
-trigger.onTriggerClick = myTriggerFn;
-trigger.applyTo('my-field');
-</code></pre>
- *
- * However, in general you will most likely want to use TriggerField as the base class for a reusable component.
- * {@link Roo.form.DateField} and {@link Roo.form.ComboBox} are perfect examples of this.
- * @cfg {String} triggerClass An additional CSS class used to style the trigger button. The trigger will always get the
- * class 'x-form-trigger' by default and triggerClass will be <b>appended</b> if specified.
- * @constructor
- * Create a new TriggerField.
- * @param {Object} config Configuration options (valid {@Roo.form.TextField} config options will also be applied
- * to the base TextField)
- */
-Roo.form.TriggerField = function(config){
- this.mimicing = false;
- Roo.form.TriggerField.superclass.constructor.call(this, config);
-};
-
-Roo.extend(Roo.form.TriggerField, Roo.form.TextField, {
- /**
- * @cfg {String} triggerClass A CSS class to apply to the trigger
- */
- /**
- * @cfg {String/Object} autoCreate A DomHelper element spec, or true for a default element spec (defaults to
- * {tag: "input", type: "text", size: "16", autocomplete: "off"})
- */
- defaultAutoCreate : {tag: "input", type: "text", size: "16", autocomplete: "off"},
- /**
- * @cfg {Boolean} hideTrigger True to hide the trigger element and display only the base text field (defaults to false)
- */
- hideTrigger:false,
-
- /** @cfg {Boolean} grow @hide */
- /** @cfg {Number} growMin @hide */
- /** @cfg {Number} growMax @hide */
-
- /**
- * @hide
- * @method
- */
- autoSize: Roo.emptyFn,
- // private
- monitorTab : true,
- // private
- deferHeight : true,
-
-
- actionMode : 'wrap',
- // private
- onResize : function(w, h){
- Roo.form.TriggerField.superclass.onResize.apply(this, arguments);
- if(typeof w == 'number'){
- var x = w - this.trigger.getWidth();
- this.el.setWidth(this.adjustWidth('input', x));
- this.trigger.setStyle('left', x+'px');
- }
- },
-
- // private
- adjustSize : Roo.BoxComponent.prototype.adjustSize,
-
- // private
- getResizeEl : function(){
- return this.wrap;
- },
-
- // private
- getPositionEl : function(){
- return this.wrap;
- },
-
- // private
- alignErrorIcon : function(){
- this.errorIcon.alignTo(this.wrap, 'tl-tr', [2, 0]);
- },
-
- // private
- onRender : function(ct, position){
- Roo.form.TriggerField.superclass.onRender.call(this, ct, position);
- this.wrap = this.el.wrap({cls: "x-form-field-wrap"});
- this.trigger = this.wrap.createChild(this.triggerConfig ||
- {tag: "img", src: Roo.BLANK_IMAGE_URL, cls: "x-form-trigger " + this.triggerClass});
- if(this.hideTrigger){
- this.trigger.setDisplayed(false);
- }
- this.initTrigger();
- if(!this.width){
- this.wrap.setWidth(this.el.getWidth()+this.trigger.getWidth());
- }
- },
-
- // private
- initTrigger : function(){
- this.trigger.on("click", this.onTriggerClick, this, {preventDefault:true});
- this.trigger.addClassOnOver('x-form-trigger-over');
- this.trigger.addClassOnClick('x-form-trigger-click');
- },
-
- // private
- onDestroy : function(){
- if(this.trigger){
- this.trigger.removeAllListeners();
- this.trigger.remove();
- }
- if(this.wrap){
- this.wrap.remove();
- }
- Roo.form.TriggerField.superclass.onDestroy.call(this);
- },
-
- // private
- onFocus : function(){
- Roo.form.TriggerField.superclass.onFocus.call(this);
- if(!this.mimicing){
- this.wrap.addClass('x-trigger-wrap-focus');
- this.mimicing = true;
- Roo.get(Roo.isIE ? document.body : document).on("mousedown", this.mimicBlur, this);
- if(this.monitorTab){
- this.el.on("keydown", this.checkTab, this);
- }
- }
- },
-
- // private
- checkTab : function(e){
- if(e.getKey() == e.TAB){
- this.triggerBlur();
- }
- },
-
- // private
- onBlur : function(){
- // do nothing
- },
-
- // private
- mimicBlur : function(e, t){
- if(!this.wrap.contains(t) && this.validateBlur()){
- this.triggerBlur();
- }
- },
-
- // private
- triggerBlur : function(){
- this.mimicing = false;
- Roo.get(Roo.isIE ? document.body : document).un("mousedown", this.mimicBlur);
- if(this.monitorTab){
- this.el.un("keydown", this.checkTab, this);
- }
- this.wrap.removeClass('x-trigger-wrap-focus');
- Roo.form.TriggerField.superclass.onBlur.call(this);
- },
-
- // private
- // This should be overriden by any subclass that needs to check whether or not the field can be blurred.
- validateBlur : function(e, t){
- return true;
- },
-
- // private
- onDisable : function(){
- Roo.form.TriggerField.superclass.onDisable.call(this);
- if(this.wrap){
- this.wrap.addClass('x-item-disabled');
- }
- },
-
- // private
- onEnable : function(){
- Roo.form.TriggerField.superclass.onEnable.call(this);
- if(this.wrap){
- this.wrap.removeClass('x-item-disabled');
- }
- },
-
- // private
- onShow : function(){
- var ae = this.getActionEl();
-
- if(ae){
- ae.dom.style.display = '';
- ae.dom.style.visibility = 'visible';
- }
- },
-
- // private
-
- onHide : function(){
- var ae = this.getActionEl();
- ae.dom.style.display = 'none';
- },
-
- /**
- * The function that should handle the trigger's click event. This method does nothing by default until overridden
- * by an implementing function.
- * @method
- * @param {EventObject} e
- */
- onTriggerClick : Roo.emptyFn
-});
-
-// TwinTriggerField is not a public class to be used directly. It is meant as an abstract base class
-// to be extended by an implementing class. For an example of implementing this class, see the custom
-// SearchField implementation here: http://extjs.com/deploy/ext/examples/form/custom.html
-Roo.form.TwinTriggerField = Roo.extend(Roo.form.TriggerField, {
- initComponent : function(){
- Roo.form.TwinTriggerField.superclass.initComponent.call(this);
-
- this.triggerConfig = {
- tag:'span', cls:'x-form-twin-triggers', cn:[
- {tag: "img", src: Roo.BLANK_IMAGE_URL, cls: "x-form-trigger " + this.trigger1Class},
- {tag: "img", src: Roo.BLANK_IMAGE_URL, cls: "x-form-trigger " + this.trigger2Class}
- ]};
- },
-
- getTrigger : function(index){
- return this.triggers[index];
- },
-
- initTrigger : function(){
- var ts = this.trigger.select('.x-form-trigger', true);
- this.wrap.setStyle('overflow', 'hidden');
- var triggerField = this;
- ts.each(function(t, all, index){
- t.hide = function(){
- var w = triggerField.wrap.getWidth();
- this.dom.style.display = 'none';
- triggerField.el.setWidth(w-triggerField.trigger.getWidth());
- };
- t.show = function(){
- var w = triggerField.wrap.getWidth();
- this.dom.style.display = '';
- triggerField.el.setWidth(w-triggerField.trigger.getWidth());
- };
- var triggerIndex = 'Trigger'+(index+1);
-
- if(this['hide'+triggerIndex]){
- t.dom.style.display = 'none';
- }
- t.on("click", this['on'+triggerIndex+'Click'], this, {preventDefault:true});
- t.addClassOnOver('x-form-trigger-over');
- t.addClassOnClick('x-form-trigger-click');
- }, this);
- this.triggers = ts.elements;
- },
-
- onTrigger1Click : Roo.emptyFn,
- onTrigger2Click : Roo.emptyFn
-});/*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
- */
-
-/**
- * @class Roo.form.TextArea
- * @extends Roo.form.TextField
- * Multiline text field. Can be used as a direct replacement for traditional textarea fields, plus adds
- * support for auto-sizing.
- * @constructor
- * Creates a new TextArea
- * @param {Object} config Configuration options
- */
-Roo.form.TextArea = function(config){
- Roo.form.TextArea.superclass.constructor.call(this, config);
- // these are provided exchanges for backwards compat
- // minHeight/maxHeight were replaced by growMin/growMax to be
- // compatible with TextField growing config values
- if(this.minHeight !== undefined){
- this.growMin = this.minHeight;
- }
- if(this.maxHeight !== undefined){
- this.growMax = this.maxHeight;
- }
-};
-
-Roo.extend(Roo.form.TextArea, Roo.form.TextField, {
- /**
- * @cfg {Number} growMin The minimum height to allow when grow = true (defaults to 60)
- */
- growMin : 60,
- /**
- * @cfg {Number} growMax The maximum height to allow when grow = true (defaults to 1000)
- */
- growMax: 1000,
- /**
- * @cfg {Boolean} preventScrollbars True to prevent scrollbars from appearing regardless of how much text is
- * in the field (equivalent to setting overflow: hidden, defaults to false)
- */
- preventScrollbars: false,
- /**
- * @cfg {String/Object} autoCreate A DomHelper element spec, or true for a default element spec (defaults to
- * {tag: "textarea", style: "width:300px;height:60px;", autocomplete: "off"})
- */
-
- // private
- onRender : function(ct, position){
- if(!this.el){
- this.defaultAutoCreate = {
- tag: "textarea",
- style:"width:300px;height:60px;",
- autocomplete: "off"
- };
- }
- Roo.form.TextArea.superclass.onRender.call(this, ct, position);
- if(this.grow){
- this.textSizeEl = Roo.DomHelper.append(document.body, {
- tag: "pre", cls: "x-form-grow-sizer"
- });
- if(this.preventScrollbars){
- this.el.setStyle("overflow", "hidden");
- }
- this.el.setHeight(this.growMin);
- }
- },
-
- onDestroy : function(){
- if(this.textSizeEl){
- this.textSizeEl.parentNode.removeChild(this.textSizeEl);
- }
- Roo.form.TextArea.superclass.onDestroy.call(this);
- },
-
- // private
- onKeyUp : function(e){
- if(!e.isNavKeyPress() || e.getKey() == e.ENTER){
- this.autoSize();
- }
- },
-
- /**
- * Automatically grows the field to accomodate the height of the text up to the maximum field height allowed.
- * This only takes effect if grow = true, and fires the autosize event if the height changes.
- */
- autoSize : function(){
- if(!this.grow || !this.textSizeEl){
- return;
- }
- var el = this.el;
- var v = el.dom.value;
- var ts = this.textSizeEl;
-
- ts.innerHTML = '';
- ts.appendChild(document.createTextNode(v));
- v = ts.innerHTML;
-
- Roo.fly(ts).setWidth(this.el.getWidth());
- if(v.length < 1){
- v = "  ";
- }else{
- if(Roo.isIE){
- v = v.replace(/\n/g, '<p> </p>');
- }
- v += " \n ";
- }
- ts.innerHTML = v;
- var h = Math.min(this.growMax, Math.max(ts.offsetHeight, this.growMin));
- if(h != this.lastHeight){
- this.lastHeight = h;
- this.el.setHeight(h);
- this.fireEvent("autosize", this, h);
- }
- }
-});/*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
- */
-
-
-/**
- * @class Roo.form.NumberField
- * @extends Roo.form.TextField
- * Numeric text field that provides automatic keystroke filtering and numeric validation.
- * @constructor
- * Creates a new NumberField
- * @param {Object} config Configuration options
- */
-Roo.form.NumberField = function(config){
- Roo.form.NumberField.superclass.constructor.call(this, config);
-};
-
-Roo.extend(Roo.form.NumberField, Roo.form.TextField, {
- /**
- * @cfg {String} fieldClass The default CSS class for the field (defaults to "x-form-field x-form-num-field")
- */
- fieldClass: "x-form-field x-form-num-field",
- /**
- * @cfg {Boolean} allowDecimals False to disallow decimal values (defaults to true)
- */
- allowDecimals : true,
- /**
- * @cfg {String} decimalSeparator Character(s) to allow as the decimal separator (defaults to '.')
- */
- decimalSeparator : ".",
- /**
- * @cfg {Number} decimalPrecision The maximum precision to display after the decimal separator (defaults to 2)
- */
- decimalPrecision : 2,
- /**
- * @cfg {Boolean} allowNegative False to prevent entering a negative sign (defaults to true)
- */
- allowNegative : true,
- /**
- * @cfg {Number} minValue The minimum allowed value (defaults to Number.NEGATIVE_INFINITY)
- */
- minValue : Number.NEGATIVE_INFINITY,
- /**
- * @cfg {Number} maxValue The maximum allowed value (defaults to Number.MAX_VALUE)
- */
- maxValue : Number.MAX_VALUE,
- /**
- * @cfg {String} minText Error text to display if the minimum value validation fails (defaults to "The minimum value for this field is {minValue}")
- */
- minText : "The minimum value for this field is {0}",
- /**
- * @cfg {String} maxText Error text to display if the maximum value validation fails (defaults to "The maximum value for this field is {maxValue}")
- */
- maxText : "The maximum value for this field is {0}",
- /**
- * @cfg {String} nanText Error text to display if the value is not a valid number. For example, this can happen
- * if a valid character like '.' or '-' is left in the field with no number (defaults to "{value} is not a valid number")
- */
- nanText : "{0} is not a valid number",
-
- // private
- initEvents : function(){
- Roo.form.NumberField.superclass.initEvents.call(this);
- var allowed = "0123456789";
- if(this.allowDecimals){
- allowed += this.decimalSeparator;
- }
- if(this.allowNegative){
- allowed += "-";
- }
- this.stripCharsRe = new RegExp('[^'+allowed+']', 'gi');
- var keyPress = function(e){
- var k = e.getKey();
- if(!Roo.isIE && (e.isSpecialKey() || k == e.BACKSPACE || k == e.DELETE)){
- return;
- }
- var c = e.getCharCode();
- if(allowed.indexOf(String.fromCharCode(c)) === -1){
- e.stopEvent();
- }
- };
- this.el.on("keypress", keyPress, this);
- },
-
- // private
- validateValue : function(value){
- if(!Roo.form.NumberField.superclass.validateValue.call(this, value)){
- return false;
- }
- if(value.length < 1){ // if it's blank and textfield didn't flag it then it's valid
- return true;
- }
- var num = this.parseValue(value);
- if(isNaN(num)){
- this.markInvalid(String.format(this.nanText, value));
- return false;
- }
- if(num < this.minValue){
- this.markInvalid(String.format(this.minText, this.minValue));
- return false;
- }
- if(num > this.maxValue){
- this.markInvalid(String.format(this.maxText, this.maxValue));
- return false;
- }
- return true;
- },
-
- getValue : function(){
- return this.fixPrecision(this.parseValue(Roo.form.NumberField.superclass.getValue.call(this)));
- },
-
- // private
- parseValue : function(value){
- value = parseFloat(String(value).replace(this.decimalSeparator, "."));
- return isNaN(value) ? '' : value;
- },
-
- // private
- fixPrecision : function(value){
- var nan = isNaN(value);
- if(!this.allowDecimals || this.decimalPrecision == -1 || nan || !value){
- return nan ? '' : value;
- }
- return parseFloat(value).toFixed(this.decimalPrecision);
- },
-
- setValue : function(v){
- Roo.form.NumberField.superclass.setValue.call(this, String(v).replace(".", this.decimalSeparator));
- },
-
- // private
- decimalPrecisionFcn : function(v){
- return Math.floor(v);
- },
-
- beforeBlur : function(){
- var v = this.parseValue(this.getRawValue());
- if(v){
- this.setValue(this.fixPrecision(v));
- }
- }
-});/*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
- */
-
-/**
- * @class Roo.form.DateField
- * @extends Roo.form.TriggerField
- * Provides a date input field with a {@link Roo.DatePicker} dropdown and automatic date validation.
-* @constructor
-* Create a new DateField
-* @param {Object} config
- */
-Roo.form.DateField = function(config){
- Roo.form.DateField.superclass.constructor.call(this, config);
-
- this.addEvents({
-
- /**
- * @event select
- * Fires when a date is selected
- * @param {Roo.form.DateField} combo This combo box
- * @param {Date} date The date selected
- */
- 'select' : true
-
- });
-
-
- if(typeof this.minValue == "string") this.minValue = this.parseDate(this.minValue);
- if(typeof this.maxValue == "string") this.maxValue = this.parseDate(this.maxValue);
- this.ddMatch = null;
- if(this.disabledDates){
- var dd = this.disabledDates;
- var re = "(?:";
- for(var i = 0; i < dd.length; i++){
- re += dd[i];
- if(i != dd.length-1) re += "|";
- }
- this.ddMatch = new RegExp(re + ")");
- }
-};
-
-Roo.extend(Roo.form.DateField, Roo.form.TriggerField, {
- /**
- * @cfg {String} format
- * The default date format string which can be overriden for localization support. The format must be
- * valid according to {@link Date#parseDate} (defaults to 'm/d/y').
- */
- format : "m/d/y",
- /**
- * @cfg {String} altFormats
- * Multiple date formats separated by "|" to try when parsing a user input value and it doesn't match the defined
- * format (defaults to 'm/d/Y|m-d-y|m-d-Y|m/d|m-d|d').
- */
- altFormats : "m/d/Y|m-d-y|m-d-Y|m/d|m-d|md|mdy|mdY|d",
- /**
- * @cfg {Array} disabledDays
- * An array of days to disable, 0 based. For example, [0, 6] disables Sunday and Saturday (defaults to null).
- */
- disabledDays : null,
- /**
- * @cfg {String} disabledDaysText
- * The tooltip to display when the date falls on a disabled day (defaults to 'Disabled')
- */
- disabledDaysText : "Disabled",
- /**
- * @cfg {Array} disabledDates
- * An array of "dates" to disable, as strings. These strings will be used to build a dynamic regular
- * expression so they are very powerful. Some examples:
- * <ul>
- * <li>["03/08/2003", "09/16/2003"] would disable those exact dates</li>
- * <li>["03/08", "09/16"] would disable those days for every year</li>
- * <li>["^03/08"] would only match the beginning (useful if you are using short years)</li>
- * <li>["03/../2006"] would disable every day in March 2006</li>
- * <li>["^03"] would disable every day in every March</li>
- * </ul>
- * In order to support regular expressions, if you are using a date format that has "." in it, you will have to
- * escape the dot when restricting dates. For example: ["03\\.08\\.03"].
- */
- disabledDates : null,
- /**
- * @cfg {String} disabledDatesText
- * The tooltip text to display when the date falls on a disabled date (defaults to 'Disabled')
- */
- disabledDatesText : "Disabled",
- /**
- * @cfg {Date/String} minValue
- * The minimum allowed date. Can be either a Javascript date object or a string date in a
- * valid format (defaults to null).
- */
- minValue : null,
- /**
- * @cfg {Date/String} maxValue
- * The maximum allowed date. Can be either a Javascript date object or a string date in a
- * valid format (defaults to null).
- */
- maxValue : null,
- /**
- * @cfg {String} minText
- * The error text to display when the date in the cell is before minValue (defaults to
- * 'The date in this field must be after {minValue}').
- */
- minText : "The date in this field must be equal to or after {0}",
- /**
- * @cfg {String} maxText
- * The error text to display when the date in the cell is after maxValue (defaults to
- * 'The date in this field must be before {maxValue}').
- */
- maxText : "The date in this field must be equal to or before {0}",
- /**
- * @cfg {String} invalidText
- * The error text to display when the date in the field is invalid (defaults to
- * '{value} is not a valid date - it must be in the format {format}').
- */
- invalidText : "{0} is not a valid date - it must be in the format {1}",
- /**
- * @cfg {String} triggerClass
- * An additional CSS class used to style the trigger button. The trigger will always get the
- * class 'x-form-trigger' and triggerClass will be <b>appended</b> if specified (defaults to 'x-form-date-trigger'
- * which displays a calendar icon).
- */
- triggerClass : 'x-form-date-trigger',
-
-
- /**
- * @cfg {bool} useIso
- * if enabled, then the date field will use a hidden field to store the
- * real value as iso formated date. default (false)
- */
- useIso : false,
- /**
- * @cfg {String/Object} autoCreate
- * A DomHelper element spec, or true for a default element spec (defaults to
- * {tag: "input", type: "text", size: "10", autocomplete: "off"})
- */
- // private
- defaultAutoCreate : {tag: "input", type: "text", size: "10", autocomplete: "off"},
-
- // private
- hiddenField: false,
-
- onRender : function(ct, position)
- {
- Roo.form.DateField.superclass.onRender.call(this, ct, position);
- if (this.useIso) {
- this.el.dom.removeAttribute('name');
- this.hiddenField = this.el.insertSibling({ tag:'input', type:'hidden', name: this.name },
- 'before', true);
- this.hiddenField.value = this.formatDate(this.value, 'Y-m-d');
- // prevent input submission
- this.hiddenName = this.name;
- }
-
-
- },
-
- // private
- validateValue : function(value)
- {
- value = this.formatDate(value);
- if(!Roo.form.DateField.superclass.validateValue.call(this, value)){
- return false;
- }
- if(value.length < 1){ // if it's blank and textfield didn't flag it then it's valid
- return true;
- }
- var svalue = value;
- value = this.parseDate(value);
- if(!value){
- this.markInvalid(String.format(this.invalidText, svalue, this.format));
- return false;
- }
- var time = value.getTime();
- if(this.minValue && time < this.minValue.getTime()){
- this.markInvalid(String.format(this.minText, this.formatDate(this.minValue)));
- return false;
- }
- if(this.maxValue && time > this.maxValue.getTime()){
- this.markInvalid(String.format(this.maxText, this.formatDate(this.maxValue)));
- return false;
- }
- if(this.disabledDays){
- var day = value.getDay();
- for(var i = 0; i < this.disabledDays.length; i++) {
- if(day === this.disabledDays[i]){
- this.markInvalid(this.disabledDaysText);
- return false;
- }
- }
- }
- var fvalue = this.formatDate(value);
- if(this.ddMatch && this.ddMatch.test(fvalue)){
- this.markInvalid(String.format(this.disabledDatesText, fvalue));
- return false;
- }
- return true;
- },
-
- // private
- // Provides logic to override the default TriggerField.validateBlur which just returns true
- validateBlur : function(){
- return !this.menu || !this.menu.isVisible();
- },
-
- /**
- * Returns the current date value of the date field.
- * @return {Date} The date value
- */
- getValue : function(){
-
- return this.hiddenField ? this.hiddenField.value : this.parseDate(Roo.form.DateField.superclass.getValue.call(this)) || "";
- },
-
- /**
- * Sets the value of the date field. You can pass a date object or any string that can be parsed into a valid
- * date, using DateField.format as the date format, according to the same rules as {@link Date#parseDate}
- * (the default format used is "m/d/y").
- * <br />Usage:
- * <pre><code>
-//All of these calls set the same date value (May 4, 2006)
-
-//Pass a date object:
-var dt = new Date('5/4/06');
-dateField.setValue(dt);
-
-//Pass a date string (default format):
-dateField.setValue('5/4/06');
-
-//Pass a date string (custom format):
-dateField.format = 'Y-m-d';
-dateField.setValue('2006-5-4');
-</code></pre>
- * @param {String/Date} date The date or valid date string
- */
- setValue : function(date){
- if (this.hiddenField) {
- this.hiddenField.value = this.formatDate(this.parseDate(date), 'Y-m-d');
- }
- Roo.form.DateField.superclass.setValue.call(this, this.formatDate(this.parseDate(date)));
- },
-
- // private
- parseDate : function(value){
- if(!value || value instanceof Date){
- return value;
- }
- var v = Date.parseDate(value, this.format);
- if(!v && this.altFormats){
- if(!this.altFormatsArray){
- this.altFormatsArray = this.altFormats.split("|");
- }
- for(var i = 0, len = this.altFormatsArray.length; i < len && !v; i++){
- v = Date.parseDate(value, this.altFormatsArray[i]);
- }
- }
- return v;
- },
-
- // private
- formatDate : function(date, fmt){
- return (!date || !(date instanceof Date)) ?
- date : date.dateFormat(fmt || this.format);
- },
-
- // private
- menuListeners : {
- select: function(m, d){
- this.setValue(d);
- this.fireEvent('select', this, d);
- },
- show : function(){ // retain focus styling
- this.onFocus();
- },
- hide : function(){
- this.focus.defer(10, this);
- var ml = this.menuListeners;
- this.menu.un("select", ml.select, this);
- this.menu.un("show", ml.show, this);
- this.menu.un("hide", ml.hide, this);
- }
- },
-
- // private
- // Implements the default empty TriggerField.onTriggerClick function to display the DatePicker
- onTriggerClick : function(){
- if(this.disabled){
- return;
- }
- if(this.menu == null){
- this.menu = new Roo.menu.DateMenu();
- }
- Roo.apply(this.menu.picker, {
- showClear: this.allowBlank,
- minDate : this.minValue,
- maxDate : this.maxValue,
- disabledDatesRE : this.ddMatch,
- disabledDatesText : this.disabledDatesText,
- disabledDays : this.disabledDays,
- disabledDaysText : this.disabledDaysText,
- format : this.format,
- minText : String.format(this.minText, this.formatDate(this.minValue)),
- maxText : String.format(this.maxText, this.formatDate(this.maxValue))
- });
- this.menu.on(Roo.apply({}, this.menuListeners, {
- scope:this
- }));
- this.menu.picker.setValue(this.getValue() || new Date());
- this.menu.show(this.el, "tl-bl?");
- },
-
- beforeBlur : function(){
- var v = this.parseDate(this.getRawValue());
- if(v){
- this.setValue(v);
- }
- }
-
- /** @cfg {Boolean} grow @hide */
- /** @cfg {Number} growMin @hide */
- /** @cfg {Number} growMax @hide */
- /**
- * @hide
- * @method autoSize
- */
-});/*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
- */
-
-
-/**
- * @class Roo.form.ComboBox
- * @extends Roo.form.TriggerField
- * A combobox control with support for autocomplete, remote-loading, paging and many other features.
- * @constructor
- * Create a new ComboBox.
- * @param {Object} config Configuration options
- */
-Roo.form.ComboBox = function(config){
- Roo.form.ComboBox.superclass.constructor.call(this, config);
- this.addEvents({
- /**
- * @event expand
- * Fires when the dropdown list is expanded
- * @param {Roo.form.ComboBox} combo This combo box
- */
- 'expand' : true,
- /**
- * @event collapse
- * Fires when the dropdown list is collapsed
- * @param {Roo.form.ComboBox} combo This combo box
- */
- 'collapse' : true,
- /**
- * @event beforeselect
- * Fires before a list item is selected. Return false to cancel the selection.
- * @param {Roo.form.ComboBox} combo This combo box
- * @param {Roo.data.Record} record The data record returned from the underlying store
- * @param {Number} index The index of the selected item in the dropdown list
- */
- 'beforeselect' : true,
- /**
- * @event select
- * Fires when a list item is selected
- * @param {Roo.form.ComboBox} combo This combo box
- * @param {Roo.data.Record} record The data record returned from the underlying store (or false on clear)
- * @param {Number} index The index of the selected item in the dropdown list
- */
- 'select' : true,
- /**
- * @event beforequery
- * Fires before all queries are processed. Return false to cancel the query or set cancel to true.
- * The event object passed has these properties:
- * @param {Roo.form.ComboBox} combo This combo box
- * @param {String} query The query
- * @param {Boolean} forceAll true to force "all" query
- * @param {Boolean} cancel true to cancel the query
- * @param {Object} e The query event object
- */
- 'beforequery': true,
- /**
- * @event add
- * Fires when the 'add' icon is pressed (add a listener to enable add button)
- * @param {Roo.form.ComboBox} combo This combo box
- */
- 'add' : true,
- /**
- * @event edit
- * Fires when the 'edit' icon is pressed (add a listener to enable add button)
- * @param {Roo.form.ComboBox} combo This combo box
- * @param {Roo.data.Record|false} record The data record returned from the underlying store (or false on nothing selected)
- */
- 'edit' : true
-
-
- });
- if(this.transform){
- this.allowDomMove = false;
- var s = Roo.getDom(this.transform);
- if(!this.hiddenName){
- this.hiddenName = s.name;
- }
- if(!this.store){
- this.mode = 'local';
- var d = [], opts = s.options;
- for(var i = 0, len = opts.length;i < len; i++){
- var o = opts[i];
- var value = (Roo.isIE ? o.getAttributeNode('value').specified : o.hasAttribute('value')) ? o.value : o.text;
- if(o.selected) {
- this.value = value;
- }
- d.push([value, o.text]);
- }
- this.store = new Roo.data.SimpleStore({
- 'id': 0,
- fields: ['value', 'text'],
- data : d
- });
- this.valueField = 'value';
- this.displayField = 'text';
- }
- s.name = Roo.id(); // wipe out the name in case somewhere else they have a reference
- if(!this.lazyRender){
- this.target = true;
- this.el = Roo.DomHelper.insertBefore(s, this.autoCreate || this.defaultAutoCreate);
- s.parentNode.removeChild(s); // remove it
- this.render(this.el.parentNode);
- }else{
- s.parentNode.removeChild(s); // remove it
- }
-
- }
- if (this.store) {
- this.store = Roo.factory(this.store, Roo.data);
- }
-
- this.selectedIndex = -1;
- if(this.mode == 'local'){
- if(config.queryDelay === undefined){
- this.queryDelay = 10;
- }
- if(config.minChars === undefined){
- this.minChars = 0;
- }
- }
-};
-
-Roo.extend(Roo.form.ComboBox, Roo.form.TriggerField, {
- /**
- * @cfg {String/HTMLElement/Element} transform The id, DOM node or element of an existing select to convert to a ComboBox
- */
- /**
- * @cfg {Boolean} lazyRender True to prevent the ComboBox from rendering until requested (should always be used when
- * rendering into an Roo.Editor, defaults to false)
- */
- /**
- * @cfg {Boolean/Object} autoCreate A DomHelper element spec, or true for a default element spec (defaults to:
- * {tag: "input", type: "text", size: "24", autocomplete: "off"})
- */
- /**
- * @cfg {Roo.data.Store} store The data store to which this combo is bound (defaults to undefined)
- */
- /**
- * @cfg {String} title If supplied, a header element is created containing this text and added into the top of
- * the dropdown list (defaults to undefined, with no header element)
- */
-
- /**
- * @cfg {String/Roo.Template} tpl The template to use to render the output
- */
-
- // private
- defaultAutoCreate : {tag: "input", type: "text", size: "24", autocomplete: "off"},
- /**
- * @cfg {Number} listWidth The width in pixels of the dropdown list (defaults to the width of the ComboBox field)
- */
- listWidth: undefined,
- /**
- * @cfg {String} displayField The underlying data field name to bind to this CombBox (defaults to undefined if
- * mode = 'remote' or 'text' if mode = 'local')
- */
- displayField: undefined,
- /**
- * @cfg {String} valueField The underlying data value name to bind to this CombBox (defaults to undefined if
- * mode = 'remote' or 'value' if mode = 'local').
- * Note: use of a valueField requires the user make a selection
- * in order for a value to be mapped.
- */
- valueField: undefined,
- /**
- * @cfg {String} hiddenName If specified, a hidden form field with this name is dynamically generated to store the
- * field's data value (defaults to the underlying DOM element's name)
- */
- hiddenName: undefined,
- /**
- * @cfg {String} listClass CSS class to apply to the dropdown list element (defaults to '')
- */
- listClass: '',
- /**
- * @cfg {String} selectedClass CSS class to apply to the selected item in the dropdown list (defaults to 'x-combo-selected')
- */
- selectedClass: 'x-combo-selected',
- /**
- * @cfg {String} triggerClass An additional CSS class used to style the trigger button. The trigger will always get the
- * class 'x-form-trigger' and triggerClass will be <b>appended</b> if specified (defaults to 'x-form-arrow-trigger'
- * which displays a downward arrow icon).
- */
- triggerClass : 'x-form-arrow-trigger',
- /**
- * @cfg {Boolean/String} shadow True or "sides" for the default effect, "frame" for 4-way shadow, and "drop" for bottom-right
- */
- shadow:'sides',
- /**
- * @cfg {String} listAlign A valid anchor position value. See {@link Roo.Element#alignTo} for details on supported
- * anchor positions (defaults to 'tl-bl')
- */
- listAlign: 'tl-bl?',
- /**
- * @cfg {Number} maxHeight The maximum height in pixels of the dropdown list before scrollbars are shown (defaults to 300)
- */
- maxHeight: 300,
- /**
- * @cfg {String} triggerAction The action to execute when the trigger field is activated. Use 'all' to run the
- * query specified by the allQuery config option (defaults to 'query')
- */
- triggerAction: 'query',
- /**
- * @cfg {Number} minChars The minimum number of characters the user must type before autocomplete and typeahead activate
- * (defaults to 4, does not apply if editable = false)
- */
- minChars : 4,
- /**
- * @cfg {Boolean} typeAhead True to populate and autoselect the remainder of the text being typed after a configurable
- * delay (typeAheadDelay) if it matches a known value (defaults to false)
- */
- typeAhead: false,
- /**
- * @cfg {Number} queryDelay The length of time in milliseconds to delay between the start of typing and sending the
- * query to filter the dropdown list (defaults to 500 if mode = 'remote' or 10 if mode = 'local')
- */
- queryDelay: 500,
- /**
- * @cfg {Number} pageSize If greater than 0, a paging toolbar is displayed in the footer of the dropdown list and the
- * filter queries will execute with page start and limit parameters. Only applies when mode = 'remote' (defaults to 0)
- */
- pageSize: 0,
- /**
- * @cfg {Boolean} selectOnFocus True to select any existing text in the field immediately on focus. Only applies
- * when editable = true (defaults to false)
- */
- selectOnFocus:false,
- /**
- * @cfg {String} queryParam Name of the query as it will be passed on the querystring (defaults to 'query')
- */
- queryParam: 'query',
- /**
- * @cfg {String} loadingText The text to display in the dropdown list while data is loading. Only applies
- * when mode = 'remote' (defaults to 'Loading...')
- */
- loadingText: 'Loading...',
- /**
- * @cfg {Boolean} resizable True to add a resize handle to the bottom of the dropdown list (defaults to false)
- */
- resizable: false,
- /**
- * @cfg {Number} handleHeight The height in pixels of the dropdown list resize handle if resizable = true (defaults to 8)
- */
- handleHeight : 8,
- /**
- * @cfg {Boolean} editable False to prevent the user from typing text directly into the field, just like a
- * traditional select (defaults to true)
- */
- editable: true,
- /**
- * @cfg {String} allQuery The text query to send to the server to return all records for the list with no filtering (defaults to '')
- */
- allQuery: '',
- /**
- * @cfg {String} mode Set to 'local' if the ComboBox loads local data (defaults to 'remote' which loads from the server)
- */
- mode: 'remote',
- /**
- * @cfg {Number} minListWidth The minimum width of the dropdown list in pixels (defaults to 70, will be ignored if
- * listWidth has a higher value)
- */
- minListWidth : 70,
- /**
- * @cfg {Boolean} forceSelection True to restrict the selected value to one of the values in the list, false to
- * allow the user to set arbitrary text into the field (defaults to false)
- */
- forceSelection:false,
- /**
- * @cfg {Number} typeAheadDelay The length of time in milliseconds to wait until the typeahead text is displayed
- * if typeAhead = true (defaults to 250)
- */
- typeAheadDelay : 250,
- /**
- * @cfg {String} valueNotFoundText When using a name/value combo, if the value passed to setValue is not found in
- * the store, valueNotFoundText will be displayed as the field text if defined (defaults to undefined)
- */
- valueNotFoundText : undefined,
- /**
- * @cfg {Boolean} blockFocus Prevents all focus calls, so it can work with things like HTML edtor bar
- */
- blockFocus : false,
-
- /**
- * @cfg {Boolean} disableClear Disable showing of clear button.
- */
- disableClear : false,
- /**
- * @cfg {Boolean} alwaysQuery Disable caching of results, and always send query
- */
- alwaysQuery : false,
-
- //private
- addicon : false,
- editicon: false,
-
-
- // private
- onRender : function(ct, position){
- Roo.form.ComboBox.superclass.onRender.call(this, ct, position);
- if(this.hiddenName){
- this.hiddenField = this.el.insertSibling({tag:'input', type:'hidden', name: this.hiddenName, id: (this.hiddenId||this.hiddenName)},
- 'before', true);
- this.hiddenField.value =
- this.hiddenValue !== undefined ? this.hiddenValue :
- this.value !== undefined ? this.value : '';
-
- // prevent input submission
- this.el.dom.removeAttribute('name');
- }
- if(Roo.isGecko){
- this.el.dom.setAttribute('autocomplete', 'off');
- }
-
- var cls = 'x-combo-list';
-
- this.list = new Roo.Layer({
- shadow: this.shadow, cls: [cls, this.listClass].join(' '), constrain:false
- });
-
- var lw = this.listWidth || Math.max(this.wrap.getWidth(), this.minListWidth);
- this.list.setWidth(lw);
- this.list.swallowEvent('mousewheel');
- this.assetHeight = 0;
-
- if(this.title){
- this.header = this.list.createChild({cls:cls+'-hd', html: this.title});
- this.assetHeight += this.header.getHeight();
- }
-
- this.innerList = this.list.createChild({cls:cls+'-inner'});
- this.innerList.on('mouseover', this.onViewOver, this);
- this.innerList.on('mousemove', this.onViewMove, this);
- this.innerList.setWidth(lw - this.list.getFrameWidth('lr'));
-
- if(this.allowBlank && !this.pageSize && !this.disableClear){
- this.footer = this.list.createChild({cls:cls+'-ft'});
- this.pageTb = new Roo.Toolbar(this.footer);
-
- }
- if(this.pageSize){
- this.footer = this.list.createChild({cls:cls+'-ft'});
- this.pageTb = new Roo.PagingToolbar(this.footer, this.store,
- {pageSize: this.pageSize});
-
- }
-
- if (this.pageTb && this.allowBlank && !this.disableClear) {
- var _this = this;
- this.pageTb.add(new Roo.Toolbar.Fill(), {
- cls: 'x-btn-icon x-btn-clear',
- text: ' ',
- handler: function()
- {
- _this.collapse();
- _this.clearValue();
- _this.onSelect(false, -1);
- }
- });
- }
- if (this.footer) {
- this.assetHeight += this.footer.getHeight();
- }
-
-
- if(!this.tpl){
- this.tpl = '<div class="'+cls+'-item">{' + this.displayField + '}</div>';
- }
-
- this.view = new Roo.View(this.innerList, this.tpl, {
- singleSelect:true, store: this.store, selectedClass: this.selectedClass
- });
-
- this.view.on('click', this.onViewClick, this);
-
- this.store.on('beforeload', this.onBeforeLoad, this);
- this.store.on('load', this.onLoad, this);
- this.store.on('loadexception', this.collapse, this);
-
- if(this.resizable){
- this.resizer = new Roo.Resizable(this.list, {
- pinned:true, handles:'se'
- });
- this.resizer.on('resize', function(r, w, h){
- this.maxHeight = h-this.handleHeight-this.list.getFrameWidth('tb')-this.assetHeight;
- this.listWidth = w;
- this.innerList.setWidth(w - this.list.getFrameWidth('lr'));
- this.restrictHeight();
- }, this);
- this[this.pageSize?'footer':'innerList'].setStyle('margin-bottom', this.handleHeight+'px');
- }
- if(!this.editable){
- this.editable = true;
- this.setEditable(false);
- }
-
-
- if (typeof(this.events.add.listeners) != 'undefined') {
-
- this.addicon = this.wrap.createChild(
- {tag: 'img', src: Roo.BLANK_IMAGE_URL, cls: 'x-form-combo-add' });
-
- this.addicon.on('click', function(e) {
- this.fireEvent('add', this);
- }, this);
- }
- if (typeof(this.events.edit.listeners) != 'undefined') {
-
- this.editicon = this.wrap.createChild(
- {tag: 'img', src: Roo.BLANK_IMAGE_URL, cls: 'x-form-combo-edit' });
- if (this.addicon) {
- this.editicon.setStyle('margin-left', '40px');
- }
- this.editicon.on('click', function(e) {
-
- // we fire even if inothing is selected..
- this.fireEvent('edit', this, this.lastData );
-
- }, this);
- }
-
-
-
- },
-
- // private
- initEvents : function(){
- Roo.form.ComboBox.superclass.initEvents.call(this);
-
- this.keyNav = new Roo.KeyNav(this.el, {
- "up" : function(e){
- this.inKeyMode = true;
- this.selectPrev();
- },
-
- "down" : function(e){
- if(!this.isExpanded()){
- this.onTriggerClick();
- }else{
- this.inKeyMode = true;
- this.selectNext();
- }
- },
-
- "enter" : function(e){
- this.onViewClick();
- //return true;
- },
-
- "esc" : function(e){
- this.collapse();
- },
-
- "tab" : function(e){
- this.onViewClick(false);
- return true;
- },
-
- scope : this,
-
- doRelay : function(foo, bar, hname){
- if(hname == 'down' || this.scope.isExpanded()){
- return Roo.KeyNav.prototype.doRelay.apply(this, arguments);
- }
- return true;
- },
-
- forceKeyDown: true
- });
- this.queryDelay = Math.max(this.queryDelay || 10,
- this.mode == 'local' ? 10 : 250);
- this.dqTask = new Roo.util.DelayedTask(this.initQuery, this);
- if(this.typeAhead){
- this.taTask = new Roo.util.DelayedTask(this.onTypeAhead, this);
- }
- if(this.editable !== false){
- this.el.on("keyup", this.onKeyUp, this);
- }
- if(this.forceSelection){
- this.on('blur', this.doForce, this);
- }
- },
-
- onDestroy : function(){
- if(this.view){
- this.view.setStore(null);
- this.view.el.removeAllListeners();
- this.view.el.remove();
- this.view.purgeListeners();
- }
- if(this.list){
- this.list.destroy();
- }
- if(this.store){
- this.store.un('beforeload', this.onBeforeLoad, this);
- this.store.un('load', this.onLoad, this);
- this.store.un('loadexception', this.collapse, this);
- }
- Roo.form.ComboBox.superclass.onDestroy.call(this);
- },
-
- // private
- fireKey : function(e){
- if(e.isNavKeyPress() && !this.list.isVisible()){
- this.fireEvent("specialkey", this, e);
- }
- },
-
- // private
- onResize: function(w, h){
- Roo.form.ComboBox.superclass.onResize.apply(this, arguments);
-
- if(typeof w != 'number'){
- // we do not handle it!?!?
- return;
- }
- var tw = this.trigger.getWidth();
- tw += this.addicon ? this.addicon.getWidth() : 0;
- tw += this.editicon ? this.editicon.getWidth() : 0;
- var x = w - tw;
- this.el.setWidth( this.adjustWidth('input', x));
-
- this.trigger.setStyle('left', x+'px');
-
- if(this.list && this.listWidth === undefined){
- var lw = Math.max(x + this.trigger.getWidth(), this.minListWidth);
- this.list.setWidth(lw);
- this.innerList.setWidth(lw - this.list.getFrameWidth('lr'));
- }
-
-
-
- },
-
- /**
- * Allow or prevent the user from directly editing the field text. If false is passed,
- * the user will only be able to select from the items defined in the dropdown list. This method
- * is the runtime equivalent of setting the 'editable' config option at config time.
- * @param {Boolean} value True to allow the user to directly edit the field text
- */
- setEditable : function(value){
- if(value == this.editable){
- return;
- }
- this.editable = value;
- if(!value){
- this.el.dom.setAttribute('readOnly', true);
- this.el.on('mousedown', this.onTriggerClick, this);
- this.el.addClass('x-combo-noedit');
- }else{
- this.el.dom.setAttribute('readOnly', false);
- this.el.un('mousedown', this.onTriggerClick, this);
- this.el.removeClass('x-combo-noedit');
- }
- },
-
- // private
- onBeforeLoad : function(){
- if(!this.hasFocus){
- return;
- }
- this.innerList.update(this.loadingText ?
- '<div class="loading-indicator">'+this.loadingText+'</div>' : '');
- this.restrictHeight();
- this.selectedIndex = -1;
- },
-
- // private
- onLoad : function(){
- if(!this.hasFocus){
- return;
- }
- if(this.store.getCount() > 0){
- this.expand();
- this.restrictHeight();
- if(this.lastQuery == this.allQuery){
- if(this.editable){
- this.el.dom.select();
- }
- if(!this.selectByValue(this.value, true)){
- this.select(0, true);
- }
- }else{
- this.selectNext();
- if(this.typeAhead && this.lastKey != Roo.EventObject.BACKSPACE && this.lastKey != Roo.EventObject.DELETE){
- this.taTask.delay(this.typeAheadDelay);
- }
- }
- }else{
- this.onEmptyResults();
- }
- //this.el.focus();
- },
-
- // private
- onTypeAhead : function(){
- if(this.store.getCount() > 0){
- var r = this.store.getAt(0);
- var newValue = r.data[this.displayField];
- var len = newValue.length;
- var selStart = this.getRawValue().length;
- if(selStart != len){
- this.setRawValue(newValue);
- this.selectText(selStart, newValue.length);
- }
- }
- },
-
- // private
- onSelect : function(record, index){
- if(this.fireEvent('beforeselect', this, record, index) !== false){
- this.setFromData(index > -1 ? record.data : false);
- this.collapse();
- this.fireEvent('select', this, record, index);
- }
- },
-
- /**
- * Returns the currently selected field value or empty string if no value is set.
- * @return {String} value The selected value
- */
- getValue : function(){
- if(this.valueField){
- return typeof this.value != 'undefined' ? this.value : '';
- }else{
- return Roo.form.ComboBox.superclass.getValue.call(this);
- }
- },
-
- /**
- * Clears any text/value currently set in the field
- */
- clearValue : function(){
- if(this.hiddenField){
- this.hiddenField.value = '';
- }
- this.value = '';
- this.setRawValue('');
- this.lastSelectionText = '';
- this.applyEmptyText();
- },
-
- /**
- * Sets the specified value into the field. If the value finds a match, the corresponding record text
- * will be displayed in the field. If the value does not match the data value of an existing item,
- * and the valueNotFoundText config option is defined, it will be displayed as the default field text.
- * Otherwise the field will be blank (although the value will still be set).
- * @param {String} value The value to match
- */
- setValue : function(v){
- var text = v;
- if(this.valueField){
- var r = this.findRecord(this.valueField, v);
- if(r){
- text = r.data[this.displayField];
- }else if(this.valueNotFoundText !== undefined){
- text = this.valueNotFoundText;
- }
- }
- this.lastSelectionText = text;
- if(this.hiddenField){
- this.hiddenField.value = v;
- }
- Roo.form.ComboBox.superclass.setValue.call(this, text);
- this.value = v;
- },
- /**
- * @property {Object} the last set data for the element
- */
-
- lastData : false,
- /**
- * Sets the value of the field based on a object which is related to the record format for the store.
- * @param {Object} value the value to set as. or false on reset?
- */
- setFromData : function(o){
- var dv = ''; // display value
- var vv = ''; // value value..
- this.lastData = o;
- if (this.displayField) {
- dv = !o || typeof(o[this.displayField]) == 'undefined' ? '' : o[this.displayField];
- } else {
- // this is an error condition!!!
- Roo.log('no displayField value set for '+ (this.name ? this.name : this.id));
- }
-
- if(this.valueField){
- vv = !o || typeof(o[this.valueField]) == 'undefined' ? dv : o[this.valueField];
- }
- if(this.hiddenField){
- this.hiddenField.value = vv;
-
- this.lastSelectionText = dv;
- Roo.form.ComboBox.superclass.setValue.call(this, dv);
- this.value = vv;
- return;
- }
- // no hidden field.. - we store the value in 'value', but still display
- // display field!!!!
- this.lastSelectionText = dv;
- Roo.form.ComboBox.superclass.setValue.call(this, dv);
- this.value = vv;
-
-
- },
- // private
- reset : function(){
- // overridden so that last data is reset..
- this.setValue(this.originalValue);
- this.clearInvalid();
- this.lastData = false;
- },
- // private
- findRecord : function(prop, value){
- var record;
- if(this.store.getCount() > 0){
- this.store.each(function(r){
- if(r.data[prop] == value){
- record = r;
- return false;
- }
- });
- }
- return record;
- },
-
- // private
- onViewMove : function(e, t){
- this.inKeyMode = false;
- },
-
- // private
- onViewOver : function(e, t){
- if(this.inKeyMode){ // prevent key nav and mouse over conflicts
- return;
- }
- var item = this.view.findItemFromChild(t);
- if(item){
- var index = this.view.indexOf(item);
- this.select(index, false);
- }
- },
-
- // private
- onViewClick : function(doFocus){
- var index = this.view.getSelectedIndexes()[0];
- var r = this.store.getAt(index);
- if(r){
- this.onSelect(r, index);
- }
- if(doFocus !== false && !this.blockFocus){
- this.el.focus();
- }
- },
-
- // private
- restrictHeight : function(){
- this.innerList.dom.style.height = '';
- var inner = this.innerList.dom;
- var h = Math.max(inner.clientHeight, inner.offsetHeight, inner.scrollHeight);
- this.innerList.setHeight(h < this.maxHeight ? 'auto' : this.maxHeight);
- this.list.beginUpdate();
- this.list.setHeight(this.innerList.getHeight()+this.list.getFrameWidth('tb')+(this.resizable?this.handleHeight:0)+this.assetHeight);
- this.list.alignTo(this.el, this.listAlign);
- this.list.endUpdate();
- },
-
- // private
- onEmptyResults : function(){
- this.collapse();
- },
-
- /**
- * Returns true if the dropdown list is expanded, else false.
- */
- isExpanded : function(){
- return this.list.isVisible();
- },
-
- /**
- * Select an item in the dropdown list by its data value. This function does NOT cause the select event to fire.
- * The store must be loaded and the list expanded for this function to work, otherwise use setValue.
- * @param {String} value The data value of the item to select
- * @param {Boolean} scrollIntoView False to prevent the dropdown list from autoscrolling to display the
- * selected item if it is not currently in view (defaults to true)
- * @return {Boolean} True if the value matched an item in the list, else false
- */
- selectByValue : function(v, scrollIntoView){
- if(v !== undefined && v !== null){
- var r = this.findRecord(this.valueField || this.displayField, v);
- if(r){
- this.select(this.store.indexOf(r), scrollIntoView);
- return true;
- }
- }
- return false;
- },
-
- /**
- * Select an item in the dropdown list by its numeric index in the list. This function does NOT cause the select event to fire.
- * The store must be loaded and the list expanded for this function to work, otherwise use setValue.
- * @param {Number} index The zero-based index of the list item to select
- * @param {Boolean} scrollIntoView False to prevent the dropdown list from autoscrolling to display the
- * selected item if it is not currently in view (defaults to true)
- */
- select : function(index, scrollIntoView){
- this.selectedIndex = index;
- this.view.select(index);
- if(scrollIntoView !== false){
- var el = this.view.getNode(index);
- if(el){
- this.innerList.scrollChildIntoView(el, false);
- }
- }
- },
-
- // private
- selectNext : function(){
- var ct = this.store.getCount();
- if(ct > 0){
- if(this.selectedIndex == -1){
- this.select(0);
- }else if(this.selectedIndex < ct-1){
- this.select(this.selectedIndex+1);
- }
- }
- },
-
- // private
- selectPrev : function(){
- var ct = this.store.getCount();
- if(ct > 0){
- if(this.selectedIndex == -1){
- this.select(0);
- }else if(this.selectedIndex != 0){
- this.select(this.selectedIndex-1);
- }
- }
- },
-
- // private
- onKeyUp : function(e){
- if(this.editable !== false && !e.isSpecialKey()){
- this.lastKey = e.getKey();
- this.dqTask.delay(this.queryDelay);
- }
- },
-
- // private
- validateBlur : function(){
- return !this.list || !this.list.isVisible();
- },
-
- // private
- initQuery : function(){
- this.doQuery(this.getRawValue());
- },
-
- // private
- doForce : function(){
- if(this.el.dom.value.length > 0){
- this.el.dom.value =
- this.lastSelectionText === undefined ? '' : this.lastSelectionText;
- this.applyEmptyText();
- }
- },
-
- /**
- * Execute a query to filter the dropdown list. Fires the beforequery event prior to performing the
- * query allowing the query action to be canceled if needed.
- * @param {String} query The SQL query to execute
- * @param {Boolean} forceAll True to force the query to execute even if there are currently fewer characters
- * in the field than the minimum specified by the minChars config option. It also clears any filter previously
- * saved in the current store (defaults to false)
- */
- doQuery : function(q, forceAll){
- if(q === undefined || q === null){
- q = '';
- }
- var qe = {
- query: q,
- forceAll: forceAll,
- combo: this,
- cancel:false
- };
- if(this.fireEvent('beforequery', qe)===false || qe.cancel){
- return false;
- }
- q = qe.query;
- forceAll = qe.forceAll;
- if(forceAll === true || (q.length >= this.minChars)){
- if(this.lastQuery != q || this.alwaysQuery){
- this.lastQuery = q;
- if(this.mode == 'local'){
- this.selectedIndex = -1;
- if(forceAll){
- this.store.clearFilter();
- }else{
- this.store.filter(this.displayField, q);
- }
- this.onLoad();
- }else{
- this.store.baseParams[this.queryParam] = q;
- this.store.load({
- params: this.getParams(q)
- });
- this.expand();
- }
- }else{
- this.selectedIndex = -1;
- this.onLoad();
- }
- }
- },
-
- // private
- getParams : function(q){
- var p = {};
- //p[this.queryParam] = q;
- if(this.pageSize){
- p.start = 0;
- p.limit = this.pageSize;
- }
- return p;
- },
-
- /**
- * Hides the dropdown list if it is currently expanded. Fires the 'collapse' event on completion.
- */
- collapse : function(){
- if(!this.isExpanded()){
- return;
- }
- this.list.hide();
- Roo.get(document).un('mousedown', this.collapseIf, this);
- Roo.get(document).un('mousewheel', this.collapseIf, this);
- if (!this.editable) {
- Roo.get(document).un('keydown', this.listKeyPress, this);
- }
- this.fireEvent('collapse', this);
- },
-
- // private
- collapseIf : function(e){
- if(!e.within(this.wrap) && !e.within(this.list)){
- this.collapse();
- }
- },
-
- /**
- * Expands the dropdown list if it is currently hidden. Fires the 'expand' event on completion.
- */
- expand : function(){
- if(this.isExpanded() || !this.hasFocus){
- return;
- }
- this.list.alignTo(this.el, this.listAlign);
- this.list.show();
- Roo.get(document).on('mousedown', this.collapseIf, this);
- Roo.get(document).on('mousewheel', this.collapseIf, this);
- if (!this.editable) {
- Roo.get(document).on('keydown', this.listKeyPress, this);
- }
-
- this.fireEvent('expand', this);
- },
-
- // private
- // Implements the default empty TriggerField.onTriggerClick function
- onTriggerClick : function(){
- if(this.disabled){
- return;
- }
- if(this.isExpanded()){
- this.collapse();
- if (!this.blockFocus) {
- this.el.focus();
- }
-
- }else {
- this.hasFocus = true;
- if(this.triggerAction == 'all') {
- this.doQuery(this.allQuery, true);
- } else {
- this.doQuery(this.getRawValue());
- }
- if (!this.blockFocus) {
- this.el.focus();
- }
- }
- },
- listKeyPress : function(e)
- {
- //Roo.log('listkeypress');
- // scroll to first matching element based on key pres..
- if (e.isSpecialKey()) {
- return false;
- }
- var k = String.fromCharCode(e.getKey()).toUpperCase();
- //Roo.log(k);
- var match = false;
- var csel = this.view.getSelectedNodes();
- var cselitem = false;
- if (csel.length) {
- var ix = this.view.indexOf(csel[0]);
- cselitem = this.store.getAt(ix);
- if (!cselitem.get(this.displayField) || cselitem.get(this.displayField).substring(0,1).toUpperCase() != k) {
- cselitem = false;
- }
-
- }
-
- this.store.each(function(v) {
- if (cselitem) {
- // start at existing selection.
- if (cselitem.id == v.id) {
- cselitem = false;
- }
- return;
- }
-
- if (v.get(this.displayField) && v.get(this.displayField).substring(0,1).toUpperCase() == k) {
- match = this.store.indexOf(v);
- return false;
- }
- }, this);
-
- if (match === false) {
- return true; // no more action?
- }
- // scroll to?
- this.view.select(match);
- var sn = Roo.get(this.view.getSelectedNodes()[0])
- sn.scrollIntoView(sn.dom.parentNode, false);
- }
-
- /**
- * @cfg {Boolean} grow
- * @hide
- */
- /**
- * @cfg {Number} growMin
- * @hide
- */
- /**
- * @cfg {Number} growMax
- * @hide
- */
- /**
- * @hide
- * @method autoSize
- */
-});
\ No newline at end of file
+})();
\ No newline at end of file