/**
* @class Roo
* Roo core utilities and functions.
- * @singleton
+ * @static
*/
var Roo = {};
/**
isIE = ua.indexOf("msie") > -1,
isIE7 = ua.indexOf("msie 7") > -1,
isIE11 = /trident.*rv\:11\./.test(ua),
+ isEdge = ua.indexOf("edge") > -1,
isGecko = !isSafari && ua.indexOf("gecko") > -1,
isBorderBox = isIE && !isStrict,
isWindows = (ua.indexOf("windows") != -1 || ua.indexOf("win32") != -1),
isLinux = (ua.indexOf("linux") != -1),
isSecure = window.location.href.toLowerCase().indexOf("https") === 0,
isIOS = /iphone|ipad/.test(ua),
+ isAndroid = /android/.test(ua),
isTouch = (function() {
- try {
+ try {
+ if (ua.indexOf('chrome') != -1 && ua.indexOf('android') == -1) {
+ window.addEventListener('touchstart', function __set_has_touch__ () {
+ Roo.isTouch = true;
+ window.removeEventListener('touchstart', __set_has_touch__);
+ });
+ return false; // no touch on chrome!?
+ }
document.createEvent("TouchEvent");
return true;
} catch (e) {
if ((typeof(console) == 'undefined') || (typeof(console.log) == 'undefined')) {
return; // alerT?
}
- console.log(s);
+ console.log(s);
},
/**
* Takes an object and converts it to an encoded URL. e.g. Roo.urlEncode({foo: 1, bar: 2}); would return "foo=1&bar=2". Optionally, property values can be arrays, instead of keys and the resulting string that's returned will contain a name/value pair for each array value.
/** @type Boolean */
isIE11 : isIE11,
/** @type Boolean */
+ isEdge : isEdge,
+ /** @type Boolean */
isGecko : isGecko,
/** @type Boolean */
isBorderBox : isBorderBox,
/** @type Boolean */
isIOS : isIOS,
/** @type Boolean */
+ isAndroid : isAndroid,
+ /** @type Boolean */
isTouch : isTouch,
/**
{
var node = Roo.DomQuery.selectNode(selector,root);
return node ? Roo.get(node) : new Roo.Element(false);
- }
+ },
+ /**
+ * Find the current bootstrap width Grid size
+ * Note xs is the default for smaller.. - this is currently used by grids to render correct columns
+ * @returns {String} (xs|sm|md|lg|xl)
+ */
+
+ getGridSize : function()
+ {
+ var w = Roo.lib.Dom.getViewWidth();
+ switch(true) {
+ case w > 1200:
+ return 'xl';
+ case w > 992:
+ return 'lg';
+ case w > 768:
+ return 'md';
+ case w > 576:
+ return 'sm';
+ default:
+ return 'xs'
+ }
+
+ }
});
Roo.namespace("Roo", "Roo.util", "Roo.grid", "Roo.dd", "Roo.tree", "Roo.data",
"Roo.form", "Roo.menu", "Roo.state", "Roo.lib", "Roo.layout",
- "Roo.app", "Roo.ux",
- "Roo.bootstrap",
- "Roo.bootstrap.dash");
+ "Roo.app", "Roo.ux"
+ );
/*
* Based on:
* Ext JS Library 1.1.1
return Roo.util.Format.htmlEncode(args[i]);
});
}
+
+
});
/**
String.prototype.toggle = function(value, other){
return this == value ? other : value;
-};/*
+};
+
+
+/**
+ * Remove invalid unicode characters from a string
+ *
+ * @return {String} The clean string
+ */
+String.prototype.unicodeClean = function () {
+ return this.replace(/[\s\S]/g,
+ function(character) {
+ if (character.charCodeAt()< 256) {
+ return character;
+ }
+ try {
+ encodeURIComponent(character);
+ } catch(e) {
+ return '';
+ }
+ return character;
+ }
+ );
+};
+
+
+/**
+ * Make the first letter of a string uppercase
+ *
+ * @return {String} The new string.
+ */
+String.prototype.toUpperCaseFirst = function () {
+ return this.charAt(0).toUpperCase() + this.slice(1);
+};
+
+/*
* Based on:
* Ext JS Library 1.1.1
* Copyright(c) 2006-2007, Ext JS, LLC.
}
return res;
- }
+ },
+ /**
+ * equals
+ * @param {Array} o The array to compare to
+ * @returns {Boolean} true if the same
+ */
+ equals : function(b)
+ {
+ // https://stackoverflow.com/questions/3115982/how-to-check-if-two-arrays-are-equal-with-javascript
+ if (this === b) {
+ return true;
+ }
+ if (b == null) {
+ return false;
+ }
+ if (this.length !== b.length) {
+ return false;
+ }
+
+ // sort?? a.sort().equals(b.sort());
+
+ for (var i = 0; i < this.length; ++i) {
+ if (this[i] !== b[i]) {
+ return false;
+ }
+ }
+ return true;
+ }
+
+
+
});
-
-
+Roo.applyIf(Array, {
+ /**
+ * from
+ * @static
+ * @param {Array} o Or Array like object (eg. nodelist)
+ * @returns {Array}
+ */
+ from : function(o)
+ {
+ var ret= [];
+
+ for (var i =0; i < o.length; i++) {
+ ret[i] = o[i];
+ }
+ return ret;
+
+ }
+});
/*
* Based on:
* Ext JS Library 1.1.1
/**
Returns the number of milliseconds between this date and date
@param {Date} date (optional) Defaults to now
- @return {Number} The diff in milliseconds
+ @param {String} interval (optional) Default Date.MILLI, A valid date interval enum value (eg. Date.DAY)
+ @return {Number} The diff in milliseconds or units of interval
@member Date getElapsed
*/
-Date.prototype.getElapsed = function(date) {
- return Math.abs((date || new Date()).getTime()-this.getTime());
+Date.prototype.getElapsed = function(date, interval)
+{
+ date = date || new Date();
+ var ret = Math.abs(date.getTime()-this.getTime());
+ switch (interval) {
+
+ case Date.SECOND:
+ return Math.floor(ret / (1000));
+ case Date.MINUTE:
+ return Math.floor(ret / (1000*60));
+ case Date.HOUR:
+ return Math.floor(ret / (1000*60*60));
+ case Date.DAY:
+ return Math.floor(ret / (1000*60*60*24));
+ case Date.MONTH: // this does not give exact number...??
+ return ((date.format("Y") - this.format("Y")) * 12) + (date.format("m") - this.format("m"));
+ case Date.YEAR: // this does not give exact number...??
+ return (date.format("Y") - this.format("Y"));
+
+ case Date.MILLI:
+ default:
+ return ret;
+ }
};
+
// was in date file..
}
code += "if (y >= 0 && m >= 0 && d > 0 && h >= 0 && i >= 0 && s >= 0)\n"
- + "{v = new Date(y, m, d, h, i, s);}\n"
+ + "{v = new Date(y, m, d, h, i, s); v.setFullYear(y);}\n"
+ "else if (y >= 0 && m >= 0 && d > 0 && h >= 0 && i >= 0)\n"
- + "{v = new Date(y, m, d, h, i);}\n"
+ + "{v = new Date(y, m, d, h, i); v.setFullYear(y);}\n"
+ "else if (y >= 0 && m >= 0 && d > 0 && h >= 0)\n"
- + "{v = new Date(y, m, d, h);}\n"
+ + "{v = new Date(y, m, d, h); v.setFullYear(y);}\n"
+ "else if (y >= 0 && m >= 0 && d > 0)\n"
- + "{v = new Date(y, m, d);}\n"
+ + "{v = new Date(y, m, d); v.setFullYear(y);}\n"
+ "else if (y >= 0 && m >= 0)\n"
- + "{v = new Date(y, m);}\n"
+ + "{v = new Date(y, m); v.setFullYear(y);}\n"
+ "else if (y >= 0)\n"
- + "{v = new Date(y);}\n"
+ + "{v = new Date(y); v.setFullYear(y);}\n"
+ "}return (v && (z || o))?\n" // favour UTC offset over GMT offset
+ " ((z)? v.add(Date.SECOND, (v.getTimezoneOffset() * 60) + (z*1)) :\n" // reset to UTC, then add offset
+ " v.add(Date.HOUR, (v.getGMTOffset() / 100) + (o / -100))) : v\n" // reset to GMT, then add offset
s:"(\\d{1,2})"}; // Numeric representation of a month, without leading zeros
case "m":
return {g:1,
- c:"m = parseInt(results[" + currentGroup + "], 10) - 1;\n",
+ c:"m = Math.max(0,parseInt(results[" + currentGroup + "], 10) - 1);\n",
s:"(\\d{2})"}; // Numeric representation of a month, with leading zeros
case "t":
return {g:0,
};
// private
-// safari setMonth is broken
-if(Roo.isSafari){
+// safari setMonth is broken -- check that this is only donw once...
+if(Roo.isSafari && typeof(Date.brokenSetMonth) == 'undefined'){
Date.brokenSetMonth = Date.prototype.setMonth;
Date.prototype.setMonth = function(num){
if(num <= -1){
}
return d;
};
-/*
- * 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.lib.Dom
+ * @licence LGPL
* @static
*
* Dom utils (from YIU afaik)
+ *
*
**/
Roo.lib.Dom = {
getViewHeight : function(full) {
return full ? this.getDocumentHeight() : this.getViewportHeight();
},
-
+ /**
+ * Get the Full Document height
+ * @return {Number} The height
+ */
getDocumentHeight: function() {
var scrollHeight = (document.compatMode != "CSS1Compat") ? document.body.scrollHeight : document.documentElement.scrollHeight;
return Math.max(scrollHeight, this.getViewportHeight());
},
-
+ /**
+ * Get the Full Document width
+ * @return {Number} The width
+ */
getDocumentWidth: function() {
var scrollWidth = (document.compatMode != "CSS1Compat") ? document.body.scrollWidth : document.documentElement.scrollWidth;
return Math.max(scrollWidth, this.getViewportWidth());
},
-
+ /**
+ * Get the Window Viewport height
+ * @return {Number} The height
+ */
getViewportHeight: function() {
var height = self.innerHeight;
var mode = document.compatMode;
return height;
},
-
+ /**
+ * Get the Window Viewport width
+ * @return {Number} The width
+ */
getViewportWidth: function() {
var width = self.innerWidth;
var mode = document.compatMode;
E._tryPreloadAttach();
})();
-/*
- * Portions of this file are based on pieces of Yahoo User Interface Library
- * Copyright (c) 2007, Yahoo! Inc. All rights reserved.
- * YUI licensed under the BSD License:
- * http://developer.yahoo.net/yui/license.txt
- * <script type="text/javascript">
- *
- */
+
(function() {
/**
* @class Roo.lib.Ajax
+ *
+ * provide a simple Ajax request utility functions
+ *
+ * Portions of this file are based on pieces of Yahoo User Interface Library
+ * Copyright (c) 2007, Yahoo! Inc. All rights reserved.
+ * YUI licensed under the BSD License:
+ * http://developer.yahoo.net/yui/license.txt
+ * <script type="text/javascript">
+ *
*
*/
Roo.lib.Ajax = {
return this.asyncRequest(method, uri, cb, data);
},
-
+ /**
+ * serialize a form
+ *
+ * @static
+ * @param {DomForm} form element
+ * @return {String} urlencode form output.
+ */
serializeForm : function(form) {
if(typeof form == 'string') {
form = (document.getElementById(form) || document.forms[form]);
return [ tmp[0][0], tmp[0][1] ];
};
- };/*
+ };
+
+/**
+ * @class Roo.lib.Color
+ * @constructor
+ * An abstract Color implementation. Concrete Color implementations should use
+ * an instance of this function as their prototype, and implement the getRGB and
+ * getHSL functions. getRGB should return an object representing the RGB
+ * components of this Color, with the red, green, and blue components in the
+ * range [0,255] and the alpha component in the range [0,100]. getHSL should
+ * return an object representing the HSL components of this Color, with the hue
+ * component in the range [0,360), the saturation and lightness components in
+ * the range [0,100], and the alpha component in the range [0,1].
+ *
+ *
+ * Color.js
+ *
+ * Functions for Color handling and processing.
+ *
+ * http://www.safalra.com/web-design/javascript/Color-handling-and-processing/
+ *
+ * The author of this program, Safalra (Stephen Morley), irrevocably releases all
+ * rights to this program, with the intention of it becoming part of the public
+ * domain. Because this program is released into the public domain, it comes with
+ * no warranty either expressed or implied, to the extent permitted by law.
+ *
+ * For more free and public domain JavaScript code by the same author, visit:
+ * http://www.safalra.com/web-design/javascript/
+ *
+ */
+Roo.lib.Color = function() { }
+
+
+Roo.apply(Roo.lib.Color.prototype, {
+
+ rgb : null,
+ hsv : null,
+ hsl : null,
+
+ /**
+ * getIntegerRGB
+ * @return {Object} an object representing the RGBA components of this Color. The red,
+ * green, and blue components are converted to integers in the range [0,255].
+ * The alpha is a value in the range [0,1].
+ */
+ getIntegerRGB : function(){
+
+ // get the RGB components of this Color
+ var rgb = this.getRGB();
+
+ // return the integer components
+ return {
+ 'r' : Math.round(rgb.r),
+ 'g' : Math.round(rgb.g),
+ 'b' : Math.round(rgb.b),
+ 'a' : rgb.a
+ };
+
+ },
+
+ /**
+ * getPercentageRGB
+ * @return {Object} an object representing the RGBA components of this Color. The red,
+ * green, and blue components are converted to numbers in the range [0,100].
+ * The alpha is a value in the range [0,1].
+ */
+ getPercentageRGB : function(){
+
+ // get the RGB components of this Color
+ var rgb = this.getRGB();
+
+ // return the percentage components
+ return {
+ 'r' : 100 * rgb.r / 255,
+ 'g' : 100 * rgb.g / 255,
+ 'b' : 100 * rgb.b / 255,
+ 'a' : rgb.a
+ };
+
+ },
+
+ /**
+ * getCSSHexadecimalRGB
+ * @return {String} a string representing this Color as a CSS hexadecimal RGB Color
+ * value - that is, a string of the form #RRGGBB where each of RR, GG, and BB
+ * are two-digit hexadecimal numbers.
+ */
+ getCSSHexadecimalRGB : function()
+ {
+
+ // get the integer RGB components
+ var rgb = this.getIntegerRGB();
+
+ // determine the hexadecimal equivalents
+ var r16 = rgb.r.toString(16);
+ var g16 = rgb.g.toString(16);
+ var b16 = rgb.b.toString(16);
+
+ // return the CSS RGB Color value
+ return '#'
+ + (r16.length == 2 ? r16 : '0' + r16)
+ + (g16.length == 2 ? g16 : '0' + g16)
+ + (b16.length == 2 ? b16 : '0' + b16);
+
+ },
+
+ /**
+ * getCSSIntegerRGB
+ * @return {String} a string representing this Color as a CSS integer RGB Color
+ * value - that is, a string of the form rgb(r,g,b) where each of r, g, and b
+ * are integers in the range [0,255].
+ */
+ getCSSIntegerRGB : function(){
+
+ // get the integer RGB components
+ var rgb = this.getIntegerRGB();
+
+ // return the CSS RGB Color value
+ return 'rgb(' + rgb.r + ',' + rgb.g + ',' + rgb.b + ')';
+
+ },
+
+ /**
+ * getCSSIntegerRGBA
+ * @return {String} Returns a string representing this Color as a CSS integer RGBA Color
+ * value - that is, a string of the form rgba(r,g,b,a) where each of r, g, and
+ * b are integers in the range [0,255] and a is in the range [0,1].
+ */
+ getCSSIntegerRGBA : function(){
+
+ // get the integer RGB components
+ var rgb = this.getIntegerRGB();
+
+ // return the CSS integer RGBA Color value
+ return 'rgb(' + rgb.r + ',' + rgb.g + ',' + rgb.b + ',' + rgb.a + ')';
+
+ },
+
+ /**
+ * getCSSPercentageRGB
+ * @return {String} a string representing this Color as a CSS percentage RGB Color
+ * value - that is, a string of the form rgb(r%,g%,b%) where each of r, g, and
+ * b are in the range [0,100].
+ */
+ getCSSPercentageRGB : function(){
+
+ // get the percentage RGB components
+ var rgb = this.getPercentageRGB();
+
+ // return the CSS RGB Color value
+ return 'rgb(' + rgb.r + '%,' + rgb.g + '%,' + rgb.b + '%)';
+
+ },
+
+ /**
+ * getCSSPercentageRGBA
+ * @return {String} a string representing this Color as a CSS percentage RGBA Color
+ * value - that is, a string of the form rgba(r%,g%,b%,a) where each of r, g,
+ * and b are in the range [0,100] and a is in the range [0,1].
+ */
+ getCSSPercentageRGBA : function(){
+
+ // get the percentage RGB components
+ var rgb = this.getPercentageRGB();
+
+ // return the CSS percentage RGBA Color value
+ return 'rgb(' + rgb.r + '%,' + rgb.g + '%,' + rgb.b + '%,' + rgb.a + ')';
+
+ },
+
+ /**
+ * getCSSHSL
+ * @return {String} a string representing this Color as a CSS HSL Color value - that
+ * is, a string of the form hsl(h,s%,l%) where h is in the range [0,100] and
+ * s and l are in the range [0,100].
+ */
+ getCSSHSL : function(){
+
+ // get the HSL components
+ var hsl = this.getHSL();
+
+ // return the CSS HSL Color value
+ return 'hsl(' + hsl.h + ',' + hsl.s + '%,' + hsl.l + '%)';
+
+ },
+
+ /**
+ * getCSSHSLA
+ * @return {String} a string representing this Color as a CSS HSLA Color value - that
+ * is, a string of the form hsla(h,s%,l%,a) where h is in the range [0,100],
+ * s and l are in the range [0,100], and a is in the range [0,1].
+ */
+ getCSSHSLA : function(){
+
+ // get the HSL components
+ var hsl = this.getHSL();
+
+ // return the CSS HSL Color value
+ return 'hsl(' + hsl.h + ',' + hsl.s + '%,' + hsl.l + '%,' + hsl.a + ')';
+
+ },
+
+ /**
+ * Sets the Color of the specified node to this Color. This functions sets
+ * the CSS 'color' property for the node. The parameter is:
+ *
+ * @param {DomElement} node - the node whose Color should be set
+ */
+ setNodeColor : function(node){
+
+ // set the Color of the node
+ node.style.color = this.getCSSHexadecimalRGB();
+
+ },
+
+ /**
+ * Sets the background Color of the specified node to this Color. This
+ * functions sets the CSS 'background-color' property for the node. The
+ * parameter is:
+ *
+ * @param {DomElement} node - the node whose background Color should be set
+ */
+ setNodeBackgroundColor : function(node){
+
+ // set the background Color of the node
+ node.style.backgroundColor = this.getCSSHexadecimalRGB();
+
+ },
+ // convert between formats..
+ toRGB: function()
+ {
+ var r = this.getIntegerRGB();
+ return new Roo.lib.RGBColor(r.r,r.g,r.b,r.a);
+
+ },
+ toHSL : function()
+ {
+ var hsl = this.getHSL();
+ // return the CSS HSL Color value
+ return new Roo.lib.HSLColor(hsl.h, hsl.s, hsl.l , hsl.a );
+
+ },
+
+ toHSV : function()
+ {
+ var rgb = this.toRGB();
+ var hsv = rgb.getHSV();
+ // return the CSS HSL Color value
+ return new Roo.lib.HSVColor(hsv.h, hsv.s, hsv.v , hsv.a );
+
+ },
+
+ // modify v = 0 ... 1 (eg. 0.5)
+ saturate : function(v)
+ {
+ var rgb = this.toRGB();
+ var hsv = rgb.getHSV();
+ return new Roo.lib.HSVColor(hsv.h, hsv.s * v, hsv.v , hsv.a );
+
+
+ },
+
+
+ /**
+ * getRGB
+ * @return {Object} the RGB and alpha components of this Color as an object with r,
+ * g, b, and a properties. r, g, and b are in the range [0,255] and a is in
+ * the range [0,1].
+ */
+ getRGB: function(){
+
+ // return the RGB components
+ return {
+ 'r' : this.rgb.r,
+ 'g' : this.rgb.g,
+ 'b' : this.rgb.b,
+ 'a' : this.alpha
+ };
+
+ },
+
+ /**
+ * getHSV
+ * @return {Object} the HSV and alpha components of this Color as an object with h,
+ * s, v, and a properties. h is in the range [0,360), s and v are in the range
+ * [0,100], and a is in the range [0,1].
+ */
+ getHSV : function()
+ {
+
+ // calculate the HSV components if necessary
+ if (this.hsv == null) {
+ this.calculateHSV();
+ }
+
+ // return the HSV components
+ return {
+ 'h' : this.hsv.h,
+ 's' : this.hsv.s,
+ 'v' : this.hsv.v,
+ 'a' : this.alpha
+ };
+
+ },
+
+ /**
+ * getHSL
+ * @return {Object} the HSL and alpha components of this Color as an object with h,
+ * s, l, and a properties. h is in the range [0,360), s and l are in the range
+ * [0,100], and a is in the range [0,1].
+ */
+ getHSL : function(){
+
+
+ // calculate the HSV components if necessary
+ if (this.hsl == null) { this.calculateHSL(); }
+
+ // return the HSL components
+ return {
+ 'h' : this.hsl.h,
+ 's' : this.hsl.s,
+ 'l' : this.hsl.l,
+ 'a' : this.alpha
+ };
+
+ }
+
+
+});
+
+
+/**
+ * @class Roo.lib.RGBColor
+ * @extends Roo.lib.Color
+ * Creates a Color specified in the RGB Color space, with an optional alpha
+ * component. The parameters are:
+ * @constructor
+ *
+
+ * @param {Number} r - the red component, clipped to the range [0,255]
+ * @param {Number} g - the green component, clipped to the range [0,255]
+ * @param {Number} b - the blue component, clipped to the range [0,255]
+ * @param {Number} a - the alpha component, clipped to the range [0,1] - this parameter is
+ * optional and defaults to 1
+ */
+Roo.lib.RGBColor = function (r, g, b, a){
+
+ // store the alpha component after clipping it if necessary
+ this.alpha = (a === undefined ? 1 : Math.max(0, Math.min(1, a)));
+
+ // store the RGB components after clipping them if necessary
+ this.rgb =
+ {
+ 'r' : Math.max(0, Math.min(255, r)),
+ 'g' : Math.max(0, Math.min(255, g)),
+ 'b' : Math.max(0, Math.min(255, b))
+ };
+
+ // initialise the HSV and HSL components to null
+
+
+ /*
+ * //private returns the HSV or HSL hue component of this RGBColor. The hue is in the
+ * range [0,360). The parameters are:
+ *
+ * maximum - the maximum of the RGB component values
+ * range - the range of the RGB component values
+ */
+
+
+}
+// this does an 'exteds'
+Roo.extend(Roo.lib.RGBColor, Roo.lib.Color, {
+
+
+ getHue : function(maximum, range)
+ {
+ var rgb = this.rgb;
+
+ // check whether the range is zero
+ if (range == 0){
+
+ // set the hue to zero (any hue is acceptable as the Color is grey)
+ var hue = 0;
+
+ }else{
+
+ // determine which of the components has the highest value and set the hue
+ switch (maximum){
+
+ // red has the highest value
+ case rgb.r:
+ var hue = (rgb.g - rgb.b) / range * 60;
+ if (hue < 0) { hue += 360; }
+ break;
+
+ // green has the highest value
+ case rgb.g:
+ var hue = (rgb.b - rgb.r) / range * 60 + 120;
+ break;
+
+ // blue has the highest value
+ case rgb.b:
+ var hue = (rgb.r - rgb.g) / range * 60 + 240;
+ break;
+
+ }
+
+ }
+
+ // return the hue
+ return hue;
+
+ },
+
+ /* //private Calculates and stores the HSV components of this RGBColor so that they can
+ * be returned be the getHSV function.
+ */
+ calculateHSV : function(){
+ var rgb = this.rgb;
+ // get the maximum and range of the RGB component values
+ var maximum = Math.max(rgb.r, rgb.g, rgb.b);
+ var range = maximum - Math.min(rgb.r, rgb.g, rgb.b);
+
+ // store the HSV components
+ this.hsv =
+ {
+ 'h' : this.getHue(maximum, range),
+ 's' : (maximum == 0 ? 0 : 100 * range / maximum),
+ 'v' : maximum / 2.55
+ };
+
+ },
+
+ /* //private Calculates and stores the HSL components of this RGBColor so that they can
+ * be returned be the getHSL function.
+ */
+ calculateHSL : function(){
+ var rgb = this.rgb;
+ // get the maximum and range of the RGB component values
+ var maximum = Math.max(rgb.r, rgb.g, rgb.b);
+ var range = maximum - Math.min(rgb.r, rgb.g, rgb.b);
+
+ // determine the lightness in the range [0,1]
+ var l = maximum / 255 - range / 510;
+
+ // store the HSL components
+ this.hsl =
+ {
+ 'h' : this.getHue(maximum, range),
+ 's' : (range == 0 ? 0 : range / 2.55 / (l < 0.5 ? l * 2 : 2 - l * 2)),
+ 'l' : 100 * l
+ };
+
+ }
+
+});
+
+/**
+ * @class Roo.lib.HSVColor
+ * @extends Roo.lib.Color
+ * Creates a Color specified in the HSV Color space, with an optional alpha
+ * component. The parameters are:
+ * @constructor
+ *
+ * @param {Number} h - the hue component, wrapped to the range [0,360)
+ * @param {Number} s - the saturation component, clipped to the range [0,100]
+ * @param {Number} v - the value component, clipped to the range [0,100]
+ * @param {Number} a - the alpha component, clipped to the range [0,1] - this parameter is
+ * optional and defaults to 1
+ */
+Roo.lib.HSVColor = function (h, s, v, a){
+
+ // store the alpha component after clipping it if necessary
+ this.alpha = (a === undefined ? 1 : Math.max(0, Math.min(1, a)));
+
+ // store the HSV components after clipping or wrapping them if necessary
+ this.hsv =
+ {
+ 'h' : (h % 360 + 360) % 360,
+ 's' : Math.max(0, Math.min(100, s)),
+ 'v' : Math.max(0, Math.min(100, v))
+ };
+
+ // initialise the RGB and HSL components to null
+ this.rgb = null;
+ this.hsl = null;
+}
+
+Roo.extend(Roo.lib.HSVColor, Roo.lib.Color, {
+ /* Calculates and stores the RGB components of this HSVColor so that they can
+ * be returned be the getRGB function.
+ */
+ calculateRGB: function ()
+ {
+ var hsv = this.hsv;
+ // check whether the saturation is zero
+ if (hsv.s == 0){
+
+ // set the Color to the appropriate shade of grey
+ var r = hsv.v;
+ var g = hsv.v;
+ var b = hsv.v;
+
+ }else{
+
+ // set some temporary values
+ var f = hsv.h / 60 - Math.floor(hsv.h / 60);
+ var p = hsv.v * (1 - hsv.s / 100);
+ var q = hsv.v * (1 - hsv.s / 100 * f);
+ var t = hsv.v * (1 - hsv.s / 100 * (1 - f));
+
+ // set the RGB Color components to their temporary values
+ switch (Math.floor(hsv.h / 60)){
+ case 0: var r = hsv.v; var g = t; var b = p; break;
+ case 1: var r = q; var g = hsv.v; var b = p; break;
+ case 2: var r = p; var g = hsv.v; var b = t; break;
+ case 3: var r = p; var g = q; var b = hsv.v; break;
+ case 4: var r = t; var g = p; var b = hsv.v; break;
+ case 5: var r = hsv.v; var g = p; var b = q; break;
+ }
+
+ }
+
+ // store the RGB components
+ this.rgb =
+ {
+ 'r' : r * 2.55,
+ 'g' : g * 2.55,
+ 'b' : b * 2.55
+ };
+
+ },
+
+ /* Calculates and stores the HSL components of this HSVColor so that they can
+ * be returned be the getHSL function.
+ */
+ calculateHSL : function (){
+
+ var hsv = this.hsv;
+ // determine the lightness in the range [0,100]
+ var l = (2 - hsv.s / 100) * hsv.v / 2;
+
+ // store the HSL components
+ this.hsl =
+ {
+ 'h' : hsv.h,
+ 's' : hsv.s * hsv.v / (l < 50 ? l * 2 : 200 - l * 2),
+ 'l' : l
+ };
+
+ // correct a division-by-zero error
+ if (isNaN(hsl.s)) { hsl.s = 0; }
+
+ }
+
+
+});
+
+
+/**
+ * @class Roo.lib.HSLColor
+ * @extends Roo.lib.Color
+ *
+ * @constructor
+ * Creates a Color specified in the HSL Color space, with an optional alpha
+ * component. The parameters are:
+ *
+ * @param {Number} h - the hue component, wrapped to the range [0,360)
+ * @param {Number} s - the saturation component, clipped to the range [0,100]
+ * @param {Number} l - the lightness component, clipped to the range [0,100]
+ * @param {Number} a - the alpha component, clipped to the range [0,1] - this parameter is
+ * optional and defaults to 1
+ */
+
+Roo.lib.HSLColor = function(h, s, l, a){
+
+ // store the alpha component after clipping it if necessary
+ this.alpha = (a === undefined ? 1 : Math.max(0, Math.min(1, a)));
+
+ // store the HSL components after clipping or wrapping them if necessary
+ this.hsl =
+ {
+ 'h' : (h % 360 + 360) % 360,
+ 's' : Math.max(0, Math.min(100, s)),
+ 'l' : Math.max(0, Math.min(100, l))
+ };
+
+ // initialise the RGB and HSV components to null
+}
+
+Roo.extend(Roo.lib.HSLColor, Roo.lib.Color, {
+
+ /* Calculates and stores the RGB components of this HSLColor so that they can
+ * be returned be the getRGB function.
+ */
+ calculateRGB: function (){
+
+ // check whether the saturation is zero
+ if (this.hsl.s == 0){
+
+ // store the RGB components representing the appropriate shade of grey
+ this.rgb =
+ {
+ 'r' : this.hsl.l * 2.55,
+ 'g' : this.hsl.l * 2.55,
+ 'b' : this.hsl.l * 2.55
+ };
+
+ }else{
+
+ // set some temporary values
+ var p = this.hsl.l < 50
+ ? this.hsl.l * (1 + hsl.s / 100)
+ : this.hsl.l + hsl.s - hsl.l * hsl.s / 100;
+ var q = 2 * hsl.l - p;
+
+ // initialise the RGB components
+ this.rgb =
+ {
+ 'r' : (h + 120) / 60 % 6,
+ 'g' : h / 60,
+ 'b' : (h + 240) / 60 % 6
+ };
+
+ // loop over the RGB components
+ for (var key in this.rgb){
+
+ // ensure that the property is not inherited from the root object
+ if (this.rgb.hasOwnProperty(key)){
+
+ // set the component to its value in the range [0,100]
+ if (this.rgb[key] < 1){
+ this.rgb[key] = q + (p - q) * this.rgb[key];
+ }else if (this.rgb[key] < 3){
+ this.rgb[key] = p;
+ }else if (this.rgb[key] < 4){
+ this.rgb[key] = q + (p - q) * (4 - this.rgb[key]);
+ }else{
+ this.rgb[key] = q;
+ }
+
+ // set the component to its value in the range [0,255]
+ this.rgb[key] *= 2.55;
+
+ }
+
+ }
+
+ }
+
+ },
+
+ /* Calculates and stores the HSV components of this HSLColor so that they can
+ * be returned be the getHSL function.
+ */
+ calculateHSV : function(){
+
+ // set a temporary value
+ var t = this.hsl.s * (this.hsl.l < 50 ? this.hsl.l : 100 - this.hsl.l) / 100;
+
+ // store the HSV components
+ this.hsv =
+ {
+ 'h' : this.hsl.h,
+ 's' : 200 * t / (this.hsl.l + t),
+ 'v' : t + this.hsl.l
+ };
+
+ // correct a division-by-zero error
+ if (isNaN(this.hsv.s)) { this.hsv.s = 0; }
+
+ }
+
+
+});
+/*
* Portions of this file are based on pieces of Yahoo User Interface Library
* Copyright (c) 2007, Yahoo! Inc. All rights reserved.
* YUI licensed under the BSD License:
}
};
})();
-/*
+/**
+ * Originally based of this code... - refactored for Roo...
+ * https://github.com/aaalsaleh/undo-manager
+
+ * undo-manager.js
+ * @author Abdulrahman Alsaleh
+ * @copyright 2015 Abdulrahman Alsaleh
+ * @license MIT License (c)
+ *
+ * Hackily modifyed by alan@roojs.com
+ *
+ *
+ *
+ *
+ * TOTALLY UNTESTED...
+ *
+ * Documentation to be done....
+ */
+
+
+/**
+* @class Roo.lib.UndoManager
+* An undo manager implementation in JavaScript. It follows the W3C UndoManager and DOM Transaction
+* Draft and the undocumented and disabled Mozilla Firefox's UndoManager implementation.
+
+ * Usage:
+ * <pre><code>
+
+
+editor.undoManager = new Roo.lib.UndoManager(1000, editor);
+
+</code></pre>
+
+* For more information see this blog post with examples:
+* <a href="http://www.cnitblog.com/seeyeah/archive/2011/12/30/38728.html/">DomHelper
+ - Create Elements using DOM, HTML fragments and Templates</a>.
+* @constructor
+* @param {Number} limit how far back to go ... use 1000?
+* @param {Object} scope usually use document..
+*/
+
+Roo.lib.UndoManager = function (limit, undoScopeHost)
+{
+ this.stack = [];
+ this.limit = limit;
+ this.scope = undoScopeHost;
+ this.fireEvent = typeof CustomEvent != 'undefined' && undoScopeHost && undoScopeHost.dispatchEvent;
+ if (this.fireEvent) {
+ this.bindEvents();
+ }
+ this.reset();
+
+};
+
+Roo.lib.UndoManager.prototype = {
+
+ limit : false,
+ stack : false,
+ scope : false,
+ fireEvent : false,
+ position : 0,
+ length : 0,
+
+
+ /**
+ * To push and execute a transaction, the method undoManager.transact
+ * must be called by passing a transaction object as the first argument, and a merge
+ * flag as the second argument. A transaction object has the following properties:
+ *
+ * Usage:
+<pre><code>
+undoManager.transact({
+ label: 'Typing',
+ execute: function() { ... },
+ undo: function() { ... },
+ // redo same as execute
+ redo: function() { this.execute(); }
+}, false);
+
+// merge transaction
+undoManager.transact({
+ label: 'Typing',
+ execute: function() { ... }, // this will be run...
+ undo: function() { ... }, // what to do when undo is run.
+ // redo same as execute
+ redo: function() { this.execute(); }
+}, true);
+</code></pre>
+ *
+ *
+ * @param {Object} transaction The transaction to add to the stack.
+ * @return {String} The HTML fragment
+ */
+
+
+ transact : function (transaction, merge)
+ {
+ if (arguments.length < 2) {
+ throw new TypeError('Not enough arguments to UndoManager.transact.');
+ }
+
+ transaction.execute();
+
+ this.stack.splice(0, this.position);
+ if (merge && this.length) {
+ this.stack[0].push(transaction);
+ } else {
+ this.stack.unshift([transaction]);
+ }
+
+ this.position = 0;
+
+ if (this.limit && this.stack.length > this.limit) {
+ this.length = this.stack.length = this.limit;
+ } else {
+ this.length = this.stack.length;
+ }
+
+ if (this.fireEvent) {
+ this.scope.dispatchEvent(
+ new CustomEvent('DOMTransaction', {
+ detail: {
+ transactions: this.stack[0].slice()
+ },
+ bubbles: true,
+ cancelable: false
+ })
+ );
+ }
+
+ //Roo.log("transaction: pos:" + this.position + " len: " + this.length + " slen:" + this.stack.length);
+
+
+ },
+
+ undo : function ()
+ {
+ //Roo.log("undo: pos:" + this.position + " len: " + this.length + " slen:" + this.stack.length);
+
+ if (this.position < this.length) {
+ for (var i = this.stack[this.position].length - 1; i >= 0; i--) {
+ this.stack[this.position][i].undo();
+ }
+ this.position++;
+
+ if (this.fireEvent) {
+ this.scope.dispatchEvent(
+ new CustomEvent('undo', {
+ detail: {
+ transactions: this.stack[this.position - 1].slice()
+ },
+ bubbles: true,
+ cancelable: false
+ })
+ );
+ }
+ }
+ },
+
+ redo : function ()
+ {
+ if (this.position > 0) {
+ for (var i = 0, n = this.stack[this.position - 1].length; i < n; i++) {
+ this.stack[this.position - 1][i].redo();
+ }
+ this.position--;
+
+ if (this.fireEvent) {
+ this.scope.dispatchEvent(
+ new CustomEvent('redo', {
+ detail: {
+ transactions: this.stack[this.position].slice()
+ },
+ bubbles: true,
+ cancelable: false
+ })
+ );
+ }
+ }
+ },
+
+ item : function (index)
+ {
+ if (index >= 0 && index < this.length) {
+ return this.stack[index].slice();
+ }
+ return null;
+ },
+
+ clearUndo : function () {
+ this.stack.length = this.length = this.position;
+ },
+
+ clearRedo : function () {
+ this.stack.splice(0, this.position);
+ this.position = 0;
+ this.length = this.stack.length;
+ },
+ /**
+ * Reset the undo - probaly done on load to clear all history.
+ */
+ reset : function()
+ {
+ this.stack = [];
+ this.position = 0;
+ this.length = 0;
+ this.current_html = this.scope.innerHTML;
+ if (this.timer !== false) {
+ clearTimeout(this.timer);
+ }
+ this.timer = false;
+ this.merge = false;
+ this.addEvent();
+
+ },
+ current_html : '',
+ timer : false,
+ merge : false,
+
+
+ // this will handle the undo/redo on the element.?
+ bindEvents : function()
+ {
+ var el = this.scope;
+ el.undoManager = this;
+
+
+ this.scope.addEventListener('keydown', function(e) {
+ if ((e.ctrlKey || e.metaKey) && e.keyCode === 90) {
+ if (e.shiftKey) {
+ el.undoManager.redo(); // Ctrl/Command + Shift + Z
+ } else {
+ el.undoManager.undo(); // Ctrl/Command + Z
+ }
+
+ e.preventDefault();
+ }
+ });
+ /// ignore keyup..
+ this.scope.addEventListener('keyup', function(e) {
+ if ((e.ctrlKey || e.metaKey) && e.keyCode === 90) {
+ e.preventDefault();
+ }
+ });
+
+
+
+ var t = this;
+
+ el.addEventListener('input', function(e) {
+ if(el.innerHTML == t.current_html) {
+ return;
+ }
+ // only record events every second.
+ if (t.timer !== false) {
+ clearTimeout(t.timer);
+ t.timer = false;
+ }
+ t.timer = setTimeout(function() { t.merge = false; }, 1000);
+
+ t.addEvent(t.merge);
+ t.merge = true; // ignore changes happening every second..
+ });
+ },
+ /**
+ * Manually add an event.
+ * Normall called without arguements - and it will just get added to the stack.
+ *
+ */
+
+ addEvent : function(merge)
+ {
+ //Roo.log("undomanager +" + (merge ? 'Y':'n'));
+ // not sure if this should clear the timer
+ merge = typeof(merge) == 'undefined' ? false : merge;
+
+ this.scope.undoManager.transact({
+ scope : this.scope,
+ oldHTML: this.current_html,
+ newHTML: this.scope.innerHTML,
+ // nothing to execute (content already changed when input is fired)
+ execute: function() { },
+ undo: function() {
+ this.scope.innerHTML = this.current_html = this.oldHTML;
+ },
+ redo: function() {
+ this.scope.innerHTML = this.current_html = this.newHTML;
+ }
+ }, false); //merge);
+
+ this.merge = merge;
+
+ this.current_html = this.scope.innerHTML;
+ }
+
+
+
+
+
+
+};
+/**
+ * @class Roo.lib.Range
+ * @constructor
+ * This is a toolkit, normally used to copy features into a Dom Range element
+ * Roo.lib.Range.wrap(x);
+ *
+ *
+ *
+ */
+Roo.lib.Range = function() { };
+
+/**
+ * Wrap a Dom Range object, to give it new features...
+ * @static
+ * @param {Range} the range to wrap
+ */
+Roo.lib.Range.wrap = function(r) {
+ return Roo.apply(r, Roo.lib.Range.prototype);
+};
+/**
+ * find a parent node eg. LI / OL
+ * @param {string|Array} node name or array of nodenames
+ * @return {DomElement|false}
+ */
+Roo.apply(Roo.lib.Range.prototype,
+{
+
+ closest : function(str)
+ {
+ if (typeof(str) != 'string') {
+ // assume it's a array.
+ for(var i = 0;i < str.length;i++) {
+ var r = this.closest(str[i]);
+ if (r !== false) {
+ return r;
+ }
+
+ }
+ return false;
+ }
+ str = str.toLowerCase();
+ var n = this.commonAncestorContainer; // might not be a node
+ while (n.nodeType != 1) {
+ n = n.parentNode;
+ }
+
+ if (n.nodeName.toLowerCase() == str ) {
+ return n;
+ }
+ if (n.nodeName.toLowerCase() == 'body') {
+ return false;
+ }
+
+ return n.closest(str) || false;
+
+ },
+ cloneRange : function()
+ {
+ return Roo.lib.Range.wrap(Range.prototype.cloneRange.call(this));
+ }
+});/**
+ * @class Roo.lib.Selection
+ * @constructor
+ * This is a toolkit, normally used to copy features into a Dom Selection element
+ * Roo.lib.Selection.wrap(x);
+ *
+ *
+ *
+ */
+Roo.lib.Selection = function() { };
+
+/**
+ * Wrap a Dom Range object, to give it new features...
+ * @static
+ * @param {Range} the range to wrap
+ */
+Roo.lib.Selection.wrap = function(r, doc) {
+ Roo.apply(r, Roo.lib.Selection.prototype);
+ r.ownerDocument = doc; // usefull so we dont have to keep referening to it.
+ return r;
+};
+/**
+ * find a parent node eg. LI / OL
+ * @param {string|Array} node name or array of nodenames
+ * @return {DomElement|false}
+ */
+Roo.apply(Roo.lib.Selection.prototype,
+{
+ /**
+ * the owner document
+ */
+ ownerDocument : false,
+
+ getRangeAt : function(n)
+ {
+ return Roo.lib.Range.wrap(Selection.prototype.getRangeAt.call(this,n));
+ },
+
+ /**
+ * insert node at selection
+ * @param {DomElement|string} node
+ * @param {string} cursor (after|in|none) where to place the cursor after inserting.
+ */
+ insertNode: function(node, cursor)
+ {
+ if (typeof(node) == 'string') {
+ node = this.ownerDocument.createElement(node);
+ if (cursor == 'in') {
+ node.innerHTML = ' ';
+ }
+ }
+
+ var range = this.getRangeAt(0);
+
+ if (this.type != 'Caret') {
+ range.deleteContents();
+ }
+ var sn = node.childNodes[0]; // select the contents.
+
+
+
+ range.insertNode(node);
+ if (cursor == 'after') {
+ node.insertAdjacentHTML('afterend', ' ');
+ sn = node.nextSibling;
+ }
+
+ if (cursor == 'none') {
+ return;
+ }
+
+ this.cursorText(sn);
+ },
+
+ cursorText : function(n)
+ {
+
+ //var range = this.getRangeAt(0);
+ range = Roo.lib.Range.wrap(new Range());
+ //range.selectNode(n);
+
+ var ix = Array.from(n.parentNode.childNodes).indexOf(n);
+ range.setStart(n.parentNode,ix);
+ range.setEnd(n.parentNode,ix+1);
+ //range.collapse(false);
+
+ this.removeAllRanges();
+ this.addRange(range);
+
+ Roo.log([n, range, this,this.baseOffset,this.extentOffset, this.type]);
+ },
+ cursorAfter : function(n)
+ {
+ if (!n.nextSibling || n.nextSibling.nodeValue != ' ') {
+ n.insertAdjacentHTML('afterend', ' ');
+ }
+ this.cursorText (n.nextSibling);
+ }
+
+
+});/*
* Based on:
* Ext JS Library 1.1.1
* Copyright(c) 2006-2007, Ext JS, LLC.
* @class Roo.DomHelper
* Utility class for working with DOM and/or Templates. It transparently supports using HTML fragments or DOM.
* For more information see <a href="http://web.archive.org/web/20071221063734/http://www.jackslocum.com/blog/2006/10/06/domhelper-create-elements-using-dom-html-fragments-or-templates/">this blog post with examples</a>.
- * @singleton
+ * @static
*/
Roo.DomHelper = function(){
var tempTableEl = null;
var ieTable = function(depth, s, h, e){
tempTableEl.innerHTML = [s, h, e].join('');
var i = -1, el = tempTableEl;
- while(++i < depth){
+ while(++i < depth && el.firstChild){
el = el.firstChild;
}
return el;
el.insertBefore(node, before);
return node;
};
+
+ // this is a bit like the react update code...
+ //
+
+ var updateNode = function(from, to)
+ {
+ // should we handle non-standard elements?
+ Roo.log(["UpdateNode" , from, to]);
+ if (from.nodeType != to.nodeType) {
+ Roo.log(["ReplaceChild - mismatch notType" , to, from ]);
+ from.parentNode.replaceChild(to, from);
+ }
+
+ if (from.nodeType == 3) {
+ // assume it's text?!
+ if (from.data == to.data) {
+ return;
+ }
+ from.data = to.data;
+ return;
+ }
+ if (!from.parentNode) {
+ // not sure why this is happening?
+ return;
+ }
+ // assume 'to' doesnt have '1/3 nodetypes!
+ // not sure why, by from, parent node might not exist?
+ if (from.nodeType !=1 || from.tagName != to.tagName) {
+ Roo.log(["ReplaceChild" , from, to ]);
+
+ from.parentNode.replaceChild(to, from);
+ return;
+ }
+ // compare attributes
+ var ar = Array.from(from.attributes);
+ for(var i = 0; i< ar.length;i++) {
+ if (to.hasAttribute(ar[i].name)) {
+ continue;
+ }
+ if (ar[i].name == 'id') { // always keep ids?
+ continue;
+ }
+ //if (ar[i].name == 'style') {
+ // throw "style removed?";
+ //}
+ Roo.log("removeAttribute" + ar[i].name);
+ from.removeAttribute(ar[i].name);
+ }
+ ar = to.attributes;
+ for(var i = 0; i< ar.length;i++) {
+ if (from.getAttribute(ar[i].name) == to.getAttribute(ar[i].name)) {
+ Roo.log("skipAttribute " + ar[i].name + '=' + to.getAttribute(ar[i].name));
+ continue;
+ }
+ Roo.log("updateAttribute " + ar[i].name + '=>' + to.getAttribute(ar[i].name));
+ from.setAttribute(ar[i].name, to.getAttribute(ar[i].name));
+ }
+ // children
+ var far = Array.from(from.childNodes);
+ var tar = Array.from(to.childNodes);
+ // if the lengths are different.. then it's probably a editable content change, rather than
+ // a change of the block definition..
+
+ // this did notwork , as our rebuilt nodes did not include ID's so did not match at all.
+ /*if (from.innerHTML == to.innerHTML) {
+ return;
+ }
+ if (far.length != tar.length) {
+ from.innerHTML = to.innerHTML;
+ return;
+ }
+ */
+
+ for(var i = 0; i < Math.max(tar.length, far.length); i++) {
+ if (i >= far.length) {
+ from.appendChild(tar[i]);
+ Roo.log(["add", tar[i]]);
+
+ } else if ( i >= tar.length) {
+ from.removeChild(far[i]);
+ Roo.log(["remove", far[i]]);
+ } else {
+
+ updateNode(far[i], tar[i]);
+ }
+ }
+
+
+
+
+ };
+
+
return {
- /** True to force the use of DOM instead of html fragments @type Boolean */
- useDom : false,
-
- /**
- * Returns the markup for the passed Element(s) config
- * @param {Object} o The Dom object spec (and children)
- * @return {String}
- */
- markup : function(o){
- return createHtml(o);
- },
-
- /**
- * Applies a style specification to an element
- * @param {String/HTMLElement} el The element to apply styles to
- * @param {String/Object/Function} styles A style specification string eg "width:100px", or object in the form {width:"100px"}, or
- * a function which returns such a specification.
- */
- applyStyles : function(el, styles){
- if(styles){
- el = Roo.fly(el);
- if(typeof styles == "string"){
- var re = /\s?([a-z\-]*)\:\s?([^;]*);?/gi;
- var matches;
- while ((matches = re.exec(styles)) != null){
- el.setStyle(matches[1], matches[2]);
- }
- }else if (typeof styles == "object"){
- for (var style in styles){
- el.setStyle(style, styles[style]);
+ /** True to force the use of DOM instead of html fragments @type Boolean */
+ useDom : false,
+
+ /**
+ * Returns the markup for the passed Element(s) config
+ * @param {Object} o The Dom object spec (and children)
+ * @return {String}
+ */
+ markup : function(o){
+ return createHtml(o);
+ },
+
+ /**
+ * Applies a style specification to an element
+ * @param {String/HTMLElement} el The element to apply styles to
+ * @param {String/Object/Function} styles A style specification string eg "width:100px", or object in the form {width:"100px"}, or
+ * a function which returns such a specification.
+ */
+ applyStyles : function(el, styles){
+ if(styles){
+ el = Roo.fly(el);
+ if(typeof styles == "string"){
+ var re = /\s?([a-z\-]*)\:\s?([^;]*);?/gi;
+ var matches;
+ while ((matches = re.exec(styles)) != null){
+ el.setStyle(matches[1], matches[2]);
+ }
+ }else if (typeof styles == "object"){
+ for (var style in styles){
+ el.setStyle(style, styles[style]);
+ }
+ }else if (typeof styles == "function"){
+ Roo.DomHelper.applyStyles(el, styles.call());
}
- }else if (typeof styles == "function"){
- Roo.DomHelper.applyStyles(el, styles.call());
- }
- }
- },
-
- /**
- * Inserts an HTML fragment into the Dom
- * @param {String} where Where to insert the html in relation to el - beforeBegin, afterBegin, beforeEnd, afterEnd.
- * @param {HTMLElement} el The context element
- * @param {String} html The HTML fragmenet
- * @return {HTMLElement} The new node
- */
- insertHtml : function(where, el, html){
- where = where.toLowerCase();
- if(el.insertAdjacentHTML){
- if(tableRe.test(el.tagName)){
- var rs;
- if(rs = insertIntoTable(el.tagName.toLowerCase(), where, el, html)){
- return rs;
+ }
+ },
+
+ /**
+ * Inserts an HTML fragment into the Dom
+ * @param {String} where Where to insert the html in relation to el - beforeBegin, afterBegin, beforeEnd, afterEnd.
+ * @param {HTMLElement} el The context element
+ * @param {String} html The HTML fragmenet
+ * @return {HTMLElement} The new node
+ */
+ insertHtml : function(where, el, html){
+ where = where.toLowerCase();
+ if(el.insertAdjacentHTML){
+ if(tableRe.test(el.tagName)){
+ var rs;
+ if(rs = insertIntoTable(el.tagName.toLowerCase(), where, el, html)){
+ return rs;
+ }
+ }
+ switch(where){
+ case "beforebegin":
+ el.insertAdjacentHTML('BeforeBegin', html);
+ return el.previousSibling;
+ case "afterbegin":
+ el.insertAdjacentHTML('AfterBegin', html);
+ return el.firstChild;
+ case "beforeend":
+ el.insertAdjacentHTML('BeforeEnd', html);
+ return el.lastChild;
+ case "afterend":
+ el.insertAdjacentHTML('AfterEnd', html);
+ return el.nextSibling;
}
+ throw 'Illegal insertion point -> "' + where + '"';
}
+ var range = el.ownerDocument.createRange();
+ var frag;
switch(where){
- case "beforebegin":
- el.insertAdjacentHTML('BeforeBegin', html);
+ case "beforebegin":
+ range.setStartBefore(el);
+ frag = range.createContextualFragment(html);
+ el.parentNode.insertBefore(frag, el);
return el.previousSibling;
- case "afterbegin":
- el.insertAdjacentHTML('AfterBegin', html);
- return el.firstChild;
+ case "afterbegin":
+ if(el.firstChild){
+ range.setStartBefore(el.firstChild);
+ frag = range.createContextualFragment(html);
+ el.insertBefore(frag, el.firstChild);
+ return el.firstChild;
+ }else{
+ el.innerHTML = html;
+ return el.firstChild;
+ }
case "beforeend":
- el.insertAdjacentHTML('BeforeEnd', html);
- return el.lastChild;
+ if(el.lastChild){
+ range.setStartAfter(el.lastChild);
+ frag = range.createContextualFragment(html);
+ el.appendChild(frag);
+ return el.lastChild;
+ }else{
+ el.innerHTML = html;
+ return el.lastChild;
+ }
case "afterend":
- el.insertAdjacentHTML('AfterEnd', html);
- return el.nextSibling;
- }
- throw 'Illegal insertion point -> "' + where + '"';
- }
- var range = el.ownerDocument.createRange();
- var frag;
- switch(where){
- case "beforebegin":
- range.setStartBefore(el);
- frag = range.createContextualFragment(html);
- el.parentNode.insertBefore(frag, el);
- return el.previousSibling;
- case "afterbegin":
- if(el.firstChild){
- range.setStartBefore(el.firstChild);
+ range.setStartAfter(el);
frag = range.createContextualFragment(html);
- el.insertBefore(frag, el.firstChild);
- return el.firstChild;
- }else{
- el.innerHTML = html;
- return el.firstChild;
+ el.parentNode.insertBefore(frag, el.nextSibling);
+ return el.nextSibling;
}
- case "beforeend":
- if(el.lastChild){
- range.setStartAfter(el.lastChild);
- frag = range.createContextualFragment(html);
- el.appendChild(frag);
- return el.lastChild;
- }else{
- el.innerHTML = html;
- return el.lastChild;
+ throw 'Illegal insertion point -> "' + where + '"';
+ },
+
+ /**
+ * Creates new Dom element(s) and inserts them before el
+ * @param {String/HTMLElement/Element} el The context element
+ * @param {Object/String} o The Dom object spec (and children) or raw HTML blob
+ * @param {Boolean} returnElement (optional) true to return a Roo.Element
+ * @return {HTMLElement/Roo.Element} The new node
+ */
+ insertBefore : function(el, o, returnElement){
+ return this.doInsert(el, o, returnElement, "beforeBegin");
+ },
+
+ /**
+ * Creates new Dom element(s) and inserts them after el
+ * @param {String/HTMLElement/Element} el The context element
+ * @param {Object} o The Dom object spec (and children)
+ * @param {Boolean} returnElement (optional) true to return a Roo.Element
+ * @return {HTMLElement/Roo.Element} The new node
+ */
+ insertAfter : function(el, o, returnElement){
+ return this.doInsert(el, o, returnElement, "afterEnd", "nextSibling");
+ },
+
+ /**
+ * Creates new Dom element(s) and inserts them as the first child of el
+ * @param {String/HTMLElement/Element} el The context element
+ * @param {Object/String} o The Dom object spec (and children) or raw HTML blob
+ * @param {Boolean} returnElement (optional) true to return a Roo.Element
+ * @return {HTMLElement/Roo.Element} The new node
+ */
+ insertFirst : function(el, o, returnElement){
+ return this.doInsert(el, o, returnElement, "afterBegin");
+ },
+
+ // private
+ doInsert : function(el, o, returnElement, pos, sibling){
+ el = Roo.getDom(el);
+ var newNode;
+ if(this.useDom || o.ns){
+ newNode = createDom(o, null);
+ el.parentNode.insertBefore(newNode, sibling ? el[sibling] : el);
+ }else{
+ var html = createHtml(o);
+ newNode = this.insertHtml(pos, el, html);
+ }
+ return returnElement ? Roo.get(newNode, true) : newNode;
+ },
+
+ /**
+ * Creates new Dom element(s) and appends them to el
+ * @param {String/HTMLElement/Element} el The context element
+ * @param {Object/String} o The Dom object spec (and children) or raw HTML blob
+ * @param {Boolean} returnElement (optional) true to return a Roo.Element
+ * @return {HTMLElement/Roo.Element} The new node
+ */
+ append : function(el, o, returnElement){
+ el = Roo.getDom(el);
+ var newNode;
+ if(this.useDom || o.ns){
+ newNode = createDom(o, null);
+ el.appendChild(newNode);
+ }else{
+ var html = createHtml(o);
+ newNode = this.insertHtml("beforeEnd", el, html);
+ }
+ return returnElement ? Roo.get(newNode, true) : newNode;
+ },
+
+ /**
+ * Creates new Dom element(s) and overwrites the contents of el with them
+ * @param {String/HTMLElement/Element} el The context element
+ * @param {Object/String} o The Dom object spec (and children) or raw HTML blob
+ * @param {Boolean} returnElement (optional) true to return a Roo.Element
+ * @return {HTMLElement/Roo.Element} The new node
+ */
+ overwrite : function(el, o, returnElement)
+ {
+ el = Roo.getDom(el);
+ if (o.ns) {
+
+ while (el.childNodes.length) {
+ el.removeChild(el.firstChild);
}
- case "afterend":
- range.setStartAfter(el);
- frag = range.createContextualFragment(html);
- el.parentNode.insertBefore(frag, el.nextSibling);
- return el.nextSibling;
+ createDom(o, el);
+ } else {
+ el.innerHTML = createHtml(o);
}
- throw 'Illegal insertion point -> "' + where + '"';
- },
-
- /**
- * Creates new Dom element(s) and inserts them before el
- * @param {String/HTMLElement/Element} el The context element
- * @param {Object/String} o The Dom object spec (and children) or raw HTML blob
- * @param {Boolean} returnElement (optional) true to return a Roo.Element
- * @return {HTMLElement/Roo.Element} The new node
- */
- insertBefore : function(el, o, returnElement){
- return this.doInsert(el, o, returnElement, "beforeBegin");
- },
-
- /**
- * Creates new Dom element(s) and inserts them after el
- * @param {String/HTMLElement/Element} el The context element
- * @param {Object} o The Dom object spec (and children)
- * @param {Boolean} returnElement (optional) true to return a Roo.Element
- * @return {HTMLElement/Roo.Element} The new node
- */
- insertAfter : function(el, o, returnElement){
- return this.doInsert(el, o, returnElement, "afterEnd", "nextSibling");
- },
-
- /**
- * Creates new Dom element(s) and inserts them as the first child of el
- * @param {String/HTMLElement/Element} el The context element
- * @param {Object/String} o The Dom object spec (and children) or raw HTML blob
- * @param {Boolean} returnElement (optional) true to return a Roo.Element
- * @return {HTMLElement/Roo.Element} The new node
- */
- insertFirst : function(el, o, returnElement){
- return this.doInsert(el, o, returnElement, "afterBegin");
- },
-
- // private
- doInsert : function(el, o, returnElement, pos, sibling){
- el = Roo.getDom(el);
- var newNode;
- if(this.useDom || o.ns){
- newNode = createDom(o, null);
- el.parentNode.insertBefore(newNode, sibling ? el[sibling] : el);
- }else{
- var html = createHtml(o);
- newNode = this.insertHtml(pos, el, html);
- }
- return returnElement ? Roo.get(newNode, true) : newNode;
- },
-
- /**
- * Creates new Dom element(s) and appends them to el
- * @param {String/HTMLElement/Element} el The context element
- * @param {Object/String} o The Dom object spec (and children) or raw HTML blob
- * @param {Boolean} returnElement (optional) true to return a Roo.Element
- * @return {HTMLElement/Roo.Element} The new node
- */
- append : function(el, o, returnElement){
- el = Roo.getDom(el);
- var newNode;
- if(this.useDom || o.ns){
- newNode = createDom(o, null);
- el.appendChild(newNode);
- }else{
+
+ return returnElement ? Roo.get(el.firstChild, true) : el.firstChild;
+ },
+
+ /**
+ * Creates a new Roo.DomHelper.Template from the Dom object spec
+ * @param {Object} o The Dom object spec (and children)
+ * @return {Roo.DomHelper.Template} The new template
+ */
+ createTemplate : function(o){
var html = createHtml(o);
- newNode = this.insertHtml("beforeEnd", el, html);
- }
- return returnElement ? Roo.get(newNode, true) : newNode;
- },
-
- /**
- * Creates new Dom element(s) and overwrites the contents of el with them
- * @param {String/HTMLElement/Element} el The context element
- * @param {Object/String} o The Dom object spec (and children) or raw HTML blob
- * @param {Boolean} returnElement (optional) true to return a Roo.Element
- * @return {HTMLElement/Roo.Element} The new node
- */
- overwrite : function(el, o, returnElement){
- el = Roo.getDom(el);
- if (o.ns) {
-
- while (el.childNodes.length) {
- el.removeChild(el.firstChild);
- }
- createDom(o, el);
- } else {
- el.innerHTML = createHtml(o);
+ return new Roo.Template(html);
+ },
+ /**
+ * Updates the first element with the spec from the o (replacing if necessary)
+ * This iterates through the children, and updates attributes / children etc..
+ * @param {String/HTMLElement/Element} el The context element
+ * @param {Object/String} o The Dom object spec (and children) or raw HTML blob
+ */
+
+ update : function(el, o)
+ {
+ updateNode(Roo.getDom(el), createDom(o));
+
}
- return returnElement ? Roo.get(el.firstChild, true) : el.firstChild;
- },
-
- /**
- * Creates a new Roo.DomHelper.Template from the Dom object spec
- * @param {Object} o The Dom object spec (and children)
- * @return {Roo.DomHelper.Template} The new template
- */
- createTemplate : function(o){
- var html = createHtml(o);
- return new Roo.Template(html);
- }
+
};
}();
/*
};
Roo.Template.prototype = {
+ /**
+ * @cfg {Function} onLoad Called after the template has been loaded and complied (usually from a remove source)
+ */
+ onLoad : false,
+
+
/**
* @cfg {String} url The Url to load the template from. beware if you are loading from a url, the data may not be ready if you use it instantly..
* it should be fixed so that template is observable...
* @cfg {String} html The HTML fragment or an array of fragments to join("") or multiple arguments to join("")
*/
html : '',
+
+
+ compiled : false,
+ loaded : false,
/**
* Returns an HTML fragment of this template with the specified values applied.
* @param {Object} values The template values. Can be an array if your params are numeric (i.e. {0}) or an object (i.e. {foo: 'bar'})
* @return {String} The HTML fragment
*/
+
+
+
applyTemplate : function(values){
+ //Roo.log(["applyTemplate", values]);
try {
if(this.compiled){
method : 'GET',
success : function (response) {
_t.loading = false;
- _t.html = response.responseText;
_t.url = false;
- _t.compile();
+
+ _t.set(response.responseText,true);
+ _t.loaded = true;
+ if (_t.onLoad) {
+ _t.onLoad();
+ }
},
failure : function(response) {
Roo.log("Template failed to load from " + _t.url);
*/
set : function(html, compile){
this.html = html;
- this.compiled = null;
+ this.compiled = false;
if(compile){
this.compile();
}
<li> <b>E{display%=2}</b> css value "display" that is evenly divisible by 2</li>
<li> <b>E{display!=none}</b> css value "display" that does not equal "none"</li>
</ul>
- * @singleton
+ * @static
*/
Roo.DomQuery = function(){
var cache = {}, simpleCache = {}, valueCache = {};
}
var r = [], ri = -1, cn;
for(var i = 0, ci; ci = c[i]; i++){
- if((' '+ci.className+' ').indexOf(v) != -1){
+
+
+ if((' '+
+ ( (ci instanceof SVGElement) ? ci.className.baseVal : ci.className)
+ +' ').indexOf(v) != -1){
r[++ri] = ci;
}
}
return n.htmlFor;
}
if(attr == "class" || attr == "className"){
- return n.className;
+ return (n instanceof SVGElement) ? n.className.baseVal : n.className;
}
return n.getAttribute(attr) || n[attr];
a = Roo.DomQuery.getStyle(ci, attr);
}
else if(attr == "class" || attr == "className"){
- a = ci.className;
+ a = (ci instanceof SVGElement) ? ci.className.baseVal : ci.className;
}else if(attr == "for"){
a = ci.htmlFor;
}else if(attr == "href"){
relayEvents : function(o, events){
var createHandler = function(ename){
return function(){
+
return this.fireEvent.apply(this, Roo.combine(ename, Array.prototype.slice.call(arguments, 0)));
};
};
for(var i = 0, len = events.length; i < len; i++){
var ename = events[i];
- if(!this.events[ename]){ this.events[ename] = true; };
+ if(!this.events[ename]){
+ this.events[ename] = true;
+ };
o.on(ename, createHandler(ename), this);
}
},
var ls = this.listeners, scope, len = ls.length;
if(len > 0){
this.firing = true;
- var args = Array.prototype.slice.call(arguments, 0);
+ var args = Array.prototype.slice.call(arguments, 0);
for(var i = 0; i < len; i++){
- var l = ls[i];
- if(l.fireFn.apply(l.scope||this.obj||window, arguments) === false){
+ var l = ls[i];
+ if(l.fireFn.apply(l.scope||this.obj||window, args) === false){
this.firing = false;
return false;
}
}
};
})();/*
+ * RooJS Library
+ * Copyright(c) 2007-2017, Roo J Solutions Ltd
+ *
+ * Licence LGPL
+ *
+ */
+
+/**
+ * @class Roo.Document
+ * @extends Roo.util.Observable
+ * This is a convience class to wrap up the main document loading code.. , rather than adding Roo.onReady(......)
+ *
+ * @param {Object} config the methods and properties of the 'base' class for the application.
+ *
+ * Generic Page handler - implement this to start your app..
+ *
+ * eg.
+ * MyProject = new Roo.Document({
+ events : {
+ 'load' : true // your events..
+ },
+ listeners : {
+ 'ready' : function() {
+ // fired on Roo.onReady()
+ }
+ }
+ *
+ */
+Roo.Document = function(cfg) {
+
+ this.addEvents({
+ 'ready' : true
+ });
+ Roo.util.Observable.call(this,cfg);
+
+ var _this = this;
+
+ Roo.onReady(function() {
+ _this.fireEvent('ready');
+ },null,false);
+
+
+}
+
+Roo.extend(Roo.Document, Roo.util.Observable, {});/*
* Based on:
* Ext JS Library 1.1.1
* Copyright(c) 2006-2007, Ext JS, LLC.
* Registers event handlers that want to receive a normalized EventObject instead of the standard browser event and provides
* several useful events directly.
* See {@link Roo.EventObject} for more details on normalized event objects.
- * @singleton
+ * @static
*/
Roo.EventManager = function(){
var docReadyEvent, docReadyProcId, docReadyState = false;
}
}
+
- var listen = function(element, ename, opt, fn, scope){
+ var listen = function(element, ename, opt, fn, scope)
+ {
var o = (!opt || typeof opt == "boolean") ? {} : opt;
fn = fn || o.fn; scope = scope || o.scope;
var el = Roo.getDom(element);
if(o.buffer){
h = createBuffered(h, o);
}
+
fn._handlers = fn._handlers || [];
- E.on(el, ename, h);
+ E.on(el, ename, h); // this adds the actuall listener to the object..
+
+
if(ename == "mousewheel" && el.addEventListener){ // workaround for jQuery
el.addEventListener("DOMMouseScroll", h, false);
E.on(window, 'unload', function(){
* @param {Object} scope An object that becomes the scope of the handler
* @param {boolean} options
*/
- onWindowResize : function(fn, scope, options){
+ onWindowResize : function(fn, scope, options)
+ {
if(!resizeEvent){
resizeEvent = new Roo.util.Event();
resizeTask = new Roo.util.DelayedTask(function(){
resizeEvent.fire(D.getViewWidth(), D.getViewHeight());
});
- E.on(window, "resize", function(){
- if(Roo.isIE){
+ E.on(window, "resize", function()
+ {
+ if (Roo.isIE) {
resizeTask.delay(50);
- }else{
+ } else {
resizeEvent.fire(D.getViewWidth(), D.getViewHeight());
}
});
var cls = [
Roo.isIE ? "roo-ie"
+ : Roo.isIE11 ? "roo-ie11"
+ : Roo.isEdge ? "roo-edge"
: Roo.isGecko ? "roo-gecko"
: Roo.isOpera ? "roo-opera"
: Roo.isSafari ? "roo-safari" : ""];
Roo.EventManager.on("myDiv", 'click', handleClick);
Roo.EventManager.addListener("myDiv", 'click', handleClick);
</code></pre>
- * @singleton
+ * @static
*/
Roo.EventObject = function(){
* @param {String/HTMLElement} element
* @param {Boolean} forceNew (optional) By default the constructor checks to see if there is already an instance of this element in the cache and if there is it returns the same instance. This will skip that check (useful for extending this class).
*/
- Roo.Element = function(element, forceNew){
+ Roo.Element = function(element, forceNew)
+ {
var dom = typeof element == "string" ?
document.getElementById(element) : element;
+
+ this.listeners = {};
+
if(!dom){ // invalid id/element
return null;
}
* @type String
*/
this.id = id || Roo.id(dom);
+
+ return this; // assumed for cctor?
};
var El = Roo.Element;
El.prototype = {
/**
- * The element's default display mode (defaults to "")
+ * The element's default display mode (defaults to "")
* @type String
*/
originalDisplay : "",
- visibilityMode : 1,
+
+ // note this is overridden in BS version..
+ visibilityMode : 1,
/**
* The default unit to append to CSS values where a unit isn't provided (defaults to px).
* @type String
var p = Roo.fly(this.dom.parentNode, '_internal');
return p ? p.findParent(simpleSelector, maxDepth, returnEl) : null;
},
+
+ /**
+ * Looks at the scrollable parent element
+ */
+ findScrollableParent : function()
+ {
+ var overflowRegex = /(auto|scroll)/;
+
+ if(this.getStyle('position') === 'fixed'){
+ return Roo.isAndroid ? Roo.get(document.documentElement) : Roo.get(document.body);
+ }
+
+ var excludeStaticParent = this.getStyle('position') === "absolute";
+
+ for (var parent = this; (parent = Roo.get(parent.dom.parentNode));){
+
+ if (excludeStaticParent && parent.getStyle('position') === "static") {
+ continue;
+ }
+
+ if (overflowRegex.test(parent.getStyle('overflow') + parent.getStyle('overflow-x') + parent.getStyle('overflow-y'))){
+ return parent;
+ }
+
+ if(parent.dom.nodeName.toLowerCase() == 'body'){
+ return Roo.isAndroid ? Roo.get(document.documentElement) : Roo.get(document.body);
+ }
+ }
+
+ return Roo.isAndroid ? Roo.get(document.documentElement) : Roo.get(document.body);
+ },
/**
* Walks up the dom looking for a parent node that matches the passed simple selector (e.g. div.some-class or span:first-child).
}
}else{
if(className && !this.hasClass(className)){
- this.dom.className = this.dom.className + " " + className;
+ if (this.dom instanceof SVGElement) {
+ this.dom.className.baseVal =this.dom.className.baseVal + " " + className;
+ } else {
+ this.dom.className = this.dom.className + " " + className;
+ }
}
}
return this;
* @return {Roo.Element} this
*/
removeClass : function(className){
- if(!className || !this.dom.className){
+
+ var cn = this.dom instanceof SVGElement ? this.dom.className.baseVal : this.dom.className;
+ if(!className || !cn){
return this;
}
if(className instanceof Array){
re = new RegExp('(?:^|\\s+)' + className + '(?:\\s+|$)', "g");
this.classReCache[className] = re;
}
- this.dom.className =
- this.dom.className.replace(re, " ");
+ if (this.dom instanceof SVGElement) {
+ this.dom.className.baseVal = cn.replace(re, " ");
+ } else {
+ this.dom.className = cn.replace(re, " ");
+ }
}
}
return this;
* @return {Boolean} True if the class exists, else false
*/
hasClass : function(className){
+ if (this.dom instanceof SVGElement) {
+ return className && (' '+this.dom.className.baseVal +' ').indexOf(' '+className+' ') != -1;
+ }
return className && (' '+this.dom.className+' ').indexOf(' '+className+' ') != -1;
},
* @param {Object} scope (optional) The scope (this object) of the fn
* @param {Object} options (optional)An object with standard {@link Roo.EventManager#addListener} options
*/
- addListener : function(eventName, fn, scope, options){
- if (this.dom) {
- Roo.EventManager.on(this.dom, eventName, fn, scope || this, options);
+ addListener : function(eventName, fn, scope, options)
+ {
+ if (eventName == 'dblclick') { // doublclick (touchstart) - faked on touch.
+ this.addListener('touchstart', this.onTapHandler, this);
+ }
+
+ // we need to handle a special case where dom element is a svg element.
+ // in this case we do not actua
+ if (!this.dom) {
+ return;
+ }
+
+ if (this.dom instanceof SVGElement && !(this.dom instanceof SVGSVGElement)) {
+ if (typeof(this.listeners[eventName]) == 'undefined') {
+ this.listeners[eventName] = new Roo.util.Event(this, eventName);
+ }
+ this.listeners[eventName].addListener(fn, scope, options);
+ return;
}
+
+
+ Roo.EventManager.on(this.dom, eventName, fn, scope || this, options);
+
+
},
-
+ tapedTwice : false,
+ onTapHandler : function(event)
+ {
+ if(!this.tapedTwice) {
+ this.tapedTwice = true;
+ var s = this;
+ setTimeout( function() {
+ s.tapedTwice = false;
+ }, 300 );
+ return;
+ }
+ event.preventDefault();
+ var revent = new MouseEvent('dblclick', {
+ view: window,
+ bubbles: true,
+ cancelable: true
+ });
+
+ this.dom.dispatchEvent(revent);
+ //action on double tap goes below
+
+ },
+
/**
* Removes an event handler from this element
* @param {String} eventName the type of event to remove
* @param {Function} fn the method the event invokes
+ * @param {Function} scope (needed for svg fake listeners)
* @return {Roo.Element} this
*/
- removeListener : function(eventName, fn){
+ removeListener : function(eventName, fn, scope){
Roo.EventManager.removeListener(this.dom, eventName, fn);
+ if (typeof(this.listeners) == 'undefined' || typeof(this.listeners[eventName]) == 'undefined') {
+ return this;
+ }
+ this.listeners[eventName].removeListener(fn, scope);
return this;
},
*/
removeAllListeners : function(){
E.purgeElement(this.dom);
+ this.listeners = {};
return this;
},
});
},
+
/**
* Set the opacity of the element
* @param {Float} opacity The new opacity. 0 = transparent, .5 = 50% visibile, 1 = fully visible, etc
* @param {Array} offsets (optional) Offset the positioning by [x, y]
* @return {Array} [x, y]
*/
- getAlignToXY : function(el, p, o){
+ getAlignToXY : function(el, p, o)
+ {
el = Roo.get(el);
var d = this.dom;
if(!el.dom){
//otherwise swap the aligned el to the opposite border of the target.
var p1y = p1.charAt(0), p1x = p1.charAt(p1.length-1);
var p2y = p2.charAt(0), p2x = p2.charAt(p2.length-1);
- var swapY = ((p1y=="t" && p2y=="b") || (p1y=="b" && p2y=="t"));
+ var swapY = ((p1y=="t" && p2y=="b") || (p1y=="b" && p2y=="t") );
var swapX = ((p1x=="r" && p2x=="l") || (p1x=="l" && p2x=="r"));
var doc = document;
* Puts a mask over this element to disable user interaction. Requires core.css.
* This method can only be applied to elements which accept child nodes.
* @param {String} msg (optional) A message to display in the mask
- * @param {String} msgCls (optional) A css class to apply to the msg element
+ * @param {String} msgCls (optional) A css class to apply to the msg element - use no-spinner to hide the spinner on bootstrap
* @return {Element} The mask element
*/
mask : function(msg, msgCls)
if(!this._mask){
this._mask = Roo.DomHelper.append(this.dom, {cls:"roo-el-mask"}, true);
}
+
this.addClass("x-masked");
this._mask.setDisplayed(true);
if(typeof msg == 'string'){
if(!this._maskMsg){
- this._maskMsg = Roo.DomHelper.append(this.dom, {cls:"roo-el-mask-msg", cn:{tag:'div'}}, true);
+ this._maskMsg = Roo.DomHelper.append(this.dom, {
+ cls: "roo-el-mask-msg",
+ cn: [
+ {
+ tag: 'i',
+ cls: 'fa fa-spinner fa-spin'
+ },
+ {
+ tag: 'div'
+ }
+ ]
+ }, true);
}
var mm = this._maskMsg;
mm.dom.className = msgCls ? "roo-el-mask-msg " + msgCls : "roo-el-mask-msg";
- if (mm.dom.firstChild) { // weird IE issue?
- mm.dom.firstChild.innerHTML = msg;
+ if (mm.dom.lastChild) { // weird IE issue?
+ mm.dom.lastChild.innerHTML = msg;
}
mm.setDisplayed(true);
mm.center(this);
/**
* @private
*/
- fitToParentDelegate : Roo.emptyFn, // keep a reference to the fitToParent delegate
+ fitToParentDelegate : Roo.emptyFn, // keep a reference to the fitToParent delegate
/**
* Sizes this element to its parent element's dimensions performing
Roo.EventManager.removeResizeListener(this.fitToParentDelegate); // always remove previous fitToParent delegate from onWindowResize
this.fitToParentDelegate = Roo.emptyFn; // remove reference to previous delegate
if (monitorResize === true && !this.dom.parentNode) { // check if this Element still exists
- return;
+ return this;
}
var p = Roo.get(targetParent || this.dom.parentNode);
this.setSize(p.getComputedWidth() - p.getFrameWidth('lr'), p.getComputedHeight() - p.getFrameWidth('tb'));
* @class Roo.data.Connection
* @extends Roo.util.Observable
* The class encapsulates a connection to the page's originating domain, allowing requests to be made
- * either to a configured URL, or to a URL specified at request time.<br><br>
- * <p>
+ * either to a configured URL, or to a URL specified at request time.
+ *
* Requests made by this class are asynchronous, and will return immediately. No data from
* the server will be available to the statement immediately following the {@link #request} call.
- * To process returned data, use a callback in the request options object, or an event listener.</p><br>
- * <p>
+ * To process returned data, use a callback in the request options object, or an event listener.
+ *
* Note: If you are doing a file upload, you will not get a normal response object sent back to
* your callback or event handler. Since the upload is handled via in IFRAME, there is no XMLHttpRequest.
* The response object is created using the innerHTML of the IFRAME's document as the responseText
- * property and, if present, the IFRAME's XML document as the responseXML property.</p><br>
+ * property and, if present, the IFRAME's XML document as the responseXML property.
+ *
* This means that a valid XML or HTML document must be returned. If JSON data is required, it is suggested
* that it be placed either inside a <textarea> in an HTML document and retrieved from the responseText
* using a regex, or inside a CDATA section in an XML document and retrieved from the responseXML using
url = url || form.action;
var enctype = form.getAttribute("enctype");
+
+ if (o.formData) {
+ return this.doFormDataUpload(o, url);
+ }
+
if(o.isUpload || (enctype && enctype.toLowerCase() == 'multipart/form-data')){
return this.doFormUpload(o, p, url);
}
var f = Roo.lib.Ajax.serializeForm(form);
p = p ? (p + '&' + f) : f;
}
+
+ if (!o.form && o.formData) {
+ o.formData = o.formData === true ? new FormData() : o.formData;
+ for (var k in o.params) {
+ o.formData.append(k,o.params[k]);
+ }
+
+ return this.doFormDataUpload(o, url);
+ }
+
var hs = o.headers;
if(this.defaultHeaders){
url += (url.indexOf('?') != -1 ? '&' : '?') + p;
p = '';
}
+ Roo.lib.Ajax.useDefaultHeader = typeof(o.headers) == 'undefined' || typeof(o.headers['Content-Type']) == 'undefined';
this.transId = Roo.lib.Ajax.request(method, url, cb, p, o);
+ Roo.lib.Ajax.useDefaultHeader == true;
return this.transId;
}else{
Roo.callback(o.callback, o.scope, [o, null, null]);
form.removeChild(hiddens[i]);
}
}
+ },
+ // this is a 'formdata version???'
+
+
+ doFormDataUpload : function(o, url)
+ {
+ var formData;
+ if (o.form) {
+ var form = Roo.getDom(o.form);
+ form.enctype = form.encoding = 'multipart/form-data';
+ formData = o.formData === true ? new FormData(form) : o.formData;
+ } else {
+ formData = o.formData === true ? new FormData() : o.formData;
+ }
+
+
+ var cb = {
+ success: this.handleResponse,
+ failure: this.handleFailure,
+ scope: this,
+ argument: {options: o},
+ timeout : o.timeout || this.timeout
+ };
+
+ if(typeof o.autoAbort == 'boolean'){ // options gets top priority
+ if(o.autoAbort){
+ this.abort();
+ }
+ }else if(this.autoAbort !== false){
+ this.abort();
+ }
+
+ //Roo.lib.Ajax.defaultPostHeader = null;
+ Roo.lib.Ajax.useDefaultHeader = false;
+ this.transId = Roo.lib.Ajax.request( "POST", url, cb, formData, o);
+ Roo.lib.Ajax.useDefaultHeader = true;
+
+
}
+
});
/*
* Based on:
* Fork - LGPL
* <script type="text/javascript">
*/
-
+/**
+ * @class Roo.util.TaskRunner
+ * Manage background tasks - not sure why this is better that setInterval?
+ * @static
+ *
+ */
Roo.util.TaskRunner = function(interval){
interval = interval || 10;
/**
* Queues a new task.
* @param {Object} task
+ *
+ * Task property : interval = how frequent to run.
+ * Task object should implement
+ * function run()
+ * Task object may implement
+ * function onStop()
*/
this.start = function(task){
tasks.push(task);
startThread();
return task;
};
-
+ /**
+ * Stop new task.
+ * @param {Object} task
+ */
this.stop = function(task){
removeTask(task);
return task;
};
-
+ /**
+ * Stop all Tasks
+ */
this.stopAll = function(){
stopThread();
for(var i = 0, len = tasks.length; i < len; i++){
* @return {Object} The item associated with the passed key.
*/
item : function(key){
+ if (key === 'length') {
+ return null;
+ }
var item = typeof this.map[key] != "undefined" ? this.map[key] : this.items[key];
return typeof item != 'function' || this.allowFunctions ? item : null; // for prototype!
},
* Modified version of Douglas Crockford"s json.js that doesn"t
* mess with the Object prototype
* http://www.json.org/js.html
- * @singleton
+ * @static
*/
Roo.util.JSON = new (function(){
var useHasOwn = {}.hasOwnProperty ? true : false;
/**
* @class Roo.util.Format
* Reusable data formatting functions
- * @singleton
+ * @static
*/
Roo.util.Format = function(){
var trimRe = /^\s+|\s+$/g;
* eventually this should probably emulate php's number_format
* @param {Number/String} value The numeric value to format
* @param {Number} decimals number of decimal places
+ * @param {String} delimiter for thousands (default comma)
* @return {String} The formatted currency string
*/
- number : function(v,decimals)
+ number : function(v, decimals, thousandsDelimiter)
{
// multiply and round.
decimals = typeof(decimals) == 'undefined' ? 2 : decimals;
+ thousandsDelimiter = typeof(thousandsDelimiter) == 'undefined' ? ',' : thousandsDelimiter;
+
var mul = Math.pow(10, decimals);
var zero = String(mul).substring(1);
v = (Math.round((v-0)*mul))/mul;
var ps = v.split('.');
var whole = ps[0];
-
var r = /(\d+)(\d{3})/;
// add comma's
- while (r.test(whole)) {
- whole = whole.replace(r, '$1' + ',' + '$2');
- }
+ if(thousandsDelimiter.length != 0) {
+ whole = whole.replace(/\B(?=(\d{3})+(?!\d))/g, thousandsDelimiter );
+ }
var sub = ps[1] ?
// has decimals..
*/
stripTags : function(v){
return !v ? v : String(v).replace(this.stripTagsRE, "");
+ },
+
+ /**
+ * Size in Mb,Gb etc.
+ * @param {Number} value The number to be formated
+ * @param {number} decimals how many decimal places
+ * @return {String} the formated string
+ */
+ size : function(value, decimals)
+ {
+ var sizes = ['b', 'k', 'M', 'G', 'T'];
+ if (value == 0) {
+ return 0;
+ }
+ var i = parseInt(Math.floor(Math.log(value) / Math.log(1024)));
+ return Roo.util.Format.number(value/ Math.pow(1024, i) ,decimals) + sizes[i];
}
+
+
+
};
}();
Roo.util.Format.defaults = {
/**
* @class Roo.util.CSS
* Utility class for manipulating CSS rules
- * @singleton
+ * @static
+
*/
Roo.util.CSS = function(){
var rules = null;
this.el.removeClass(this.pressClass);
this.fireEvent("mouseup", this);
}
-});/*
+});/**
+ * @class Roo.util.Clipboard
+ * @static
+ *
+ * Clipboard UTILS
+ *
+ **/
+Roo.util.Clipboard = {
+ /**
+ * Writes a string to the clipboard - using the Clipboard API if https, otherwise using text area.
+ * @param {String} text to copy to clipboard
+ */
+ write : function(text) {
+ // navigator clipboard api needs a secure context (https)
+ if (navigator.clipboard && window.isSecureContext) {
+ // navigator clipboard api method'
+ navigator.clipboard.writeText(text);
+ return ;
+ }
+ // text area method
+ var ta = document.createElement("textarea");
+ ta.value = text;
+ // make the textarea out of viewport
+ ta.style.position = "fixed";
+ ta.style.left = "-999999px";
+ ta.style.top = "-999999px";
+ document.body.appendChild(ta);
+ ta.focus();
+ ta.select();
+ document.execCommand('copy');
+ (function() {
+ ta.remove();
+ }).defer(100);
+
+ }
+
+}
+ /*
* Based on:
* Ext JS Library 1.1.1
* Copyright(c) 2006-2007, Ext JS, LLC.
* @class Roo.util.TextMetrics
* Provides precise pixel measurements for blocks of text so that you can determine exactly how high and
* wide, in pixels, a given block of text will be.
- * @singleton
+ * @static
*/
Roo.util.TextMetrics = function(){
var shared;
};
}();
-
+/**
+ * @class Roo.util.TextMetrics.Instance
+ * Instance of TextMetrics Calcuation
+ * @constructor
+ * Create a new TextMetrics Instance
+ * @param {Object} bindto
+ * @param {Boolean} fixedWidth
+ */
-Roo.util.TextMetrics.Instance = function(bindTo, fixedWidth){
+Roo.util.TextMetrics.Instance = function(bindTo, fixedWidth)
+{
var ml = new Roo.Element(document.createElement('div'));
document.body.appendChild(ml.dom);
ml.position('absolute');
var instance = {
/**
* Returns the size of the specified text based on the internal element's style and width properties
- * @memberOf Roo.util.TextMetrics.Instance#
* @param {String} text The text to measure
* @return {Object} An object containing the text's size {width: (width), height: (height)}
*/
/**
* Binds this TextMetrics instance to an element from which to copy existing CSS styles
* that can affect the size of the rendered text
- * @memberOf Roo.util.TextMetrics.Instance#
* @param {String/HTMLElement} el The element, dom node or id
*/
bind : function(el){
/**
* Sets a fixed width on the internal measurement element. If the text will be multiline, you have
* to set a fixed width in order to accurately measure the text height.
- * @memberOf Roo.util.TextMetrics.Instance#
* @param {Number} width The width to set on the element
*/
setFixedWidth : function(width){
/**
* Returns the measured width of the specified text
- * @memberOf Roo.util.TextMetrics.Instance#
* @param {String} text The text to measure
* @return {Number} width The width in pixels
*/
/**
* Returns the measured height of the specified text. For multiline text, be sure to call
* {@link #setFixedWidth} if necessary.
- * @memberOf Roo.util.TextMetrics.Instance#
* @param {String} text The text to measure
* @return {Number} height The height in pixels
*/
var dialog = new Roo.BasicDialog(...);
dialog.restoreState();
</code></pre>
- * @singleton
+ * @static
*/
Roo.state.Manager = function(){
var provider = new Roo.state.Provider();
/**
* @class Roo.ComponentMgr
* Provides a common registry of all components on a page so that they can be easily accessed by component id (see {@link Roo.getCmp}).
- * @singleton
+ * @static
*/
Roo.ComponentMgr = function(){
var all = new Roo.util.MixedCollection();
/**
* @cfg {String} actionMode
* which property holds the element that used for hide() / show() / disable() / enable()
- * default is 'el'
+ * default is 'el' for forms you probably want to set this to fieldEl
*/
actionMode : "el",
* @param {String/HTMLElement/Element} container (optional) The element this component should be rendered into. If it is being applied to existing markup, this should be left off.
*/
render : function(container, position){
- if(!this.rendered && this.fireEvent("beforerender", this) !== false){
- if(!container && this.el){
- this.el = Roo.get(this.el);
- container = this.el.dom.parentNode;
- this.allowDomMove = false;
- }
- this.container = Roo.get(container);
- this.rendered = true;
- if(position !== undefined){
- if(typeof position == 'number'){
- position = this.container.dom.childNodes[position];
- }else{
- position = Roo.getDom(position);
- }
- }
- this.onRender(this.container, position || null);
- if(this.cls){
- this.el.addClass(this.cls);
- delete this.cls;
- }
- if(this.style){
- this.el.applyStyles(this.style);
- delete this.style;
- }
- this.fireEvent("render", this);
- this.afterRender(this.container);
- if(this.hidden){
- this.hide();
- }
- if(this.disabled){
- this.disable();
+
+ if(this.rendered){
+ return this;
+ }
+
+ if(this.fireEvent("beforerender", this) === false){
+ return false;
+ }
+
+ if(!container && this.el){
+ this.el = Roo.get(this.el);
+ container = this.el.dom.parentNode;
+ this.allowDomMove = false;
+ }
+ this.container = Roo.get(container);
+ this.rendered = true;
+ if(position !== undefined){
+ if(typeof position == 'number'){
+ position = this.container.dom.childNodes[position];
+ }else{
+ position = Roo.getDom(position);
}
}
+ this.onRender(this.container, position || null);
+ if(this.cls){
+ this.el.addClass(this.cls);
+ delete this.cls;
+ }
+ if(this.style){
+ this.el.applyStyles(this.style);
+ delete this.style;
+ }
+ this.fireEvent("render", this);
+ this.afterRender(this.container);
+ if(this.hidden){
+ this.hide();
+ }
+ if(this.disabled){
+ this.disable();
+ }
+
return this;
+
},
/** @private */
* @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
+ * container classes should subclass BoxComponent so that they will work consistently when nested within other Roo
* layout containers.
* @constructor
* @param {Roo.Element/String/Object} config The configuration options.
return {x : x, y: y};
}
});/*
- * Original code for Roojs - LGPL
+ * 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">
*/
-
+ (function(){
/**
- * @class Roo.XComponent
- * A delayed Element creator...
- * Or a way to group chunks of interface together.
- * technically this is a wrapper around a tree of Roo elements (which defines a 'module'),
- * used in conjunction with XComponent.build() it will create an instance of each element,
- * then call addxtype() to build the User interface.
- *
- * Mypart.xyx = new Roo.XComponent({
-
- parent : 'Mypart.xyz', // empty == document.element.!!
- order : '001',
- name : 'xxxx'
- region : 'xxxx'
- disabled : function() {}
-
- tree : function() { // return an tree of xtype declared components
- var MODULE = this;
- return
- {
- xtype : 'NestedLayoutPanel',
- // technicall
- }
- ]
- *})
- *
- *
- * It can be used to build a big heiracy, with parent etc.
- * or you can just use this to render a single compoent to a dom element
- * MYPART.render(Roo.Element | String(id) | dom_element )
- *
- *
- * Usage patterns.
- *
- * Classic Roo
- *
- * Roo is designed primarily as a single page application, so the UI build for a standard interface will
- * expect a single 'TOP' level module normally indicated by the 'parent' of the XComponent definition being defined as false.
- *
- * Each sub module is expected to have a parent pointing to the class name of it's parent module.
- *
- * When the top level is false, a 'Roo.BorderLayout' is created and the element is flagged as 'topModule'
- * - if mulitple topModules exist, the last one is defined as the top module.
- *
- * Embeded Roo
- *
- * When the top level or multiple modules are to embedded into a existing HTML page,
- * the parent element can container '#id' of the element where the module will be drawn.
- *
- * Bootstrap Roo
- *
- * Unlike classic Roo, the bootstrap tends not to be used as a single page.
- * it relies more on a include mechanism, where sub modules are included into an outer page.
- * This is normally managed by the builder tools using Roo.apply( options, Included.Sub.Module )
- *
- * Bootstrap Roo Included elements
- *
- * Our builder application needs the ability to preview these sub compoennts. They will normally have parent=false set,
- * hence confusing the component builder as it thinks there are multiple top level elements.
- *
- *
- *
- * @extends Roo.util.Observable
+ * @class Roo.Layer
+ * @extends Roo.Element
+ * An extended {@link Roo.Element} object that supports a shadow and shim, constrain to viewport and
+ * automatic maintaining of shadow/shim positions.
+ * @cfg {Boolean} shim False to disable the iframe shim in browsers which need one (defaults to true)
+ * @cfg {String/Boolean} shadow True to create a shadow element with default class "x-layer-shadow", or
+ * you can pass a string with a CSS class name. False turns off the shadow.
+ * @cfg {Object} dh DomHelper object config to create element with (defaults to {tag: "div", cls: "x-layer"}).
+ * @cfg {Boolean} constrain False to disable constrain to viewport (defaults to true)
+ * @cfg {String} cls CSS class to add to the element
+ * @cfg {Number} zindex Starting z-index (defaults to 11000)
+ * @cfg {Number} shadowOffset Number of pixels to offset the shadow (defaults to 3)
* @constructor
- * @param cfg {Object} configuration of component
- *
+ * @param {Object} config An object with config options.
+ * @param {String/HTMLElement} existingEl (optional) Uses an existing DOM element. If the element is not found it creates it.
*/
-Roo.XComponent = function(cfg) {
- Roo.apply(this, cfg);
- this.addEvents({
- /**
- * @event built
- * Fires when this the componnt is built
- * @param {Roo.XComponent} c the component
- */
- 'built' : true
-
- });
- this.region = this.region || 'center'; // default..
- Roo.XComponent.register(this);
- this.modules = false;
- this.el = false; // where the layout goes..
-
-
-}
-Roo.extend(Roo.XComponent, Roo.util.Observable, {
- /**
- * @property el
- * The created element (with Roo.factory())
- * @type {Roo.Layout}
- */
- el : false,
-
- /**
- * @property el
- * for BC - use el in new code
- * @type {Roo.Layout}
- */
- panel : false,
-
- /**
- * @property layout
- * for BC - use el in new code
- * @type {Roo.Layout}
- */
- layout : false,
-
- /**
- * @cfg {Function|boolean} disabled
- * If this module is disabled by some rule, return true from the funtion
- */
- disabled : false,
-
- /**
- * @cfg {String} parent
- * Name of parent element which it get xtype added to..
- */
- parent: false,
-
- /**
- * @cfg {String} order
- * Used to set the order in which elements are created (usefull for multiple tabs)
- */
-
- order : false,
- /**
- * @cfg {String} name
- * String to display while loading.
- */
- name : false,
- /**
- * @cfg {String} region
- * Region to render component to (defaults to center)
- */
- region : 'center',
-
- /**
- * @cfg {Array} items
- * A single item array - the first element is the root of the tree..
- * It's done this way to stay compatible with the Xtype system...
- */
- items : false,
-
- /**
- * @property _tree
- * The method that retuns the tree of parts that make up this compoennt
- * @type {function}
- */
- _tree : false,
-
- /**
- * render
- * render element to dom or tree
- * @param {Roo.Element|String|DomElement} optional render to if parent is not set.
- */
-
- render : function(el)
- {
-
- el = el || false;
- var hp = this.parent ? 1 : 0;
- Roo.debug && Roo.log(this);
-
- if (!el && typeof(this.parent) == 'string' && this.parent.substring(0,1) == '#') {
- // if parent is a '#.....' string, then let's use that..
- var ename = this.parent.substr(1);
- this.parent = false;
- Roo.debug && Roo.log(ename);
- switch (ename) {
- case 'bootstrap-body' :
- if (typeof(Roo.bootstrap.Body) != 'undefined') {
- this.parent = { el : new Roo.bootstrap.Body() };
- Roo.debug && Roo.log("setting el to doc body");
-
- } else {
- throw "Container is bootstrap body, but Roo.bootstrap.Body is not defined";
- }
- break;
- case 'bootstrap':
- this.parent = { el : true};
- // fall through
- default:
- el = Roo.get(ename);
- break;
- }
-
-
- if (!el && !this.parent) {
- Roo.debug && Roo.log("Warning - element can not be found :#" + ename );
- return;
- }
- }
- Roo.debug && Roo.log("EL:");
- Roo.debug && Roo.log(el);
- Roo.debug && Roo.log("this.parent.el:");
- Roo.debug && Roo.log(this.parent.el);
-
- var tree = this._tree ? this._tree() : this.tree();
- // altertive root elements ??? - we need a better way to indicate these.
- var is_alt = (typeof(Roo.bootstrap) != 'undefined' && tree.xns == Roo.bootstrap) ||
- (typeof(Roo.mailer) != 'undefined' && tree.xns == Roo.mailer) ;
-
- if (!this.parent && is_alt) {
- //el = Roo.get(document.body);
- this.parent = { el : true };
- }
-
-
-
- if (!this.parent) {
-
- Roo.debug && Roo.log("no parent - creating one");
-
- el = el ? Roo.get(el) : false;
-
- // it's a top level one..
- this.parent = {
- el : new Roo.BorderLayout(el || document.body, {
-
- center: {
- titlebar: false,
- autoScroll:false,
- closeOnTab: true,
- tabPosition: 'top',
- //resizeTabs: true,
- alwaysShowTabs: el && hp? false : true,
- hideTabs: el || !hp ? true : false,
- minTabWidth: 140
- }
- })
- }
- }
-
- if (!this.parent.el) {
- // probably an old style ctor, which has been disabled.
- return;
+Roo.Layer = function(config, existingEl){
+ config = config || {};
+ var dh = Roo.DomHelper;
+ var cp = config.parentEl, pel = cp ? Roo.getDom(cp) : document.body;
+ if(existingEl){
+ this.dom = Roo.getDom(existingEl);
+ }
+ if(!this.dom){
+ var o = config.dh || {tag: "div", cls: "x-layer"};
+ this.dom = dh.append(pel, o);
+ }
+ if(config.cls){
+ this.addClass(config.cls);
+ }
+ this.constrain = config.constrain !== false;
+ this.visibilityMode = Roo.Element.VISIBILITY;
+ if(config.id){
+ this.id = this.dom.id = config.id;
+ }else{
+ this.id = Roo.id(this.dom);
+ }
+ this.zindex = config.zindex || this.getZIndex();
+ this.position("absolute", this.zindex);
+ if(config.shadow){
+ this.shadowOffset = config.shadowOffset || 4;
+ this.shadow = new Roo.Shadow({
+ offset : this.shadowOffset,
+ mode : config.shadow
+ });
+ }else{
+ this.shadowOffset = 0;
+ }
+ this.useShim = config.shim !== false && Roo.useShims;
+ this.useDisplay = config.useDisplay;
+ this.hide();
+};
+
+var supr = Roo.Element.prototype;
+
+// shims are shared among layer to keep from having 100 iframes
+var shims = [];
+
+Roo.extend(Roo.Layer, Roo.Element, {
+
+ getZIndex : function(){
+ return this.zindex || parseInt(this.getStyle("z-index"), 10) || 11000;
+ },
+ getShim : function(){
+ if(!this.useShim){
+ return null;
}
- // The 'tree' method is '_tree now'
-
- tree.region = tree.region || this.region;
-
- if (this.parent.el === true) {
- // bootstrap... - body..
- this.parent.el = Roo.factory(tree);
+ if(this.shim){
+ return this.shim;
}
-
- this.el = this.parent.el.addxtype(tree);
- this.fireEvent('built', this);
-
- this.panel = this.el;
- this.layout = this.panel.layout;
- this.parentLayout = this.parent.layout || false;
-
- }
-
-});
+ var shim = shims.shift();
+ if(!shim){
+ shim = this.createShim();
+ shim.enableDisplayMode('block');
+ shim.dom.style.display = 'none';
+ shim.dom.style.visibility = 'visible';
+ }
+ var pn = this.dom.parentNode;
+ if(shim.dom.parentNode != pn){
+ pn.insertBefore(shim.dom, this.dom);
+ }
+ shim.setStyle('z-index', this.getZIndex()-2);
+ this.shim = shim;
+ return shim;
+ },
-Roo.apply(Roo.XComponent, {
- /**
- * @property hideProgress
- * true to disable the building progress bar.. usefull on single page renders.
- * @type Boolean
- */
- hideProgress : false,
- /**
- * @property buildCompleted
- * True when the builder has completed building the interface.
- * @type Boolean
- */
- buildCompleted : false,
-
- /**
- * @property topModule
- * the upper most module - uses document.element as it's constructor.
- * @type Object
- */
-
- topModule : false,
-
- /**
- * @property modules
- * array of modules to be created by registration system.
- * @type {Array} of Roo.XComponent
- */
-
- modules : [],
- /**
- * @property elmodules
- * array of modules to be created by which use #ID
- * @type {Array} of Roo.XComponent
- */
-
- elmodules : [],
+ hideShim : function(){
+ if(this.shim){
+ this.shim.setDisplayed(false);
+ shims.push(this.shim);
+ delete this.shim;
+ }
+ },
- /**
- * @property build_from_html
- * Build elements from html - used by bootstrap HTML stuff
- * - this is cleared after build is completed
- * @type {boolean} true (default false)
- */
-
- build_from_html : false,
+ disableShadow : function(){
+ if(this.shadow){
+ this.shadowDisabled = true;
+ this.shadow.hide();
+ this.lastShadowOffset = this.shadowOffset;
+ this.shadowOffset = 0;
+ }
+ },
- /**
- * Register components to be built later.
- *
- * This solves the following issues
- * - Building is not done on page load, but after an authentication process has occured.
- * - Interface elements are registered on page load
- * - Parent Interface elements may not be loaded before child, so this handles that..
- *
- *
- * example:
- *
- * MyApp.register({
- order : '000001',
- module : 'Pman.Tab.projectMgr',
- region : 'center',
- parent : 'Pman.layout',
- disabled : false, // or use a function..
- })
-
- * * @param {Object} details about module
- */
- register : function(obj) {
-
- Roo.XComponent.event.fireEvent('register', obj);
- switch(typeof(obj.disabled) ) {
-
- case 'undefined':
- break;
-
- case 'function':
- if ( obj.disabled() ) {
- return;
+ enableShadow : function(show){
+ if(this.shadow){
+ this.shadowDisabled = false;
+ this.shadowOffset = this.lastShadowOffset;
+ delete this.lastShadowOffset;
+ if(show){
+ this.sync(true);
+ }
+ }
+ },
+
+ // private
+ // this code can execute repeatedly in milliseconds (i.e. during a drag) so
+ // code size was sacrificed for effeciency (e.g. no getBox/setBox, no XY calls)
+ sync : function(doShow){
+ var sw = this.shadow;
+ if(!this.updating && this.isVisible() && (sw || this.useShim)){
+ var sh = this.getShim();
+
+ var w = this.getWidth(),
+ h = this.getHeight();
+
+ var l = this.getLeft(true),
+ t = this.getTop(true);
+
+ if(sw && !this.shadowDisabled){
+ if(doShow && !sw.isVisible()){
+ sw.show(this);
+ }else{
+ sw.realign(l, t, w, h);
}
- break;
-
- default:
- if (obj.disabled) {
- return;
+ if(sh){
+ if(doShow){
+ sh.show();
+ }
+ // fit the shim behind the shadow, so it is shimmed too
+ var a = sw.adjusts, s = sh.dom.style;
+ s.left = (Math.min(l, l+a.l))+"px";
+ s.top = (Math.min(t, t+a.t))+"px";
+ s.width = (w+a.w)+"px";
+ s.height = (h+a.h)+"px";
}
- break;
+ }else if(sh){
+ if(doShow){
+ sh.show();
+ }
+ sh.setSize(w, h);
+ sh.setLeftTop(l, t);
+ }
+
}
-
- this.modules.push(obj);
-
},
- /**
- * convert a string to an object..
- * eg. 'AAA.BBB' -> finds AAA.BBB
- */
-
- toObject : function(str)
- {
- if (!str || typeof(str) == 'object') {
- return str;
+ // private
+ destroy : function(){
+ this.hideShim();
+ if(this.shadow){
+ this.shadow.hide();
}
- if (str.substring(0,1) == '#') {
- return str;
+ this.removeAllListeners();
+ var pn = this.dom.parentNode;
+ if(pn){
+ pn.removeChild(this.dom);
}
+ Roo.Element.uncache(this.id);
+ },
- var ar = str.split('.');
- var rt, o;
- rt = ar.shift();
- /** eval:var:o */
- try {
- eval('if (typeof ' + rt + ' == "undefined"){ o = false;} o = ' + rt + ';');
- } catch (e) {
- throw "Module not found : " + str;
- }
-
- if (o === false) {
- throw "Module not found : " + str;
+ remove : function(){
+ this.destroy();
+ },
+
+ // private
+ beginUpdate : function(){
+ this.updating = true;
+ },
+
+ // private
+ endUpdate : function(){
+ this.updating = false;
+ this.sync(true);
+ },
+
+ // private
+ hideUnders : function(negOffset){
+ if(this.shadow){
+ this.shadow.hide();
}
- Roo.each(ar, function(e) {
- if (typeof(o[e]) == 'undefined') {
- throw "Module not found : " + str;
- }
- o = o[e];
- });
-
- return o;
-
+ this.hideShim();
},
-
-
- /**
- * move modules into their correct place in the tree..
- *
- */
- preBuild : function ()
- {
- var _t = this;
- Roo.each(this.modules , function (obj)
- {
- Roo.XComponent.event.fireEvent('beforebuild', obj);
-
- var opar = obj.parent;
- try {
- obj.parent = this.toObject(opar);
- } catch(e) {
- Roo.debug && Roo.log("parent:toObject failed: " + e.toString());
- return;
- }
-
- if (!obj.parent) {
- Roo.debug && Roo.log("GOT top level module");
- Roo.debug && Roo.log(obj);
- obj.modules = new Roo.util.MixedCollection(false,
- function(o) { return o.order + '' }
- );
- this.topModule = obj;
- return;
+
+ // private
+ constrainXY : function(){
+ if(this.constrain){
+ var vw = Roo.lib.Dom.getViewWidth(),
+ vh = Roo.lib.Dom.getViewHeight();
+ var s = Roo.get(document).getScroll();
+
+ var xy = this.getXY();
+ var x = xy[0], y = xy[1];
+ var w = this.dom.offsetWidth+this.shadowOffset, h = this.dom.offsetHeight+this.shadowOffset;
+ // only move it if it needs it
+ var moved = false;
+ // first validate right/bottom
+ if((x + w) > vw+s.left){
+ x = vw - w - this.shadowOffset;
+ moved = true;
}
- // parent is a string (usually a dom element name..)
- if (typeof(obj.parent) == 'string') {
- this.elmodules.push(obj);
- return;
+ if((y + h) > vh+s.top){
+ y = vh - h - this.shadowOffset;
+ moved = true;
}
- if (obj.parent.constructor != Roo.XComponent) {
- Roo.debug && Roo.log("Warning : Object Parent is not instance of XComponent:" + obj.name)
+ // then make sure top/left isn't negative
+ if(x < s.left){
+ x = s.left;
+ moved = true;
}
- if (!obj.parent.modules) {
- obj.parent.modules = new Roo.util.MixedCollection(false,
- function(o) { return o.order + '' }
- );
+ if(y < s.top){
+ y = s.top;
+ moved = true;
}
- if (obj.parent.disabled) {
- obj.disabled = true;
+ if(moved){
+ if(this.avoidY){
+ var ay = this.avoidY;
+ if(y <= ay && (y+h) >= ay){
+ y = ay-h-5;
+ }
+ }
+ xy = [x, y];
+ this.storeXY(xy);
+ supr.setXY.call(this, xy);
+ this.sync();
}
- obj.parent.modules.add(obj);
- }, this);
- },
-
- /**
- * make a list of modules to build.
- * @return {Array} list of modules.
- */
-
- buildOrder : function()
- {
- var _this = this;
- var cmp = function(a,b) {
- return String(a).toUpperCase() > String(b).toUpperCase() ? 1 : -1;
- };
- if ((!this.topModule || !this.topModule.modules) && !this.elmodules.length) {
- throw "No top level modules to build";
}
-
- // make a flat list in order of modules to build.
- var mods = this.topModule ? [ this.topModule ] : [];
-
-
- // elmodules (is a list of DOM based modules )
- Roo.each(this.elmodules, function(e) {
- mods.push(e);
- if (!this.topModule &&
- typeof(e.parent) == 'string' &&
- e.parent.substring(0,1) == '#' &&
- Roo.get(e.parent.substr(1))
- ) {
-
- _this.topModule = e;
- }
-
- });
+ },
-
- // add modules to their parents..
- var addMod = function(m) {
- Roo.debug && Roo.log("build Order: add: " + m.name);
-
- mods.push(m);
- if (m.modules && !m.disabled) {
- Roo.debug && Roo.log("build Order: " + m.modules.length + " child modules");
- m.modules.keySort('ASC', cmp );
- Roo.debug && Roo.log("build Order: " + m.modules.length + " child modules (after sort)");
-
- m.modules.each(addMod);
- } else {
- Roo.debug && Roo.log("build Order: no child modules");
- }
- // not sure if this is used any more..
- if (m.finalize) {
- m.finalize.name = m.name + " (clean up) ";
- mods.push(m.finalize);
- }
-
- }
- if (this.topModule && this.topModule.modules) {
- this.topModule.modules.keySort('ASC', cmp );
- this.topModule.modules.each(addMod);
- }
- return mods;
+ isVisible : function(){
+ return this.visible;
},
-
- /**
- * Build the registered modules.
- * @param {Object} parent element.
- * @param {Function} optional method to call after module has been added.
- *
- */
-
- build : function(opts)
- {
-
- if (typeof(opts) != 'undefined') {
- Roo.apply(this,opts);
+
+ // private
+ showAction : function(){
+ this.visible = true; // track visibility to prevent getStyle calls
+ if(this.useDisplay === true){
+ this.setDisplayed("");
+ }else if(this.lastXY){
+ supr.setXY.call(this, this.lastXY);
+ }else if(this.lastLT){
+ supr.setLeftTop.call(this, this.lastLT[0], this.lastLT[1]);
}
-
- this.preBuild();
- var mods = this.buildOrder();
-
- //this.allmods = mods;
- //Roo.debug && Roo.log(mods);
- //return;
- if (!mods.length) { // should not happen
- throw "NO modules!!!";
+ },
+
+ // private
+ hideAction : function(){
+ this.visible = false;
+ if(this.useDisplay === true){
+ this.setDisplayed(false);
+ }else{
+ this.setLeftTop(-10000,-10000);
}
-
-
- var msg = "Building Interface...";
- // flash it up as modal - so we store the mask!?
- if (!this.hideProgress && Roo.MessageBox) {
- Roo.MessageBox.show({ title: 'loading' });
- Roo.MessageBox.show({
- title: "Please wait...",
- msg: msg,
- width:450,
- progress:true,
- closable:false,
- modal: false
-
- });
+ },
+
+ // overridden Element method
+ setVisible : function(v, a, d, c, e){
+ if(v){
+ this.showAction();
}
- var total = mods.length;
-
- var _this = this;
- var progressRun = function() {
- if (!mods.length) {
- Roo.debug && Roo.log('hide?');
- if (!this.hideProgress && Roo.MessageBox) {
- Roo.MessageBox.hide();
+ if(a && v){
+ var cb = function(){
+ this.sync(true);
+ if(c){
+ c();
}
- Roo.XComponent.build_from_html = false; // reset, so dialogs will be build from javascript
-
- Roo.XComponent.event.fireEvent('buildcomplete', _this.topModule);
-
- // THE END...
- return false;
+ }.createDelegate(this);
+ supr.setVisible.call(this, true, true, d, cb, e);
+ }else{
+ if(!v){
+ this.hideUnders(true);
}
-
- var m = mods.shift();
-
-
- Roo.debug && Roo.log(m);
- // not sure if this is supported any more.. - modules that are are just function
- if (typeof(m) == 'function') {
- m.call(this);
- return progressRun.defer(10, _this);
- }
-
-
- msg = "Building Interface " + (total - mods.length) +
- " of " + total +
- (m.name ? (' - ' + m.name) : '');
- Roo.debug && Roo.log(msg);
- if (!this.hideProgress && Roo.MessageBox) {
- Roo.MessageBox.updateProgress( (total - mods.length)/total, msg );
+ var cb = c;
+ if(a){
+ cb = function(){
+ this.hideAction();
+ if(c){
+ c();
+ }
+ }.createDelegate(this);
}
-
-
- // is the module disabled?
- var disabled = (typeof(m.disabled) == 'function') ?
- m.disabled.call(m.module.disabled) : m.disabled;
-
-
- if (disabled) {
- return progressRun(); // we do not update the display!
+ supr.setVisible.call(this, v, a, d, cb, e);
+ if(v){
+ this.sync(true);
+ }else if(!a){
+ this.hideAction();
}
-
- // now build
-
-
-
- m.render();
- // it's 10 on top level, and 1 on others??? why...
- return progressRun.defer(10, _this);
-
}
- progressRun.defer(1, _this);
-
-
-
},
-
-
- /**
- * Event Object.
- *
- *
- */
- event: false,
- /**
- * wrapper for event.on - aliased later..
- * Typically use to register a event handler for register:
- *
- * eg. Roo.XComponent.on('register', function(comp) { comp.disable = true } );
- *
- */
- on : false
-
-
-
-});
-
-Roo.XComponent.event = new Roo.util.Observable({
- events : {
- /**
- * @event register
- * Fires when an Component is registered,
- * set the disable property on the Component to stop registration.
- * @param {Roo.XComponent} c the component being registerd.
- *
- */
- 'register' : true,
- /**
- * @event beforebuild
- * Fires before each Component is built
- * can be used to apply permissions.
- * @param {Roo.XComponent} c the component being registerd.
- *
- */
- 'beforebuild' : true,
- /**
- * @event buildcomplete
- * Fires on the top level element when all elements have been built
- * @param {Roo.XComponent} the top level component.
- */
- 'buildcomplete' : true
-
- }
-});
-Roo.XComponent.on = Roo.XComponent.event.on.createDelegate(Roo.XComponent.event);
- /*
- * 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">
- */
+ storeXY : function(xy){
+ delete this.lastLT;
+ this.lastXY = xy;
+ },
+ storeLeftTop : function(left, top){
+ delete this.lastXY;
+ this.lastLT = [left, top];
+ },
+ // private
+ beforeFx : function(){
+ this.beforeAction();
+ return Roo.Layer.superclass.beforeFx.apply(this, arguments);
+ },
-/*
- * These classes are derivatives of the similarly named classes in the YUI Library.
- * The original license:
- * Copyright (c) 2006, Yahoo! Inc. All rights reserved.
- * Code licensed under the BSD License:
- * http://developer.yahoo.net/yui/license.txt
- */
+ // private
+ afterFx : function(){
+ Roo.Layer.superclass.afterFx.apply(this, arguments);
+ this.sync(this.isVisible());
+ },
-(function() {
+ // private
+ beforeAction : function(){
+ if(!this.updating && this.shadow){
+ this.shadow.hide();
+ }
+ },
-var Event=Roo.EventManager;
-var Dom=Roo.lib.Dom;
+ // overridden Element method
+ setLeft : function(left){
+ this.storeLeftTop(left, this.getTop(true));
+ supr.setLeft.apply(this, arguments);
+ this.sync();
+ },
-/**
- * @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.
- * Up to three html elements can be associated with a DragDrop instance:
- * <ul>
- * <li>linked element: the element that is passed into the constructor.
- * This is the element which defines the boundaries for interaction with
- * other DragDrop objects.</li>
- * <li>handle element(s): The drag operation only occurs if the element that
- * was clicked matches a handle element. By default this is the linked
- * element, but there are times that you will want only a portion of the
- * linked element to initiate the drag operation, and the setHandleElId()
- * method provides a way to define this.</li>
- * <li>drag element: this represents the element that would be moved along
- * with the cursor during a drag operation. By default, this is the linked
- * element itself as in {@link Roo.dd.DD}. setDragElId() lets you define
- * a separate element that would be moved, as in {@link Roo.dd.DDProxy}.
- * </li>
- * </ul>
- * This class should not be instantiated until the onload event to ensure that
- * the associated elements are available.
- * The following would define a DragDrop obj that would interact with any
- * other DragDrop obj in the "group1" group:
- * <pre>
- * dd = new Roo.dd.DragDrop("div1", "group1");
- * </pre>
- * Since none of the event handlers have been implemented, nothing would
- * actually happen if you were to run the code above. Normally you would
- * override this class or one of the default implementations, but you can
- * also override the methods you want on an instance of the class...
- * <pre>
- * dd.onDragDrop = function(e, id) {
- * alert("dd was dropped on " + id);
- * }
- * </pre>
- * @constructor
- * @param {String} id of the element that is linked to this instance
- * @param {String} sGroup the group of related DragDrop objects
- * @param {object} config an object containing configurable attributes
- * Valid properties for DragDrop:
- * padding, isTarget, maintainOffset, primaryButtonOnly
- */
-Roo.dd.DragDrop = function(id, sGroup, config) {
- if (id) {
- this.init(id, sGroup, config);
- }
-
-};
+ setTop : function(top){
+ this.storeLeftTop(this.getLeft(true), top);
+ supr.setTop.apply(this, arguments);
+ this.sync();
+ },
-Roo.extend(Roo.dd.DragDrop, Roo.util.Observable , {
+ setLeftTop : function(left, top){
+ this.storeLeftTop(left, top);
+ supr.setLeftTop.apply(this, arguments);
+ this.sync();
+ },
- /**
- * The id of the element associated with this object. This is what we
- * refer to as the "linked element" because the size and position of
- * this element is used to determine when the drag and drop objects have
- * interacted.
- * @property id
- * @type String
- */
- id: null,
+ setXY : function(xy, a, d, c, e){
+ this.fixDisplay();
+ this.beforeAction();
+ this.storeXY(xy);
+ var cb = this.createCB(c);
+ supr.setXY.call(this, xy, a, d, cb, e);
+ if(!a){
+ cb();
+ }
+ },
- /**
- * Configuration attributes passed into the constructor
- * @property config
- * @type object
- */
- config: null,
+ // private
+ createCB : function(c){
+ var el = this;
+ return function(){
+ el.constrainXY();
+ el.sync(true);
+ if(c){
+ c();
+ }
+ };
+ },
- /**
- * The id of the element that will be dragged. By default this is same
- * as the linked element , but could be changed to another element. Ex:
- * Roo.dd.DDProxy
- * @property dragElId
- * @type String
- * @private
- */
- dragElId: null,
+ // overridden Element method
+ setX : function(x, a, d, c, e){
+ this.setXY([x, this.getY()], a, d, c, e);
+ },
- /**
- * the id of the element that initiates the drag operation. By default
- * this is the linked element, but could be changed to be a child of this
- * element. This lets us do things like only starting the drag when the
- * header element within the linked html element is clicked.
- * @property handleElId
- * @type String
- * @private
- */
- handleElId: null,
+ // overridden Element method
+ setY : function(y, a, d, c, e){
+ this.setXY([this.getX(), y], a, d, c, e);
+ },
- /**
- * An associative array of HTML tags that will be ignored if clicked.
- * @property invalidHandleTypes
- * @type {string: string}
- */
- invalidHandleTypes: null,
+ // overridden Element method
+ setSize : function(w, h, a, d, c, e){
+ this.beforeAction();
+ var cb = this.createCB(c);
+ supr.setSize.call(this, w, h, a, d, cb, e);
+ if(!a){
+ cb();
+ }
+ },
- /**
- * An associative array of ids for elements that will be ignored if clicked
- * @property invalidHandleIds
- * @type {string: string}
- */
- invalidHandleIds: null,
+ // overridden Element method
+ setWidth : function(w, a, d, c, e){
+ this.beforeAction();
+ var cb = this.createCB(c);
+ supr.setWidth.call(this, w, a, d, cb, e);
+ if(!a){
+ cb();
+ }
+ },
- /**
- * An indexted array of css class names for elements that will be ignored
- * if clicked.
- * @property invalidHandleClasses
- * @type string[]
- */
- invalidHandleClasses: null,
+ // overridden Element method
+ setHeight : function(h, a, d, c, e){
+ this.beforeAction();
+ var cb = this.createCB(c);
+ supr.setHeight.call(this, h, a, d, cb, e);
+ if(!a){
+ cb();
+ }
+ },
+ // overridden Element method
+ setBounds : function(x, y, w, h, a, d, c, e){
+ this.beforeAction();
+ var cb = this.createCB(c);
+ if(!a){
+ this.storeXY([x, y]);
+ supr.setXY.call(this, [x, y]);
+ supr.setSize.call(this, w, h, a, d, cb, e);
+ cb();
+ }else{
+ supr.setBounds.call(this, x, y, w, h, a, d, cb, e);
+ }
+ return this;
+ },
+
/**
- * The linked element's absolute X position at the time the drag was
- * started
- * @property startPageX
- * @type int
- * @private
+ * Sets the z-index of this layer and adjusts any shadow and shim z-indexes. The layer z-index is automatically
+ * incremented by two more than the value passed in so that it always shows above any shadow or shim (the shadow
+ * element, if any, will be assigned z-index + 1, and the shim element, if any, will be assigned the unmodified z-index).
+ * @param {Number} zindex The new z-index to set
+ * @return {this} The Layer
*/
- startPageX: 0,
+ setZIndex : function(zindex){
+ this.zindex = zindex;
+ this.setStyle("z-index", zindex + 2);
+ if(this.shadow){
+ this.shadow.setZIndex(zindex + 1);
+ }
+ if(this.shim){
+ this.shim.setStyle("z-index", zindex);
+ }
+ }
+});
+})();/*
+ * Original code for Roojs - LGPL
+ * <script type="text/javascript">
+ */
+
+/**
+ * @class Roo.XComponent
+ * A delayed Element creator...
+ * Or a way to group chunks of interface together.
+ * technically this is a wrapper around a tree of Roo elements (which defines a 'module'),
+ * used in conjunction with XComponent.build() it will create an instance of each element,
+ * then call addxtype() to build the User interface.
+ *
+ * Mypart.xyx = new Roo.XComponent({
+ parent : 'Mypart.xyz', // empty == document.element.!!
+ order : '001',
+ name : 'xxxx'
+ region : 'xxxx'
+ disabled : function() {}
+
+ tree : function() { // return an tree of xtype declared components
+ var MODULE = this;
+ return
+ {
+ xtype : 'NestedLayoutPanel',
+ // technicall
+ }
+ ]
+ *})
+ *
+ *
+ * It can be used to build a big heiracy, with parent etc.
+ * or you can just use this to render a single compoent to a dom element
+ * MYPART.render(Roo.Element | String(id) | dom_element )
+ *
+ *
+ * Usage patterns.
+ *
+ * Classic Roo
+ *
+ * Roo is designed primarily as a single page application, so the UI build for a standard interface will
+ * expect a single 'TOP' level module normally indicated by the 'parent' of the XComponent definition being defined as false.
+ *
+ * Each sub module is expected to have a parent pointing to the class name of it's parent module.
+ *
+ * When the top level is false, a 'Roo.BorderLayout' is created and the element is flagged as 'topModule'
+ * - if mulitple topModules exist, the last one is defined as the top module.
+ *
+ * Embeded Roo
+ *
+ * When the top level or multiple modules are to embedded into a existing HTML page,
+ * the parent element can container '#id' of the element where the module will be drawn.
+ *
+ * Bootstrap Roo
+ *
+ * Unlike classic Roo, the bootstrap tends not to be used as a single page.
+ * it relies more on a include mechanism, where sub modules are included into an outer page.
+ * This is normally managed by the builder tools using Roo.apply( options, Included.Sub.Module )
+ *
+ * Bootstrap Roo Included elements
+ *
+ * Our builder application needs the ability to preview these sub compoennts. They will normally have parent=false set,
+ * hence confusing the component builder as it thinks there are multiple top level elements.
+ *
+ * String Over-ride & Translations
+ *
+ * Our builder application writes all the strings as _strings and _named_strings. This is to enable the translation of elements,
+ * and also the 'overlaying of string values - needed when different versions of the same application with different text content
+ * are needed. @see Roo.XComponent.overlayString
+ *
+ *
+ *
+ * @extends Roo.util.Observable
+ * @constructor
+ * @param cfg {Object} configuration of component
+ *
+ */
+Roo.XComponent = function(cfg) {
+ Roo.apply(this, cfg);
+ this.addEvents({
+ /**
+ * @event built
+ * Fires when this the componnt is built
+ * @param {Roo.XComponent} c the component
+ */
+ 'built' : true
+
+ });
+ this.region = this.region || 'center'; // default..
+ Roo.XComponent.register(this);
+ this.modules = false;
+ this.el = false; // where the layout goes..
+
+
+}
+Roo.extend(Roo.XComponent, Roo.util.Observable, {
/**
- * The linked element's absolute X position at the time the drag was
- * started
- * @property startPageY
- * @type int
- * @private
+ * @property el
+ * The created element (with Roo.factory())
+ * @type {Roo.Layout}
*/
- startPageY: 0,
-
+ el : false,
+
/**
- * The group defines a logical collection of DragDrop objects that are
- * related. Instances only get events when interacting with other
- * DragDrop object in the same group. This lets us define multiple
- * groups using a single DragDrop subclass if we want.
- * @property groups
- * @type {string: string}
+ * @property el
+ * for BC - use el in new code
+ * @type {Roo.Layout}
*/
- groups: null,
-
+ panel : false,
+
/**
- * Individual drag/drop instances can be locked. This will prevent
- * onmousedown start drag.
- * @property locked
- * @type boolean
- * @private
+ * @property layout
+ * for BC - use el in new code
+ * @type {Roo.Layout}
*/
- locked: false,
-
- /**
- * Lock this instance
- * @method lock
+ layout : false,
+
+ /**
+ * @cfg {Function|boolean} disabled
+ * If this module is disabled by some rule, return true from the funtion
*/
- lock: function() { this.locked = true; },
-
+ disabled : false,
+
/**
- * Unlock this instace
- * @method unlock
+ * @cfg {String} parent
+ * Name of parent element which it get xtype added to..
*/
- unlock: function() { this.locked = false; },
-
+ parent: false,
+
/**
- * By default, all insances can be a drop target. This can be disabled by
- * setting isTarget to false.
- * @method isTarget
- * @type boolean
+ * @cfg {String} order
+ * Used to set the order in which elements are created (usefull for multiple tabs)
*/
- isTarget: true,
-
+
+ order : false,
/**
- * The padding configured for this drag and drop object for calculating
- * the drop zone intersection with this object.
- * @method padding
- * @type int[]
+ * @cfg {String} name
+ * String to display while loading.
*/
- padding: null,
-
+ name : false,
/**
- * Cached reference to the linked element
- * @property _domRef
- * @private
+ * @cfg {String} region
+ * Region to render component to (defaults to center)
*/
- _domRef: null,
-
+ region : 'center',
+
/**
- * Internal typeof flag
- * @property __ygDragDrop
- * @private
+ * @cfg {Array} items
+ * A single item array - the first element is the root of the tree..
+ * It's done this way to stay compatible with the Xtype system...
*/
- __ygDragDrop: true,
-
+ items : false,
+
/**
- * Set to true when horizontal contraints are applied
- * @property constrainX
- * @type boolean
- * @private
+ * @property _tree
+ * The method that retuns the tree of parts that make up this compoennt
+ * @type {function}
*/
- constrainX: false,
-
- /**
- * Set to true when vertical contraints are applied
- * @property constrainY
- * @type boolean
- * @private
- */
- constrainY: false,
-
- /**
- * The left constraint
- * @property minX
- * @type int
- * @private
- */
- minX: 0,
-
- /**
- * The right constraint
- * @property maxX
- * @type int
- * @private
- */
- maxX: 0,
-
- /**
- * The up constraint
- * @property minY
- * @type int
- * @type int
- * @private
- */
- minY: 0,
-
- /**
- * The down constraint
- * @property maxY
- * @type int
- * @private
- */
- maxY: 0,
-
- /**
- * Maintain offsets when we resetconstraints. Set to true when you want
- * the position of the element relative to its parent to stay the same
- * when the page changes
- *
- * @property maintainOffset
- * @type boolean
- */
- maintainOffset: false,
-
- /**
- * Array of pixel locations the element will snap to if we specified a
- * horizontal graduation/interval. This array is generated automatically
- * when you define a tick interval.
- * @property xTicks
- * @type int[]
- */
- xTicks: null,
-
- /**
- * Array of pixel locations the element will snap to if we specified a
- * vertical graduation/interval. This array is generated automatically
- * when you define a tick interval.
- * @property yTicks
- * @type int[]
- */
- yTicks: null,
-
- /**
- * By default the drag and drop instance will only respond to the primary
- * button click (left button for a right-handed mouse). Set to true to
- * allow drag and drop to start with any mouse click that is propogated
- * by the browser
- * @property primaryButtonOnly
- * @type boolean
- */
- primaryButtonOnly: true,
-
- /**
- * The availabe property is false until the linked dom element is accessible.
- * @property available
- * @type boolean
- */
- available: false,
-
- /**
- * By default, drags can only be initiated if the mousedown occurs in the
- * region the linked element is. This is done in part to work around a
- * bug in some browsers that mis-report the mousedown if the previous
- * mouseup happened outside of the window. This property is set to true
- * if outer handles are defined.
- *
- * @property hasOuterHandles
- * @type boolean
- * @default false
- */
- hasOuterHandles: false,
-
- /**
- * Code that executes immediately before the startDrag event
- * @method b4StartDrag
- * @private
- */
- b4StartDrag: function(x, y) { },
-
- /**
- * Abstract method called after a drag/drop object is clicked
- * and the drag or mousedown time thresholds have beeen met.
- * @method startDrag
- * @param {int} X click location
- * @param {int} Y click location
- */
- startDrag: function(x, y) { /* override this */ },
-
- /**
- * Code that executes immediately before the onDrag event
- * @method b4Drag
- * @private
- */
- b4Drag: function(e) { },
-
- /**
- * Abstract method called during the onMouseMove event while dragging an
- * object.
- * @method onDrag
- * @param {Event} e the mousemove event
- */
- onDrag: function(e) { /* override this */ },
-
- /**
- * Abstract method called when this element fist begins hovering over
- * another DragDrop obj
- * @method onDragEnter
- * @param {Event} e the mousemove event
- * @param {String|DragDrop[]} id In POINT mode, the element
- * id this is hovering over. In INTERSECT mode, an array of one or more
- * dragdrop items being hovered over.
- */
- onDragEnter: function(e, id) { /* override this */ },
-
- /**
- * Code that executes immediately before the onDragOver event
- * @method b4DragOver
- * @private
- */
- b4DragOver: function(e) { },
-
- /**
- * Abstract method called when this element is hovering over another
- * DragDrop obj
- * @method onDragOver
- * @param {Event} e the mousemove event
- * @param {String|DragDrop[]} id In POINT mode, the element
- * id this is hovering over. In INTERSECT mode, an array of dd items
- * being hovered over.
+ _tree : false,
+
+ /**
+ * render
+ * render element to dom or tree
+ * @param {Roo.Element|String|DomElement} optional render to if parent is not set.
*/
- onDragOver: function(e, id) { /* override this */ },
+
+ render : function(el)
+ {
+
+ el = el || false;
+ var hp = this.parent ? 1 : 0;
+ Roo.debug && Roo.log(this);
+
+ var tree = this._tree ? this._tree() : this.tree();
- /**
- * Code that executes immediately before the onDragOut event
- * @method b4DragOut
- * @private
- */
- b4DragOut: function(e) { },
+
+ if (!el && typeof(this.parent) == 'string' && this.parent.substring(0,1) == '#') {
+ // if parent is a '#.....' string, then let's use that..
+ var ename = this.parent.substr(1);
+ this.parent = false;
+ Roo.debug && Roo.log(ename);
+ switch (ename) {
+ case 'bootstrap-body':
+ if (typeof(tree.el) != 'undefined' && tree.el == document.body) {
+ // this is the BorderLayout standard?
+ this.parent = { el : true };
+ break;
+ }
+ if (["Nest", "Content", "Grid", "Tree"].indexOf(tree.xtype) > -1) {
+ // need to insert stuff...
+ this.parent = {
+ el : new Roo.bootstrap.layout.Border({
+ el : document.body,
+
+ center: {
+ titlebar: false,
+ autoScroll:false,
+ closeOnTab: true,
+ tabPosition: 'top',
+ //resizeTabs: true,
+ alwaysShowTabs: true,
+ hideTabs: false
+ //minTabWidth: 140
+ }
+ })
+
+ };
+ break;
+ }
+
+ if (typeof(Roo.bootstrap.Body) != 'undefined' ) {
+ this.parent = { el : new Roo.bootstrap.Body() };
+ Roo.debug && Roo.log("setting el to doc body");
+
+ } else {
+ throw "Container is bootstrap body, but Roo.bootstrap.Body is not defined";
+ }
+ break;
+ case 'bootstrap':
+ this.parent = { el : true};
+ // fall through
+ default:
+ el = Roo.get(ename);
+ if (typeof(Roo.bootstrap) != 'undefined' && tree['|xns'] == 'Roo.bootstrap') {
+ this.parent = { el : true};
+ }
+
+ break;
+ }
+
+
+ if (!el && !this.parent) {
+ Roo.debug && Roo.log("Warning - element can not be found :#" + ename );
+ return;
+ }
+ }
+
+ Roo.debug && Roo.log("EL:");
+ Roo.debug && Roo.log(el);
+ Roo.debug && Roo.log("this.parent.el:");
+ Roo.debug && Roo.log(this.parent.el);
+
- /**
- * Abstract method called when we are no longer hovering over an element
- * @method onDragOut
- * @param {Event} e the mousemove event
- * @param {String|DragDrop[]} id In POINT mode, the element
- * id this was hovering over. In INTERSECT mode, an array of dd items
- * that the mouse is no longer over.
- */
- onDragOut: function(e, id) { /* override this */ },
+ // altertive root elements ??? - we need a better way to indicate these.
+ var is_alt = Roo.XComponent.is_alt ||
+ (typeof(tree.el) != 'undefined' && tree.el == document.body) ||
+ (typeof(Roo.bootstrap) != 'undefined' && tree.xns == Roo.bootstrap) ||
+ (typeof(Roo.mailer) != 'undefined' && tree.xns == Roo.mailer) ;
+
+
+
+ if (!this.parent && is_alt) {
+ //el = Roo.get(document.body);
+ this.parent = { el : true };
+ }
+
+
+
+ if (!this.parent) {
+
+ Roo.debug && Roo.log("no parent - creating one");
+
+ el = el ? Roo.get(el) : false;
+
+ if (typeof(Roo.BorderLayout) == 'undefined' ) {
+
+ this.parent = {
+ el : new Roo.bootstrap.layout.Border({
+ el: el || document.body,
+
+ center: {
+ titlebar: false,
+ autoScroll:false,
+ closeOnTab: true,
+ tabPosition: 'top',
+ //resizeTabs: true,
+ alwaysShowTabs: false,
+ hideTabs: true,
+ minTabWidth: 140,
+ overflow: 'visible'
+ }
+ })
+ };
+ } else {
+
+ // it's a top level one..
+ this.parent = {
+ el : new Roo.BorderLayout(el || document.body, {
+ center: {
+ titlebar: false,
+ autoScroll:false,
+ closeOnTab: true,
+ tabPosition: 'top',
+ //resizeTabs: true,
+ alwaysShowTabs: el && hp? false : true,
+ hideTabs: el || !hp ? true : false,
+ minTabWidth: 140
+ }
+ })
+ };
+ }
+ }
+
+ if (!this.parent.el) {
+ // probably an old style ctor, which has been disabled.
+ return;
- /**
- * Code that executes immediately before the onDragDrop event
- * @method b4DragDrop
- * @private
- */
- b4DragDrop: function(e) { },
+ }
+ // The 'tree' method is '_tree now'
+
+ tree.region = tree.region || this.region;
+ var is_body = false;
+ if (this.parent.el === true) {
+ // bootstrap... - body..
+ if (el) {
+ tree.el = el;
+ }
+ this.parent.el = Roo.factory(tree);
+ is_body = true;
+ }
+
+ this.el = this.parent.el.addxtype(tree, undefined, is_body);
+ this.fireEvent('built', this);
+
+ this.panel = this.el;
+ this.layout = this.panel.layout;
+ this.parentLayout = this.parent.layout || false;
+
+ }
+
+});
+Roo.apply(Roo.XComponent, {
/**
- * Abstract method called when this item is dropped on another DragDrop
- * obj
- * @method onDragDrop
- * @param {Event} e the mouseup event
- * @param {String|DragDrop[]} id In POINT mode, the element
- * id this was dropped on. In INTERSECT mode, an array of dd items this
- * was dropped on.
+ * @property hideProgress
+ * true to disable the building progress bar.. usefull on single page renders.
+ * @type Boolean
*/
- onDragDrop: function(e, id) { /* override this */ },
-
+ hideProgress : false,
/**
- * Abstract method called when this item is dropped on an area with no
- * drop target
- * @method onInvalidDrop
- * @param {Event} e the mouseup event
+ * @property buildCompleted
+ * True when the builder has completed building the interface.
+ * @type Boolean
*/
- onInvalidDrop: function(e) { /* override this */ },
-
+ buildCompleted : false,
+
/**
- * Code that executes immediately before the endDrag event
- * @method b4EndDrag
- * @private
+ * @property topModule
+ * the upper most module - uses document.element as it's constructor.
+ * @type Object
*/
- b4EndDrag: function(e) { },
-
+
+ topModule : false,
+
/**
- * Fired when we are done dragging the object
- * @method endDrag
- * @param {Event} e the mouseup event
+ * @property modules
+ * array of modules to be created by registration system.
+ * @type {Array} of Roo.XComponent
*/
- endDrag: function(e) { /* override this */ },
-
+
+ modules : [],
/**
- * Code executed immediately before the onMouseDown event
- * @method b4MouseDown
- * @param {Event} e the mousedown event
- * @private
+ * @property elmodules
+ * array of modules to be created by which use #ID
+ * @type {Array} of Roo.XComponent
*/
- b4MouseDown: function(e) { },
+
+ elmodules : [],
- /**
- * Event handler that fires when a drag/drop obj gets a mousedown
- * @method onMouseDown
- * @param {Event} e the mousedown event
+ /**
+ * @property is_alt
+ * Is an alternative Root - normally used by bootstrap or other systems,
+ * where the top element in the tree can wrap 'body'
+ * @type {boolean} (default false)
*/
- onMouseDown: function(e) { /* override this */ },
-
+
+ is_alt : false,
/**
- * Event handler that fires when a drag/drop obj gets a mouseup
- * @method onMouseUp
- * @param {Event} e the mouseup event
+ * @property build_from_html
+ * Build elements from html - used by bootstrap HTML stuff
+ * - this is cleared after build is completed
+ * @type {boolean} (default false)
*/
- onMouseUp: function(e) { /* override this */ },
-
+
+ build_from_html : false,
/**
- * Override the onAvailable method to do what is needed after the initial
- * position was determined.
- * @method onAvailable
+ * Register components to be built later.
+ *
+ * This solves the following issues
+ * - Building is not done on page load, but after an authentication process has occured.
+ * - Interface elements are registered on page load
+ * - Parent Interface elements may not be loaded before child, so this handles that..
+ *
+ *
+ * example:
+ *
+ * MyApp.register({
+ order : '000001',
+ module : 'Pman.Tab.projectMgr',
+ region : 'center',
+ parent : 'Pman.layout',
+ disabled : false, // or use a function..
+ })
+
+ * * @param {Object} details about module
*/
- onAvailable: function () {
+ register : function(obj) {
+
+ Roo.XComponent.event.fireEvent('register', obj);
+ switch(typeof(obj.disabled) ) {
+
+ case 'undefined':
+ break;
+
+ case 'function':
+ if ( obj.disabled() ) {
+ return;
+ }
+ break;
+
+ default:
+ if (obj.disabled || obj.region == '#disabled') {
+ return;
+ }
+ break;
+ }
+
+ this.modules.push(obj);
+
},
+ /**
+ * convert a string to an object..
+ * eg. 'AAA.BBB' -> finds AAA.BBB
- /*
- * Provides default constraint padding to "constrainTo" elements (defaults to {left: 0, right:0, top:0, bottom:0}).
- * @type Object
- */
- defaultPadding : {left:0, right:0, top:0, bottom:0},
-
- /*
- * Initializes the drag drop object's constraints to restrict movement to a certain element.
- *
- * Usage:
- <pre><code>
- var dd = new Roo.dd.DDProxy("dragDiv1", "proxytest",
- { dragElId: "existingProxyDiv" });
- dd.startDrag = function(){
- this.constrainTo("parent-id");
- };
- </code></pre>
- * Or you can initalize it using the {@link Roo.Element} object:
- <pre><code>
- Roo.get("dragDiv1").initDDProxy("proxytest", {dragElId: "existingProxyDiv"}, {
- startDrag : function(){
- this.constrainTo("parent-id");
- }
- });
- </code></pre>
- * @param {String/HTMLElement/Element} constrainTo The element to constrain to.
- * @param {Object/Number} pad (optional) Pad provides a way to specify "padding" of the constraints,
- * and can be either a number for symmetrical padding (4 would be equal to {left:4, right:4, top:4, bottom:4}) or
- * an object containing the sides to pad. For example: {right:10, bottom:10}
- * @param {Boolean} inContent (optional) Constrain the draggable in the content box of the element (inside padding and borders)
*/
- constrainTo : function(constrainTo, pad, inContent){
- if(typeof pad == "number"){
- pad = {left: pad, right:pad, top:pad, bottom:pad};
+
+ toObject : function(str)
+ {
+ if (!str || typeof(str) == 'object') {
+ return str;
}
- pad = pad || this.defaultPadding;
- var b = Roo.get(this.getEl()).getBox();
- var ce = Roo.get(constrainTo);
- var s = ce.getScroll();
- var c, cd = ce.dom;
- if(cd == document.body){
- c = { x: s.left, y: s.top, width: Roo.lib.Dom.getViewWidth(), height: Roo.lib.Dom.getViewHeight()};
- }else{
- xy = ce.getXY();
- c = {x : xy[0]+s.left, y: xy[1]+s.top, width: cd.clientWidth, height: cd.clientHeight};
+ if (str.substring(0,1) == '#') {
+ return str;
}
-
- var topSpace = b.y - c.y;
- var leftSpace = b.x - c.x;
-
- this.resetConstraints();
- this.setXConstraint(leftSpace - (pad.left||0), // left
- c.width - leftSpace - b.width - (pad.right||0) //right
- );
- this.setYConstraint(topSpace - (pad.top||0), //top
- c.height - topSpace - b.height - (pad.bottom||0) //bottom
- );
- },
-
- /**
- * Returns a reference to the linked element
- * @method getEl
- * @return {HTMLElement} the html element
- */
- getEl: function() {
- if (!this._domRef) {
- this._domRef = Roo.getDom(this.id);
+ var ar = str.split('.');
+ var rt, o;
+ rt = ar.shift();
+ /** eval:var:o */
+ try {
+ eval('if (typeof ' + rt + ' == "undefined"){ o = false;} o = ' + rt + ';');
+ } catch (e) {
+ throw "Module not found : " + str;
}
-
- return this._domRef;
+
+ if (o === false) {
+ throw "Module not found : " + str;
+ }
+ Roo.each(ar, function(e) {
+ if (typeof(o[e]) == 'undefined') {
+ throw "Module not found : " + str;
+ }
+ o = o[e];
+ });
+
+ return o;
+
},
-
+
+
/**
- * Returns a reference to the actual element to drag. By default this is
- * the same as the html element, but it can be assigned to another
- * element. An example of this can be found in Roo.dd.DDProxy
- * @method getDragEl
- * @return {HTMLElement} the html element
+ * move modules into their correct place in the tree..
+ *
*/
- getDragEl: function() {
- return Roo.getDom(this.dragElId);
+ preBuild : function ()
+ {
+ var _t = this;
+ Roo.each(this.modules , function (obj)
+ {
+ Roo.XComponent.event.fireEvent('beforebuild', obj);
+
+ var opar = obj.parent;
+ try {
+ obj.parent = this.toObject(opar);
+ } catch(e) {
+ Roo.debug && Roo.log("parent:toObject failed: " + e.toString());
+ return;
+ }
+
+ if (!obj.parent) {
+ Roo.debug && Roo.log("GOT top level module");
+ Roo.debug && Roo.log(obj);
+ obj.modules = new Roo.util.MixedCollection(false,
+ function(o) { return o.order + '' }
+ );
+ this.topModule = obj;
+ return;
+ }
+ // parent is a string (usually a dom element name..)
+ if (typeof(obj.parent) == 'string') {
+ this.elmodules.push(obj);
+ return;
+ }
+ if (obj.parent.constructor != Roo.XComponent) {
+ Roo.debug && Roo.log("Warning : Object Parent is not instance of XComponent:" + obj.name)
+ }
+ if (!obj.parent.modules) {
+ obj.parent.modules = new Roo.util.MixedCollection(false,
+ function(o) { return o.order + '' }
+ );
+ }
+ if (obj.parent.disabled) {
+ obj.disabled = true;
+ }
+ obj.parent.modules.add(obj);
+ }, this);
},
+
+ /**
+ * make a list of modules to build.
+ * @return {Array} list of modules.
+ */
+
+ buildOrder : function()
+ {
+ var _this = this;
+ var cmp = function(a,b) {
+ return String(a).toUpperCase() > String(b).toUpperCase() ? 1 : -1;
+ };
+ if ((!this.topModule || !this.topModule.modules) && !this.elmodules.length) {
+ throw "No top level modules to build";
+ }
+
+ // make a flat list in order of modules to build.
+ var mods = this.topModule ? [ this.topModule ] : [];
+
+
+ // elmodules (is a list of DOM based modules )
+ Roo.each(this.elmodules, function(e) {
+ mods.push(e);
+ if (!this.topModule &&
+ typeof(e.parent) == 'string' &&
+ e.parent.substring(0,1) == '#' &&
+ Roo.get(e.parent.substr(1))
+ ) {
+
+ _this.topModule = e;
+ }
+
+ });
- /**
- * Sets up the DragDrop object. Must be called in the constructor of any
- * Roo.dd.DragDrop subclass
- * @method init
- * @param id the id of the linked element
- * @param {String} sGroup the group of related items
- * @param {object} config configuration attributes
- */
- init: function(id, sGroup, config) {
- this.initTarget(id, sGroup, config);
- if (!Roo.isTouch) {
- Event.on(this.id, "mousedown", this.handleMouseDown, this);
+
+ // add modules to their parents..
+ var addMod = function(m) {
+ Roo.debug && Roo.log("build Order: add: " + m.name);
+
+ mods.push(m);
+ if (m.modules && !m.disabled) {
+ Roo.debug && Roo.log("build Order: " + m.modules.length + " child modules");
+ m.modules.keySort('ASC', cmp );
+ Roo.debug && Roo.log("build Order: " + m.modules.length + " child modules (after sort)");
+
+ m.modules.each(addMod);
+ } else {
+ Roo.debug && Roo.log("build Order: no child modules");
+ }
+ // not sure if this is used any more..
+ if (m.finalize) {
+ m.finalize.name = m.name + " (clean up) ";
+ mods.push(m.finalize);
+ }
+
}
- Event.on(this.id, "touchstart", this.handleMouseDown, this);
- // Event.on(this.id, "selectstart", Event.preventDefault);
+ if (this.topModule && this.topModule.modules) {
+ this.topModule.modules.keySort('ASC', cmp );
+ this.topModule.modules.each(addMod);
+ }
+ return mods;
+ },
+
+ /**
+ * Build the registered modules.
+ * @param {Object} parent element.
+ * @param {Function} optional method to call after module has been added.
+ *
+ */
+
+ build : function(opts)
+ {
+
+ if (typeof(opts) != 'undefined') {
+ Roo.apply(this,opts);
+ }
+
+ this.preBuild();
+ var mods = this.buildOrder();
+
+ //this.allmods = mods;
+ //Roo.debug && Roo.log(mods);
+ //return;
+ if (!mods.length) { // should not happen
+ throw "NO modules!!!";
+ }
+
+
+ var msg = "Building Interface...";
+ // flash it up as modal - so we store the mask!?
+ if (!this.hideProgress && Roo.MessageBox) {
+ Roo.MessageBox.show({ title: 'loading' });
+ Roo.MessageBox.show({
+ title: "Please wait...",
+ msg: msg,
+ width:450,
+ progress:true,
+ buttons : false,
+ closable:false,
+ modal: false
+
+ });
+ }
+ var total = mods.length;
+
+ var _this = this;
+ var progressRun = function() {
+ if (!mods.length) {
+ Roo.debug && Roo.log('hide?');
+ if (!this.hideProgress && Roo.MessageBox) {
+ Roo.MessageBox.hide();
+ }
+ Roo.XComponent.build_from_html = false; // reset, so dialogs will be build from javascript
+
+ Roo.XComponent.event.fireEvent('buildcomplete', _this.topModule);
+
+ // THE END...
+ return false;
+ }
+
+ var m = mods.shift();
+
+
+ Roo.debug && Roo.log(m);
+ // not sure if this is supported any more.. - modules that are are just function
+ if (typeof(m) == 'function') {
+ m.call(this);
+ return progressRun.defer(10, _this);
+ }
+
+
+ msg = "Building Interface " + (total - mods.length) +
+ " of " + total +
+ (m.name ? (' - ' + m.name) : '');
+ Roo.debug && Roo.log(msg);
+ if (!_this.hideProgress && Roo.MessageBox) {
+ Roo.MessageBox.updateProgress( (total - mods.length)/total, msg );
+ }
+
+
+ // is the module disabled?
+ var disabled = (typeof(m.disabled) == 'function') ?
+ m.disabled.call(m.module.disabled) : m.disabled;
+
+
+ if (disabled) {
+ return progressRun(); // we do not update the display!
+ }
+
+ // now build
+
+
+
+ m.render();
+ // it's 10 on top level, and 1 on others??? why...
+ return progressRun.defer(10, _this);
+
+ }
+ progressRun.defer(1, _this);
+
+
+
},
-
/**
- * Initializes Targeting functionality only... the object does not
- * get a mousedown handler.
- * @method initTarget
- * @param id the id of the linked element
- * @param {String} sGroup the group of related items
- * @param {object} config configuration attributes
+ * Overlay a set of modified strings onto a component
+ * This is dependant on our builder exporting the strings and 'named strings' elements.
+ *
+ * @param {Object} element to overlay on - eg. Pman.Dialog.Login
+ * @param {Object} associative array of 'named' string and it's new value.
+ *
*/
- initTarget: function(id, sGroup, config) {
-
- // configuration attributes
- this.config = config || {};
-
- // create a local reference to the drag and drop manager
- this.DDM = Roo.dd.DDM;
- // initialize the groups array
- this.groups = {};
-
- // assume that we have an element reference instead of an id if the
- // parameter is not a string
- if (typeof id !== "string") {
- id = Roo.id(id);
+ overlayStrings : function( component, strings )
+ {
+ if (typeof(component['_named_strings']) == 'undefined') {
+ throw "ERROR: component does not have _named_strings";
}
+ for ( var k in strings ) {
+ var md = typeof(component['_named_strings'][k]) == 'undefined' ? false : component['_named_strings'][k];
+ if (md !== false) {
+ component['_strings'][md] = strings[k];
+ } else {
+ Roo.log('could not find named string: ' + k + ' in');
+ Roo.log(component);
+ }
+
+ }
+
+ },
+
+
+ /**
+ * Event Object.
+ *
+ *
+ */
+ event: false,
+ /**
+ * wrapper for event.on - aliased later..
+ * Typically use to register a event handler for register:
+ *
+ * eg. Roo.XComponent.on('register', function(comp) { comp.disable = true } );
+ *
+ */
+ on : false
+
+
+
+});
- // set the id
- this.id = id;
-
- // add to an interaction group
- this.addToGroup((sGroup) ? sGroup : "default");
-
- // We don't want to register this as the handle with the manager
- // so we just set the id rather than calling the setter.
- this.handleElId = id;
-
- // the linked element is the element that gets dragged by default
- this.setDragElId(id);
+Roo.XComponent.event = new Roo.util.Observable({
+ events : {
+ /**
+ * @event register
+ * Fires when an Component is registered,
+ * set the disable property on the Component to stop registration.
+ * @param {Roo.XComponent} c the component being registerd.
+ *
+ */
+ 'register' : true,
+ /**
+ * @event beforebuild
+ * Fires before each Component is built
+ * can be used to apply permissions.
+ * @param {Roo.XComponent} c the component being registerd.
+ *
+ */
+ 'beforebuild' : true,
+ /**
+ * @event buildcomplete
+ * Fires on the top level element when all elements have been built
+ * @param {Roo.XComponent} the top level component.
+ */
+ 'buildcomplete' : true
+
+ }
+});
- // by default, clicked anchors will not start drag operations.
- this.invalidHandleTypes = { A: "A" };
- this.invalidHandleIds = {};
- this.invalidHandleClasses = [];
+Roo.XComponent.on = Roo.XComponent.event.on.createDelegate(Roo.XComponent.event);
+ //
+ /**
+ * marked - a markdown parser
+ * Copyright (c) 2011-2014, Christopher Jeffrey. (MIT Licensed)
+ * https://github.com/chjj/marked
+ */
- this.applyConfig();
- this.handleOnAvailable();
- },
+/**
+ *
+ * Roo.Markdown - is a very crude wrapper around marked..
+ *
+ * usage:
+ *
+ * alert( Roo.Markdown.toHtml("Markdown *rocks*.") );
+ *
+ * Note: move the sample code to the bottom of this
+ * file before uncommenting it.
+ *
+ */
+Roo.Markdown = {};
+Roo.Markdown.toHtml = function(text) {
+
+ var c = new Roo.Markdown.marked.setOptions({
+ renderer: new Roo.Markdown.marked.Renderer(),
+ gfm: true,
+ tables: true,
+ breaks: false,
+ pedantic: false,
+ sanitize: false,
+ smartLists: true,
+ smartypants: false
+ });
+ // A FEW HACKS!!?
+
+ text = text.replace(/\\\n/g,' ');
+ return Roo.Markdown.marked(text);
+};
+//
+// converter
+//
+// Wraps all "globals" so that the only thing
+// exposed is makeHtml().
+//
+(function() {
+
+ /**
+ * eval:var:escape
+ * eval:var:unescape
+ * eval:var:replace
+ */
+
/**
- * Applies the configuration parameters that were passed into the constructor.
- * This is supposed to happen at each level through the inheritance chain. So
- * a DDProxy implentation will execute apply config on DDProxy, DD, and
- * DragDrop in order to get all of the parameters that are available in
- * each object.
- * @method applyConfig
+ * Helpers
*/
- applyConfig: function() {
-
- // configurable properties:
- // padding, isTarget, maintainOffset, primaryButtonOnly
- this.padding = this.config.padding || [0, 0, 0, 0];
- this.isTarget = (this.config.isTarget !== false);
- this.maintainOffset = (this.config.maintainOffset);
- this.primaryButtonOnly = (this.config.primaryButtonOnly !== false);
+
+ var escape = function (html, encode) {
+ return html
+ .replace(!encode ? /&(?!#?\w+;)/g : /&/g, '&')
+ .replace(/</g, '<')
+ .replace(/>/g, '>')
+ .replace(/"/g, '"')
+ .replace(/'/g, ''');
+ }
+
+ var unescape = function (html) {
+ // explicitly match decimal, hex, and named HTML entities
+ return html.replace(/&(#(?:\d+)|(?:#x[0-9A-Fa-f]+)|(?:\w+));?/g, function(_, n) {
+ n = n.toLowerCase();
+ if (n === 'colon') { return ':'; }
+ if (n.charAt(0) === '#') {
+ return n.charAt(1) === 'x'
+ ? String.fromCharCode(parseInt(n.substring(2), 16))
+ : String.fromCharCode(+n.substring(1));
+ }
+ return '';
+ });
+ }
+
+ var replace = function (regex, opt) {
+ regex = regex.source;
+ opt = opt || '';
+ return function self(name, val) {
+ if (!name) { return new RegExp(regex, opt); }
+ val = val.source || val;
+ val = val.replace(/(^|[^\[])\^/g, '$1');
+ regex = regex.replace(name, val);
+ return self;
+ };
+ }
- },
+ /**
+ * eval:var:noop
+ */
+ var noop = function () {}
+ noop.exec = noop;
+
+ /**
+ * eval:var:merge
+ */
+ var merge = function (obj) {
+ var i = 1
+ , target
+ , key;
+
+ for (; i < arguments.length; i++) {
+ target = arguments[i];
+ for (key in target) {
+ if (Object.prototype.hasOwnProperty.call(target, key)) {
+ obj[key] = target[key];
+ }
+ }
+ }
+
+ return obj;
+ }
+
+
/**
- * Executed when the linked element is available
- * @method handleOnAvailable
- * @private
- */
- handleOnAvailable: function() {
- this.available = true;
- this.resetConstraints();
- this.onAvailable();
- },
-
- /**
- * Configures the padding for the target zone in px. Effectively expands
- * (or reduces) the virtual object size for targeting calculations.
- * Supports css-style shorthand; if only one parameter is passed, all sides
- * will have that padding, and if only two are passed, the top and bottom
- * will have the first param, the left and right the second.
- * @method setPadding
- * @param {int} iTop Top pad
- * @param {int} iRight Right pad
- * @param {int} iBot Bot pad
- * @param {int} iLeft Left pad
+ * Block-Level Grammar
*/
- setPadding: function(iTop, iRight, iBot, iLeft) {
- // this.padding = [iLeft, iRight, iTop, iBot];
- if (!iRight && 0 !== iRight) {
- this.padding = [iTop, iTop, iTop, iTop];
- } else if (!iBot && 0 !== iBot) {
- this.padding = [iTop, iRight, iTop, iRight];
- } else {
- this.padding = [iTop, iRight, iBot, iLeft];
- }
- },
-
+
+
+
+
+ var block = {
+ newline: /^\n+/,
+ code: /^( {4}[^\n]+\n*)+/,
+ fences: noop,
+ hr: /^( *[-*_]){3,} *(?:\n+|$)/,
+ heading: /^ *(#{1,6}) *([^\n]+?) *#* *(?:\n+|$)/,
+ nptable: noop,
+ lheading: /^([^\n]+)\n *(=|-){2,} *(?:\n+|$)/,
+ blockquote: /^( *>[^\n]+(\n(?!def)[^\n]+)*\n*)+/,
+ list: /^( *)(bull) [\s\S]+?(?:hr|def|\n{2,}(?! )(?!\1bull )\n*|\s*$)/,
+ html: /^ *(?:comment *(?:\n|\s*$)|closed *(?:\n{2,}|\s*$)|closing *(?:\n{2,}|\s*$))/,
+ def: /^ *\[([^\]]+)\]: *<?([^\s>]+)>?(?: +["(]([^\n]+)[")])? *(?:\n+|$)/,
+ table: noop,
+ paragraph: /^((?:[^\n]+\n?(?!hr|heading|lheading|blockquote|tag|def))+)\n*/,
+ text: /^[^\n]+/
+ };
+
+ block.bullet = /(?:[*+-]|\d+\.)/;
+ block.item = /^( *)(bull) [^\n]*(?:\n(?!\1bull )[^\n]*)*/;
+ block.item = replace(block.item, 'gm')
+ (/bull/g, block.bullet)
+ ();
+
+ block.list = replace(block.list)
+ (/bull/g, block.bullet)
+ ('hr', '\\n+(?=\\1?(?:[-*_] *){3,}(?:\\n+|$))')
+ ('def', '\\n+(?=' + block.def.source + ')')
+ ();
+
+ block.blockquote = replace(block.blockquote)
+ ('def', block.def)
+ ();
+
+ block._tag = '(?!(?:'
+ + 'a|em|strong|small|s|cite|q|dfn|abbr|data|time|code'
+ + '|var|samp|kbd|sub|sup|i|b|u|mark|ruby|rt|rp|bdi|bdo'
+ + '|span|br|wbr|ins|del|img)\\b)\\w+(?!:/|[^\\w\\s@]*@)\\b';
+
+ block.html = replace(block.html)
+ ('comment', /<!--[\s\S]*?-->/)
+ ('closed', /<(tag)[\s\S]+?<\/\1>/)
+ ('closing', /<tag(?:"[^"]*"|'[^']*'|[^'">])*?>/)
+ (/tag/g, block._tag)
+ ();
+
+ block.paragraph = replace(block.paragraph)
+ ('hr', block.hr)
+ ('heading', block.heading)
+ ('lheading', block.lheading)
+ ('blockquote', block.blockquote)
+ ('tag', '<' + block._tag)
+ ('def', block.def)
+ ();
+
/**
- * Stores the initial placement of the linked element.
- * @method setInitialPosition
- * @param {int} diffX the X offset, default 0
- * @param {int} diffY the Y offset, default 0
+ * Normal Block Grammar
*/
- setInitPosition: function(diffX, diffY) {
- var el = this.getEl();
-
- if (!this.DDM.verifyEl(el)) {
- return;
- }
-
- var dx = diffX || 0;
- var dy = diffY || 0;
-
- var p = Dom.getXY( el );
-
- this.initPageX = p[0] - dx;
- this.initPageY = p[1] - dy;
-
- this.lastPageX = p[0];
- this.lastPageY = p[1];
-
-
- this.setStartPosition(p);
- },
-
+
+ block.normal = merge({}, block);
+
/**
- * Sets the start position of the element. This is set when the obj
- * is initialized, the reset when a drag is started.
- * @method setStartPosition
- * @param pos current position (from previous lookup)
- * @private
+ * GFM Block Grammar
*/
- setStartPosition: function(pos) {
- var p = pos || Dom.getXY( this.getEl() );
- this.deltaSetXY = null;
-
- this.startPageX = p[0];
- this.startPageY = p[1];
- },
-
+
+ block.gfm = merge({}, block.normal, {
+ fences: /^ *(`{3,}|~{3,})[ \.]*(\S+)? *\n([\s\S]*?)\s*\1 *(?:\n+|$)/,
+ paragraph: /^/,
+ heading: /^ *(#{1,6}) +([^\n]+?) *#* *(?:\n+|$)/
+ });
+
+ block.gfm.paragraph = replace(block.paragraph)
+ ('(?!', '(?!'
+ + block.gfm.fences.source.replace('\\1', '\\2') + '|'
+ + block.list.source.replace('\\1', '\\3') + '|')
+ ();
+
/**
- * Add this instance to a group of related drag/drop objects. All
- * instances belong to at least one group, and can belong to as many
- * groups as needed.
- * @method addToGroup
- * @param sGroup {string} the name of the group
+ * GFM + Tables Block Grammar
*/
- addToGroup: function(sGroup) {
- this.groups[sGroup] = true;
- this.DDM.regDragDrop(this, sGroup);
- },
-
+
+ block.tables = merge({}, block.gfm, {
+ nptable: /^ *(\S.*\|.*)\n *([-:]+ *\|[-| :]*)\n((?:.*\|.*(?:\n|$))*)\n*/,
+ table: /^ *\|(.+)\n *\|( *[-:]+[-| :]*)\n((?: *\|.*(?:\n|$))*)\n*/
+ });
+
/**
- * Remove's this instance from the supplied interaction group
- * @method removeFromGroup
- * @param {string} sGroup The group to drop
+ * Block Lexer
*/
- removeFromGroup: function(sGroup) {
- if (this.groups[sGroup]) {
- delete this.groups[sGroup];
+
+ var Lexer = function (options) {
+ this.tokens = [];
+ this.tokens.links = {};
+ this.options = options || marked.defaults;
+ this.rules = block.normal;
+
+ if (this.options.gfm) {
+ if (this.options.tables) {
+ this.rules = block.tables;
+ } else {
+ this.rules = block.gfm;
}
-
- this.DDM.removeDDFromGroup(this, sGroup);
- },
-
+ }
+ }
+
/**
- * Allows you to specify that an element other than the linked element
- * will be moved with the cursor during a drag
- * @method setDragElId
- * @param id {string} the id of the element that will be used to initiate the drag
+ * Expose Block Rules
*/
- setDragElId: function(id) {
- this.dragElId = id;
- },
-
+
+ Lexer.rules = block;
+
/**
- * Allows you to specify a child of the linked element that should be
- * used to initiate the drag operation. An example of this would be if
- * you have a content div with text and links. Clicking anywhere in the
- * content area would normally start the drag operation. Use this method
- * to specify that an element inside of the content div is the element
- * that starts the drag operation.
- * @method setHandleElId
- * @param id {string} the id of the element that will be used to
- * initiate the drag.
+ * Static Lex Method
*/
- setHandleElId: function(id) {
- if (typeof id !== "string") {
- id = Roo.id(id);
- }
- this.handleElId = id;
- this.DDM.regHandle(this.id, id);
- },
-
+
+ Lexer.lex = function(src, options) {
+ var lexer = new Lexer(options);
+ return lexer.lex(src);
+ };
+
/**
- * Allows you to set an element outside of the linked element as a drag
- * handle
- * @method setOuterHandleElId
- * @param id the id of the element that will be used to initiate the drag
+ * Preprocessing
*/
- setOuterHandleElId: function(id) {
- if (typeof id !== "string") {
- id = Roo.id(id);
- }
- Event.on(id, "mousedown",
- this.handleMouseDown, this);
- this.setHandleElId(id);
-
- this.hasOuterHandles = true;
- },
-
- /**
- * Remove all drag and drop hooks for this element
- * @method unreg
- */
- unreg: function() {
- Event.un(this.id, "mousedown",
- this.handleMouseDown);
- Event.un(this.id, "touchstart",
- this.handleMouseDown);
- this._domRef = null;
- this.DDM._remove(this);
- },
-
- destroy : function(){
- this.unreg();
- },
-
- /**
- * Returns true if this instance is locked, or the drag drop mgr is locked
- * (meaning that all drag/drop is disabled on the page.)
- * @method isLocked
- * @return {boolean} true if this obj or all drag/drop is locked, else
- * false
- */
- isLocked: function() {
- return (this.DDM.isLocked() || this.locked);
- },
-
+
+ Lexer.prototype.lex = function(src) {
+ src = src
+ .replace(/\r\n|\r/g, '\n')
+ .replace(/\t/g, ' ')
+ .replace(/\u00a0/g, ' ')
+ .replace(/\u2424/g, '\n');
+
+ return this.token(src, true);
+ };
+
/**
- * Fired when this object is clicked
- * @method handleMouseDown
- * @param {Event} e
- * @param {Roo.dd.DragDrop} oDD the clicked dd object (this dd obj)
- * @private
- */
- handleMouseDown: function(e, oDD){
-
- if (!Roo.isTouch && this.primaryButtonOnly && e.button != 0) {
- //Roo.log('not touch/ button !=0');
- return;
+ * Lexing
+ */
+
+ Lexer.prototype.token = function(src, top, bq) {
+ var src = src.replace(/^ +$/gm, '')
+ , next
+ , loose
+ , cap
+ , bull
+ , b
+ , item
+ , space
+ , i
+ , l;
+
+ while (src) {
+ // newline
+ if (cap = this.rules.newline.exec(src)) {
+ src = src.substring(cap[0].length);
+ if (cap[0].length > 1) {
+ this.tokens.push({
+ type: 'space'
+ });
+ }
}
- if (e.browserEvent.touches && e.browserEvent.touches.length != 1) {
- return; // double touch..
+
+ // code
+ if (cap = this.rules.code.exec(src)) {
+ src = src.substring(cap[0].length);
+ cap = cap[0].replace(/^ {4}/gm, '');
+ this.tokens.push({
+ type: 'code',
+ text: !this.options.pedantic
+ ? cap.replace(/\n+$/, '')
+ : cap
+ });
+ continue;
+ }
+
+ // fences (gfm)
+ if (cap = this.rules.fences.exec(src)) {
+ src = src.substring(cap[0].length);
+ this.tokens.push({
+ type: 'code',
+ lang: cap[2],
+ text: cap[3] || ''
+ });
+ continue;
+ }
+
+ // heading
+ if (cap = this.rules.heading.exec(src)) {
+ src = src.substring(cap[0].length);
+ this.tokens.push({
+ type: 'heading',
+ depth: cap[1].length,
+ text: cap[2]
+ });
+ continue;
+ }
+
+ // table no leading pipe (gfm)
+ if (top && (cap = this.rules.nptable.exec(src))) {
+ src = src.substring(cap[0].length);
+
+ item = {
+ type: 'table',
+ header: cap[1].replace(/^ *| *\| *$/g, '').split(/ *\| */),
+ align: cap[2].replace(/^ *|\| *$/g, '').split(/ *\| */),
+ cells: cap[3].replace(/\n$/, '').split('\n')
+ };
+
+ for (i = 0; i < item.align.length; i++) {
+ if (/^ *-+: *$/.test(item.align[i])) {
+ item.align[i] = 'right';
+ } else if (/^ *:-+: *$/.test(item.align[i])) {
+ item.align[i] = 'center';
+ } else if (/^ *:-+ *$/.test(item.align[i])) {
+ item.align[i] = 'left';
+ } else {
+ item.align[i] = null;
+ }
+ }
+
+ for (i = 0; i < item.cells.length; i++) {
+ item.cells[i] = item.cells[i].split(/ *\| */);
+ }
+
+ this.tokens.push(item);
+
+ continue;
}
-
-
- if (this.isLocked()) {
- //Roo.log('locked');
- return;
+
+ // lheading
+ if (cap = this.rules.lheading.exec(src)) {
+ src = src.substring(cap[0].length);
+ this.tokens.push({
+ type: 'heading',
+ depth: cap[2] === '=' ? 1 : 2,
+ text: cap[1]
+ });
+ continue;
}
-
- this.DDM.refreshCache(this.groups);
-// Roo.log([Roo.lib.Event.getPageX(e), Roo.lib.Event.getPageY(e)]);
- var pt = new Roo.lib.Point(Roo.lib.Event.getPageX(e), Roo.lib.Event.getPageY(e));
- if (!this.hasOuterHandles && !this.DDM.isOverTarget(pt, this) ) {
- //Roo.log('no outer handes or not over target');
- // do nothing.
- } else {
-// Roo.log('check validator');
- if (this.clickValidator(e)) {
-// Roo.log('validate success');
- // set the initial element position
- this.setStartPosition();
-
-
- this.b4MouseDown(e);
- this.onMouseDown(e);
-
- this.DDM.handleMouseDown(e, this);
-
- this.DDM.stopEvent(e);
+
+ // hr
+ if (cap = this.rules.hr.exec(src)) {
+ src = src.substring(cap[0].length);
+ this.tokens.push({
+ type: 'hr'
+ });
+ continue;
+ }
+
+ // blockquote
+ if (cap = this.rules.blockquote.exec(src)) {
+ src = src.substring(cap[0].length);
+
+ this.tokens.push({
+ type: 'blockquote_start'
+ });
+
+ cap = cap[0].replace(/^ *> ?/gm, '');
+
+ // Pass `top` to keep the current
+ // "toplevel" state. This is exactly
+ // how markdown.pl works.
+ this.token(cap, top, true);
+
+ this.tokens.push({
+ type: 'blockquote_end'
+ });
+
+ continue;
+ }
+
+ // list
+ if (cap = this.rules.list.exec(src)) {
+ src = src.substring(cap[0].length);
+ bull = cap[2];
+
+ this.tokens.push({
+ type: 'list_start',
+ ordered: bull.length > 1
+ });
+
+ // Get each top-level item.
+ cap = cap[0].match(this.rules.item);
+
+ next = false;
+ l = cap.length;
+ i = 0;
+
+ for (; i < l; i++) {
+ item = cap[i];
+
+ // Remove the list item's bullet
+ // so it is seen as the next token.
+ space = item.length;
+ item = item.replace(/^ *([*+-]|\d+\.) +/, '');
+
+ // Outdent whatever the
+ // list item contains. Hacky.
+ if (~item.indexOf('\n ')) {
+ space -= item.length;
+ item = !this.options.pedantic
+ ? item.replace(new RegExp('^ {1,' + space + '}', 'gm'), '')
+ : item.replace(/^ {1,4}/gm, '');
+ }
+
+ // Determine whether the next list item belongs here.
+ // Backpedal if it does not belong in this list.
+ if (this.options.smartLists && i !== l - 1) {
+ b = block.bullet.exec(cap[i + 1])[0];
+ if (bull !== b && !(bull.length > 1 && b.length > 1)) {
+ src = cap.slice(i + 1).join('\n') + src;
+ i = l - 1;
+ }
+ }
+
+ // Determine whether item is loose or not.
+ // Use: /(^|\n)(?! )[^\n]+\n\n(?!\s*$)/
+ // for discount behavior.
+ loose = next || /\n\n(?!\s*$)/.test(item);
+ if (i !== l - 1) {
+ next = item.charAt(item.length - 1) === '\n';
+ if (!loose) { loose = next; }
+ }
+
+ this.tokens.push({
+ type: loose
+ ? 'loose_item_start'
+ : 'list_item_start'
+ });
+
+ // Recurse.
+ this.token(item, false, bq);
+
+ this.tokens.push({
+ type: 'list_item_end'
+ });
+ }
+
+ this.tokens.push({
+ type: 'list_end'
+ });
+
+ continue;
+ }
+
+ // html
+ if (cap = this.rules.html.exec(src)) {
+ src = src.substring(cap[0].length);
+ this.tokens.push({
+ type: this.options.sanitize
+ ? 'paragraph'
+ : 'html',
+ pre: !this.options.sanitizer
+ && (cap[1] === 'pre' || cap[1] === 'script' || cap[1] === 'style'),
+ text: cap[0]
+ });
+ continue;
+ }
+
+ // def
+ if ((!bq && top) && (cap = this.rules.def.exec(src))) {
+ src = src.substring(cap[0].length);
+ this.tokens.links[cap[1].toLowerCase()] = {
+ href: cap[2],
+ title: cap[3]
+ };
+ continue;
+ }
+
+ // table (gfm)
+ if (top && (cap = this.rules.table.exec(src))) {
+ src = src.substring(cap[0].length);
+
+ item = {
+ type: 'table',
+ header: cap[1].replace(/^ *| *\| *$/g, '').split(/ *\| */),
+ align: cap[2].replace(/^ *|\| *$/g, '').split(/ *\| */),
+ cells: cap[3].replace(/(?: *\| *)?\n$/, '').split('\n')
+ };
+
+ for (i = 0; i < item.align.length; i++) {
+ if (/^ *-+: *$/.test(item.align[i])) {
+ item.align[i] = 'right';
+ } else if (/^ *:-+: *$/.test(item.align[i])) {
+ item.align[i] = 'center';
+ } else if (/^ *:-+ *$/.test(item.align[i])) {
+ item.align[i] = 'left';
} else {
-
-
+ item.align[i] = null;
}
+ }
+
+ for (i = 0; i < item.cells.length; i++) {
+ item.cells[i] = item.cells[i]
+ .replace(/^ *\| *| *\| *$/g, '')
+ .split(/ *\| */);
+ }
+
+ this.tokens.push(item);
+
+ continue;
}
- },
-
- clickValidator: function(e) {
- var target = e.getTarget();
- return ( this.isValidHandleChild(target) &&
- (this.id == this.handleElId ||
- this.DDM.handleWasClicked(target, this.id)) );
- },
-
+
+ // top-level paragraph
+ if (top && (cap = this.rules.paragraph.exec(src))) {
+ src = src.substring(cap[0].length);
+ this.tokens.push({
+ type: 'paragraph',
+ text: cap[1].charAt(cap[1].length - 1) === '\n'
+ ? cap[1].slice(0, -1)
+ : cap[1]
+ });
+ continue;
+ }
+
+ // text
+ if (cap = this.rules.text.exec(src)) {
+ // Top-level should never reach here.
+ src = src.substring(cap[0].length);
+ this.tokens.push({
+ type: 'text',
+ text: cap[0]
+ });
+ continue;
+ }
+
+ if (src) {
+ throw new
+ Error('Infinite loop on byte: ' + src.charCodeAt(0));
+ }
+ }
+
+ return this.tokens;
+ };
+
/**
- * Allows you to specify a tag name that should not start a drag operation
- * when clicked. This is designed to facilitate embedding links within a
- * drag handle that do something other than start the drag.
- * @method addInvalidHandleType
- * @param {string} tagName the type of element to exclude
+ * Inline-Level Grammar
*/
- addInvalidHandleType: function(tagName) {
- var type = tagName.toUpperCase();
- this.invalidHandleTypes[type] = type;
- },
-
+
+ var inline = {
+ escape: /^\\([\\`*{}\[\]()#+\-.!_>])/,
+ autolink: /^<([^ >]+(@|:\/)[^ >]+)>/,
+ url: noop,
+ tag: /^<!--[\s\S]*?-->|^<\/?\w+(?:"[^"]*"|'[^']*'|[^'">])*?>/,
+ link: /^!?\[(inside)\]\(href\)/,
+ reflink: /^!?\[(inside)\]\s*\[([^\]]*)\]/,
+ nolink: /^!?\[((?:\[[^\]]*\]|[^\[\]])*)\]/,
+ strong: /^__([\s\S]+?)__(?!_)|^\*\*([\s\S]+?)\*\*(?!\*)/,
+ em: /^\b_((?:[^_]|__)+?)_\b|^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,
+ code: /^(`+)\s*([\s\S]*?[^`])\s*\1(?!`)/,
+ br: /^ {2,}\n(?!\s*$)/,
+ del: noop,
+ text: /^[\s\S]+?(?=[\\<!\[_*`]| {2,}\n|$)/
+ };
+
+ inline._inside = /(?:\[[^\]]*\]|[^\[\]]|\](?=[^\[]*\]))*/;
+ inline._href = /\s*<?([\s\S]*?)>?(?:\s+['"]([\s\S]*?)['"])?\s*/;
+
+ inline.link = replace(inline.link)
+ ('inside', inline._inside)
+ ('href', inline._href)
+ ();
+
+ inline.reflink = replace(inline.reflink)
+ ('inside', inline._inside)
+ ();
+
/**
- * Lets you to specify an element id for a child of a drag handle
- * that should not initiate a drag
- * @method addInvalidHandleId
- * @param {string} id the element id of the element you wish to ignore
+ * Normal Inline Grammar
*/
- addInvalidHandleId: function(id) {
- if (typeof id !== "string") {
- id = Roo.id(id);
- }
- this.invalidHandleIds[id] = id;
- },
-
+
+ inline.normal = merge({}, inline);
+
/**
- * Lets you specify a css class of elements that will not initiate a drag
- * @method addInvalidHandleClass
- * @param {string} cssClass the class of the elements you wish to ignore
+ * Pedantic Inline Grammar
*/
- addInvalidHandleClass: function(cssClass) {
- this.invalidHandleClasses.push(cssClass);
- },
-
+
+ inline.pedantic = merge({}, inline.normal, {
+ strong: /^__(?=\S)([\s\S]*?\S)__(?!_)|^\*\*(?=\S)([\s\S]*?\S)\*\*(?!\*)/,
+ em: /^_(?=\S)([\s\S]*?\S)_(?!_)|^\*(?=\S)([\s\S]*?\S)\*(?!\*)/
+ });
+
/**
- * Unsets an excluded tag name set by addInvalidHandleType
- * @method removeInvalidHandleType
- * @param {string} tagName the type of element to unexclude
+ * GFM Inline Grammar
*/
- removeInvalidHandleType: function(tagName) {
- var type = tagName.toUpperCase();
- // this.invalidHandleTypes[type] = null;
- delete this.invalidHandleTypes[type];
- },
-
+
+ inline.gfm = merge({}, inline.normal, {
+ escape: replace(inline.escape)('])', '~|])')(),
+ url: /^(https?:\/\/[^\s<]+[^<.,:;"')\]\s])/,
+ del: /^~~(?=\S)([\s\S]*?\S)~~/,
+ text: replace(inline.text)
+ (']|', '~]|')
+ ('|', '|https?://|')
+ ()
+ });
+
/**
- * Unsets an invalid handle id
- * @method removeInvalidHandleId
- * @param {string} id the id of the element to re-enable
+ * GFM + Line Breaks Inline Grammar
*/
- removeInvalidHandleId: function(id) {
- if (typeof id !== "string") {
- id = Roo.id(id);
- }
- delete this.invalidHandleIds[id];
- },
-
+
+ inline.breaks = merge({}, inline.gfm, {
+ br: replace(inline.br)('{2,}', '*')(),
+ text: replace(inline.gfm.text)('{2,}', '*')()
+ });
+
/**
- * Unsets an invalid css class
- * @method removeInvalidHandleClass
- * @param {string} cssClass the class of the element(s) you wish to
- * re-enable
+ * Inline Lexer & Compiler
*/
- removeInvalidHandleClass: function(cssClass) {
- for (var i=0, len=this.invalidHandleClasses.length; i<len; ++i) {
- if (this.invalidHandleClasses[i] == cssClass) {
- delete this.invalidHandleClasses[i];
- }
+
+ var InlineLexer = function (links, options) {
+ this.options = options || marked.defaults;
+ this.links = links;
+ this.rules = inline.normal;
+ this.renderer = this.options.renderer || new Renderer;
+ this.renderer.options = this.options;
+
+ if (!this.links) {
+ throw new
+ Error('Tokens array requires a `links` property.');
+ }
+
+ if (this.options.gfm) {
+ if (this.options.breaks) {
+ this.rules = inline.breaks;
+ } else {
+ this.rules = inline.gfm;
}
- },
-
+ } else if (this.options.pedantic) {
+ this.rules = inline.pedantic;
+ }
+ }
+
/**
- * Checks the tag exclusion list to see if this click should be ignored
- * @method isValidHandleChild
- * @param {HTMLElement} node the HTMLElement to evaluate
- * @return {boolean} true if this is a valid tag type, false if not
+ * Expose Inline Rules
*/
- isValidHandleChild: function(node) {
-
- var valid = true;
- // var n = (node.nodeName == "#text") ? node.parentNode : node;
- var nodeName;
- try {
- nodeName = node.nodeName.toUpperCase();
- } catch(e) {
- nodeName = node.nodeName;
+
+ InlineLexer.rules = inline;
+
+ /**
+ * Static Lexing/Compiling Method
+ */
+
+ InlineLexer.output = function(src, links, options) {
+ var inline = new InlineLexer(links, options);
+ return inline.output(src);
+ };
+
+ /**
+ * Lexing/Compiling
+ */
+
+ InlineLexer.prototype.output = function(src) {
+ var out = ''
+ , link
+ , text
+ , href
+ , cap;
+
+ while (src) {
+ // escape
+ if (cap = this.rules.escape.exec(src)) {
+ src = src.substring(cap[0].length);
+ out += cap[1];
+ continue;
}
- valid = valid && !this.invalidHandleTypes[nodeName];
- valid = valid && !this.invalidHandleIds[node.id];
-
- for (var i=0, len=this.invalidHandleClasses.length; valid && i<len; ++i) {
- valid = !Dom.hasClass(node, this.invalidHandleClasses[i]);
+
+ // autolink
+ if (cap = this.rules.autolink.exec(src)) {
+ src = src.substring(cap[0].length);
+ if (cap[2] === '@') {
+ text = cap[1].charAt(6) === ':'
+ ? this.mangle(cap[1].substring(7))
+ : this.mangle(cap[1]);
+ href = this.mangle('mailto:') + text;
+ } else {
+ text = escape(cap[1]);
+ href = text;
+ }
+ out += this.renderer.link(href, null, text);
+ continue;
}
-
-
- return valid;
-
- },
-
+
+ // url (gfm)
+ if (!this.inLink && (cap = this.rules.url.exec(src))) {
+ src = src.substring(cap[0].length);
+ text = escape(cap[1]);
+ href = text;
+ out += this.renderer.link(href, null, text);
+ continue;
+ }
+
+ // tag
+ if (cap = this.rules.tag.exec(src)) {
+ if (!this.inLink && /^<a /i.test(cap[0])) {
+ this.inLink = true;
+ } else if (this.inLink && /^<\/a>/i.test(cap[0])) {
+ this.inLink = false;
+ }
+ src = src.substring(cap[0].length);
+ out += this.options.sanitize
+ ? this.options.sanitizer
+ ? this.options.sanitizer(cap[0])
+ : escape(cap[0])
+ : cap[0];
+ continue;
+ }
+
+ // link
+ if (cap = this.rules.link.exec(src)) {
+ src = src.substring(cap[0].length);
+ this.inLink = true;
+ out += this.outputLink(cap, {
+ href: cap[2],
+ title: cap[3]
+ });
+ this.inLink = false;
+ continue;
+ }
+
+ // reflink, nolink
+ if ((cap = this.rules.reflink.exec(src))
+ || (cap = this.rules.nolink.exec(src))) {
+ src = src.substring(cap[0].length);
+ link = (cap[2] || cap[1]).replace(/\s+/g, ' ');
+ link = this.links[link.toLowerCase()];
+ if (!link || !link.href) {
+ out += cap[0].charAt(0);
+ src = cap[0].substring(1) + src;
+ continue;
+ }
+ this.inLink = true;
+ out += this.outputLink(cap, link);
+ this.inLink = false;
+ continue;
+ }
+
+ // strong
+ if (cap = this.rules.strong.exec(src)) {
+ src = src.substring(cap[0].length);
+ out += this.renderer.strong(this.output(cap[2] || cap[1]));
+ continue;
+ }
+
+ // em
+ if (cap = this.rules.em.exec(src)) {
+ src = src.substring(cap[0].length);
+ out += this.renderer.em(this.output(cap[2] || cap[1]));
+ continue;
+ }
+
+ // code
+ if (cap = this.rules.code.exec(src)) {
+ src = src.substring(cap[0].length);
+ out += this.renderer.codespan(escape(cap[2], true));
+ continue;
+ }
+
+ // br
+ if (cap = this.rules.br.exec(src)) {
+ src = src.substring(cap[0].length);
+ out += this.renderer.br();
+ continue;
+ }
+
+ // del (gfm)
+ if (cap = this.rules.del.exec(src)) {
+ src = src.substring(cap[0].length);
+ out += this.renderer.del(this.output(cap[1]));
+ continue;
+ }
+
+ // text
+ if (cap = this.rules.text.exec(src)) {
+ src = src.substring(cap[0].length);
+ out += this.renderer.text(escape(this.smartypants(cap[0])));
+ continue;
+ }
+
+ if (src) {
+ throw new
+ Error('Infinite loop on byte: ' + src.charCodeAt(0));
+ }
+ }
+
+ return out;
+ };
+
/**
- * Create the array of horizontal tick marks if an interval was specified
- * in setXConstraint().
- * @method setXTicks
- * @private
+ * Compile Link
*/
- setXTicks: function(iStartX, iTickSize) {
- this.xTicks = [];
- this.xTickSize = iTickSize;
-
- var tickMap = {};
-
- for (var i = this.initPageX; i >= this.minX; i = i - iTickSize) {
- if (!tickMap[i]) {
- this.xTicks[this.xTicks.length] = i;
- tickMap[i] = true;
- }
- }
-
- for (i = this.initPageX; i <= this.maxX; i = i + iTickSize) {
- if (!tickMap[i]) {
- this.xTicks[this.xTicks.length] = i;
- tickMap[i] = true;
- }
+
+ InlineLexer.prototype.outputLink = function(cap, link) {
+ var href = escape(link.href)
+ , title = link.title ? escape(link.title) : null;
+
+ return cap[0].charAt(0) !== '!'
+ ? this.renderer.link(href, title, this.output(cap[1]))
+ : this.renderer.image(href, title, escape(cap[1]));
+ };
+
+ /**
+ * Smartypants Transformations
+ */
+
+ InlineLexer.prototype.smartypants = function(text) {
+ if (!this.options.smartypants) { return text; }
+ return text
+ // em-dashes
+ .replace(/---/g, '\u2014')
+ // en-dashes
+ .replace(/--/g, '\u2013')
+ // opening singles
+ .replace(/(^|[-\u2014/(\[{"\s])'/g, '$1\u2018')
+ // closing singles & apostrophes
+ .replace(/'/g, '\u2019')
+ // opening doubles
+ .replace(/(^|[-\u2014/(\[{\u2018\s])"/g, '$1\u201c')
+ // closing doubles
+ .replace(/"/g, '\u201d')
+ // ellipses
+ .replace(/\.{3}/g, '\u2026');
+ };
+
+ /**
+ * Mangle Links
+ */
+
+ InlineLexer.prototype.mangle = function(text) {
+ if (!this.options.mangle) { return text; }
+ var out = ''
+ , l = text.length
+ , i = 0
+ , ch;
+
+ for (; i < l; i++) {
+ ch = text.charCodeAt(i);
+ if (Math.random() > 0.5) {
+ ch = 'x' + ch.toString(16);
}
-
- this.xTicks.sort(this.DDM.numericSort) ;
- },
-
+ out += '&#' + ch + ';';
+ }
+
+ return out;
+ };
+
/**
- * Create the array of vertical tick marks if an interval was specified in
- * setYConstraint().
- * @method setYTicks
- * @private
+ * Renderer
*/
- setYTicks: function(iStartY, iTickSize) {
- this.yTicks = [];
- this.yTickSize = iTickSize;
-
- var tickMap = {};
-
- for (var i = this.initPageY; i >= this.minY; i = i - iTickSize) {
- if (!tickMap[i]) {
- this.yTicks[this.yTicks.length] = i;
- tickMap[i] = true;
- }
+
+ /**
+ * eval:var:Renderer
+ */
+
+ var Renderer = function (options) {
+ this.options = options || {};
+ }
+
+ Renderer.prototype.code = function(code, lang, escaped) {
+ if (this.options.highlight) {
+ var out = this.options.highlight(code, lang);
+ if (out != null && out !== code) {
+ escaped = true;
+ code = out;
}
-
- for (i = this.initPageY; i <= this.maxY; i = i + iTickSize) {
- if (!tickMap[i]) {
- this.yTicks[this.yTicks.length] = i;
- tickMap[i] = true;
- }
+ } else {
+ // hack!!! - it's already escapeD?
+ escaped = true;
+ }
+
+ if (!lang) {
+ return '<pre><code>'
+ + (escaped ? code : escape(code, true))
+ + '\n</code></pre>';
+ }
+
+ return '<pre><code class="'
+ + this.options.langPrefix
+ + escape(lang, true)
+ + '">'
+ + (escaped ? code : escape(code, true))
+ + '\n</code></pre>\n';
+ };
+
+ Renderer.prototype.blockquote = function(quote) {
+ return '<blockquote>\n' + quote + '</blockquote>\n';
+ };
+
+ Renderer.prototype.html = function(html) {
+ return html;
+ };
+
+ Renderer.prototype.heading = function(text, level, raw) {
+ return '<h'
+ + level
+ + ' id="'
+ + this.options.headerPrefix
+ + raw.toLowerCase().replace(/[^\w]+/g, '-')
+ + '">'
+ + text
+ + '</h'
+ + level
+ + '>\n';
+ };
+
+ Renderer.prototype.hr = function() {
+ return this.options.xhtml ? '<hr/>\n' : '<hr>\n';
+ };
+
+ Renderer.prototype.list = function(body, ordered) {
+ var type = ordered ? 'ol' : 'ul';
+ return '<' + type + '>\n' + body + '</' + type + '>\n';
+ };
+
+ Renderer.prototype.listitem = function(text) {
+ return '<li>' + text + '</li>\n';
+ };
+
+ Renderer.prototype.paragraph = function(text) {
+ return '<p>' + text + '</p>\n';
+ };
+
+ Renderer.prototype.table = function(header, body) {
+ return '<table class="table table-striped">\n'
+ + '<thead>\n'
+ + header
+ + '</thead>\n'
+ + '<tbody>\n'
+ + body
+ + '</tbody>\n'
+ + '</table>\n';
+ };
+
+ Renderer.prototype.tablerow = function(content) {
+ return '<tr>\n' + content + '</tr>\n';
+ };
+
+ Renderer.prototype.tablecell = function(content, flags) {
+ var type = flags.header ? 'th' : 'td';
+ var tag = flags.align
+ ? '<' + type + ' style="text-align:' + flags.align + '">'
+ : '<' + type + '>';
+ return tag + content + '</' + type + '>\n';
+ };
+
+ // span level renderer
+ Renderer.prototype.strong = function(text) {
+ return '<strong>' + text + '</strong>';
+ };
+
+ Renderer.prototype.em = function(text) {
+ return '<em>' + text + '</em>';
+ };
+
+ Renderer.prototype.codespan = function(text) {
+ return '<code>' + text + '</code>';
+ };
+
+ Renderer.prototype.br = function() {
+ return this.options.xhtml ? '<br/>' : '<br>';
+ };
+
+ Renderer.prototype.del = function(text) {
+ return '<del>' + text + '</del>';
+ };
+
+ Renderer.prototype.link = function(href, title, text) {
+ if (this.options.sanitize) {
+ try {
+ var prot = decodeURIComponent(unescape(href))
+ .replace(/[^\w:]/g, '')
+ .toLowerCase();
+ } catch (e) {
+ return '';
}
-
- this.yTicks.sort(this.DDM.numericSort) ;
- },
-
+ if (prot.indexOf('javascript:') === 0 || prot.indexOf('vbscript:') === 0) {
+ return '';
+ }
+ }
+ var out = '<a href="' + href + '"';
+ if (title) {
+ out += ' title="' + title + '"';
+ }
+ out += '>' + text + '</a>';
+ return out;
+ };
+
+ Renderer.prototype.image = function(href, title, text) {
+ var out = '<img src="' + href + '" alt="' + text + '"';
+ if (title) {
+ out += ' title="' + title + '"';
+ }
+ out += this.options.xhtml ? '/>' : '>';
+ return out;
+ };
+
+ Renderer.prototype.text = function(text) {
+ return text;
+ };
+
/**
- * By default, the element can be dragged any place on the screen. Use
- * this method to limit the horizontal travel of the element. Pass in
- * 0,0 for the parameters if you want to lock the drag to the y axis.
- * @method setXConstraint
- * @param {int} iLeft the number of pixels the element can move to the left
- * @param {int} iRight the number of pixels the element can move to the
- * right
- * @param {int} iTickSize optional parameter for specifying that the
- * element
- * should move iTickSize pixels at a time.
+ * Parsing & Compiling
*/
- setXConstraint: function(iLeft, iRight, iTickSize) {
- this.leftConstraint = iLeft;
- this.rightConstraint = iRight;
-
- this.minX = this.initPageX - iLeft;
- this.maxX = this.initPageX + iRight;
- if (iTickSize) { this.setXTicks(this.initPageX, iTickSize); }
-
- this.constrainX = true;
- },
-
+ /**
+ * eval:var:Parser
+ */
+
+ var Parser= function (options) {
+ this.tokens = [];
+ this.token = null;
+ this.options = options || marked.defaults;
+ this.options.renderer = this.options.renderer || new Renderer;
+ this.renderer = this.options.renderer;
+ this.renderer.options = this.options;
+ }
+
/**
- * Clears any constraints applied to this instance. Also clears ticks
- * since they can't exist independent of a constraint at this time.
- * @method clearConstraints
+ * Static Parse Method
*/
- clearConstraints: function() {
- this.constrainX = false;
- this.constrainY = false;
- this.clearTicks();
- },
-
+
+ Parser.parse = function(src, options, renderer) {
+ var parser = new Parser(options, renderer);
+ return parser.parse(src);
+ };
+
/**
- * Clears any tick interval defined for this instance
- * @method clearTicks
+ * Parse Loop
*/
- clearTicks: function() {
- this.xTicks = null;
- this.yTicks = null;
- this.xTickSize = 0;
- this.yTickSize = 0;
- },
-
+
+ Parser.prototype.parse = function(src) {
+ this.inline = new InlineLexer(src.links, this.options, this.renderer);
+ this.tokens = src.reverse();
+
+ var out = '';
+ while (this.next()) {
+ out += this.tok();
+ }
+
+ return out;
+ };
+
/**
- * By default, the element can be dragged any place on the screen. Set
- * this to limit the vertical travel of the element. Pass in 0,0 for the
- * parameters if you want to lock the drag to the x axis.
- * @method setYConstraint
- * @param {int} iUp the number of pixels the element can move up
- * @param {int} iDown the number of pixels the element can move down
- * @param {int} iTickSize optional parameter for specifying that the
- * element should move iTickSize pixels at a time.
+ * Next Token
*/
- setYConstraint: function(iUp, iDown, iTickSize) {
- this.topConstraint = iUp;
- this.bottomConstraint = iDown;
-
- this.minY = this.initPageY - iUp;
- this.maxY = this.initPageY + iDown;
- if (iTickSize) { this.setYTicks(this.initPageY, iTickSize); }
-
- this.constrainY = true;
-
- },
-
+
+ Parser.prototype.next = function() {
+ return this.token = this.tokens.pop();
+ };
+
/**
- * resetConstraints must be called if you manually reposition a dd element.
- * @method resetConstraints
- * @param {boolean} maintainOffset
+ * Preview Next Token
*/
- resetConstraints: function() {
-
-
- // Maintain offsets if necessary
- if (this.initPageX || this.initPageX === 0) {
- // figure out how much this thing has moved
- var dx = (this.maintainOffset) ? this.lastPageX - this.initPageX : 0;
- var dy = (this.maintainOffset) ? this.lastPageY - this.initPageY : 0;
-
- this.setInitPosition(dx, dy);
-
- // This is the first time we have detected the element's position
- } else {
- this.setInitPosition();
- }
-
- if (this.constrainX) {
- this.setXConstraint( this.leftConstraint,
- this.rightConstraint,
- this.xTickSize );
- }
-
- if (this.constrainY) {
- this.setYConstraint( this.topConstraint,
- this.bottomConstraint,
- this.yTickSize );
- }
- },
-
+
+ Parser.prototype.peek = function() {
+ return this.tokens[this.tokens.length - 1] || 0;
+ };
+
/**
- * Normally the drag element is moved pixel by pixel, but we can specify
- * that it move a number of pixels at a time. This method resolves the
- * location when we have it set up like this.
- * @method getTick
- * @param {int} val where we want to place the object
- * @param {int[]} tickArray sorted array of valid points
- * @return {int} the closest tick
- * @private
+ * Parse Text Tokens
*/
- getTick: function(val, tickArray) {
-
- if (!tickArray) {
- // If tick interval is not defined, it is effectively 1 pixel,
- // so we return the value passed to us.
- return val;
- } else if (tickArray[0] >= val) {
- // The value is lower than the first tick, so we return the first
- // tick.
- return tickArray[0];
- } else {
- for (var i=0, len=tickArray.length; i<len; ++i) {
- var next = i + 1;
- if (tickArray[next] && tickArray[next] >= val) {
- var diff1 = val - tickArray[i];
- var diff2 = tickArray[next] - val;
- return (diff2 > diff1) ? tickArray[i] : tickArray[next];
- }
+
+ Parser.prototype.parseText = function() {
+ var body = this.token.text;
+
+ while (this.peek().type === 'text') {
+ body += '\n' + this.next().text;
+ }
+
+ return this.inline.output(body);
+ };
+
+ /**
+ * Parse Current Token
+ */
+
+ Parser.prototype.tok = function() {
+ switch (this.token.type) {
+ case 'space': {
+ return '';
+ }
+ case 'hr': {
+ return this.renderer.hr();
+ }
+ case 'heading': {
+ return this.renderer.heading(
+ this.inline.output(this.token.text),
+ this.token.depth,
+ this.token.text);
+ }
+ case 'code': {
+ return this.renderer.code(this.token.text,
+ this.token.lang,
+ this.token.escaped);
+ }
+ case 'table': {
+ var header = ''
+ , body = ''
+ , i
+ , row
+ , cell
+ , flags
+ , j;
+
+ // header
+ cell = '';
+ for (i = 0; i < this.token.header.length; i++) {
+ flags = { header: true, align: this.token.align[i] };
+ cell += this.renderer.tablecell(
+ this.inline.output(this.token.header[i]),
+ { header: true, align: this.token.align[i] }
+ );
+ }
+ header += this.renderer.tablerow(cell);
+
+ for (i = 0; i < this.token.cells.length; i++) {
+ row = this.token.cells[i];
+
+ cell = '';
+ for (j = 0; j < row.length; j++) {
+ cell += this.renderer.tablecell(
+ this.inline.output(row[j]),
+ { header: false, align: this.token.align[j] }
+ );
}
-
- // The value is larger than the last tick, so we return the last
- // tick.
- return tickArray[tickArray.length - 1];
+
+ body += this.renderer.tablerow(cell);
+ }
+ return this.renderer.table(header, body);
}
- },
-
+ case 'blockquote_start': {
+ var body = '';
+
+ while (this.next().type !== 'blockquote_end') {
+ body += this.tok();
+ }
+
+ return this.renderer.blockquote(body);
+ }
+ case 'list_start': {
+ var body = ''
+ , ordered = this.token.ordered;
+
+ while (this.next().type !== 'list_end') {
+ body += this.tok();
+ }
+
+ return this.renderer.list(body, ordered);
+ }
+ case 'list_item_start': {
+ var body = '';
+
+ while (this.next().type !== 'list_item_end') {
+ body += this.token.type === 'text'
+ ? this.parseText()
+ : this.tok();
+ }
+
+ return this.renderer.listitem(body);
+ }
+ case 'loose_item_start': {
+ var body = '';
+
+ while (this.next().type !== 'list_item_end') {
+ body += this.tok();
+ }
+
+ return this.renderer.listitem(body);
+ }
+ case 'html': {
+ var html = !this.token.pre && !this.options.pedantic
+ ? this.inline.output(this.token.text)
+ : this.token.text;
+ return this.renderer.html(html);
+ }
+ case 'paragraph': {
+ return this.renderer.paragraph(this.inline.output(this.token.text));
+ }
+ case 'text': {
+ return this.renderer.paragraph(this.parseText());
+ }
+ }
+ };
+
+
/**
- * toString method
- * @method toString
- * @return {string} string representation of the dd obj
+ * Marked
*/
- toString: function() {
- return ("DragDrop " + this.id);
+ /**
+ * eval:var:marked
+ */
+ var marked = function (src, opt, callback) {
+ if (callback || typeof opt === 'function') {
+ if (!callback) {
+ callback = opt;
+ opt = null;
+ }
+
+ opt = merge({}, marked.defaults, opt || {});
+
+ var highlight = opt.highlight
+ , tokens
+ , pending
+ , i = 0;
+
+ try {
+ tokens = Lexer.lex(src, opt)
+ } catch (e) {
+ return callback(e);
+ }
+
+ pending = tokens.length;
+ /**
+ * eval:var:done
+ */
+ var done = function(err) {
+ if (err) {
+ opt.highlight = highlight;
+ return callback(err);
+ }
+
+ var out;
+
+ try {
+ out = Parser.parse(tokens, opt);
+ } catch (e) {
+ err = e;
+ }
+
+ opt.highlight = highlight;
+
+ return err
+ ? callback(err)
+ : callback(null, out);
+ };
+
+ if (!highlight || highlight.length < 3) {
+ return done();
+ }
+
+ delete opt.highlight;
+
+ if (!pending) { return done(); }
+
+ for (; i < tokens.length; i++) {
+ (function(token) {
+ if (token.type !== 'code') {
+ return --pending || done();
+ }
+ return highlight(token.text, token.lang, function(err, code) {
+ if (err) { return done(err); }
+ if (code == null || code === token.text) {
+ return --pending || done();
+ }
+ token.text = code;
+ token.escaped = true;
+ --pending || done();
+ });
+ })(tokens[i]);
+ }
+
+ return;
+ }
+ try {
+ if (opt) { opt = merge({}, marked.defaults, opt); }
+ return Parser.parse(Lexer.lex(src, opt), opt);
+ } catch (e) {
+ e.message += '\nPlease report this to https://github.com/chjj/marked.';
+ if ((opt || marked.defaults).silent) {
+ return '<p>An error occured:</p><pre>'
+ + escape(e.message + '', true)
+ + '</pre>';
+ }
+ throw e;
+ }
}
+
+ /**
+ * Options
+ */
+
+ marked.options =
+ marked.setOptions = function(opt) {
+ merge(marked.defaults, opt);
+ return marked;
+ };
+
+ marked.defaults = {
+ gfm: true,
+ tables: true,
+ breaks: false,
+ pedantic: false,
+ sanitize: false,
+ sanitizer: null,
+ mangle: true,
+ smartLists: false,
+ silent: false,
+ highlight: null,
+ langPrefix: 'lang-',
+ smartypants: false,
+ headerPrefix: '',
+ renderer: new Renderer,
+ xhtml: false
+ };
+
+ /**
+ * Expose
+ */
+
+ marked.Parser = Parser;
+ marked.parser = Parser.parse;
+
+ marked.Renderer = Renderer;
+
+ marked.Lexer = Lexer;
+ marked.lexer = Lexer.lex;
+
+ marked.InlineLexer = InlineLexer;
+ marked.inlineLexer = InlineLexer.output;
+
+ marked.parse = marked;
+
+ Roo.Markdown.marked = marked;
-});
-
-})();
-/*
+})();/*
* Based on:
* Ext JS Library 1.1.1
* Copyright(c) 2006-2007, Ext JS, LLC.
*/
-/**
- * The drag and drop utility provides a framework for building drag and drop
- * applications. In addition to enabling drag and drop for specific elements,
- * the drag and drop elements are tracked by the manager class, and the
- * interactions between the various elements are tracked during the drag and
- * the implementing code is notified about these important moments.
+
+/*
+ * These classes are derivatives of the similarly named classes in the YUI Library.
+ * The original license:
+ * Copyright (c) 2006, Yahoo! Inc. All rights reserved.
+ * Code licensed under the BSD License:
+ * http://developer.yahoo.net/yui/license.txt
*/
-// Only load the library once. Rewriting the manager class would orphan
-// existing drag and drop instances.
-if (!Roo.dd.DragDropMgr) {
+(function() {
+
+var Event=Roo.EventManager;
+var Dom=Roo.lib.Dom;
/**
- * @class Roo.dd.DragDropMgr
- * DragDropMgr is a singleton that tracks the element interaction for
- * all DragDrop items in the window. Generally, you will not call
- * this class directly, but it does have helper methods that could
- * be useful in your DragDrop implementations.
- * @singleton
+ * @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.
+ * Up to three html elements can be associated with a DragDrop instance:
+ * <ul>
+ * <li>linked element: the element that is passed into the constructor.
+ * This is the element which defines the boundaries for interaction with
+ * other DragDrop objects.</li>
+ * <li>handle element(s): The drag operation only occurs if the element that
+ * was clicked matches a handle element. By default this is the linked
+ * element, but there are times that you will want only a portion of the
+ * linked element to initiate the drag operation, and the setHandleElId()
+ * method provides a way to define this.</li>
+ * <li>drag element: this represents the element that would be moved along
+ * with the cursor during a drag operation. By default, this is the linked
+ * element itself as in {@link Roo.dd.DD}. setDragElId() lets you define
+ * a separate element that would be moved, as in {@link Roo.dd.DDProxy}.
+ * </li>
+ * </ul>
+ * This class should not be instantiated until the onload event to ensure that
+ * the associated elements are available.
+ * The following would define a DragDrop obj that would interact with any
+ * other DragDrop obj in the "group1" group:
+ * <pre>
+ * dd = new Roo.dd.DragDrop("div1", "group1");
+ * </pre>
+ * Since none of the event handlers have been implemented, nothing would
+ * actually happen if you were to run the code above. Normally you would
+ * override this class or one of the default implementations, but you can
+ * also override the methods you want on an instance of the class...
+ * <pre>
+ * dd.onDragDrop = function(e, id) {
+ * alert("dd was dropped on " + id);
+ * }
+ * </pre>
+ * @constructor
+ * @param {String} id of the element that is linked to this instance
+ * @param {String} sGroup the group of related DragDrop objects
+ * @param {object} config an object containing configurable attributes
+ * Valid properties for DragDrop:
+ * padding, isTarget, maintainOffset, primaryButtonOnly
*/
-Roo.dd.DragDropMgr = function() {
+Roo.dd.DragDrop = function(id, sGroup, config) {
+ if (id) {
+ this.init(id, sGroup, config);
+ }
+
+};
- var Event = Roo.EventManager;
+Roo.extend(Roo.dd.DragDrop, Roo.util.Observable , {
- return {
+ /**
+ * The id of the element associated with this object. This is what we
+ * refer to as the "linked element" because the size and position of
+ * this element is used to determine when the drag and drop objects have
+ * interacted.
+ * @property id
+ * @type String
+ */
+ id: null,
- /**
- * Two dimensional Array of registered DragDrop objects. The first
- * dimension is the DragDrop item group, the second the DragDrop
- * object.
- * @property ids
- * @type {string: string}
- * @private
- * @static
- */
- ids: {},
+ /**
+ * Configuration attributes passed into the constructor
+ * @property config
+ * @type object
+ */
+ config: null,
- /**
- * Array of element ids defined as drag handles. Used to determine
- * if the element that generated the mousedown event is actually the
- * handle and not the html element itself.
- * @property handleIds
- * @type {string: string}
- * @private
- * @static
- */
- handleIds: {},
+ /**
+ * The id of the element that will be dragged. By default this is same
+ * as the linked element , but could be changed to another element. Ex:
+ * Roo.dd.DDProxy
+ * @property dragElId
+ * @type String
+ * @private
+ */
+ dragElId: null,
- /**
- * the DragDrop object that is currently being dragged
- * @property dragCurrent
- * @type DragDrop
- * @private
- * @static
- **/
- dragCurrent: null,
+ /**
+ * the id of the element that initiates the drag operation. By default
+ * this is the linked element, but could be changed to be a child of this
+ * element. This lets us do things like only starting the drag when the
+ * header element within the linked html element is clicked.
+ * @property handleElId
+ * @type String
+ * @private
+ */
+ handleElId: null,
- /**
- * the DragDrop object(s) that are being hovered over
- * @property dragOvers
- * @type Array
- * @private
- * @static
- */
- dragOvers: {},
+ /**
+ * An associative array of HTML tags that will be ignored if clicked.
+ * @property invalidHandleTypes
+ * @type {string: string}
+ */
+ invalidHandleTypes: null,
- /**
- * the X distance between the cursor and the object being dragged
- * @property deltaX
- * @type int
- * @private
- * @static
- */
- deltaX: 0,
+ /**
+ * An associative array of ids for elements that will be ignored if clicked
+ * @property invalidHandleIds
+ * @type {string: string}
+ */
+ invalidHandleIds: null,
- /**
- * the Y distance between the cursor and the object being dragged
- * @property deltaY
- * @type int
- * @private
- * @static
- */
- deltaY: 0,
+ /**
+ * An indexted array of css class names for elements that will be ignored
+ * if clicked.
+ * @property invalidHandleClasses
+ * @type string[]
+ */
+ invalidHandleClasses: null,
- /**
- * Flag to determine if we should prevent the default behavior of the
- * events we define. By default this is true, but this can be set to
- * false if you need the default behavior (not recommended)
- * @property preventDefault
- * @type boolean
- * @static
- */
- preventDefault: true,
+ /**
+ * The linked element's absolute X position at the time the drag was
+ * started
+ * @property startPageX
+ * @type int
+ * @private
+ */
+ startPageX: 0,
- /**
- * Flag to determine if we should stop the propagation of the events
- * we generate. This is true by default but you may want to set it to
- * false if the html element contains other features that require the
- * mouse click.
- * @property stopPropagation
- * @type boolean
- * @static
- */
- stopPropagation: true,
+ /**
+ * The linked element's absolute X position at the time the drag was
+ * started
+ * @property startPageY
+ * @type int
+ * @private
+ */
+ startPageY: 0,
- /**
- * Internal flag that is set to true when drag and drop has been
- * intialized
- * @property initialized
- * @private
- * @static
- */
- initalized: false,
+ /**
+ * The group defines a logical collection of DragDrop objects that are
+ * related. Instances only get events when interacting with other
+ * DragDrop object in the same group. This lets us define multiple
+ * groups using a single DragDrop subclass if we want.
+ * @property groups
+ * @type {string: string}
+ */
+ groups: null,
- /**
- * All drag and drop can be disabled.
- * @property locked
- * @private
- * @static
- */
- locked: false,
+ /**
+ * Individual drag/drop instances can be locked. This will prevent
+ * onmousedown start drag.
+ * @property locked
+ * @type boolean
+ * @private
+ */
+ locked: false,
- /**
- * Called the first time an element is registered.
- * @method init
- * @private
- * @static
- */
- init: function() {
- this.initialized = true;
- },
+ /**
+ * Lock this instance
+ * @method lock
+ */
+ lock: function() { this.locked = true; },
- /**
- * In point mode, drag and drop interaction is defined by the
- * location of the cursor during the drag/drop
- * @property POINT
- * @type int
- * @static
- */
- POINT: 0,
+ /**
+ * Unlock this instace
+ * @method unlock
+ */
+ unlock: function() { this.locked = false; },
- /**
- * In intersect mode, drag and drop interactio nis defined by the
- * overlap of two or more drag and drop objects.
- * @property INTERSECT
- * @type int
- * @static
- */
- INTERSECT: 1,
+ /**
+ * By default, all insances can be a drop target. This can be disabled by
+ * setting isTarget to false.
+ * @method isTarget
+ * @type boolean
+ */
+ isTarget: true,
- /**
- * The current drag and drop mode. Default: POINT
- * @property mode
- * @type int
- * @static
- */
- mode: 0,
+ /**
+ * The padding configured for this drag and drop object for calculating
+ * the drop zone intersection with this object.
+ * @method padding
+ * @type int[]
+ */
+ padding: null,
- /**
- * Runs method on all drag and drop objects
- * @method _execOnAll
- * @private
- * @static
- */
- _execOnAll: function(sMethod, args) {
- for (var i in this.ids) {
- for (var j in this.ids[i]) {
- var oDD = this.ids[i][j];
- if (! this.isTypeOfDD(oDD)) {
- continue;
- }
- oDD[sMethod].apply(oDD, args);
- }
- }
- },
+ /**
+ * Cached reference to the linked element
+ * @property _domRef
+ * @private
+ */
+ _domRef: null,
- /**
- * Drag and drop initialization. Sets up the global event handlers
- * @method _onLoad
- * @private
- * @static
- */
- _onLoad: function() {
+ /**
+ * Internal typeof flag
+ * @property __ygDragDrop
+ * @private
+ */
+ __ygDragDrop: true,
- this.init();
+ /**
+ * Set to true when horizontal contraints are applied
+ * @property constrainX
+ * @type boolean
+ * @private
+ */
+ constrainX: false,
- if (!Roo.isTouch) {
- Event.on(document, "mouseup", this.handleMouseUp, this, true);
- Event.on(document, "mousemove", this.handleMouseMove, this, true);
- }
- Event.on(document, "touchend", this.handleMouseUp, this, true);
- Event.on(document, "touchmove", this.handleMouseMove, this, true);
-
- Event.on(window, "unload", this._onUnload, this, true);
- Event.on(window, "resize", this._onResize, this, true);
- // Event.on(window, "mouseout", this._test);
+ /**
+ * Set to true when vertical contraints are applied
+ * @property constrainY
+ * @type boolean
+ * @private
+ */
+ constrainY: false,
- },
+ /**
+ * The left constraint
+ * @property minX
+ * @type int
+ * @private
+ */
+ minX: 0,
- /**
- * Reset constraints on all drag and drop objs
- * @method _onResize
- * @private
- * @static
- */
- _onResize: function(e) {
- this._execOnAll("resetConstraints", []);
- },
-
- /**
- * Lock all drag and drop functionality
- * @method lock
- * @static
- */
- lock: function() { this.locked = true; },
-
- /**
- * Unlock all drag and drop functionality
- * @method unlock
- * @static
- */
- unlock: function() { this.locked = false; },
-
- /**
- * Is drag and drop locked?
- * @method isLocked
- * @return {boolean} True if drag and drop is locked, false otherwise.
- * @static
- */
- isLocked: function() { return this.locked; },
-
- /**
- * Location cache that is set for all drag drop objects when a drag is
- * initiated, cleared when the drag is finished.
- * @property locationCache
- * @private
- * @static
- */
- locationCache: {},
-
- /**
- * Set useCache to false if you want to force object the lookup of each
- * drag and drop linked element constantly during a drag.
- * @property useCache
- * @type boolean
- * @static
- */
- useCache: true,
-
- /**
- * The number of pixels that the mouse needs to move after the
- * mousedown before the drag is initiated. Default=3;
- * @property clickPixelThresh
- * @type int
- * @static
- */
- clickPixelThresh: 3,
+ /**
+ * The right constraint
+ * @property maxX
+ * @type int
+ * @private
+ */
+ maxX: 0,
- /**
- * The number of milliseconds after the mousedown event to initiate the
- * drag if we don't get a mouseup event. Default=1000
- * @property clickTimeThresh
- * @type int
- * @static
- */
- clickTimeThresh: 350,
+ /**
+ * The up constraint
+ * @property minY
+ * @type int
+ * @type int
+ * @private
+ */
+ minY: 0,
- /**
- * Flag that indicates that either the drag pixel threshold or the
- * mousdown time threshold has been met
- * @property dragThreshMet
- * @type boolean
- * @private
- * @static
- */
- dragThreshMet: false,
+ /**
+ * The down constraint
+ * @property maxY
+ * @type int
+ * @private
+ */
+ maxY: 0,
- /**
- * Timeout used for the click time threshold
- * @property clickTimeout
- * @type Object
- * @private
- * @static
- */
- clickTimeout: null,
+ /**
+ * Maintain offsets when we resetconstraints. Set to true when you want
+ * the position of the element relative to its parent to stay the same
+ * when the page changes
+ *
+ * @property maintainOffset
+ * @type boolean
+ */
+ maintainOffset: false,
- /**
- * The X position of the mousedown event stored for later use when a
- * drag threshold is met.
- * @property startX
- * @type int
- * @private
- * @static
- */
- startX: 0,
+ /**
+ * Array of pixel locations the element will snap to if we specified a
+ * horizontal graduation/interval. This array is generated automatically
+ * when you define a tick interval.
+ * @property xTicks
+ * @type int[]
+ */
+ xTicks: null,
- /**
- * The Y position of the mousedown event stored for later use when a
- * drag threshold is met.
- * @property startY
- * @type int
- * @private
- * @static
- */
- startY: 0,
+ /**
+ * Array of pixel locations the element will snap to if we specified a
+ * vertical graduation/interval. This array is generated automatically
+ * when you define a tick interval.
+ * @property yTicks
+ * @type int[]
+ */
+ yTicks: null,
- /**
- * Each DragDrop instance must be registered with the DragDropMgr.
- * This is executed in DragDrop.init()
- * @method regDragDrop
- * @param {DragDrop} oDD the DragDrop object to register
- * @param {String} sGroup the name of the group this element belongs to
- * @static
- */
- regDragDrop: function(oDD, sGroup) {
- if (!this.initialized) { this.init(); }
+ /**
+ * By default the drag and drop instance will only respond to the primary
+ * button click (left button for a right-handed mouse). Set to true to
+ * allow drag and drop to start with any mouse click that is propogated
+ * by the browser
+ * @property primaryButtonOnly
+ * @type boolean
+ */
+ primaryButtonOnly: true,
- if (!this.ids[sGroup]) {
- this.ids[sGroup] = {};
- }
- this.ids[sGroup][oDD.id] = oDD;
- },
+ /**
+ * The availabe property is false until the linked dom element is accessible.
+ * @property available
+ * @type boolean
+ */
+ available: false,
- /**
- * Removes the supplied dd instance from the supplied group. Executed
- * by DragDrop.removeFromGroup, so don't call this function directly.
- * @method removeDDFromGroup
- * @private
- * @static
- */
- removeDDFromGroup: function(oDD, sGroup) {
- if (!this.ids[sGroup]) {
- this.ids[sGroup] = {};
- }
+ /**
+ * By default, drags can only be initiated if the mousedown occurs in the
+ * region the linked element is. This is done in part to work around a
+ * bug in some browsers that mis-report the mousedown if the previous
+ * mouseup happened outside of the window. This property is set to true
+ * if outer handles are defined.
+ *
+ * @property hasOuterHandles
+ * @type boolean
+ * @default false
+ */
+ hasOuterHandles: false,
- var obj = this.ids[sGroup];
- if (obj && obj[oDD.id]) {
- delete obj[oDD.id];
- }
- },
+ /**
+ * Code that executes immediately before the startDrag event
+ * @method b4StartDrag
+ * @private
+ */
+ b4StartDrag: function(x, y) { },
- /**
- * Unregisters a drag and drop item. This is executed in
- * DragDrop.unreg, use that method instead of calling this directly.
- * @method _remove
- * @private
- * @static
- */
- _remove: function(oDD) {
- for (var g in oDD.groups) {
- if (g && this.ids[g][oDD.id]) {
- delete this.ids[g][oDD.id];
- }
- }
- delete this.handleIds[oDD.id];
- },
+ /**
+ * Abstract method called after a drag/drop object is clicked
+ * and the drag or mousedown time thresholds have beeen met.
+ * @method startDrag
+ * @param {int} X click location
+ * @param {int} Y click location
+ */
+ startDrag: function(x, y) { /* override this */ },
- /**
- * Each DragDrop handle element must be registered. This is done
- * automatically when executing DragDrop.setHandleElId()
- * @method regHandle
- * @param {String} sDDId the DragDrop id this element is a handle for
- * @param {String} sHandleId the id of the element that is the drag
- * handle
- * @static
- */
- regHandle: function(sDDId, sHandleId) {
- if (!this.handleIds[sDDId]) {
- this.handleIds[sDDId] = {};
- }
- this.handleIds[sDDId][sHandleId] = sHandleId;
- },
+ /**
+ * Code that executes immediately before the onDrag event
+ * @method b4Drag
+ * @private
+ */
+ b4Drag: function(e) { },
- /**
- * Utility function to determine if a given element has been
- * registered as a drag drop item.
- * @method isDragDrop
- * @param {String} id the element id to check
- * @return {boolean} true if this element is a DragDrop item,
- * false otherwise
- * @static
- */
- isDragDrop: function(id) {
- return ( this.getDDById(id) ) ? true : false;
- },
+ /**
+ * Abstract method called during the onMouseMove event while dragging an
+ * object.
+ * @method onDrag
+ * @param {Event} e the mousemove event
+ */
+ onDrag: function(e) { /* override this */ },
- /**
- * Returns the drag and drop instances that are in all groups the
- * passed in instance belongs to.
- * @method getRelated
- * @param {DragDrop} p_oDD the obj to get related data for
- * @param {boolean} bTargetsOnly if true, only return targetable objs
- * @return {DragDrop[]} the related instances
- * @static
- */
- getRelated: function(p_oDD, bTargetsOnly) {
- var oDDs = [];
- for (var i in p_oDD.groups) {
- for (j in this.ids[i]) {
- var dd = this.ids[i][j];
- if (! this.isTypeOfDD(dd)) {
- continue;
- }
- if (!bTargetsOnly || dd.isTarget) {
- oDDs[oDDs.length] = dd;
- }
- }
- }
+ /**
+ * Abstract method called when this element fist begins hovering over
+ * another DragDrop obj
+ * @method onDragEnter
+ * @param {Event} e the mousemove event
+ * @param {String|DragDrop[]} id In POINT mode, the element
+ * id this is hovering over. In INTERSECT mode, an array of one or more
+ * dragdrop items being hovered over.
+ */
+ onDragEnter: function(e, id) { /* override this */ },
- return oDDs;
- },
+ /**
+ * Code that executes immediately before the onDragOver event
+ * @method b4DragOver
+ * @private
+ */
+ b4DragOver: function(e) { },
- /**
- * Returns true if the specified dd target is a legal target for
- * the specifice drag obj
- * @method isLegalTarget
- * @param {DragDrop} the drag obj
- * @param {DragDrop} the target
- * @return {boolean} true if the target is a legal target for the
- * dd obj
- * @static
- */
- isLegalTarget: function (oDD, oTargetDD) {
- var targets = this.getRelated(oDD, true);
- for (var i=0, len=targets.length;i<len;++i) {
- if (targets[i].id == oTargetDD.id) {
- return true;
- }
- }
+ /**
+ * Abstract method called when this element is hovering over another
+ * DragDrop obj
+ * @method onDragOver
+ * @param {Event} e the mousemove event
+ * @param {String|DragDrop[]} id In POINT mode, the element
+ * id this is hovering over. In INTERSECT mode, an array of dd items
+ * being hovered over.
+ */
+ onDragOver: function(e, id) { /* override this */ },
- return false;
- },
+ /**
+ * Code that executes immediately before the onDragOut event
+ * @method b4DragOut
+ * @private
+ */
+ b4DragOut: function(e) { },
- /**
- * My goal is to be able to transparently determine if an object is
- * typeof DragDrop, and the exact subclass of DragDrop. typeof
- * returns "object", oDD.constructor.toString() always returns
- * "DragDrop" and not the name of the subclass. So for now it just
- * evaluates a well-known variable in DragDrop.
- * @method isTypeOfDD
- * @param {Object} the object to evaluate
- * @return {boolean} true if typeof oDD = DragDrop
- * @static
- */
- isTypeOfDD: function (oDD) {
- return (oDD && oDD.__ygDragDrop);
- },
+ /**
+ * Abstract method called when we are no longer hovering over an element
+ * @method onDragOut
+ * @param {Event} e the mousemove event
+ * @param {String|DragDrop[]} id In POINT mode, the element
+ * id this was hovering over. In INTERSECT mode, an array of dd items
+ * that the mouse is no longer over.
+ */
+ onDragOut: function(e, id) { /* override this */ },
- /**
- * Utility function to determine if a given element has been
- * registered as a drag drop handle for the given Drag Drop object.
- * @method isHandle
- * @param {String} id the element id to check
- * @return {boolean} true if this element is a DragDrop handle, false
- * otherwise
- * @static
- */
- isHandle: function(sDDId, sHandleId) {
- return ( this.handleIds[sDDId] &&
- this.handleIds[sDDId][sHandleId] );
- },
+ /**
+ * Code that executes immediately before the onDragDrop event
+ * @method b4DragDrop
+ * @private
+ */
+ b4DragDrop: function(e) { },
- /**
- * Returns the DragDrop instance for a given id
- * @method getDDById
- * @param {String} id the id of the DragDrop object
- * @return {DragDrop} the drag drop object, null if it is not found
- * @static
- */
- getDDById: function(id) {
- for (var i in this.ids) {
- if (this.ids[i][id]) {
- return this.ids[i][id];
- }
- }
- return null;
- },
+ /**
+ * Abstract method called when this item is dropped on another DragDrop
+ * obj
+ * @method onDragDrop
+ * @param {Event} e the mouseup event
+ * @param {String|DragDrop[]} id In POINT mode, the element
+ * id this was dropped on. In INTERSECT mode, an array of dd items this
+ * was dropped on.
+ */
+ onDragDrop: function(e, id) { /* override this */ },
- /**
- * Fired after a registered DragDrop object gets the mousedown event.
- * Sets up the events required to track the object being dragged
- * @method handleMouseDown
- * @param {Event} e the event
- * @param oDD the DragDrop object being dragged
- * @private
- * @static
- */
- handleMouseDown: function(e, oDD) {
- if(Roo.QuickTips){
- Roo.QuickTips.disable();
- }
- this.currentTarget = e.getTarget();
+ /**
+ * Abstract method called when this item is dropped on an area with no
+ * drop target
+ * @method onInvalidDrop
+ * @param {Event} e the mouseup event
+ */
+ onInvalidDrop: function(e) { /* override this */ },
- this.dragCurrent = oDD;
+ /**
+ * Code that executes immediately before the endDrag event
+ * @method b4EndDrag
+ * @private
+ */
+ b4EndDrag: function(e) { },
- var el = oDD.getEl();
+ /**
+ * Fired when we are done dragging the object
+ * @method endDrag
+ * @param {Event} e the mouseup event
+ */
+ endDrag: function(e) { /* override this */ },
- // track start position
- this.startX = e.getPageX();
- this.startY = e.getPageY();
+ /**
+ * Code executed immediately before the onMouseDown event
+ * @method b4MouseDown
+ * @param {Event} e the mousedown event
+ * @private
+ */
+ b4MouseDown: function(e) { },
- this.deltaX = this.startX - el.offsetLeft;
- this.deltaY = this.startY - el.offsetTop;
+ /**
+ * Event handler that fires when a drag/drop obj gets a mousedown
+ * @method onMouseDown
+ * @param {Event} e the mousedown event
+ */
+ onMouseDown: function(e) { /* override this */ },
- this.dragThreshMet = false;
+ /**
+ * Event handler that fires when a drag/drop obj gets a mouseup
+ * @method onMouseUp
+ * @param {Event} e the mouseup event
+ */
+ onMouseUp: function(e) { /* override this */ },
- this.clickTimeout = setTimeout(
- function() {
- var DDM = Roo.dd.DDM;
- DDM.startDrag(DDM.startX, DDM.startY);
- },
- this.clickTimeThresh );
- },
+ /**
+ * Override the onAvailable method to do what is needed after the initial
+ * position was determined.
+ * @method onAvailable
+ */
+ onAvailable: function () {
+ },
- /**
- * Fired when either the drag pixel threshol or the mousedown hold
- * time threshold has been met.
- * @method startDrag
- * @param x {int} the X position of the original mousedown
- * @param y {int} the Y position of the original mousedown
- * @static
- */
- startDrag: function(x, y) {
- clearTimeout(this.clickTimeout);
- if (this.dragCurrent) {
- this.dragCurrent.b4StartDrag(x, y);
- this.dragCurrent.startDrag(x, y);
- }
- this.dragThreshMet = true;
- },
+ /*
+ * Provides default constraint padding to "constrainTo" elements (defaults to {left: 0, right:0, top:0, bottom:0}).
+ * @type Object
+ */
+ defaultPadding : {left:0, right:0, top:0, bottom:0},
- /**
- * Internal function to handle the mouseup event. Will be invoked
- * from the context of the document.
- * @method handleMouseUp
- * @param {Event} e the event
- * @private
- * @static
- */
- handleMouseUp: function(e) {
-
- if(Roo.QuickTips){
- Roo.QuickTips.enable();
- }
- if (! this.dragCurrent) {
- return;
- }
+ /*
+ * Initializes the drag drop object's constraints to restrict movement to a certain element.
+ *
+ * Usage:
+ <pre><code>
+ var dd = new Roo.dd.DDProxy("dragDiv1", "proxytest",
+ { dragElId: "existingProxyDiv" });
+ dd.startDrag = function(){
+ this.constrainTo("parent-id");
+ };
+ </code></pre>
+ * Or you can initalize it using the {@link Roo.Element} object:
+ <pre><code>
+ Roo.get("dragDiv1").initDDProxy("proxytest", {dragElId: "existingProxyDiv"}, {
+ startDrag : function(){
+ this.constrainTo("parent-id");
+ }
+ });
+ </code></pre>
+ * @param {String/HTMLElement/Element} constrainTo The element to constrain to.
+ * @param {Object/Number} pad (optional) Pad provides a way to specify "padding" of the constraints,
+ * and can be either a number for symmetrical padding (4 would be equal to {left:4, right:4, top:4, bottom:4}) or
+ * an object containing the sides to pad. For example: {right:10, bottom:10}
+ * @param {Boolean} inContent (optional) Constrain the draggable in the content box of the element (inside padding and borders)
+ */
+ constrainTo : function(constrainTo, pad, inContent){
+ if(typeof pad == "number"){
+ pad = {left: pad, right:pad, top:pad, bottom:pad};
+ }
+ pad = pad || this.defaultPadding;
+ var b = Roo.get(this.getEl()).getBox();
+ var ce = Roo.get(constrainTo);
+ var s = ce.getScroll();
+ var c, cd = ce.dom;
+ if(cd == document.body){
+ c = { x: s.left, y: s.top, width: Roo.lib.Dom.getViewWidth(), height: Roo.lib.Dom.getViewHeight()};
+ }else{
+ xy = ce.getXY();
+ c = {x : xy[0]+s.left, y: xy[1]+s.top, width: cd.clientWidth, height: cd.clientHeight};
+ }
- clearTimeout(this.clickTimeout);
- if (this.dragThreshMet) {
- this.fireEvents(e, true);
- } else {
- }
+ var topSpace = b.y - c.y;
+ var leftSpace = b.x - c.x;
- this.stopDrag(e);
+ this.resetConstraints();
+ this.setXConstraint(leftSpace - (pad.left||0), // left
+ c.width - leftSpace - b.width - (pad.right||0) //right
+ );
+ this.setYConstraint(topSpace - (pad.top||0), //top
+ c.height - topSpace - b.height - (pad.bottom||0) //bottom
+ );
+ },
- this.stopEvent(e);
- },
+ /**
+ * Returns a reference to the linked element
+ * @method getEl
+ * @return {HTMLElement} the html element
+ */
+ getEl: function() {
+ if (!this._domRef) {
+ this._domRef = Roo.getDom(this.id);
+ }
- /**
- * Utility to stop event propagation and event default, if these
- * features are turned on.
- * @method stopEvent
- * @param {Event} e the event as returned by this.getEvent()
- * @static
- */
- stopEvent: function(e){
- if(this.stopPropagation) {
- e.stopPropagation();
- }
+ return this._domRef;
+ },
- if (this.preventDefault) {
- e.preventDefault();
- }
- },
+ /**
+ * Returns a reference to the actual element to drag. By default this is
+ * the same as the html element, but it can be assigned to another
+ * element. An example of this can be found in Roo.dd.DDProxy
+ * @method getDragEl
+ * @return {HTMLElement} the html element
+ */
+ getDragEl: function() {
+ return Roo.getDom(this.dragElId);
+ },
- /**
- * Internal function to clean up event handlers after the drag
- * operation is complete
- * @method stopDrag
- * @param {Event} e the event
- * @private
- * @static
- */
- stopDrag: function(e) {
- // Fire the drag end event for the item that was dragged
- if (this.dragCurrent) {
- if (this.dragThreshMet) {
- this.dragCurrent.b4EndDrag(e);
- this.dragCurrent.endDrag(e);
- }
+ /**
+ * Sets up the DragDrop object. Must be called in the constructor of any
+ * Roo.dd.DragDrop subclass
+ * @method init
+ * @param id the id of the linked element
+ * @param {String} sGroup the group of related items
+ * @param {object} config configuration attributes
+ */
+ init: function(id, sGroup, config) {
+ this.initTarget(id, sGroup, config);
+ if (!Roo.isTouch) {
+ Event.on(this.id, "mousedown", this.handleMouseDown, this);
+ }
+ Event.on(this.id, "touchstart", this.handleMouseDown, this);
+ // Event.on(this.id, "selectstart", Event.preventDefault);
+ },
- this.dragCurrent.onMouseUp(e);
- }
+ /**
+ * Initializes Targeting functionality only... the object does not
+ * get a mousedown handler.
+ * @method initTarget
+ * @param id the id of the linked element
+ * @param {String} sGroup the group of related items
+ * @param {object} config configuration attributes
+ */
+ initTarget: function(id, sGroup, config) {
- this.dragCurrent = null;
- this.dragOvers = {};
- },
+ // configuration attributes
+ this.config = config || {};
- /**
- * Internal function to handle the mousemove event. Will be invoked
- * from the context of the html element.
- *
- * @TODO figure out what we can do about mouse events lost when the
- * user drags objects beyond the window boundary. Currently we can
- * detect this in internet explorer by verifying that the mouse is
- * down during the mousemove event. Firefox doesn't give us the
- * button state on the mousemove event.
- * @method handleMouseMove
- * @param {Event} e the event
- * @private
- * @static
- */
- handleMouseMove: function(e) {
- if (! this.dragCurrent) {
- return true;
- }
+ // create a local reference to the drag and drop manager
+ this.DDM = Roo.dd.DDM;
+ // initialize the groups array
+ this.groups = {};
- // var button = e.which || e.button;
+ // assume that we have an element reference instead of an id if the
+ // parameter is not a string
+ if (typeof id !== "string") {
+ id = Roo.id(id);
+ }
- // check for IE mouseup outside of page boundary
- if (Roo.isIE && (e.button !== 0 && e.button !== 1 && e.button !== 2)) {
- this.stopEvent(e);
- return this.handleMouseUp(e);
- }
+ // set the id
+ this.id = id;
- if (!this.dragThreshMet) {
- var diffX = Math.abs(this.startX - e.getPageX());
- var diffY = Math.abs(this.startY - e.getPageY());
- if (diffX > this.clickPixelThresh ||
- diffY > this.clickPixelThresh) {
- this.startDrag(this.startX, this.startY);
- }
- }
+ // add to an interaction group
+ this.addToGroup((sGroup) ? sGroup : "default");
- if (this.dragThreshMet) {
- this.dragCurrent.b4Drag(e);
- this.dragCurrent.onDrag(e);
- if(!this.dragCurrent.moveOnly){
- this.fireEvents(e, false);
- }
- }
+ // We don't want to register this as the handle with the manager
+ // so we just set the id rather than calling the setter.
+ this.handleElId = id;
- this.stopEvent(e);
+ // the linked element is the element that gets dragged by default
+ this.setDragElId(id);
- return true;
- },
+ // by default, clicked anchors will not start drag operations.
+ this.invalidHandleTypes = { A: "A" };
+ this.invalidHandleIds = {};
+ this.invalidHandleClasses = [];
- /**
- * Iterates over all of the DragDrop elements to find ones we are
- * hovering over or dropping on
- * @method fireEvents
- * @param {Event} e the event
- * @param {boolean} isDrop is this a drop op or a mouseover op?
- * @private
- * @static
- */
- fireEvents: function(e, isDrop) {
- var dc = this.dragCurrent;
+ this.applyConfig();
- // If the user did the mouse up outside of the window, we could
- // get here even though we have ended the drag.
- if (!dc || dc.isLocked()) {
- return;
- }
+ this.handleOnAvailable();
+ },
- var pt = e.getPoint();
+ /**
+ * Applies the configuration parameters that were passed into the constructor.
+ * This is supposed to happen at each level through the inheritance chain. So
+ * a DDProxy implentation will execute apply config on DDProxy, DD, and
+ * DragDrop in order to get all of the parameters that are available in
+ * each object.
+ * @method applyConfig
+ */
+ applyConfig: function() {
- // cache the previous dragOver array
- var oldOvers = [];
+ // configurable properties:
+ // padding, isTarget, maintainOffset, primaryButtonOnly
+ this.padding = this.config.padding || [0, 0, 0, 0];
+ this.isTarget = (this.config.isTarget !== false);
+ this.maintainOffset = (this.config.maintainOffset);
+ this.primaryButtonOnly = (this.config.primaryButtonOnly !== false);
- var outEvts = [];
- var overEvts = [];
- var dropEvts = [];
- var enterEvts = [];
+ },
- // Check to see if the object(s) we were hovering over is no longer
- // being hovered over so we can fire the onDragOut event
- for (var i in this.dragOvers) {
+ /**
+ * Executed when the linked element is available
+ * @method handleOnAvailable
+ * @private
+ */
+ handleOnAvailable: function() {
+ this.available = true;
+ this.resetConstraints();
+ this.onAvailable();
+ },
- var ddo = this.dragOvers[i];
+ /**
+ * Configures the padding for the target zone in px. Effectively expands
+ * (or reduces) the virtual object size for targeting calculations.
+ * Supports css-style shorthand; if only one parameter is passed, all sides
+ * will have that padding, and if only two are passed, the top and bottom
+ * will have the first param, the left and right the second.
+ * @method setPadding
+ * @param {int} iTop Top pad
+ * @param {int} iRight Right pad
+ * @param {int} iBot Bot pad
+ * @param {int} iLeft Left pad
+ */
+ setPadding: function(iTop, iRight, iBot, iLeft) {
+ // this.padding = [iLeft, iRight, iTop, iBot];
+ if (!iRight && 0 !== iRight) {
+ this.padding = [iTop, iTop, iTop, iTop];
+ } else if (!iBot && 0 !== iBot) {
+ this.padding = [iTop, iRight, iTop, iRight];
+ } else {
+ this.padding = [iTop, iRight, iBot, iLeft];
+ }
+ },
- if (! this.isTypeOfDD(ddo)) {
- continue;
- }
+ /**
+ * Stores the initial placement of the linked element.
+ * @method setInitialPosition
+ * @param {int} diffX the X offset, default 0
+ * @param {int} diffY the Y offset, default 0
+ */
+ setInitPosition: function(diffX, diffY) {
+ var el = this.getEl();
- if (! this.isOverTarget(pt, ddo, this.mode)) {
- outEvts.push( ddo );
- }
+ if (!this.DDM.verifyEl(el)) {
+ return;
+ }
- oldOvers[i] = true;
- delete this.dragOvers[i];
- }
+ var dx = diffX || 0;
+ var dy = diffY || 0;
- for (var sGroup in dc.groups) {
+ var p = Dom.getXY( el );
- if ("string" != typeof sGroup) {
- continue;
- }
+ this.initPageX = p[0] - dx;
+ this.initPageY = p[1] - dy;
- for (i in this.ids[sGroup]) {
- var oDD = this.ids[sGroup][i];
- if (! this.isTypeOfDD(oDD)) {
- continue;
- }
+ this.lastPageX = p[0];
+ this.lastPageY = p[1];
- if (oDD.isTarget && !oDD.isLocked() && oDD != dc) {
- if (this.isOverTarget(pt, oDD, this.mode)) {
- // look for drop interactions
- if (isDrop) {
- dropEvts.push( oDD );
- // look for drag enter and drag over interactions
- } else {
- // initial drag over: dragEnter fires
- if (!oldOvers[oDD.id]) {
- enterEvts.push( oDD );
- // subsequent drag overs: dragOver fires
- } else {
- overEvts.push( oDD );
- }
+ this.setStartPosition(p);
+ },
- this.dragOvers[oDD.id] = oDD;
- }
- }
- }
- }
- }
+ /**
+ * Sets the start position of the element. This is set when the obj
+ * is initialized, the reset when a drag is started.
+ * @method setStartPosition
+ * @param pos current position (from previous lookup)
+ * @private
+ */
+ setStartPosition: function(pos) {
+ var p = pos || Dom.getXY( this.getEl() );
+ this.deltaSetXY = null;
- if (this.mode) {
- if (outEvts.length) {
- dc.b4DragOut(e, outEvts);
- dc.onDragOut(e, outEvts);
- }
+ this.startPageX = p[0];
+ this.startPageY = p[1];
+ },
- if (enterEvts.length) {
- dc.onDragEnter(e, enterEvts);
- }
+ /**
+ * Add this instance to a group of related drag/drop objects. All
+ * instances belong to at least one group, and can belong to as many
+ * groups as needed.
+ * @method addToGroup
+ * @param sGroup {string} the name of the group
+ */
+ addToGroup: function(sGroup) {
+ this.groups[sGroup] = true;
+ this.DDM.regDragDrop(this, sGroup);
+ },
- if (overEvts.length) {
- dc.b4DragOver(e, overEvts);
- dc.onDragOver(e, overEvts);
- }
+ /**
+ * Remove's this instance from the supplied interaction group
+ * @method removeFromGroup
+ * @param {string} sGroup The group to drop
+ */
+ removeFromGroup: function(sGroup) {
+ if (this.groups[sGroup]) {
+ delete this.groups[sGroup];
+ }
- if (dropEvts.length) {
- dc.b4DragDrop(e, dropEvts);
- dc.onDragDrop(e, dropEvts);
- }
+ this.DDM.removeDDFromGroup(this, sGroup);
+ },
- } else {
- // fire dragout events
- var len = 0;
- for (i=0, len=outEvts.length; i<len; ++i) {
- dc.b4DragOut(e, outEvts[i].id);
- dc.onDragOut(e, outEvts[i].id);
- }
+ /**
+ * Allows you to specify that an element other than the linked element
+ * will be moved with the cursor during a drag
+ * @method setDragElId
+ * @param id {string} the id of the element that will be used to initiate the drag
+ */
+ setDragElId: function(id) {
+ this.dragElId = id;
+ },
- // fire enter events
- for (i=0,len=enterEvts.length; i<len; ++i) {
- // dc.b4DragEnter(e, oDD.id);
- dc.onDragEnter(e, enterEvts[i].id);
- }
+ /**
+ * Allows you to specify a child of the linked element that should be
+ * used to initiate the drag operation. An example of this would be if
+ * you have a content div with text and links. Clicking anywhere in the
+ * content area would normally start the drag operation. Use this method
+ * to specify that an element inside of the content div is the element
+ * that starts the drag operation.
+ * @method setHandleElId
+ * @param id {string} the id of the element that will be used to
+ * initiate the drag.
+ */
+ setHandleElId: function(id) {
+ if (typeof id !== "string") {
+ id = Roo.id(id);
+ }
+ this.handleElId = id;
+ this.DDM.regHandle(this.id, id);
+ },
- // fire over events
- for (i=0,len=overEvts.length; i<len; ++i) {
- dc.b4DragOver(e, overEvts[i].id);
- dc.onDragOver(e, overEvts[i].id);
- }
+ /**
+ * Allows you to set an element outside of the linked element as a drag
+ * handle
+ * @method setOuterHandleElId
+ * @param id the id of the element that will be used to initiate the drag
+ */
+ setOuterHandleElId: function(id) {
+ if (typeof id !== "string") {
+ id = Roo.id(id);
+ }
+ Event.on(id, "mousedown",
+ this.handleMouseDown, this);
+ this.setHandleElId(id);
- // fire drop events
- for (i=0, len=dropEvts.length; i<len; ++i) {
- dc.b4DragDrop(e, dropEvts[i].id);
- dc.onDragDrop(e, dropEvts[i].id);
- }
+ this.hasOuterHandles = true;
+ },
- }
+ /**
+ * Remove all drag and drop hooks for this element
+ * @method unreg
+ */
+ unreg: function() {
+ Event.un(this.id, "mousedown",
+ this.handleMouseDown);
+ Event.un(this.id, "touchstart",
+ this.handleMouseDown);
+ this._domRef = null;
+ this.DDM._remove(this);
+ },
- // notify about a drop that did not find a target
- if (isDrop && !dropEvts.length) {
- dc.onInvalidDrop(e);
- }
+ destroy : function(){
+ this.unreg();
+ },
- },
+ /**
+ * Returns true if this instance is locked, or the drag drop mgr is locked
+ * (meaning that all drag/drop is disabled on the page.)
+ * @method isLocked
+ * @return {boolean} true if this obj or all drag/drop is locked, else
+ * false
+ */
+ isLocked: function() {
+ return (this.DDM.isLocked() || this.locked);
+ },
- /**
- * Helper function for getting the best match from the list of drag
- * and drop objects returned by the drag and drop events when we are
- * in INTERSECT mode. It returns either the first object that the
- * cursor is over, or the object that has the greatest overlap with
- * the dragged element.
- * @method getBestMatch
- * @param {DragDrop[]} dds The array of drag and drop objects
- * targeted
- * @return {DragDrop} The best single match
- * @static
- */
- getBestMatch: function(dds) {
- var winner = null;
- // Return null if the input is not what we expect
- //if (!dds || !dds.length || dds.length == 0) {
- // winner = null;
- // If there is only one item, it wins
- //} else if (dds.length == 1) {
+ /**
+ * Fired when this object is clicked
+ * @method handleMouseDown
+ * @param {Event} e
+ * @param {Roo.dd.DragDrop} oDD the clicked dd object (this dd obj)
+ * @private
+ */
+ handleMouseDown: function(e, oDD){
+
+ if (!Roo.isTouch && this.primaryButtonOnly && e.button != 0) {
+ //Roo.log('not touch/ button !=0');
+ return;
+ }
+ if (e.browserEvent.touches && e.browserEvent.touches.length != 1) {
+ return; // double touch..
+ }
+
- var len = dds.length;
+ if (this.isLocked()) {
+ //Roo.log('locked');
+ return;
+ }
- if (len == 1) {
- winner = dds[0];
+ this.DDM.refreshCache(this.groups);
+// Roo.log([Roo.lib.Event.getPageX(e), Roo.lib.Event.getPageY(e)]);
+ var pt = new Roo.lib.Point(Roo.lib.Event.getPageX(e), Roo.lib.Event.getPageY(e));
+ if (!this.hasOuterHandles && !this.DDM.isOverTarget(pt, this) ) {
+ //Roo.log('no outer handes or not over target');
+ // do nothing.
+ } else {
+// Roo.log('check validator');
+ if (this.clickValidator(e)) {
+// Roo.log('validate success');
+ // set the initial element position
+ this.setStartPosition();
+
+
+ this.b4MouseDown(e);
+ this.onMouseDown(e);
+
+ this.DDM.handleMouseDown(e, this);
+
+ this.DDM.stopEvent(e);
} else {
- // Loop through the targeted items
- for (var i=0; i<len; ++i) {
- var dd = dds[i];
- // If the cursor is over the object, it wins. If the
- // cursor is over multiple matches, the first one we come
- // to wins.
- if (dd.cursorIsOver) {
- winner = dd;
- break;
- // Otherwise the object with the most overlap wins
- } else {
- if (!winner ||
- winner.overlap.getArea() < dd.overlap.getArea()) {
- winner = dd;
- }
- }
- }
+
+
}
+ }
+ },
- return winner;
- },
+ clickValidator: function(e) {
+ var target = e.getTarget();
+ return ( this.isValidHandleChild(target) &&
+ (this.id == this.handleElId ||
+ this.DDM.handleWasClicked(target, this.id)) );
+ },
- /**
- * Refreshes the cache of the top-left and bottom-right points of the
- * drag and drop objects in the specified group(s). This is in the
- * format that is stored in the drag and drop instance, so typical
- * usage is:
- * <code>
- * Roo.dd.DragDropMgr.refreshCache(ddinstance.groups);
- * </code>
- * Alternatively:
- * <code>
- * Roo.dd.DragDropMgr.refreshCache({group1:true, group2:true});
- * </code>
- * @TODO this really should be an indexed array. Alternatively this
- * method could accept both.
- * @method refreshCache
- * @param {Object} groups an associative array of groups to refresh
- * @static
- */
- refreshCache: function(groups) {
- for (var sGroup in groups) {
- if ("string" != typeof sGroup) {
- continue;
- }
- for (var i in this.ids[sGroup]) {
- var oDD = this.ids[sGroup][i];
+ /**
+ * Allows you to specify a tag name that should not start a drag operation
+ * when clicked. This is designed to facilitate embedding links within a
+ * drag handle that do something other than start the drag.
+ * @method addInvalidHandleType
+ * @param {string} tagName the type of element to exclude
+ */
+ addInvalidHandleType: function(tagName) {
+ var type = tagName.toUpperCase();
+ this.invalidHandleTypes[type] = type;
+ },
- if (this.isTypeOfDD(oDD)) {
- // if (this.isTypeOfDD(oDD) && oDD.isTarget) {
- var loc = this.getLocation(oDD);
- if (loc) {
- this.locationCache[oDD.id] = loc;
- } else {
- delete this.locationCache[oDD.id];
- // this will unregister the drag and drop object if
- // the element is not in a usable state
- // oDD.unreg();
- }
- }
- }
- }
- },
+ /**
+ * Lets you to specify an element id for a child of a drag handle
+ * that should not initiate a drag
+ * @method addInvalidHandleId
+ * @param {string} id the element id of the element you wish to ignore
+ */
+ addInvalidHandleId: function(id) {
+ if (typeof id !== "string") {
+ id = Roo.id(id);
+ }
+ this.invalidHandleIds[id] = id;
+ },
- /**
- * This checks to make sure an element exists and is in the DOM. The
- * main purpose is to handle cases where innerHTML is used to remove
- * drag and drop objects from the DOM. IE provides an 'unspecified
- * error' when trying to access the offsetParent of such an element
- * @method verifyEl
- * @param {HTMLElement} el the element to check
- * @return {boolean} true if the element looks usable
- * @static
- */
- verifyEl: function(el) {
- if (el) {
- var parent;
- if(Roo.isIE){
- try{
- parent = el.offsetParent;
- }catch(e){}
- }else{
- parent = el.offsetParent;
- }
- if (parent) {
- return true;
- }
- }
+ /**
+ * Lets you specify a css class of elements that will not initiate a drag
+ * @method addInvalidHandleClass
+ * @param {string} cssClass the class of the elements you wish to ignore
+ */
+ addInvalidHandleClass: function(cssClass) {
+ this.invalidHandleClasses.push(cssClass);
+ },
- return false;
- },
+ /**
+ * Unsets an excluded tag name set by addInvalidHandleType
+ * @method removeInvalidHandleType
+ * @param {string} tagName the type of element to unexclude
+ */
+ removeInvalidHandleType: function(tagName) {
+ var type = tagName.toUpperCase();
+ // this.invalidHandleTypes[type] = null;
+ delete this.invalidHandleTypes[type];
+ },
- /**
- * Returns a Region object containing the drag and drop element's position
- * and size, including the padding configured for it
- * @method getLocation
- * @param {DragDrop} oDD the drag and drop object to get the
- * location for
- * @return {Roo.lib.Region} a Region object representing the total area
- * the element occupies, including any padding
- * the instance is configured for.
- * @static
- */
- getLocation: function(oDD) {
- if (! this.isTypeOfDD(oDD)) {
- return null;
+ /**
+ * Unsets an invalid handle id
+ * @method removeInvalidHandleId
+ * @param {string} id the id of the element to re-enable
+ */
+ removeInvalidHandleId: function(id) {
+ if (typeof id !== "string") {
+ id = Roo.id(id);
+ }
+ delete this.invalidHandleIds[id];
+ },
+
+ /**
+ * Unsets an invalid css class
+ * @method removeInvalidHandleClass
+ * @param {string} cssClass the class of the element(s) you wish to
+ * re-enable
+ */
+ removeInvalidHandleClass: function(cssClass) {
+ for (var i=0, len=this.invalidHandleClasses.length; i<len; ++i) {
+ if (this.invalidHandleClasses[i] == cssClass) {
+ delete this.invalidHandleClasses[i];
}
+ }
+ },
- var el = oDD.getEl(), pos, x1, x2, y1, y2, t, r, b, l;
+ /**
+ * Checks the tag exclusion list to see if this click should be ignored
+ * @method isValidHandleChild
+ * @param {HTMLElement} node the HTMLElement to evaluate
+ * @return {boolean} true if this is a valid tag type, false if not
+ */
+ isValidHandleChild: function(node) {
- try {
- pos= Roo.lib.Dom.getXY(el);
- } catch (e) { }
+ var valid = true;
+ // var n = (node.nodeName == "#text") ? node.parentNode : node;
+ var nodeName;
+ try {
+ nodeName = node.nodeName.toUpperCase();
+ } catch(e) {
+ nodeName = node.nodeName;
+ }
+ valid = valid && !this.invalidHandleTypes[nodeName];
+ valid = valid && !this.invalidHandleIds[node.id];
- if (!pos) {
- return null;
- }
+ for (var i=0, len=this.invalidHandleClasses.length; valid && i<len; ++i) {
+ valid = !Dom.hasClass(node, this.invalidHandleClasses[i]);
+ }
- x1 = pos[0];
- x2 = x1 + el.offsetWidth;
- y1 = pos[1];
- y2 = y1 + el.offsetHeight;
- t = y1 - oDD.padding[0];
- r = x2 + oDD.padding[1];
- b = y2 + oDD.padding[2];
- l = x1 - oDD.padding[3];
+ return valid;
- return new Roo.lib.Region( t, r, b, l );
- },
+ },
- /**
- * Checks the cursor location to see if it over the target
- * @method isOverTarget
- * @param {Roo.lib.Point} pt The point to evaluate
- * @param {DragDrop} oTarget the DragDrop object we are inspecting
- * @return {boolean} true if the mouse is over the target
- * @private
- * @static
- */
- isOverTarget: function(pt, oTarget, intersect) {
- // use cache if available
- var loc = this.locationCache[oTarget.id];
- if (!loc || !this.useCache) {
- loc = this.getLocation(oTarget);
- this.locationCache[oTarget.id] = loc;
+ /**
+ * Create the array of horizontal tick marks if an interval was specified
+ * in setXConstraint().
+ * @method setXTicks
+ * @private
+ */
+ setXTicks: function(iStartX, iTickSize) {
+ this.xTicks = [];
+ this.xTickSize = iTickSize;
+
+ var tickMap = {};
+ for (var i = this.initPageX; i >= this.minX; i = i - iTickSize) {
+ if (!tickMap[i]) {
+ this.xTicks[this.xTicks.length] = i;
+ tickMap[i] = true;
}
+ }
- if (!loc) {
- return false;
+ for (i = this.initPageX; i <= this.maxX; i = i + iTickSize) {
+ if (!tickMap[i]) {
+ this.xTicks[this.xTicks.length] = i;
+ tickMap[i] = true;
}
+ }
- oTarget.cursorIsOver = loc.contains( pt );
+ this.xTicks.sort(this.DDM.numericSort) ;
+ },
- // DragDrop is using this as a sanity check for the initial mousedown
- // in this case we are done. In POINT mode, if the drag obj has no
- // contraints, we are also done. Otherwise we need to evaluate the
- // location of the target as related to the actual location of the
- // dragged element.
- var dc = this.dragCurrent;
- if (!dc || !dc.getTargetCoord ||
- (!intersect && !dc.constrainX && !dc.constrainY)) {
- return oTarget.cursorIsOver;
+ /**
+ * Create the array of vertical tick marks if an interval was specified in
+ * setYConstraint().
+ * @method setYTicks
+ * @private
+ */
+ setYTicks: function(iStartY, iTickSize) {
+ this.yTicks = [];
+ this.yTickSize = iTickSize;
+
+ var tickMap = {};
+
+ for (var i = this.initPageY; i >= this.minY; i = i - iTickSize) {
+ if (!tickMap[i]) {
+ this.yTicks[this.yTicks.length] = i;
+ tickMap[i] = true;
}
+ }
- oTarget.overlap = null;
+ for (i = this.initPageY; i <= this.maxY; i = i + iTickSize) {
+ if (!tickMap[i]) {
+ this.yTicks[this.yTicks.length] = i;
+ tickMap[i] = true;
+ }
+ }
- // Get the current location of the drag element, this is the
- // location of the mouse event less the delta that represents
- // where the original mousedown happened on the element. We
- // need to consider constraints and ticks as well.
- var pos = dc.getTargetCoord(pt.x, pt.y);
+ this.yTicks.sort(this.DDM.numericSort) ;
+ },
- var el = dc.getDragEl();
- var curRegion = new Roo.lib.Region( pos.y,
- pos.x + el.offsetWidth,
- pos.y + el.offsetHeight,
- pos.x );
+ /**
+ * By default, the element can be dragged any place on the screen. Use
+ * this method to limit the horizontal travel of the element. Pass in
+ * 0,0 for the parameters if you want to lock the drag to the y axis.
+ * @method setXConstraint
+ * @param {int} iLeft the number of pixels the element can move to the left
+ * @param {int} iRight the number of pixels the element can move to the
+ * right
+ * @param {int} iTickSize optional parameter for specifying that the
+ * element
+ * should move iTickSize pixels at a time.
+ */
+ setXConstraint: function(iLeft, iRight, iTickSize) {
+ this.leftConstraint = iLeft;
+ this.rightConstraint = iRight;
- var overlap = curRegion.intersect(loc);
+ this.minX = this.initPageX - iLeft;
+ this.maxX = this.initPageX + iRight;
+ if (iTickSize) { this.setXTicks(this.initPageX, iTickSize); }
- if (overlap) {
- oTarget.overlap = overlap;
- return (intersect) ? true : oTarget.cursorIsOver;
- } else {
- return false;
- }
- },
+ this.constrainX = true;
+ },
- /**
- * unload event handler
- * @method _onUnload
- * @private
- * @static
- */
- _onUnload: function(e, me) {
- Roo.dd.DragDropMgr.unregAll();
- },
+ /**
+ * Clears any constraints applied to this instance. Also clears ticks
+ * since they can't exist independent of a constraint at this time.
+ * @method clearConstraints
+ */
+ clearConstraints: function() {
+ this.constrainX = false;
+ this.constrainY = false;
+ this.clearTicks();
+ },
- /**
- * Cleans up the drag and drop events and objects.
- * @method unregAll
- * @private
- * @static
- */
- unregAll: function() {
+ /**
+ * Clears any tick interval defined for this instance
+ * @method clearTicks
+ */
+ clearTicks: function() {
+ this.xTicks = null;
+ this.yTicks = null;
+ this.xTickSize = 0;
+ this.yTickSize = 0;
+ },
- if (this.dragCurrent) {
- this.stopDrag();
- this.dragCurrent = null;
- }
+ /**
+ * By default, the element can be dragged any place on the screen. Set
+ * this to limit the vertical travel of the element. Pass in 0,0 for the
+ * parameters if you want to lock the drag to the x axis.
+ * @method setYConstraint
+ * @param {int} iUp the number of pixels the element can move up
+ * @param {int} iDown the number of pixels the element can move down
+ * @param {int} iTickSize optional parameter for specifying that the
+ * element should move iTickSize pixels at a time.
+ */
+ setYConstraint: function(iUp, iDown, iTickSize) {
+ this.topConstraint = iUp;
+ this.bottomConstraint = iDown;
- this._execOnAll("unreg", []);
+ this.minY = this.initPageY - iUp;
+ this.maxY = this.initPageY + iDown;
+ if (iTickSize) { this.setYTicks(this.initPageY, iTickSize); }
- for (i in this.elementCache) {
- delete this.elementCache[i];
- }
+ this.constrainY = true;
- this.elementCache = {};
- this.ids = {};
- },
+ },
- /**
- * A cache of DOM elements
- * @property elementCache
- * @private
- * @static
- */
- elementCache: {},
+ /**
+ * resetConstraints must be called if you manually reposition a dd element.
+ * @method resetConstraints
+ * @param {boolean} maintainOffset
+ */
+ resetConstraints: function() {
- /**
- * Get the wrapper for the DOM element specified
- * @method getElWrapper
- * @param {String} id the id of the element to get
- * @return {Roo.dd.DDM.ElementWrapper} the wrapped element
- * @private
- * @deprecated This wrapper isn't that useful
- * @static
- */
- getElWrapper: function(id) {
- var oWrapper = this.elementCache[id];
- if (!oWrapper || !oWrapper.el) {
- oWrapper = this.elementCache[id] =
- new this.ElementWrapper(Roo.getDom(id));
- }
- return oWrapper;
- },
- /**
- * Returns the actual DOM element
- * @method getElement
- * @param {String} id the id of the elment to get
- * @return {Object} The element
- * @deprecated use Roo.getDom instead
- * @static
- */
- getElement: function(id) {
- return Roo.getDom(id);
- },
+ // Maintain offsets if necessary
+ if (this.initPageX || this.initPageX === 0) {
+ // figure out how much this thing has moved
+ var dx = (this.maintainOffset) ? this.lastPageX - this.initPageX : 0;
+ var dy = (this.maintainOffset) ? this.lastPageY - this.initPageY : 0;
- /**
- * Returns the style property for the DOM element (i.e.,
- * document.getElById(id).style)
- * @method getCss
- * @param {String} id the id of the elment to get
- * @return {Object} The style property of the element
- * @deprecated use Roo.getDom instead
- * @static
- */
- getCss: function(id) {
- var el = Roo.getDom(id);
- return (el) ? el.style : null;
- },
+ this.setInitPosition(dx, dy);
- /**
- * Inner class for cached elements
- * @class DragDropMgr.ElementWrapper
- * @for DragDropMgr
- * @private
- * @deprecated
- */
- ElementWrapper: function(el) {
- /**
- * The element
- * @property el
- */
- this.el = el || null;
- /**
- * The element id
- * @property id
- */
- this.id = this.el && el.id;
- /**
- * A reference to the style property
- * @property css
- */
- this.css = this.el && el.style;
- },
+ // This is the first time we have detected the element's position
+ } else {
+ this.setInitPosition();
+ }
+
+ if (this.constrainX) {
+ this.setXConstraint( this.leftConstraint,
+ this.rightConstraint,
+ this.xTickSize );
+ }
+
+ if (this.constrainY) {
+ this.setYConstraint( this.topConstraint,
+ this.bottomConstraint,
+ this.yTickSize );
+ }
+ },
+
+ /**
+ * Normally the drag element is moved pixel by pixel, but we can specify
+ * that it move a number of pixels at a time. This method resolves the
+ * location when we have it set up like this.
+ * @method getTick
+ * @param {int} val where we want to place the object
+ * @param {int[]} tickArray sorted array of valid points
+ * @return {int} the closest tick
+ * @private
+ */
+ getTick: function(val, tickArray) {
+
+ if (!tickArray) {
+ // If tick interval is not defined, it is effectively 1 pixel,
+ // so we return the value passed to us.
+ return val;
+ } else if (tickArray[0] >= val) {
+ // The value is lower than the first tick, so we return the first
+ // tick.
+ return tickArray[0];
+ } else {
+ for (var i=0, len=tickArray.length; i<len; ++i) {
+ var next = i + 1;
+ if (tickArray[next] && tickArray[next] >= val) {
+ var diff1 = val - tickArray[i];
+ var diff2 = tickArray[next] - val;
+ return (diff2 > diff1) ? tickArray[i] : tickArray[next];
+ }
+ }
+
+ // The value is larger than the last tick, so we return the last
+ // tick.
+ return tickArray[tickArray.length - 1];
+ }
+ },
+
+ /**
+ * toString method
+ * @method toString
+ * @return {string} string representation of the dd obj
+ */
+ toString: function() {
+ return ("DragDrop " + this.id);
+ }
+
+});
+
+})();
+/*
+ * 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">
+ */
+
+
+/**
+ * The drag and drop utility provides a framework for building drag and drop
+ * applications. In addition to enabling drag and drop for specific elements,
+ * the drag and drop elements are tracked by the manager class, and the
+ * interactions between the various elements are tracked during the drag and
+ * the implementing code is notified about these important moments.
+ */
+
+// Only load the library once. Rewriting the manager class would orphan
+// existing drag and drop instances.
+if (!Roo.dd.DragDropMgr) {
+
+/**
+ * @class Roo.dd.DragDropMgr
+ * DragDropMgr is a singleton that tracks the element interaction for
+ * all DragDrop items in the window. Generally, you will not call
+ * this class directly, but it does have helper methods that could
+ * be useful in your DragDrop implementations.
+ * @static
+ */
+Roo.dd.DragDropMgr = function() {
+
+ var Event = Roo.EventManager;
+
+ return {
/**
- * Returns the X position of an html element
- * @method getPosX
- * @param el the element for which to get the position
- * @return {int} the X coordinate
- * @for DragDropMgr
- * @deprecated use Roo.lib.Dom.getX instead
+ * Two dimensional Array of registered DragDrop objects. The first
+ * dimension is the DragDrop item group, the second the DragDrop
+ * object.
+ * @property ids
+ * @type {string: string}
+ * @private
* @static
*/
- getPosX: function(el) {
- return Roo.lib.Dom.getX(el);
- },
+ ids: {},
/**
- * Returns the Y position of an html element
- * @method getPosY
- * @param el the element for which to get the position
- * @return {int} the Y coordinate
- * @deprecated use Roo.lib.Dom.getY instead
+ * Array of element ids defined as drag handles. Used to determine
+ * if the element that generated the mousedown event is actually the
+ * handle and not the html element itself.
+ * @property handleIds
+ * @type {string: string}
+ * @private
* @static
*/
- getPosY: function(el) {
- return Roo.lib.Dom.getY(el);
- },
+ handleIds: {},
/**
- * Swap two nodes. In IE, we use the native method, for others we
- * emulate the IE behavior
- * @method swapNode
- * @param n1 the first node to swap
- * @param n2 the other node to swap
+ * the DragDrop object that is currently being dragged
+ * @property dragCurrent
+ * @type DragDrop
+ * @private
+ * @static
+ **/
+ dragCurrent: null,
+
+ /**
+ * the DragDrop object(s) that are being hovered over
+ * @property dragOvers
+ * @type Array
+ * @private
* @static
*/
- swapNode: function(n1, n2) {
- if (n1.swapNode) {
- n1.swapNode(n2);
- } else {
- var p = n2.parentNode;
- var s = n2.nextSibling;
+ dragOvers: {},
- if (s == n1) {
- p.insertBefore(n1, n2);
- } else if (n2 == n1.nextSibling) {
- p.insertBefore(n2, n1);
- } else {
- n1.parentNode.replaceChild(n2, n1);
- p.insertBefore(n1, s);
- }
- }
- },
+ /**
+ * the X distance between the cursor and the object being dragged
+ * @property deltaX
+ * @type int
+ * @private
+ * @static
+ */
+ deltaX: 0,
/**
- * Returns the current scroll position
- * @method getScroll
+ * the Y distance between the cursor and the object being dragged
+ * @property deltaY
+ * @type int
* @private
* @static
*/
- getScroll: function () {
- var t, l, dde=document.documentElement, db=document.body;
- if (dde && (dde.scrollTop || dde.scrollLeft)) {
- t = dde.scrollTop;
- l = dde.scrollLeft;
- } else if (db) {
- t = db.scrollTop;
- l = db.scrollLeft;
- } else {
+ deltaY: 0,
- }
- return { top: t, left: l };
- },
+ /**
+ * Flag to determine if we should prevent the default behavior of the
+ * events we define. By default this is true, but this can be set to
+ * false if you need the default behavior (not recommended)
+ * @property preventDefault
+ * @type boolean
+ * @static
+ */
+ preventDefault: true,
/**
- * Returns the specified element style property
- * @method getStyle
- * @param {HTMLElement} el the element
- * @param {string} styleProp the style property
- * @return {string} The value of the style property
- * @deprecated use Roo.lib.Dom.getStyle
+ * Flag to determine if we should stop the propagation of the events
+ * we generate. This is true by default but you may want to set it to
+ * false if the html element contains other features that require the
+ * mouse click.
+ * @property stopPropagation
+ * @type boolean
* @static
*/
- getStyle: function(el, styleProp) {
- return Roo.fly(el).getStyle(styleProp);
- },
+ stopPropagation: true,
/**
- * Gets the scrollTop
- * @method getScrollTop
- * @return {int} the document's scrollTop
+ * Internal flag that is set to true when drag and drop has been
+ * intialized
+ * @property initialized
+ * @private
* @static
*/
- getScrollTop: function () { return this.getScroll().top; },
+ initalized: false,
/**
- * Gets the scrollLeft
- * @method getScrollLeft
- * @return {int} the document's scrollTop
+ * All drag and drop can be disabled.
+ * @property locked
+ * @private
* @static
*/
- getScrollLeft: function () { return this.getScroll().left; },
+ locked: false,
/**
- * Sets the x/y position of an element to the location of the
- * target element.
- * @method moveToEl
- * @param {HTMLElement} moveEl The element to move
- * @param {HTMLElement} targetEl The position reference element
+ * Called the first time an element is registered.
+ * @method init
+ * @private
* @static
*/
- moveToEl: function (moveEl, targetEl) {
- var aCoord = Roo.lib.Dom.getXY(targetEl);
- Roo.lib.Dom.setXY(moveEl, aCoord);
+ init: function() {
+ this.initialized = true;
},
/**
- * Numeric array sort function
- * @method numericSort
+ * In point mode, drag and drop interaction is defined by the
+ * location of the cursor during the drag/drop
+ * @property POINT
+ * @type int
* @static
*/
- numericSort: function(a, b) { return (a - b); },
+ POINT: 0,
/**
- * Internal counter
- * @property _timeoutCount
- * @private
+ * In intersect mode, drag and drop interactio nis defined by the
+ * overlap of two or more drag and drop objects.
+ * @property INTERSECT
+ * @type int
* @static
*/
- _timeoutCount: 0,
+ INTERSECT: 1,
/**
- * Trying to make the load order less important. Without this we get
- * an error if this file is loaded before the Event Utility.
- * @method _addListeners
+ * The current drag and drop mode. Default: POINT
+ * @property mode
+ * @type int
+ * @static
+ */
+ mode: 0,
+
+ /**
+ * Runs method on all drag and drop objects
+ * @method _execOnAll
* @private
* @static
*/
- _addListeners: function() {
- var DDM = Roo.dd.DDM;
- if ( Roo.lib.Event && document ) {
- DDM._onLoad();
- } else {
- if (DDM._timeoutCount > 2000) {
- } else {
- setTimeout(DDM._addListeners, 10);
- if (document && document.body) {
- DDM._timeoutCount += 1;
+ _execOnAll: function(sMethod, args) {
+ for (var i in this.ids) {
+ for (var j in this.ids[i]) {
+ var oDD = this.ids[i][j];
+ if (! this.isTypeOfDD(oDD)) {
+ continue;
}
+ oDD[sMethod].apply(oDD, args);
}
}
},
/**
- * Recursively searches the immediate parent and all child nodes for
- * the handle element in order to determine wheter or not it was
- * clicked.
- * @method handleWasClicked
- * @param node the html element to inspect
+ * Drag and drop initialization. Sets up the global event handlers
+ * @method _onLoad
+ * @private
* @static
*/
- handleWasClicked: function(node, id) {
- if (this.isHandle(id, node.id)) {
- return true;
- } else {
- // check to see if this is a text node child of the one we want
- var p = node.parentNode;
+ _onLoad: function() {
- while (p) {
- if (this.isHandle(id, p.id)) {
- return true;
- } else {
- p = p.parentNode;
- }
- }
- }
+ this.init();
- return false;
- }
+ if (!Roo.isTouch) {
+ Event.on(document, "mouseup", this.handleMouseUp, this, true);
+ Event.on(document, "mousemove", this.handleMouseMove, this, true);
+ }
+ Event.on(document, "touchend", this.handleMouseUp, this, true);
+ Event.on(document, "touchmove", this.handleMouseMove, this, true);
+
+ Event.on(window, "unload", this._onUnload, this, true);
+ Event.on(window, "resize", this._onResize, this, true);
+ // Event.on(window, "mouseout", this._test);
- };
+ },
-}();
+ /**
+ * Reset constraints on all drag and drop objs
+ * @method _onResize
+ * @private
+ * @static
+ */
+ _onResize: function(e) {
+ this._execOnAll("resetConstraints", []);
+ },
-// shorter alias, save a few bytes
-Roo.dd.DDM = Roo.dd.DragDropMgr;
-Roo.dd.DDM._addListeners();
+ /**
+ * Lock all drag and drop functionality
+ * @method lock
+ * @static
+ */
+ lock: function() { this.locked = 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">
- */
+ /**
+ * Unlock all drag and drop functionality
+ * @method unlock
+ * @static
+ */
+ unlock: function() { this.locked = false; },
-/**
- * @class Roo.dd.DD
- * A DragDrop implementation where the linked element follows the
- * mouse cursor during a drag.
- * @extends Roo.dd.DragDrop
- * @constructor
- * @param {String} id the id of the linked element
- * @param {String} sGroup the group of related DragDrop items
- * @param {object} config an object containing configurable attributes
- * Valid properties for DD:
- * scroll
- */
-Roo.dd.DD = function(id, sGroup, config) {
- if (id) {
- this.init(id, sGroup, config);
- }
-};
+ /**
+ * Is drag and drop locked?
+ * @method isLocked
+ * @return {boolean} True if drag and drop is locked, false otherwise.
+ * @static
+ */
+ isLocked: function() { return this.locked; },
-Roo.extend(Roo.dd.DD, Roo.dd.DragDrop, {
+ /**
+ * Location cache that is set for all drag drop objects when a drag is
+ * initiated, cleared when the drag is finished.
+ * @property locationCache
+ * @private
+ * @static
+ */
+ locationCache: {},
- /**
- * When set to true, the utility automatically tries to scroll the browser
- * window wehn a drag and drop element is dragged near the viewport boundary.
- * Defaults to true.
- * @property scroll
- * @type boolean
- */
- scroll: true,
+ /**
+ * Set useCache to false if you want to force object the lookup of each
+ * drag and drop linked element constantly during a drag.
+ * @property useCache
+ * @type boolean
+ * @static
+ */
+ useCache: true,
- /**
- * Sets the pointer offset to the distance between the linked element's top
- * left corner and the location the element was clicked
- * @method autoOffset
- * @param {int} iPageX the X coordinate of the click
- * @param {int} iPageY the Y coordinate of the click
- */
- autoOffset: function(iPageX, iPageY) {
- var x = iPageX - this.startPageX;
- var y = iPageY - this.startPageY;
- this.setDelta(x, y);
- },
+ /**
+ * The number of pixels that the mouse needs to move after the
+ * mousedown before the drag is initiated. Default=3;
+ * @property clickPixelThresh
+ * @type int
+ * @static
+ */
+ clickPixelThresh: 3,
- /**
- * Sets the pointer offset. You can call this directly to force the
- * offset to be in a particular location (e.g., pass in 0,0 to set it
- * to the center of the object)
- * @method setDelta
- * @param {int} iDeltaX the distance from the left
- * @param {int} iDeltaY the distance from the top
- */
- setDelta: function(iDeltaX, iDeltaY) {
- this.deltaX = iDeltaX;
- this.deltaY = iDeltaY;
- },
+ /**
+ * The number of milliseconds after the mousedown event to initiate the
+ * drag if we don't get a mouseup event. Default=1000
+ * @property clickTimeThresh
+ * @type int
+ * @static
+ */
+ clickTimeThresh: 350,
- /**
- * Sets the drag element to the location of the mousedown or click event,
- * maintaining the cursor location relative to the location on the element
- * that was clicked. Override this if you want to place the element in a
- * location other than where the cursor is.
- * @method setDragElPos
- * @param {int} iPageX the X coordinate of the mousedown or drag event
- * @param {int} iPageY the Y coordinate of the mousedown or drag event
- */
- setDragElPos: function(iPageX, iPageY) {
- // the first time we do this, we are going to check to make sure
- // the element has css positioning
+ /**
+ * Flag that indicates that either the drag pixel threshold or the
+ * mousdown time threshold has been met
+ * @property dragThreshMet
+ * @type boolean
+ * @private
+ * @static
+ */
+ dragThreshMet: false,
- var el = this.getDragEl();
- this.alignElWithMouse(el, iPageX, iPageY);
- },
+ /**
+ * Timeout used for the click time threshold
+ * @property clickTimeout
+ * @type Object
+ * @private
+ * @static
+ */
+ clickTimeout: null,
- /**
- * Sets the element to the location of the mousedown or click event,
- * maintaining the cursor location relative to the location on the element
- * that was clicked. Override this if you want to place the element in a
- * location other than where the cursor is.
- * @method alignElWithMouse
- * @param {HTMLElement} el the element to move
- * @param {int} iPageX the X coordinate of the mousedown or drag event
- * @param {int} iPageY the Y coordinate of the mousedown or drag event
- */
- alignElWithMouse: function(el, iPageX, iPageY) {
- var oCoord = this.getTargetCoord(iPageX, iPageY);
- var fly = el.dom ? el : Roo.fly(el);
- if (!this.deltaSetXY) {
- var aCoord = [oCoord.x, oCoord.y];
- fly.setXY(aCoord);
- var newLeft = fly.getLeft(true);
- var newTop = fly.getTop(true);
- this.deltaSetXY = [ newLeft - oCoord.x, newTop - oCoord.y ];
- } else {
- fly.setLeftTop(oCoord.x + this.deltaSetXY[0], oCoord.y + this.deltaSetXY[1]);
- }
+ /**
+ * The X position of the mousedown event stored for later use when a
+ * drag threshold is met.
+ * @property startX
+ * @type int
+ * @private
+ * @static
+ */
+ startX: 0,
- this.cachePosition(oCoord.x, oCoord.y);
- this.autoScroll(oCoord.x, oCoord.y, el.offsetHeight, el.offsetWidth);
- return oCoord;
- },
+ /**
+ * The Y position of the mousedown event stored for later use when a
+ * drag threshold is met.
+ * @property startY
+ * @type int
+ * @private
+ * @static
+ */
+ startY: 0,
- /**
- * Saves the most recent position so that we can reset the constraints and
- * tick marks on-demand. We need to know this so that we can calculate the
- * number of pixels the element is offset from its original position.
- * @method cachePosition
- * @param iPageX the current x position (optional, this just makes it so we
- * don't have to look it up again)
- * @param iPageY the current y position (optional, this just makes it so we
- * don't have to look it up again)
- */
- cachePosition: function(iPageX, iPageY) {
- if (iPageX) {
- this.lastPageX = iPageX;
- this.lastPageY = iPageY;
- } else {
- var aCoord = Roo.lib.Dom.getXY(this.getEl());
- this.lastPageX = aCoord[0];
- this.lastPageY = aCoord[1];
- }
- },
+ /**
+ * Each DragDrop instance must be registered with the DragDropMgr.
+ * This is executed in DragDrop.init()
+ * @method regDragDrop
+ * @param {DragDrop} oDD the DragDrop object to register
+ * @param {String} sGroup the name of the group this element belongs to
+ * @static
+ */
+ regDragDrop: function(oDD, sGroup) {
+ if (!this.initialized) { this.init(); }
- /**
- * Auto-scroll the window if the dragged object has been moved beyond the
- * visible window boundary.
- * @method autoScroll
- * @param {int} x the drag element's x position
- * @param {int} y the drag element's y position
- * @param {int} h the height of the drag element
- * @param {int} w the width of the drag element
- * @private
- */
- autoScroll: function(x, y, h, w) {
+ if (!this.ids[sGroup]) {
+ this.ids[sGroup] = {};
+ }
+ this.ids[sGroup][oDD.id] = oDD;
+ },
- if (this.scroll) {
- // The client height
- var clientH = Roo.lib.Dom.getViewWidth();
+ /**
+ * Removes the supplied dd instance from the supplied group. Executed
+ * by DragDrop.removeFromGroup, so don't call this function directly.
+ * @method removeDDFromGroup
+ * @private
+ * @static
+ */
+ removeDDFromGroup: function(oDD, sGroup) {
+ if (!this.ids[sGroup]) {
+ this.ids[sGroup] = {};
+ }
- // The client width
- var clientW = Roo.lib.Dom.getViewHeight();
+ var obj = this.ids[sGroup];
+ if (obj && obj[oDD.id]) {
+ delete obj[oDD.id];
+ }
+ },
- // The amt scrolled down
- var st = this.DDM.getScrollTop();
+ /**
+ * Unregisters a drag and drop item. This is executed in
+ * DragDrop.unreg, use that method instead of calling this directly.
+ * @method _remove
+ * @private
+ * @static
+ */
+ _remove: function(oDD) {
+ for (var g in oDD.groups) {
+ if (g && this.ids[g][oDD.id]) {
+ delete this.ids[g][oDD.id];
+ }
+ }
+ delete this.handleIds[oDD.id];
+ },
- // The amt scrolled right
- var sl = this.DDM.getScrollLeft();
+ /**
+ * Each DragDrop handle element must be registered. This is done
+ * automatically when executing DragDrop.setHandleElId()
+ * @method regHandle
+ * @param {String} sDDId the DragDrop id this element is a handle for
+ * @param {String} sHandleId the id of the element that is the drag
+ * handle
+ * @static
+ */
+ regHandle: function(sDDId, sHandleId) {
+ if (!this.handleIds[sDDId]) {
+ this.handleIds[sDDId] = {};
+ }
+ this.handleIds[sDDId][sHandleId] = sHandleId;
+ },
- // Location of the bottom of the element
- var bot = h + y;
+ /**
+ * Utility function to determine if a given element has been
+ * registered as a drag drop item.
+ * @method isDragDrop
+ * @param {String} id the element id to check
+ * @return {boolean} true if this element is a DragDrop item,
+ * false otherwise
+ * @static
+ */
+ isDragDrop: function(id) {
+ return ( this.getDDById(id) ) ? true : false;
+ },
- // Location of the right of the element
- var right = w + x;
+ /**
+ * Returns the drag and drop instances that are in all groups the
+ * passed in instance belongs to.
+ * @method getRelated
+ * @param {DragDrop} p_oDD the obj to get related data for
+ * @param {boolean} bTargetsOnly if true, only return targetable objs
+ * @return {DragDrop[]} the related instances
+ * @static
+ */
+ getRelated: function(p_oDD, bTargetsOnly) {
+ var oDDs = [];
+ for (var i in p_oDD.groups) {
+ for (j in this.ids[i]) {
+ var dd = this.ids[i][j];
+ if (! this.isTypeOfDD(dd)) {
+ continue;
+ }
+ if (!bTargetsOnly || dd.isTarget) {
+ oDDs[oDDs.length] = dd;
+ }
+ }
+ }
- // The distance from the cursor to the bottom of the visible area,
- // adjusted so that we don't scroll if the cursor is beyond the
- // element drag constraints
- var toBot = (clientH + st - y - this.deltaY);
+ return oDDs;
+ },
- // The distance from the cursor to the right of the visible area
- var toRight = (clientW + sl - x - this.deltaX);
+ /**
+ * Returns true if the specified dd target is a legal target for
+ * the specifice drag obj
+ * @method isLegalTarget
+ * @param {DragDrop} the drag obj
+ * @param {DragDrop} the target
+ * @return {boolean} true if the target is a legal target for the
+ * dd obj
+ * @static
+ */
+ isLegalTarget: function (oDD, oTargetDD) {
+ var targets = this.getRelated(oDD, true);
+ for (var i=0, len=targets.length;i<len;++i) {
+ if (targets[i].id == oTargetDD.id) {
+ return true;
+ }
+ }
+ return false;
+ },
- // How close to the edge the cursor must be before we scroll
- // var thresh = (document.all) ? 100 : 40;
- var thresh = 40;
+ /**
+ * My goal is to be able to transparently determine if an object is
+ * typeof DragDrop, and the exact subclass of DragDrop. typeof
+ * returns "object", oDD.constructor.toString() always returns
+ * "DragDrop" and not the name of the subclass. So for now it just
+ * evaluates a well-known variable in DragDrop.
+ * @method isTypeOfDD
+ * @param {Object} the object to evaluate
+ * @return {boolean} true if typeof oDD = DragDrop
+ * @static
+ */
+ isTypeOfDD: function (oDD) {
+ return (oDD && oDD.__ygDragDrop);
+ },
- // How many pixels to scroll per autoscroll op. This helps to reduce
- // clunky scrolling. IE is more sensitive about this ... it needs this
- // value to be higher.
- var scrAmt = (document.all) ? 80 : 30;
+ /**
+ * Utility function to determine if a given element has been
+ * registered as a drag drop handle for the given Drag Drop object.
+ * @method isHandle
+ * @param {String} id the element id to check
+ * @return {boolean} true if this element is a DragDrop handle, false
+ * otherwise
+ * @static
+ */
+ isHandle: function(sDDId, sHandleId) {
+ return ( this.handleIds[sDDId] &&
+ this.handleIds[sDDId][sHandleId] );
+ },
- // Scroll down if we are near the bottom of the visible page and the
- // obj extends below the crease
- if ( bot > clientH && toBot < thresh ) {
- window.scrollTo(sl, st + scrAmt);
+ /**
+ * Returns the DragDrop instance for a given id
+ * @method getDDById
+ * @param {String} id the id of the DragDrop object
+ * @return {DragDrop} the drag drop object, null if it is not found
+ * @static
+ */
+ getDDById: function(id) {
+ for (var i in this.ids) {
+ if (this.ids[i][id]) {
+ return this.ids[i][id];
+ }
}
+ return null;
+ },
- // Scroll up if the window is scrolled down and the top of the object
- // goes above the top border
- if ( y < st && st > 0 && y - st < thresh ) {
- window.scrollTo(sl, st - scrAmt);
+ /**
+ * Fired after a registered DragDrop object gets the mousedown event.
+ * Sets up the events required to track the object being dragged
+ * @method handleMouseDown
+ * @param {Event} e the event
+ * @param oDD the DragDrop object being dragged
+ * @private
+ * @static
+ */
+ handleMouseDown: function(e, oDD) {
+ if(Roo.QuickTips){
+ Roo.QuickTips.disable();
}
+ this.currentTarget = e.getTarget();
- // Scroll right if the obj is beyond the right border and the cursor is
- // near the border.
- if ( right > clientW && toRight < thresh ) {
- window.scrollTo(sl + scrAmt, st);
- }
+ this.dragCurrent = oDD;
- // Scroll left if the window has been scrolled to the right and the obj
- // extends past the left border
- if ( x < sl && sl > 0 && x - sl < thresh ) {
- window.scrollTo(sl - scrAmt, st);
- }
- }
- },
+ var el = oDD.getEl();
- /**
- * Finds the location the element should be placed if we want to move
- * it to where the mouse location less the click offset would place us.
- * @method getTargetCoord
- * @param {int} iPageX the X coordinate of the click
- * @param {int} iPageY the Y coordinate of the click
- * @return an object that contains the coordinates (Object.x and Object.y)
- * @private
- */
- getTargetCoord: function(iPageX, iPageY) {
+ // track start position
+ this.startX = e.getPageX();
+ this.startY = e.getPageY();
+ this.deltaX = this.startX - el.offsetLeft;
+ this.deltaY = this.startY - el.offsetTop;
- var x = iPageX - this.deltaX;
- var y = iPageY - this.deltaY;
+ this.dragThreshMet = false;
- if (this.constrainX) {
- if (x < this.minX) { x = this.minX; }
- if (x > this.maxX) { x = this.maxX; }
- }
+ this.clickTimeout = setTimeout(
+ function() {
+ var DDM = Roo.dd.DDM;
+ DDM.startDrag(DDM.startX, DDM.startY);
+ },
+ this.clickTimeThresh );
+ },
- if (this.constrainY) {
- if (y < this.minY) { y = this.minY; }
- if (y > this.maxY) { y = this.maxY; }
- }
+ /**
+ * Fired when either the drag pixel threshol or the mousedown hold
+ * time threshold has been met.
+ * @method startDrag
+ * @param x {int} the X position of the original mousedown
+ * @param y {int} the Y position of the original mousedown
+ * @static
+ */
+ startDrag: function(x, y) {
+ clearTimeout(this.clickTimeout);
+ if (this.dragCurrent) {
+ this.dragCurrent.b4StartDrag(x, y);
+ this.dragCurrent.startDrag(x, y);
+ }
+ this.dragThreshMet = true;
+ },
- x = this.getTick(x, this.xTicks);
- y = this.getTick(y, this.yTicks);
+ /**
+ * Internal function to handle the mouseup event. Will be invoked
+ * from the context of the document.
+ * @method handleMouseUp
+ * @param {Event} e the event
+ * @private
+ * @static
+ */
+ handleMouseUp: function(e) {
+ if(Roo.QuickTips){
+ Roo.QuickTips.enable();
+ }
+ if (! this.dragCurrent) {
+ return;
+ }
- return {x:x, y:y};
- },
+ clearTimeout(this.clickTimeout);
- /*
- * Sets up config options specific to this class. Overrides
- * Roo.dd.DragDrop, but all versions of this method through the
- * inheritance chain are called
- */
- applyConfig: function() {
- Roo.dd.DD.superclass.applyConfig.call(this);
- this.scroll = (this.config.scroll !== false);
- },
+ if (this.dragThreshMet) {
+ this.fireEvents(e, true);
+ } else {
+ }
- /*
- * Event that fires prior to the onMouseDown event. Overrides
- * Roo.dd.DragDrop.
- */
- b4MouseDown: function(e) {
- // this.resetConstraints();
- this.autoOffset(e.getPageX(),
- e.getPageY());
- },
+ this.stopDrag(e);
- /*
- * Event that fires prior to the onDrag event. Overrides
- * Roo.dd.DragDrop.
- */
- b4Drag: function(e) {
- this.setDragElPos(e.getPageX(),
- e.getPageY());
- },
+ this.stopEvent(e);
+ },
- toString: function() {
- return ("DD " + this.id);
- }
+ /**
+ * Utility to stop event propagation and event default, if these
+ * features are turned on.
+ * @method stopEvent
+ * @param {Event} e the event as returned by this.getEvent()
+ * @static
+ */
+ stopEvent: function(e){
+ if(this.stopPropagation) {
+ e.stopPropagation();
+ }
- //////////////////////////////////////////////////////////////////////////
- // Debugging ygDragDrop events that can be overridden
- //////////////////////////////////////////////////////////////////////////
- /*
- startDrag: function(x, y) {
- },
+ if (this.preventDefault) {
+ e.preventDefault();
+ }
+ },
- onDrag: function(e) {
- },
+ /**
+ * Internal function to clean up event handlers after the drag
+ * operation is complete
+ * @method stopDrag
+ * @param {Event} e the event
+ * @private
+ * @static
+ */
+ stopDrag: function(e) {
+ // Fire the drag end event for the item that was dragged
+ if (this.dragCurrent) {
+ if (this.dragThreshMet) {
+ this.dragCurrent.b4EndDrag(e);
+ this.dragCurrent.endDrag(e);
+ }
- onDragEnter: function(e, id) {
- },
+ this.dragCurrent.onMouseUp(e);
+ }
- onDragOver: function(e, id) {
- },
+ this.dragCurrent = null;
+ this.dragOvers = {};
+ },
- onDragOut: function(e, id) {
- },
+ /**
+ * Internal function to handle the mousemove event. Will be invoked
+ * from the context of the html element.
+ *
+ * @TODO figure out what we can do about mouse events lost when the
+ * user drags objects beyond the window boundary. Currently we can
+ * detect this in internet explorer by verifying that the mouse is
+ * down during the mousemove event. Firefox doesn't give us the
+ * button state on the mousemove event.
+ * @method handleMouseMove
+ * @param {Event} e the event
+ * @private
+ * @static
+ */
+ handleMouseMove: function(e) {
+ if (! this.dragCurrent) {
+ return true;
+ }
- onDragDrop: function(e, id) {
- },
+ // var button = e.which || e.button;
- endDrag: function(e) {
- }
+ // check for IE mouseup outside of page boundary
+ if (Roo.isIE && (e.button !== 0 && e.button !== 1 && e.button !== 2)) {
+ this.stopEvent(e);
+ return this.handleMouseUp(e);
+ }
- */
+ if (!this.dragThreshMet) {
+ var diffX = Math.abs(this.startX - e.getPageX());
+ var diffY = Math.abs(this.startY - e.getPageY());
+ if (diffX > this.clickPixelThresh ||
+ diffY > this.clickPixelThresh) {
+ this.startDrag(this.startX, this.startY);
+ }
+ }
-});/*
- * 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 (this.dragThreshMet) {
+ this.dragCurrent.b4Drag(e);
+ this.dragCurrent.onDrag(e);
+ if(!this.dragCurrent.moveOnly){
+ this.fireEvents(e, false);
+ }
+ }
-/**
- * @class Roo.dd.DDProxy
- * A DragDrop implementation that inserts an empty, bordered div into
- * the document that follows the cursor during drag operations. At the time of
- * the click, the frame div is resized to the dimensions of the linked html
- * element, and moved to the exact location of the linked element.
- *
- * References to the "frame" element refer to the single proxy element that
- * was created to be dragged in place of all DDProxy elements on the
- * page.
- *
- * @extends Roo.dd.DD
- * @constructor
- * @param {String} id the id of the linked html element
- * @param {String} sGroup the group of related DragDrop objects
- * @param {object} config an object containing configurable attributes
- * Valid properties for DDProxy in addition to those in DragDrop:
- * resizeFrame, centerFrame, dragElId
- */
-Roo.dd.DDProxy = function(id, sGroup, config) {
- if (id) {
- this.init(id, sGroup, config);
- this.initFrame();
- }
-};
-
-/**
- * The default drag frame div id
- * @property Roo.dd.DDProxy.dragElId
- * @type String
- * @static
- */
-Roo.dd.DDProxy.dragElId = "ygddfdiv";
-
-Roo.extend(Roo.dd.DDProxy, Roo.dd.DD, {
-
- /**
- * By default we resize the drag frame to be the same size as the element
- * we want to drag (this is to get the frame effect). We can turn it off
- * if we want a different behavior.
- * @property resizeFrame
- * @type boolean
- */
- resizeFrame: true,
-
- /**
- * By default the frame is positioned exactly where the drag element is, so
- * we use the cursor offset provided by Roo.dd.DD. Another option that works only if
- * you do not have constraints on the obj is to have the drag frame centered
- * around the cursor. Set centerFrame to true for this effect.
- * @property centerFrame
- * @type boolean
- */
- centerFrame: false,
-
- /**
- * Creates the proxy element if it does not yet exist
- * @method createFrame
- */
- createFrame: function() {
- var self = this;
- var body = document.body;
+ this.stopEvent(e);
- if (!body || !body.firstChild) {
- setTimeout( function() { self.createFrame(); }, 50 );
- return;
- }
+ return true;
+ },
- var div = this.getDragEl();
+ /**
+ * Iterates over all of the DragDrop elements to find ones we are
+ * hovering over or dropping on
+ * @method fireEvents
+ * @param {Event} e the event
+ * @param {boolean} isDrop is this a drop op or a mouseover op?
+ * @private
+ * @static
+ */
+ fireEvents: function(e, isDrop) {
+ var dc = this.dragCurrent;
- if (!div) {
- div = document.createElement("div");
- div.id = this.dragElId;
- var s = div.style;
+ // If the user did the mouse up outside of the window, we could
+ // get here even though we have ended the drag.
+ if (!dc || dc.isLocked()) {
+ return;
+ }
- s.position = "absolute";
- s.visibility = "hidden";
- s.cursor = "move";
- s.border = "2px solid #aaa";
- s.zIndex = 999;
+ var pt = e.getPoint();
- // appendChild can blow up IE if invoked prior to the window load event
- // while rendering a table. It is possible there are other scenarios
- // that would cause this to happen as well.
- body.insertBefore(div, body.firstChild);
- }
- },
+ // cache the previous dragOver array
+ var oldOvers = [];
- /**
- * Initialization for the drag frame element. Must be called in the
- * constructor of all subclasses
- * @method initFrame
- */
- initFrame: function() {
- this.createFrame();
- },
+ var outEvts = [];
+ var overEvts = [];
+ var dropEvts = [];
+ var enterEvts = [];
- applyConfig: function() {
- Roo.dd.DDProxy.superclass.applyConfig.call(this);
+ // Check to see if the object(s) we were hovering over is no longer
+ // being hovered over so we can fire the onDragOut event
+ for (var i in this.dragOvers) {
- this.resizeFrame = (this.config.resizeFrame !== false);
- this.centerFrame = (this.config.centerFrame);
- this.setDragElId(this.config.dragElId || Roo.dd.DDProxy.dragElId);
- },
+ var ddo = this.dragOvers[i];
- /**
- * Resizes the drag frame to the dimensions of the clicked object, positions
- * it over the object, and finally displays it
- * @method showFrame
- * @param {int} iPageX X click position
- * @param {int} iPageY Y click position
- * @private
- */
- showFrame: function(iPageX, iPageY) {
- var el = this.getEl();
- var dragEl = this.getDragEl();
- var s = dragEl.style;
+ if (! this.isTypeOfDD(ddo)) {
+ continue;
+ }
- this._resizeProxy();
+ if (! this.isOverTarget(pt, ddo, this.mode)) {
+ outEvts.push( ddo );
+ }
- if (this.centerFrame) {
- this.setDelta( Math.round(parseInt(s.width, 10)/2),
- Math.round(parseInt(s.height, 10)/2) );
- }
+ oldOvers[i] = true;
+ delete this.dragOvers[i];
+ }
- this.setDragElPos(iPageX, iPageY);
+ for (var sGroup in dc.groups) {
- Roo.fly(dragEl).show();
- },
+ if ("string" != typeof sGroup) {
+ continue;
+ }
- /**
- * The proxy is automatically resized to the dimensions of the linked
- * element when a drag is initiated, unless resizeFrame is set to false
- * @method _resizeProxy
- * @private
- */
- _resizeProxy: function() {
- if (this.resizeFrame) {
- var el = this.getEl();
- Roo.fly(this.getDragEl()).setSize(el.offsetWidth, el.offsetHeight);
- }
- },
+ for (i in this.ids[sGroup]) {
+ var oDD = this.ids[sGroup][i];
+ if (! this.isTypeOfDD(oDD)) {
+ continue;
+ }
- // overrides Roo.dd.DragDrop
- b4MouseDown: function(e) {
- var x = e.getPageX();
- var y = e.getPageY();
- this.autoOffset(x, y);
- this.setDragElPos(x, y);
- },
+ if (oDD.isTarget && !oDD.isLocked() && oDD != dc) {
+ if (this.isOverTarget(pt, oDD, this.mode)) {
+ // look for drop interactions
+ if (isDrop) {
+ dropEvts.push( oDD );
+ // look for drag enter and drag over interactions
+ } else {
- // overrides Roo.dd.DragDrop
- b4StartDrag: function(x, y) {
- // show the drag frame
- this.showFrame(x, y);
- },
+ // initial drag over: dragEnter fires
+ if (!oldOvers[oDD.id]) {
+ enterEvts.push( oDD );
+ // subsequent drag overs: dragOver fires
+ } else {
+ overEvts.push( oDD );
+ }
- // overrides Roo.dd.DragDrop
- b4EndDrag: function(e) {
- Roo.fly(this.getDragEl()).hide();
- },
+ this.dragOvers[oDD.id] = oDD;
+ }
+ }
+ }
+ }
+ }
- // overrides Roo.dd.DragDrop
- // By default we try to move the element to the last location of the frame.
- // This is so that the default behavior mirrors that of Roo.dd.DD.
- endDrag: function(e) {
+ if (this.mode) {
+ if (outEvts.length) {
+ dc.b4DragOut(e, outEvts);
+ dc.onDragOut(e, outEvts);
+ }
- var lel = this.getEl();
- var del = this.getDragEl();
+ if (enterEvts.length) {
+ dc.onDragEnter(e, enterEvts);
+ }
- // Show the drag frame briefly so we can get its position
- del.style.visibility = "";
+ if (overEvts.length) {
+ dc.b4DragOver(e, overEvts);
+ dc.onDragOver(e, overEvts);
+ }
- this.beforeMove();
- // Hide the linked element before the move to get around a Safari
- // rendering bug.
- lel.style.visibility = "hidden";
- Roo.dd.DDM.moveToEl(lel, del);
- del.style.visibility = "hidden";
- lel.style.visibility = "";
+ if (dropEvts.length) {
+ dc.b4DragDrop(e, dropEvts);
+ dc.onDragDrop(e, dropEvts);
+ }
- this.afterDrag();
- },
+ } else {
+ // fire dragout events
+ var len = 0;
+ for (i=0, len=outEvts.length; i<len; ++i) {
+ dc.b4DragOut(e, outEvts[i].id);
+ dc.onDragOut(e, outEvts[i].id);
+ }
- beforeMove : function(){
+ // fire enter events
+ for (i=0,len=enterEvts.length; i<len; ++i) {
+ // dc.b4DragEnter(e, oDD.id);
+ dc.onDragEnter(e, enterEvts[i].id);
+ }
- },
+ // fire over events
+ for (i=0,len=overEvts.length; i<len; ++i) {
+ dc.b4DragOver(e, overEvts[i].id);
+ dc.onDragOver(e, overEvts[i].id);
+ }
- afterDrag : function(){
+ // fire drop events
+ for (i=0, len=dropEvts.length; i<len; ++i) {
+ dc.b4DragDrop(e, dropEvts[i].id);
+ dc.onDragDrop(e, dropEvts[i].id);
+ }
- },
+ }
- toString: function() {
- return ("DDProxy " + this.id);
- }
+ // notify about a drop that did not find a target
+ if (isDrop && !dropEvts.length) {
+ dc.onInvalidDrop(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.dd.DDTarget
- * A DragDrop implementation that does not move, but can be a drop
- * target. You would get the same result by simply omitting implementation
- * for the event callbacks, but this way we reduce the processing cost of the
- * event listener and the callbacks.
- * @extends Roo.dd.DragDrop
- * @constructor
- * @param {String} id the id of the element that is a drop target
- * @param {String} sGroup the group of related DragDrop objects
- * @param {object} config an object containing configurable attributes
- * Valid properties for DDTarget in addition to those in
- * DragDrop:
- * none
- */
-Roo.dd.DDTarget = function(id, sGroup, config) {
- if (id) {
- this.initTarget(id, sGroup, config);
- }
- if (config.listeners || config.events) {
- Roo.dd.DragDrop.superclass.constructor.call(this, {
- listeners : config.listeners || {},
- events : config.events || {}
- });
- }
-};
+ /**
+ * Helper function for getting the best match from the list of drag
+ * and drop objects returned by the drag and drop events when we are
+ * in INTERSECT mode. It returns either the first object that the
+ * cursor is over, or the object that has the greatest overlap with
+ * the dragged element.
+ * @method getBestMatch
+ * @param {DragDrop[]} dds The array of drag and drop objects
+ * targeted
+ * @return {DragDrop} The best single match
+ * @static
+ */
+ getBestMatch: function(dds) {
+ var winner = null;
+ // Return null if the input is not what we expect
+ //if (!dds || !dds.length || dds.length == 0) {
+ // winner = null;
+ // If there is only one item, it wins
+ //} else if (dds.length == 1) {
-// Roo.dd.DDTarget.prototype = new Roo.dd.DragDrop();
-Roo.extend(Roo.dd.DDTarget, Roo.dd.DragDrop, {
- toString: function() {
- return ("DDTarget " + this.id);
- }
-});
-/*
- * 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">
- */
-
+ var len = dds.length;
-/**
- * @class Roo.dd.ScrollManager
- * Provides automatic scrolling of overflow regions in the page during drag operations.<br><br>
- * <b>Note: This class uses "Point Mode" and is untested in "Intersect Mode".</b>
- * @singleton
- */
-Roo.dd.ScrollManager = function(){
- var ddm = Roo.dd.DragDropMgr;
- var els = {};
- var dragEl = null;
- var proc = {};
-
-
-
- var onStop = function(e){
- dragEl = null;
- clearProc();
- };
-
- var triggerRefresh = function(){
- if(ddm.dragCurrent){
- ddm.refreshCache(ddm.dragCurrent.groups);
- }
- };
-
- var doScroll = function(){
- if(ddm.dragCurrent){
- var dds = Roo.dd.ScrollManager;
- if(!dds.animate){
- if(proc.el.scroll(proc.dir, dds.increment)){
- triggerRefresh();
- }
- }else{
- proc.el.scroll(proc.dir, dds.increment, true, dds.animDuration, triggerRefresh);
- }
- }
- };
-
- var clearProc = function(){
- if(proc.id){
- clearInterval(proc.id);
- }
- proc.id = 0;
- proc.el = null;
- proc.dir = "";
- };
-
- var startProc = function(el, dir){
- Roo.log('scroll startproc');
- clearProc();
- proc.el = el;
- proc.dir = dir;
- proc.id = setInterval(doScroll, Roo.dd.ScrollManager.frequency);
- };
-
- var onFire = function(e, isDrop){
-
- if(isDrop || !ddm.dragCurrent){ return; }
- var dds = Roo.dd.ScrollManager;
- if(!dragEl || dragEl != ddm.dragCurrent){
- dragEl = ddm.dragCurrent;
- // refresh regions on drag start
- dds.refreshCache();
- }
-
- var xy = Roo.lib.Event.getXY(e);
- var pt = new Roo.lib.Point(xy[0], xy[1]);
- for(var id in els){
- var el = els[id], r = el._region;
- if(r && r.contains(pt) && el.isScrollable()){
- if(r.bottom - pt.y <= dds.thresh){
- if(proc.el != el){
- startProc(el, "down");
- }
- return;
- }else if(r.right - pt.x <= dds.thresh){
- if(proc.el != el){
- startProc(el, "left");
- }
- return;
- }else if(pt.y - r.top <= dds.thresh){
- if(proc.el != el){
- startProc(el, "up");
- }
- return;
- }else if(pt.x - r.left <= dds.thresh){
- if(proc.el != el){
- startProc(el, "right");
+ if (len == 1) {
+ winner = dds[0];
+ } else {
+ // Loop through the targeted items
+ for (var i=0; i<len; ++i) {
+ var dd = dds[i];
+ // If the cursor is over the object, it wins. If the
+ // cursor is over multiple matches, the first one we come
+ // to wins.
+ if (dd.cursorIsOver) {
+ winner = dd;
+ break;
+ // Otherwise the object with the most overlap wins
+ } else {
+ if (!winner ||
+ winner.overlap.getArea() < dd.overlap.getArea()) {
+ winner = dd;
+ }
}
- return;
}
}
- }
- clearProc();
- };
-
- ddm.fireEvents = ddm.fireEvents.createSequence(onFire, ddm);
- ddm.stopDrag = ddm.stopDrag.createSequence(onStop, ddm);
-
- return {
+
+ return winner;
+ },
+
/**
- * Registers new overflow element(s) to auto scroll
- * @param {String/HTMLElement/Element/Array} el The id of or the element to be scrolled or an array of either
+ * Refreshes the cache of the top-left and bottom-right points of the
+ * drag and drop objects in the specified group(s). This is in the
+ * format that is stored in the drag and drop instance, so typical
+ * usage is:
+ * <code>
+ * Roo.dd.DragDropMgr.refreshCache(ddinstance.groups);
+ * </code>
+ * Alternatively:
+ * <code>
+ * Roo.dd.DragDropMgr.refreshCache({group1:true, group2:true});
+ * </code>
+ * @TODO this really should be an indexed array. Alternatively this
+ * method could accept both.
+ * @method refreshCache
+ * @param {Object} groups an associative array of groups to refresh
+ * @static
*/
- register : function(el){
- if(el instanceof Array){
- for(var i = 0, len = el.length; i < len; i++) {
- this.register(el[i]);
+ refreshCache: function(groups) {
+ for (var sGroup in groups) {
+ if ("string" != typeof sGroup) {
+ continue;
+ }
+ for (var i in this.ids[sGroup]) {
+ var oDD = this.ids[sGroup][i];
+
+ if (this.isTypeOfDD(oDD)) {
+ // if (this.isTypeOfDD(oDD) && oDD.isTarget) {
+ var loc = this.getLocation(oDD);
+ if (loc) {
+ this.locationCache[oDD.id] = loc;
+ } else {
+ delete this.locationCache[oDD.id];
+ // this will unregister the drag and drop object if
+ // the element is not in a usable state
+ // oDD.unreg();
+ }
+ }
}
- }else{
- el = Roo.get(el);
- els[el.id] = el;
}
- Roo.dd.ScrollManager.els = els;
},
-
+
/**
- * Unregisters overflow element(s) so they are no longer scrolled
- * @param {String/HTMLElement/Element/Array} el The id of or the element to be removed or an array of either
- */
- unregister : function(el){
- if(el instanceof Array){
- for(var i = 0, len = el.length; i < len; i++) {
- this.unregister(el[i]);
- }
- }else{
- el = Roo.get(el);
- delete els[el.id];
+ * This checks to make sure an element exists and is in the DOM. The
+ * main purpose is to handle cases where innerHTML is used to remove
+ * drag and drop objects from the DOM. IE provides an 'unspecified
+ * error' when trying to access the offsetParent of such an element
+ * @method verifyEl
+ * @param {HTMLElement} el the element to check
+ * @return {boolean} true if the element looks usable
+ * @static
+ */
+ verifyEl: function(el) {
+ if (el) {
+ var parent;
+ if(Roo.isIE){
+ try{
+ parent = el.offsetParent;
+ }catch(e){}
+ }else{
+ parent = el.offsetParent;
+ }
+ if (parent) {
+ return true;
+ }
}
+
+ return false;
},
-
+
/**
- * The number of pixels from the edge of a container the pointer needs to be to
- * trigger scrolling (defaults to 25)
- * @type Number
+ * Returns a Region object containing the drag and drop element's position
+ * and size, including the padding configured for it
+ * @method getLocation
+ * @param {DragDrop} oDD the drag and drop object to get the
+ * location for
+ * @return {Roo.lib.Region} a Region object representing the total area
+ * the element occupies, including any padding
+ * the instance is configured for.
+ * @static
*/
- thresh : 25,
-
+ getLocation: function(oDD) {
+ if (! this.isTypeOfDD(oDD)) {
+ return null;
+ }
+
+ var el = oDD.getEl(), pos, x1, x2, y1, y2, t, r, b, l;
+
+ try {
+ pos= Roo.lib.Dom.getXY(el);
+ } catch (e) { }
+
+ if (!pos) {
+ return null;
+ }
+
+ x1 = pos[0];
+ x2 = x1 + el.offsetWidth;
+ y1 = pos[1];
+ y2 = y1 + el.offsetHeight;
+
+ t = y1 - oDD.padding[0];
+ r = x2 + oDD.padding[1];
+ b = y2 + oDD.padding[2];
+ l = x1 - oDD.padding[3];
+
+ return new Roo.lib.Region( t, r, b, l );
+ },
+
/**
- * The number of pixels to scroll in each scroll increment (defaults to 50)
- * @type Number
+ * Checks the cursor location to see if it over the target
+ * @method isOverTarget
+ * @param {Roo.lib.Point} pt The point to evaluate
+ * @param {DragDrop} oTarget the DragDrop object we are inspecting
+ * @return {boolean} true if the mouse is over the target
+ * @private
+ * @static
*/
- increment : 100,
-
+ isOverTarget: function(pt, oTarget, intersect) {
+ // use cache if available
+ var loc = this.locationCache[oTarget.id];
+ if (!loc || !this.useCache) {
+ loc = this.getLocation(oTarget);
+ this.locationCache[oTarget.id] = loc;
+
+ }
+
+ if (!loc) {
+ return false;
+ }
+
+ oTarget.cursorIsOver = loc.contains( pt );
+
+ // DragDrop is using this as a sanity check for the initial mousedown
+ // in this case we are done. In POINT mode, if the drag obj has no
+ // contraints, we are also done. Otherwise we need to evaluate the
+ // location of the target as related to the actual location of the
+ // dragged element.
+ var dc = this.dragCurrent;
+ if (!dc || !dc.getTargetCoord ||
+ (!intersect && !dc.constrainX && !dc.constrainY)) {
+ return oTarget.cursorIsOver;
+ }
+
+ oTarget.overlap = null;
+
+ // Get the current location of the drag element, this is the
+ // location of the mouse event less the delta that represents
+ // where the original mousedown happened on the element. We
+ // need to consider constraints and ticks as well.
+ var pos = dc.getTargetCoord(pt.x, pt.y);
+
+ var el = dc.getDragEl();
+ var curRegion = new Roo.lib.Region( pos.y,
+ pos.x + el.offsetWidth,
+ pos.y + el.offsetHeight,
+ pos.x );
+
+ var overlap = curRegion.intersect(loc);
+
+ if (overlap) {
+ oTarget.overlap = overlap;
+ return (intersect) ? true : oTarget.cursorIsOver;
+ } else {
+ return false;
+ }
+ },
+
/**
- * The frequency of scrolls in milliseconds (defaults to 500)
- * @type Number
+ * unload event handler
+ * @method _onUnload
+ * @private
+ * @static
*/
- frequency : 500,
-
+ _onUnload: function(e, me) {
+ Roo.dd.DragDropMgr.unregAll();
+ },
+
/**
- * True to animate the scroll (defaults to true)
- * @type Boolean
+ * Cleans up the drag and drop events and objects.
+ * @method unregAll
+ * @private
+ * @static
*/
- animate: true,
-
+ unregAll: function() {
+
+ if (this.dragCurrent) {
+ this.stopDrag();
+ this.dragCurrent = null;
+ }
+
+ this._execOnAll("unreg", []);
+
+ for (i in this.elementCache) {
+ delete this.elementCache[i];
+ }
+
+ this.elementCache = {};
+ this.ids = {};
+ },
+
/**
- * The animation duration in seconds -
- * MUST BE less than Roo.dd.ScrollManager.frequency! (defaults to .4)
- * @type Number
+ * A cache of DOM elements
+ * @property elementCache
+ * @private
+ * @static
*/
- animDuration: .4,
-
+ elementCache: {},
+
/**
- * Manually trigger a cache refresh.
+ * Get the wrapper for the DOM element specified
+ * @method getElWrapper
+ * @param {String} id the id of the element to get
+ * @return {Roo.dd.DDM.ElementWrapper} the wrapped element
+ * @private
+ * @deprecated This wrapper isn't that useful
+ * @static
*/
- refreshCache : function(){
- for(var id in els){
- if(typeof els[id] == 'object'){ // for people extending the object prototype
- els[id]._region = els[id].getRegion();
+ getElWrapper: function(id) {
+ var oWrapper = this.elementCache[id];
+ if (!oWrapper || !oWrapper.el) {
+ oWrapper = this.elementCache[id] =
+ new this.ElementWrapper(Roo.getDom(id));
+ }
+ return oWrapper;
+ },
+
+ /**
+ * Returns the actual DOM element
+ * @method getElement
+ * @param {String} id the id of the elment to get
+ * @return {Object} The element
+ * @deprecated use Roo.getDom instead
+ * @static
+ */
+ getElement: function(id) {
+ return Roo.getDom(id);
+ },
+
+ /**
+ * Returns the style property for the DOM element (i.e.,
+ * document.getElById(id).style)
+ * @method getCss
+ * @param {String} id the id of the elment to get
+ * @return {Object} The style property of the element
+ * @deprecated use Roo.getDom instead
+ * @static
+ */
+ getCss: function(id) {
+ var el = Roo.getDom(id);
+ return (el) ? el.style : null;
+ },
+
+ /**
+ * Inner class for cached elements
+ * @class DragDropMgr.ElementWrapper
+ * @for DragDropMgr
+ * @private
+ * @deprecated
+ */
+ ElementWrapper: function(el) {
+ /**
+ * The element
+ * @property el
+ */
+ this.el = el || null;
+ /**
+ * The element id
+ * @property id
+ */
+ this.id = this.el && el.id;
+ /**
+ * A reference to the style property
+ * @property css
+ */
+ this.css = this.el && el.style;
+ },
+
+ /**
+ * Returns the X position of an html element
+ * @method getPosX
+ * @param el the element for which to get the position
+ * @return {int} the X coordinate
+ * @for DragDropMgr
+ * @deprecated use Roo.lib.Dom.getX instead
+ * @static
+ */
+ getPosX: function(el) {
+ return Roo.lib.Dom.getX(el);
+ },
+
+ /**
+ * Returns the Y position of an html element
+ * @method getPosY
+ * @param el the element for which to get the position
+ * @return {int} the Y coordinate
+ * @deprecated use Roo.lib.Dom.getY instead
+ * @static
+ */
+ getPosY: function(el) {
+ return Roo.lib.Dom.getY(el);
+ },
+
+ /**
+ * Swap two nodes. In IE, we use the native method, for others we
+ * emulate the IE behavior
+ * @method swapNode
+ * @param n1 the first node to swap
+ * @param n2 the other node to swap
+ * @static
+ */
+ swapNode: function(n1, n2) {
+ if (n1.swapNode) {
+ n1.swapNode(n2);
+ } else {
+ var p = n2.parentNode;
+ var s = n2.nextSibling;
+
+ if (s == n1) {
+ p.insertBefore(n1, n2);
+ } else if (n2 == n1.nextSibling) {
+ p.insertBefore(n2, n1);
+ } else {
+ n1.parentNode.replaceChild(n2, n1);
+ p.insertBefore(n1, s);
+ }
+ }
+ },
+
+ /**
+ * Returns the current scroll position
+ * @method getScroll
+ * @private
+ * @static
+ */
+ getScroll: function () {
+ var t, l, dde=document.documentElement, db=document.body;
+ if (dde && (dde.scrollTop || dde.scrollLeft)) {
+ t = dde.scrollTop;
+ l = dde.scrollLeft;
+ } else if (db) {
+ t = db.scrollTop;
+ l = db.scrollLeft;
+ } else {
+
+ }
+ return { top: t, left: l };
+ },
+
+ /**
+ * Returns the specified element style property
+ * @method getStyle
+ * @param {HTMLElement} el the element
+ * @param {string} styleProp the style property
+ * @return {string} The value of the style property
+ * @deprecated use Roo.lib.Dom.getStyle
+ * @static
+ */
+ getStyle: function(el, styleProp) {
+ return Roo.fly(el).getStyle(styleProp);
+ },
+
+ /**
+ * Gets the scrollTop
+ * @method getScrollTop
+ * @return {int} the document's scrollTop
+ * @static
+ */
+ getScrollTop: function () { return this.getScroll().top; },
+
+ /**
+ * Gets the scrollLeft
+ * @method getScrollLeft
+ * @return {int} the document's scrollTop
+ * @static
+ */
+ getScrollLeft: function () { return this.getScroll().left; },
+
+ /**
+ * Sets the x/y position of an element to the location of the
+ * target element.
+ * @method moveToEl
+ * @param {HTMLElement} moveEl The element to move
+ * @param {HTMLElement} targetEl The position reference element
+ * @static
+ */
+ moveToEl: function (moveEl, targetEl) {
+ var aCoord = Roo.lib.Dom.getXY(targetEl);
+ Roo.lib.Dom.setXY(moveEl, aCoord);
+ },
+
+ /**
+ * Numeric array sort function
+ * @method numericSort
+ * @static
+ */
+ numericSort: function(a, b) { return (a - b); },
+
+ /**
+ * Internal counter
+ * @property _timeoutCount
+ * @private
+ * @static
+ */
+ _timeoutCount: 0,
+
+ /**
+ * Trying to make the load order less important. Without this we get
+ * an error if this file is loaded before the Event Utility.
+ * @method _addListeners
+ * @private
+ * @static
+ */
+ _addListeners: function() {
+ var DDM = Roo.dd.DDM;
+ if ( Roo.lib.Event && document ) {
+ DDM._onLoad();
+ } else {
+ if (DDM._timeoutCount > 2000) {
+ } else {
+ setTimeout(DDM._addListeners, 10);
+ if (document && document.body) {
+ DDM._timeoutCount += 1;
+ }
+ }
+ }
+ },
+
+ /**
+ * Recursively searches the immediate parent and all child nodes for
+ * the handle element in order to determine wheter or not it was
+ * clicked.
+ * @method handleWasClicked
+ * @param node the html element to inspect
+ * @static
+ */
+ handleWasClicked: function(node, id) {
+ if (this.isHandle(id, node.id)) {
+ return true;
+ } else {
+ // check to see if this is a text node child of the one we want
+ var p = node.parentNode;
+
+ while (p) {
+ if (this.isHandle(id, p.id)) {
+ return true;
+ } else {
+ p = p.parentNode;
+ }
}
}
+
+ return false;
}
+
};
-}();/*
+
+}();
+
+// shorter alias, save a few bytes
+Roo.dd.DDM = Roo.dd.DragDropMgr;
+Roo.dd.DDM._addListeners();
+
+}/*
* Based on:
* Ext JS Library 1.1.1
* Copyright(c) 2006-2007, Ext JS, LLC.
* Fork - LGPL
* <script type="text/javascript">
*/
-
/**
- * @class Roo.dd.Registry
- * Provides easy access to all drag drop components that are registered on a page. Items can be retrieved either
- * directly by DOM node id, or by passing in the drag drop event that occurred and looking up the event target.
- * @singleton
+ * @class Roo.dd.DD
+ * A DragDrop implementation where the linked element follows the
+ * mouse cursor during a drag.
+ * @extends Roo.dd.DragDrop
+ * @constructor
+ * @param {String} id the id of the linked element
+ * @param {String} sGroup the group of related DragDrop items
+ * @param {object} config an object containing configurable attributes
+ * Valid properties for DD:
+ * scroll
*/
-Roo.dd.Registry = function(){
- var elements = {};
- var handles = {};
- var autoIdSeed = 0;
+Roo.dd.DD = function(id, sGroup, config) {
+ if (id) {
+ this.init(id, sGroup, config);
+ }
+};
+
+Roo.extend(Roo.dd.DD, Roo.dd.DragDrop, {
- var getId = function(el, autogen){
- if(typeof el == "string"){
- return el;
- }
- var id = el.id;
- if(!id && autogen !== false){
- id = "roodd-" + (++autoIdSeed);
- el.id = id;
- }
- return id;
- };
-
- return {
/**
- * Register a drag drop element
- * @param {String|HTMLElement} element The id or DOM node to register
- * @param {Object} data (optional) A custom data object that will be passed between the elements that are involved
- * in drag drop operations. You can populate this object with any arbitrary properties that your own code
- * knows how to interpret, plus there are some specific properties known to the Registry that should be
- * populated in the data object (if applicable):
- * <pre>
-Value Description<br />
---------- ------------------------------------------<br />
-handles Array of DOM nodes that trigger dragging<br />
- for the element being registered<br />
-isHandle True if the element passed in triggers<br />
- dragging itself, else false
-</pre>
+ * When set to true, the utility automatically tries to scroll the browser
+ * window wehn a drag and drop element is dragged near the viewport boundary.
+ * Defaults to true.
+ * @property scroll
+ * @type boolean
*/
- register : function(el, data){
- data = data || {};
- if(typeof el == "string"){
- el = document.getElementById(el);
- }
- data.ddel = el;
- elements[getId(el)] = data;
- if(data.isHandle !== false){
- handles[data.ddel.id] = data;
- }
- if(data.handles){
- var hs = data.handles;
- for(var i = 0, len = hs.length; i < len; i++){
- handles[getId(hs[i])] = data;
- }
- }
- },
+ scroll: true,
/**
- * Unregister a drag drop element
- * @param {String|HTMLElement} element The id or DOM node to unregister
+ * Sets the pointer offset to the distance between the linked element's top
+ * left corner and the location the element was clicked
+ * @method autoOffset
+ * @param {int} iPageX the X coordinate of the click
+ * @param {int} iPageY the Y coordinate of the click
*/
- unregister : function(el){
- var id = getId(el, false);
- var data = elements[id];
- if(data){
- delete elements[id];
- if(data.handles){
- var hs = data.handles;
- for(var i = 0, len = hs.length; i < len; i++){
- delete handles[getId(hs[i], false)];
- }
- }
- }
- },
+ autoOffset: function(iPageX, iPageY) {
+ var x = iPageX - this.startPageX;
+ var y = iPageY - this.startPageY;
+ this.setDelta(x, y);
+ },
/**
- * Returns the handle registered for a DOM Node by id
- * @param {String|HTMLElement} id The DOM node or id to look up
- * @return {Object} handle The custom handle data
+ * Sets the pointer offset. You can call this directly to force the
+ * offset to be in a particular location (e.g., pass in 0,0 to set it
+ * to the center of the object)
+ * @method setDelta
+ * @param {int} iDeltaX the distance from the left
+ * @param {int} iDeltaY the distance from the top
*/
- getHandle : function(id){
- if(typeof id != "string"){ // must be element?
- id = id.id;
- }
- return handles[id];
- },
+ setDelta: function(iDeltaX, iDeltaY) {
+ this.deltaX = iDeltaX;
+ this.deltaY = iDeltaY;
+ },
/**
- * Returns the handle that is registered for the DOM node that is the target of the event
- * @param {Event} e The event
- * @return {Object} handle The custom handle data
+ * Sets the drag element to the location of the mousedown or click event,
+ * maintaining the cursor location relative to the location on the element
+ * that was clicked. Override this if you want to place the element in a
+ * location other than where the cursor is.
+ * @method setDragElPos
+ * @param {int} iPageX the X coordinate of the mousedown or drag event
+ * @param {int} iPageY the Y coordinate of the mousedown or drag event
*/
- getHandleFromEvent : function(e){
- var t = Roo.lib.Event.getTarget(e);
- return t ? handles[t.id] : null;
- },
+ setDragElPos: function(iPageX, iPageY) {
+ // the first time we do this, we are going to check to make sure
+ // the element has css positioning
- /**
- * Returns a custom data object that is registered for a DOM node by id
- * @param {String|HTMLElement} id The DOM node or id to look up
- * @return {Object} data The custom data
- */
- getTarget : function(id){
- if(typeof id != "string"){ // must be element?
- id = id.id;
- }
- return elements[id];
- },
+ var el = this.getDragEl();
+ this.alignElWithMouse(el, iPageX, iPageY);
+ },
/**
- * Returns a custom data object that is registered for the DOM node that is the target of the event
- * @param {Event} e The event
- * @return {Object} data The custom data
+ * Sets the element to the location of the mousedown or click event,
+ * maintaining the cursor location relative to the location on the element
+ * that was clicked. Override this if you want to place the element in a
+ * location other than where the cursor is.
+ * @method alignElWithMouse
+ * @param {HTMLElement} el the element to move
+ * @param {int} iPageX the X coordinate of the mousedown or drag event
+ * @param {int} iPageY the Y coordinate of the mousedown or drag event
*/
- getTargetFromEvent : function(e){
- var t = Roo.lib.Event.getTarget(e);
- return t ? elements[t.id] || handles[t.id] : null;
+ alignElWithMouse: function(el, iPageX, iPageY) {
+ var oCoord = this.getTargetCoord(iPageX, iPageY);
+ var fly = el.dom ? el : Roo.fly(el);
+ if (!this.deltaSetXY) {
+ var aCoord = [oCoord.x, oCoord.y];
+ fly.setXY(aCoord);
+ var newLeft = fly.getLeft(true);
+ var newTop = fly.getTop(true);
+ this.deltaSetXY = [ newLeft - oCoord.x, newTop - oCoord.y ];
+ } else {
+ fly.setLeftTop(oCoord.x + this.deltaSetXY[0], oCoord.y + this.deltaSetXY[1]);
}
- };
-}();/*
- * 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.dd.StatusProxy
- * A specialized drag proxy that supports a drop status icon, {@link Roo.Layer} styles and auto-repair. This is the
- * default drag proxy used by all Roo.dd components.
- * @constructor
- * @param {Object} config
- */
-Roo.dd.StatusProxy = function(config){
- Roo.apply(this, config);
- this.id = this.id || Roo.id();
- this.el = new Roo.Layer({
- dh: {
- id: this.id, tag: "div", cls: "x-dd-drag-proxy "+this.dropNotAllowed, children: [
- {tag: "div", cls: "x-dd-drop-icon"},
- {tag: "div", cls: "x-dd-drag-ghost"}
- ]
- },
- shadow: !config || config.shadow !== false
- });
- this.ghost = Roo.get(this.el.dom.childNodes[1]);
- this.dropStatus = this.dropNotAllowed;
-};
-Roo.dd.StatusProxy.prototype = {
- /**
- * @cfg {String} dropAllowed
- * The CSS class to apply to the status element when drop is allowed (defaults to "x-dd-drop-ok").
- */
- dropAllowed : "x-dd-drop-ok",
- /**
- * @cfg {String} dropNotAllowed
- * The CSS class to apply to the status element when drop is not allowed (defaults to "x-dd-drop-nodrop").
- */
- dropNotAllowed : "x-dd-drop-nodrop",
+ this.cachePosition(oCoord.x, oCoord.y);
+ this.autoScroll(oCoord.x, oCoord.y, el.offsetHeight, el.offsetWidth);
+ return oCoord;
+ },
/**
- * Updates the proxy's visual element to indicate the status of whether or not drop is allowed
- * over the current target element.
- * @param {String} cssClass The css class for the new drop status indicator image
+ * Saves the most recent position so that we can reset the constraints and
+ * tick marks on-demand. We need to know this so that we can calculate the
+ * number of pixels the element is offset from its original position.
+ * @method cachePosition
+ * @param iPageX the current x position (optional, this just makes it so we
+ * don't have to look it up again)
+ * @param iPageY the current y position (optional, this just makes it so we
+ * don't have to look it up again)
*/
- setStatus : function(cssClass){
- cssClass = cssClass || this.dropNotAllowed;
- if(this.dropStatus != cssClass){
- this.el.replaceClass(this.dropStatus, cssClass);
- this.dropStatus = cssClass;
+ cachePosition: function(iPageX, iPageY) {
+ if (iPageX) {
+ this.lastPageX = iPageX;
+ this.lastPageY = iPageY;
+ } else {
+ var aCoord = Roo.lib.Dom.getXY(this.getEl());
+ this.lastPageX = aCoord[0];
+ this.lastPageY = aCoord[1];
}
},
/**
- * Resets the status indicator to the default dropNotAllowed value
- * @param {Boolean} clearGhost True to also remove all content from the ghost, false to preserve it
+ * Auto-scroll the window if the dragged object has been moved beyond the
+ * visible window boundary.
+ * @method autoScroll
+ * @param {int} x the drag element's x position
+ * @param {int} y the drag element's y position
+ * @param {int} h the height of the drag element
+ * @param {int} w the width of the drag element
+ * @private
*/
- reset : function(clearGhost){
- this.el.dom.className = "x-dd-drag-proxy " + this.dropNotAllowed;
- this.dropStatus = this.dropNotAllowed;
- if(clearGhost){
- this.ghost.update("");
+ autoScroll: function(x, y, h, w) {
+
+ if (this.scroll) {
+ // The client height
+ var clientH = Roo.lib.Dom.getViewWidth();
+
+ // The client width
+ var clientW = Roo.lib.Dom.getViewHeight();
+
+ // The amt scrolled down
+ var st = this.DDM.getScrollTop();
+
+ // The amt scrolled right
+ var sl = this.DDM.getScrollLeft();
+
+ // Location of the bottom of the element
+ var bot = h + y;
+
+ // Location of the right of the element
+ var right = w + x;
+
+ // The distance from the cursor to the bottom of the visible area,
+ // adjusted so that we don't scroll if the cursor is beyond the
+ // element drag constraints
+ var toBot = (clientH + st - y - this.deltaY);
+
+ // The distance from the cursor to the right of the visible area
+ var toRight = (clientW + sl - x - this.deltaX);
+
+
+ // How close to the edge the cursor must be before we scroll
+ // var thresh = (document.all) ? 100 : 40;
+ var thresh = 40;
+
+ // How many pixels to scroll per autoscroll op. This helps to reduce
+ // clunky scrolling. IE is more sensitive about this ... it needs this
+ // value to be higher.
+ var scrAmt = (document.all) ? 80 : 30;
+
+ // Scroll down if we are near the bottom of the visible page and the
+ // obj extends below the crease
+ if ( bot > clientH && toBot < thresh ) {
+ window.scrollTo(sl, st + scrAmt);
+ }
+
+ // Scroll up if the window is scrolled down and the top of the object
+ // goes above the top border
+ if ( y < st && st > 0 && y - st < thresh ) {
+ window.scrollTo(sl, st - scrAmt);
+ }
+
+ // Scroll right if the obj is beyond the right border and the cursor is
+ // near the border.
+ if ( right > clientW && toRight < thresh ) {
+ window.scrollTo(sl + scrAmt, st);
+ }
+
+ // Scroll left if the window has been scrolled to the right and the obj
+ // extends past the left border
+ if ( x < sl && sl > 0 && x - sl < thresh ) {
+ window.scrollTo(sl - scrAmt, st);
+ }
}
},
/**
- * Updates the contents of the ghost element
- * @param {String} html The html that will replace the current innerHTML of the ghost element
+ * Finds the location the element should be placed if we want to move
+ * it to where the mouse location less the click offset would place us.
+ * @method getTargetCoord
+ * @param {int} iPageX the X coordinate of the click
+ * @param {int} iPageY the Y coordinate of the click
+ * @return an object that contains the coordinates (Object.x and Object.y)
+ * @private
*/
- update : function(html){
- if(typeof html == "string"){
- this.ghost.update(html);
- }else{
- this.ghost.update("");
- html.style.margin = "0";
- this.ghost.dom.appendChild(html);
+ getTargetCoord: function(iPageX, iPageY) {
+
+
+ var x = iPageX - this.deltaX;
+ var y = iPageY - this.deltaY;
+
+ if (this.constrainX) {
+ if (x < this.minX) { x = this.minX; }
+ if (x > this.maxX) { x = this.maxX; }
}
- // ensure float = none set?? cant remember why though.
- var el = this.ghost.dom.firstChild;
- if(el){
- Roo.fly(el).setStyle('float', 'none');
- }
- },
-
- /**
- * Returns the underlying proxy {@link Roo.Layer}
- * @return {Roo.Layer} el
- */
- getEl : function(){
- return this.el;
+
+ if (this.constrainY) {
+ if (y < this.minY) { y = this.minY; }
+ if (y > this.maxY) { y = this.maxY; }
+ }
+
+ x = this.getTick(x, this.xTicks);
+ y = this.getTick(y, this.yTicks);
+
+
+ return {x:x, y:y};
},
- /**
- * Returns the ghost element
- * @return {Roo.Element} el
+ /*
+ * Sets up config options specific to this class. Overrides
+ * Roo.dd.DragDrop, but all versions of this method through the
+ * inheritance chain are called
*/
- getGhost : function(){
- return this.ghost;
+ applyConfig: function() {
+ Roo.dd.DD.superclass.applyConfig.call(this);
+ this.scroll = (this.config.scroll !== false);
},
- /**
- * Hides the proxy
- * @param {Boolean} clear True to reset the status and clear the ghost contents, false to preserve them
+ /*
+ * Event that fires prior to the onMouseDown event. Overrides
+ * Roo.dd.DragDrop.
*/
- hide : function(clear){
- this.el.hide();
- if(clear){
- this.reset(true);
- }
+ b4MouseDown: function(e) {
+ // this.resetConstraints();
+ this.autoOffset(e.getPageX(),
+ e.getPageY());
},
- /**
- * Stops the repair animation if it's currently running
+ /*
+ * Event that fires prior to the onDrag event. Overrides
+ * Roo.dd.DragDrop.
*/
- stop : function(){
- if(this.anim && this.anim.isAnimated && this.anim.isAnimated()){
- this.anim.stop();
- }
+ b4Drag: function(e) {
+ this.setDragElPos(e.getPageX(),
+ e.getPageY());
},
- /**
- * Displays this proxy
- */
- show : function(){
- this.el.show();
+ toString: function() {
+ return ("DD " + this.id);
+ }
+
+ //////////////////////////////////////////////////////////////////////////
+ // Debugging ygDragDrop events that can be overridden
+ //////////////////////////////////////////////////////////////////////////
+ /*
+ startDrag: function(x, y) {
},
- /**
- * Force the Layer to sync its shadow and shim positions to the element
- */
- sync : function(){
- this.el.sync();
+ onDrag: function(e) {
},
- /**
- * Causes the proxy to return to its position of origin via an animation. Should be called after an
- * invalid drop operation by the item being dragged.
- * @param {Array} xy The XY position of the element ([x, y])
- * @param {Function} callback The function to call after the repair is complete
- * @param {Object} scope The scope in which to execute the callback
- */
- repair : function(xy, callback, scope){
- this.callback = callback;
- this.scope = scope;
- if(xy && this.animRepair !== false){
- this.el.addClass("x-dd-drag-repair");
- this.el.hideUnders(true);
- this.anim = this.el.shift({
- duration: this.repairDuration || .5,
- easing: 'easeOut',
- xy: xy,
- stopFx: true,
- callback: this.afterRepair,
- scope: this
- });
- }else{
- this.afterRepair();
- }
+ onDragEnter: function(e, id) {
},
- // private
- afterRepair : function(){
- this.hide(true);
- if(typeof this.callback == "function"){
- this.callback.call(this.scope || this);
- }
- this.callback = null;
- this.scope = null;
+ onDragOver: function(e, id) {
+ },
+
+ onDragOut: function(e, id) {
+ },
+
+ onDragDrop: function(e, id) {
+ },
+
+ endDrag: function(e) {
}
-};/*
+
+ */
+
+});/*
* Based on:
* Ext JS Library 1.1.1
* Copyright(c) 2006-2007, Ext JS, LLC.
*/
/**
- * @class Roo.dd.DragSource
- * @extends Roo.dd.DDProxy
- * A simple class that provides the basic implementation needed to make any element draggable.
+ * @class Roo.dd.DDProxy
+ * A DragDrop implementation that inserts an empty, bordered div into
+ * the document that follows the cursor during drag operations. At the time of
+ * the click, the frame div is resized to the dimensions of the linked html
+ * element, and moved to the exact location of the linked element.
+ *
+ * References to the "frame" element refer to the single proxy element that
+ * was created to be dragged in place of all DDProxy elements on the
+ * page.
+ *
+ * @extends Roo.dd.DD
* @constructor
- * @param {String/HTMLElement/Element} el The container element
- * @param {Object} config
+ * @param {String} id the id of the linked html element
+ * @param {String} sGroup the group of related DragDrop objects
+ * @param {object} config an object containing configurable attributes
+ * Valid properties for DDProxy in addition to those in DragDrop:
+ * resizeFrame, centerFrame, dragElId
*/
-Roo.dd.DragSource = function(el, config){
- this.el = Roo.get(el);
- this.dragData = {};
-
- Roo.apply(this, config);
-
- if(!this.proxy){
- this.proxy = new Roo.dd.StatusProxy();
+Roo.dd.DDProxy = function(id, sGroup, config) {
+ if (id) {
+ this.init(id, sGroup, config);
+ this.initFrame();
}
-
- Roo.dd.DragSource.superclass.constructor.call(this, this.el.dom, this.ddGroup || this.group,
- {dragElId : this.proxy.id, resizeFrame: false, isTarget: false, scroll: this.scroll === true});
-
- this.dragging = false;
};
-Roo.extend(Roo.dd.DragSource, Roo.dd.DDProxy, {
+/**
+ * The default drag frame div id
+ * @property Roo.dd.DDProxy.dragElId
+ * @type String
+ * @static
+ */
+Roo.dd.DDProxy.dragElId = "ygddfdiv";
+
+Roo.extend(Roo.dd.DDProxy, Roo.dd.DD, {
+
/**
- * @cfg {String} dropAllowed
- * The CSS class returned to the drag source when drop is allowed (defaults to "x-dd-drop-ok").
+ * By default we resize the drag frame to be the same size as the element
+ * we want to drag (this is to get the frame effect). We can turn it off
+ * if we want a different behavior.
+ * @property resizeFrame
+ * @type boolean
*/
- dropAllowed : "x-dd-drop-ok",
+ resizeFrame: true,
+
/**
- * @cfg {String} dropNotAllowed
- * The CSS class returned to the drag source when drop is not allowed (defaults to "x-dd-drop-nodrop").
+ * By default the frame is positioned exactly where the drag element is, so
+ * we use the cursor offset provided by Roo.dd.DD. Another option that works only if
+ * you do not have constraints on the obj is to have the drag frame centered
+ * around the cursor. Set centerFrame to true for this effect.
+ * @property centerFrame
+ * @type boolean
*/
- dropNotAllowed : "x-dd-drop-nodrop",
+ centerFrame: false,
/**
- * Returns the data object associated with this drag source
- * @return {Object} data An object containing arbitrary data
+ * Creates the proxy element if it does not yet exist
+ * @method createFrame
*/
- getDragData : function(e){
- return this.dragData;
- },
+ createFrame: function() {
+ var self = this;
+ var body = document.body;
- // private
- onDragEnter : function(e, id){
- var target = Roo.dd.DragDropMgr.getDDById(id);
- this.cachedTarget = target;
- if(this.beforeDragEnter(target, e, id) !== false){
- if(target.isNotifyTarget){
- var status = target.notifyEnter(this, e, this.dragData);
- this.proxy.setStatus(status);
- }else{
- this.proxy.setStatus(this.dropAllowed);
- }
-
- if(this.afterDragEnter){
- /**
- * An empty function by default, but provided so that you can perform a custom action
- * when the dragged item enters the drop target by providing an implementation.
- * @param {Roo.dd.DragDrop} target The drop target
- * @param {Event} e The event object
- * @param {String} id The id of the dragged element
- * @method afterDragEnter
- */
- this.afterDragEnter(target, e, id);
- }
+ if (!body || !body.firstChild) {
+ setTimeout( function() { self.createFrame(); }, 50 );
+ return;
}
- },
- /**
- * An empty function by default, but provided so that you can perform a custom action
- * before the dragged item enters the drop target and optionally cancel the onDragEnter.
- * @param {Roo.dd.DragDrop} target The drop target
- * @param {Event} e The event object
- * @param {String} id The id of the dragged element
- * @return {Boolean} isValid True if the drag event is valid, else false to cancel
- */
- beforeDragEnter : function(target, e, id){
- return true;
- },
+ var div = this.getDragEl();
- // private
- alignElWithMouse: function() {
- Roo.dd.DragSource.superclass.alignElWithMouse.apply(this, arguments);
- this.proxy.sync();
- },
+ if (!div) {
+ div = document.createElement("div");
+ div.id = this.dragElId;
+ var s = div.style;
- // private
- onDragOver : function(e, id){
- var target = this.cachedTarget || Roo.dd.DragDropMgr.getDDById(id);
- if(this.beforeDragOver(target, e, id) !== false){
- if(target.isNotifyTarget){
- var status = target.notifyOver(this, e, this.dragData);
- this.proxy.setStatus(status);
- }
+ s.position = "absolute";
+ s.visibility = "hidden";
+ s.cursor = "move";
+ s.border = "2px solid #aaa";
+ s.zIndex = 999;
- if(this.afterDragOver){
- /**
- * An empty function by default, but provided so that you can perform a custom action
- * while the dragged item is over the drop target by providing an implementation.
- * @param {Roo.dd.DragDrop} target The drop target
- * @param {Event} e The event object
- * @param {String} id The id of the dragged element
- * @method afterDragOver
- */
- this.afterDragOver(target, e, id);
- }
+ // appendChild can blow up IE if invoked prior to the window load event
+ // while rendering a table. It is possible there are other scenarios
+ // that would cause this to happen as well.
+ body.insertBefore(div, body.firstChild);
}
},
/**
- * An empty function by default, but provided so that you can perform a custom action
- * while the dragged item is over the drop target and optionally cancel the onDragOver.
- * @param {Roo.dd.DragDrop} target The drop target
- * @param {Event} e The event object
- * @param {String} id The id of the dragged element
- * @return {Boolean} isValid True if the drag event is valid, else false to cancel
+ * Initialization for the drag frame element. Must be called in the
+ * constructor of all subclasses
+ * @method initFrame
*/
- beforeDragOver : function(target, e, id){
- return true;
+ initFrame: function() {
+ this.createFrame();
},
- // private
- onDragOut : function(e, id){
- var target = this.cachedTarget || Roo.dd.DragDropMgr.getDDById(id);
- if(this.beforeDragOut(target, e, id) !== false){
- if(target.isNotifyTarget){
- target.notifyOut(this, e, this.dragData);
- }
- this.proxy.reset();
- if(this.afterDragOut){
- /**
- * An empty function by default, but provided so that you can perform a custom action
- * after the dragged item is dragged out of the target without dropping.
- * @param {Roo.dd.DragDrop} target The drop target
- * @param {Event} e The event object
- * @param {String} id The id of the dragged element
- * @method afterDragOut
- */
- this.afterDragOut(target, e, id);
- }
- }
- this.cachedTarget = null;
- },
+ applyConfig: function() {
+ Roo.dd.DDProxy.superclass.applyConfig.call(this);
- /**
- * An empty function by default, but provided so that you can perform a custom action before the dragged
- * item is dragged out of the target without dropping, and optionally cancel the onDragOut.
- * @param {Roo.dd.DragDrop} target The drop target
- * @param {Event} e The event object
- * @param {String} id The id of the dragged element
- * @return {Boolean} isValid True if the drag event is valid, else false to cancel
- */
- beforeDragOut : function(target, e, id){
- return true;
- },
-
- // private
- onDragDrop : function(e, id){
- var target = this.cachedTarget || Roo.dd.DragDropMgr.getDDById(id);
- if(this.beforeDragDrop(target, e, id) !== false){
- if(target.isNotifyTarget){
- if(target.notifyDrop(this, e, this.dragData)){ // valid drop?
- this.onValidDrop(target, e, id);
- }else{
- this.onInvalidDrop(target, e, id);
- }
- }else{
- this.onValidDrop(target, e, id);
- }
-
- if(this.afterDragDrop){
- /**
- * An empty function by default, but provided so that you can perform a custom action
- * after a valid drag drop has occurred by providing an implementation.
- * @param {Roo.dd.DragDrop} target The drop target
- * @param {Event} e The event object
- * @param {String} id The id of the dropped element
- * @method afterDragDrop
- */
- this.afterDragDrop(target, e, id);
- }
- }
- delete this.cachedTarget;
+ this.resizeFrame = (this.config.resizeFrame !== false);
+ this.centerFrame = (this.config.centerFrame);
+ this.setDragElId(this.config.dragElId || Roo.dd.DDProxy.dragElId);
},
/**
- * An empty function by default, but provided so that you can perform a custom action before the dragged
- * item is dropped onto the target and optionally cancel the onDragDrop.
- * @param {Roo.dd.DragDrop} target The drop target
- * @param {Event} e The event object
- * @param {String} id The id of the dragged element
- * @return {Boolean} isValid True if the drag drop event is valid, else false to cancel
+ * Resizes the drag frame to the dimensions of the clicked object, positions
+ * it over the object, and finally displays it
+ * @method showFrame
+ * @param {int} iPageX X click position
+ * @param {int} iPageY Y click position
+ * @private
*/
- beforeDragDrop : function(target, e, id){
- return true;
- },
-
- // private
- onValidDrop : function(target, e, id){
- this.hideProxy();
- if(this.afterValidDrop){
- /**
- * An empty function by default, but provided so that you can perform a custom action
- * after a valid drop has occurred by providing an implementation.
- * @param {Object} target The target DD
- * @param {Event} e The event object
- * @param {String} id The id of the dropped element
- * @method afterInvalidDrop
- */
- this.afterValidDrop(target, e, id);
- }
- },
+ showFrame: function(iPageX, iPageY) {
+ var el = this.getEl();
+ var dragEl = this.getDragEl();
+ var s = dragEl.style;
- // private
- getRepairXY : function(e, data){
- return this.el.getXY();
- },
+ this._resizeProxy();
- // private
- onInvalidDrop : function(target, e, id){
- this.beforeInvalidDrop(target, e, id);
- if(this.cachedTarget){
- if(this.cachedTarget.isNotifyTarget){
- this.cachedTarget.notifyOut(this, e, this.dragData);
- }
- this.cacheTarget = null;
+ if (this.centerFrame) {
+ this.setDelta( Math.round(parseInt(s.width, 10)/2),
+ Math.round(parseInt(s.height, 10)/2) );
}
- this.proxy.repair(this.getRepairXY(e, this.dragData), this.afterRepair, this);
- if(this.afterInvalidDrop){
- /**
- * An empty function by default, but provided so that you can perform a custom action
- * after an invalid drop has occurred by providing an implementation.
- * @param {Event} e The event object
- * @param {String} id The id of the dropped element
- * @method afterInvalidDrop
- */
- this.afterInvalidDrop(e, id);
- }
- },
+ this.setDragElPos(iPageX, iPageY);
- // private
- afterRepair : function(){
- if(Roo.enableFx){
- this.el.highlight(this.hlColor || "c3daf9");
- }
- this.dragging = false;
+ Roo.fly(dragEl).show();
},
/**
- * An empty function by default, but provided so that you can perform a custom action after an invalid
- * drop has occurred.
- * @param {Roo.dd.DragDrop} target The drop target
- * @param {Event} e The event object
- * @param {String} id The id of the dragged element
- * @return {Boolean} isValid True if the invalid drop should proceed, else false to cancel
+ * The proxy is automatically resized to the dimensions of the linked
+ * element when a drag is initiated, unless resizeFrame is set to false
+ * @method _resizeProxy
+ * @private
*/
- beforeInvalidDrop : function(target, e, id){
- return true;
- },
-
- // private
- handleMouseDown : function(e){
- if(this.dragging) {
- return;
+ _resizeProxy: function() {
+ if (this.resizeFrame) {
+ var el = this.getEl();
+ Roo.fly(this.getDragEl()).setSize(el.offsetWidth, el.offsetHeight);
}
- var data = this.getDragData(e);
- if(data && this.onBeforeDrag(data, e) !== false){
- this.dragData = data;
- this.proxy.stop();
- Roo.dd.DragSource.superclass.handleMouseDown.apply(this, arguments);
- }
},
- /**
- * An empty function by default, but provided so that you can perform a custom action before the initial
- * drag event begins and optionally cancel it.
- * @param {Object} data An object containing arbitrary data to be shared with drop targets
- * @param {Event} e The event object
- * @return {Boolean} isValid True if the drag event is valid, else false to cancel
- */
- onBeforeDrag : function(data, e){
- return true;
+ // overrides Roo.dd.DragDrop
+ b4MouseDown: function(e) {
+ var x = e.getPageX();
+ var y = e.getPageY();
+ this.autoOffset(x, y);
+ this.setDragElPos(x, y);
},
- /**
- * An empty function by default, but provided so that you can perform a custom action once the initial
- * drag event has begun. The drag cannot be canceled from this function.
- * @param {Number} x The x position of the click on the dragged object
- * @param {Number} y The y position of the click on the dragged object
- */
- onStartDrag : Roo.emptyFn,
-
- // private - YUI override
- startDrag : function(x, y){
- this.proxy.reset();
- this.dragging = true;
- this.proxy.update("");
- this.onInitDrag(x, y);
- this.proxy.show();
+ // overrides Roo.dd.DragDrop
+ b4StartDrag: function(x, y) {
+ // show the drag frame
+ this.showFrame(x, y);
},
- // private
- onInitDrag : function(x, y){
- var clone = this.el.dom.cloneNode(true);
- clone.id = Roo.id(); // prevent duplicate ids
- this.proxy.update(clone);
- this.onStartDrag(x, y);
- return true;
+ // overrides Roo.dd.DragDrop
+ b4EndDrag: function(e) {
+ Roo.fly(this.getDragEl()).hide();
},
- /**
- * Returns the drag source's underlying {@link Roo.dd.StatusProxy}
- * @return {Roo.dd.StatusProxy} proxy The StatusProxy
- */
- getProxy : function(){
- return this.proxy;
- },
+ // overrides Roo.dd.DragDrop
+ // By default we try to move the element to the last location of the frame.
+ // This is so that the default behavior mirrors that of Roo.dd.DD.
+ endDrag: function(e) {
- /**
- * Hides the drag source's {@link Roo.dd.StatusProxy}
- */
- hideProxy : function(){
- this.proxy.hide();
- this.proxy.reset(true);
- this.dragging = false;
- },
+ var lel = this.getEl();
+ var del = this.getDragEl();
- // private
- triggerCacheRefresh : function(){
- Roo.dd.DDM.refreshCache(this.groups);
- },
+ // Show the drag frame briefly so we can get its position
+ del.style.visibility = "";
- // private - override to prevent hiding
- b4EndDrag: function(e) {
+ this.beforeMove();
+ // Hide the linked element before the move to get around a Safari
+ // rendering bug.
+ lel.style.visibility = "hidden";
+ Roo.dd.DDM.moveToEl(lel, del);
+ del.style.visibility = "hidden";
+ lel.style.visibility = "";
+
+ this.afterDrag();
},
- // private - override to prevent moving
- endDrag : function(e){
- this.onEndDrag(this.dragData, e);
+ beforeMove : function(){
+
},
- // private
- onEndDrag : function(data, e){
+ afterDrag : function(){
+
},
-
- // private - pin to cursor
- autoOffset : function(x, y) {
- this.setDelta(-12, -20);
- }
-});/*
+
+ toString: function() {
+ return ("DDProxy " + this.id);
+ }
+
+});
+/*
* Based on:
* Ext JS Library 1.1.1
* Copyright(c) 2006-2007, Ext JS, LLC.
* <script type="text/javascript">
*/
-
-/**
- * @class Roo.dd.DropTarget
- * @extends Roo.dd.DDTarget
- * A simple class that provides the basic implementation needed to make any element a drop target that can have
- * draggable items dropped onto it. The drop has no effect until an implementation of notifyDrop is provided.
+ /**
+ * @class Roo.dd.DDTarget
+ * A DragDrop implementation that does not move, but can be a drop
+ * target. You would get the same result by simply omitting implementation
+ * for the event callbacks, but this way we reduce the processing cost of the
+ * event listener and the callbacks.
+ * @extends Roo.dd.DragDrop
* @constructor
- * @param {String/HTMLElement/Element} el The container element
- * @param {Object} config
+ * @param {String} id the id of the element that is a drop target
+ * @param {String} sGroup the group of related DragDrop objects
+ * @param {object} config an object containing configurable attributes
+ * Valid properties for DDTarget in addition to those in
+ * DragDrop:
+ * none
*/
-Roo.dd.DropTarget = function(el, config){
- this.el = Roo.get(el);
-
- var listeners = false; ;
- if (config && config.listeners) {
- listeners= config.listeners;
- delete config.listeners;
+Roo.dd.DDTarget = function(id, sGroup, config) {
+ if (id) {
+ this.initTarget(id, sGroup, config);
}
- Roo.apply(this, config);
-
- if(this.containerScroll){
- Roo.dd.ScrollManager.register(this.el);
+ if (config && (config.listeners || config.events)) {
+ Roo.dd.DragDrop.superclass.constructor.call(this, {
+ listeners : config.listeners || {},
+ events : config.events || {}
+ });
}
- this.addEvents( {
- /**
- * @scope Roo.dd.DropTarget
- */
-
- /**
- * @event enter
- * The function a {@link Roo.dd.DragSource} calls once to notify this drop target that the source is now over the
- * target. This default implementation adds the CSS class specified by overClass (if any) to the drop element
- * and returns the dropAllowed config value. This method should be overridden if drop validation is required.
- *
- * IMPORTANT : it should set this.overClass and this.dropAllowed
- *
- * @param {Roo.dd.DragSource} source The drag source that was dragged over this drop target
- * @param {Event} e The event
- * @param {Object} data An object containing arbitrary data supplied by the drag source
- */
- "enter" : true,
-
- /**
- * @event over
- * The function a {@link Roo.dd.DragSource} calls continuously while it is being dragged over the target.
- * This method will be called on every mouse movement while the drag source is over the drop target.
- * This default implementation simply returns the dropAllowed config value.
- *
- * IMPORTANT : it should set this.dropAllowed
- *
- * @param {Roo.dd.DragSource} source The drag source that was dragged over this drop target
- * @param {Event} e The event
- * @param {Object} data An object containing arbitrary data supplied by the drag source
-
- */
- "over" : true,
- /**
- * @event out
- * The function a {@link Roo.dd.DragSource} calls once to notify this drop target that the source has been dragged
- * out of the target without dropping. This default implementation simply removes the CSS class specified by
- * overClass (if any) from the drop element.
- *
- * @param {Roo.dd.DragSource} source The drag source that was dragged over this drop target
- * @param {Event} e The event
- * @param {Object} data An object containing arbitrary data supplied by the drag source
- */
- "out" : true,
-
- /**
- * @event drop
- * The function a {@link Roo.dd.DragSource} calls once to notify this drop target that the dragged item has
- * been dropped on it. This method has no default implementation and returns false, so you must provide an
- * implementation that does something to process the drop event and returns true so that the drag source's
- * repair action does not run.
- *
- * IMPORTANT : it should set this.success
- *
- * @param {Roo.dd.DragSource} source The drag source that was dragged over this drop target
- * @param {Event} e The event
- * @param {Object} data An object containing arbitrary data supplied by the drag source
- */
- "drop" : true
- });
-
-
- Roo.dd.DropTarget.superclass.constructor.call( this,
- this.el.dom,
- this.ddGroup || this.group,
- {
- isTarget: true,
- listeners : listeners || {}
-
-
- }
- );
-
};
-Roo.extend(Roo.dd.DropTarget, Roo.dd.DDTarget, {
- /**
- * @cfg {String} overClass
- * The CSS class applied to the drop target element while the drag source is over it (defaults to "").
- */
- /**
- * @cfg {String} ddGroup
- * The drag drop group to handle drop events for
- */
-
- /**
- * @cfg {String} dropAllowed
- * The CSS class returned to the drag source when drop is allowed (defaults to "x-dd-drop-ok").
- */
- dropAllowed : "x-dd-drop-ok",
- /**
- * @cfg {String} dropNotAllowed
- * The CSS class returned to the drag source when drop is not allowed (defaults to "x-dd-drop-nodrop").
- */
- dropNotAllowed : "x-dd-drop-nodrop",
- /**
- * @cfg {boolean} success
- * set this after drop listener..
- */
- success : false,
- /**
- * @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,
- // private
- isTarget : true,
+// Roo.dd.DDTarget.prototype = new Roo.dd.DragDrop();
+Roo.extend(Roo.dd.DDTarget, Roo.dd.DragDrop, {
+ toString: function() {
+ return ("DDTarget " + this.id);
+ }
+});
+/*
+ * 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">
+ */
+
- // private
- isNotifyTarget : true,
+/**
+ * @class Roo.dd.ScrollManager
+ * Provides automatic scrolling of overflow regions in the page during drag operations.<br><br>
+ * <b>Note: This class uses "Point Mode" and is untested in "Intersect Mode".</b>
+ * @static
+ */
+Roo.dd.ScrollManager = function(){
+ var ddm = Roo.dd.DragDropMgr;
+ var els = {};
+ var dragEl = null;
+ var proc = {};
- /**
- * @hide
- */
- notifyEnter : function(dd, e, data)
- {
- this.valid = true;
- this.fireEvent('enter', dd, e, data);
- if(this.overClass){
- this.el.addClass(this.overClass);
- }
- return typeof(this.valid) == 'string' ? 'x-dd-drop-' + this.valid : (
- this.valid ? this.dropAllowed : this.dropNotAllowed
- );
- },
-
- /**
- * @hide
- */
- notifyOver : function(dd, e, data)
- {
- this.valid = true;
- 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', dd, e, data);
- if(this.overClass){
- this.el.removeClass(this.overClass);
+
+
+ var onStop = function(e){
+ dragEl = null;
+ clearProc();
+ };
+
+ var triggerRefresh = function(){
+ if(ddm.dragCurrent){
+ ddm.refreshCache(ddm.dragCurrent.groups);
}
- },
-
- /**
- * @hide
- */
- notifyDrop : function(dd, e, data)
- {
- this.success = false;
- this.fireEvent('drop', dd, e, data);
- return this.success;
- }
-});/*
+ };
+
+ var doScroll = function(){
+ if(ddm.dragCurrent){
+ var dds = Roo.dd.ScrollManager;
+ if(!dds.animate){
+ if(proc.el.scroll(proc.dir, dds.increment)){
+ triggerRefresh();
+ }
+ }else{
+ proc.el.scroll(proc.dir, dds.increment, true, dds.animDuration, triggerRefresh);
+ }
+ }
+ };
+
+ var clearProc = function(){
+ if(proc.id){
+ clearInterval(proc.id);
+ }
+ proc.id = 0;
+ proc.el = null;
+ proc.dir = "";
+ };
+
+ var startProc = function(el, dir){
+ Roo.log('scroll startproc');
+ clearProc();
+ proc.el = el;
+ proc.dir = dir;
+ proc.id = setInterval(doScroll, Roo.dd.ScrollManager.frequency);
+ };
+
+ var onFire = function(e, isDrop){
+
+ if(isDrop || !ddm.dragCurrent){ return; }
+ var dds = Roo.dd.ScrollManager;
+ if(!dragEl || dragEl != ddm.dragCurrent){
+ dragEl = ddm.dragCurrent;
+ // refresh regions on drag start
+ dds.refreshCache();
+ }
+
+ var xy = Roo.lib.Event.getXY(e);
+ var pt = new Roo.lib.Point(xy[0], xy[1]);
+ for(var id in els){
+ var el = els[id], r = el._region;
+ if(r && r.contains(pt) && el.isScrollable()){
+ if(r.bottom - pt.y <= dds.thresh){
+ if(proc.el != el){
+ startProc(el, "down");
+ }
+ return;
+ }else if(r.right - pt.x <= dds.thresh){
+ if(proc.el != el){
+ startProc(el, "left");
+ }
+ return;
+ }else if(pt.y - r.top <= dds.thresh){
+ if(proc.el != el){
+ startProc(el, "up");
+ }
+ return;
+ }else if(pt.x - r.left <= dds.thresh){
+ if(proc.el != el){
+ startProc(el, "right");
+ }
+ return;
+ }
+ }
+ }
+ clearProc();
+ };
+
+ ddm.fireEvents = ddm.fireEvents.createSequence(onFire, ddm);
+ ddm.stopDrag = ddm.stopDrag.createSequence(onStop, ddm);
+
+ return {
+ /**
+ * Registers new overflow element(s) to auto scroll
+ * @param {String/HTMLElement/Element/Array} el The id of or the element to be scrolled or an array of either
+ */
+ register : function(el){
+ if(el instanceof Array){
+ for(var i = 0, len = el.length; i < len; i++) {
+ this.register(el[i]);
+ }
+ }else{
+ el = Roo.get(el);
+ els[el.id] = el;
+ }
+ Roo.dd.ScrollManager.els = els;
+ },
+
+ /**
+ * Unregisters overflow element(s) so they are no longer scrolled
+ * @param {String/HTMLElement/Element/Array} el The id of or the element to be removed or an array of either
+ */
+ unregister : function(el){
+ if(el instanceof Array){
+ for(var i = 0, len = el.length; i < len; i++) {
+ this.unregister(el[i]);
+ }
+ }else{
+ el = Roo.get(el);
+ delete els[el.id];
+ }
+ },
+
+ /**
+ * The number of pixels from the edge of a container the pointer needs to be to
+ * trigger scrolling (defaults to 25)
+ * @type Number
+ */
+ thresh : 25,
+
+ /**
+ * The number of pixels to scroll in each scroll increment (defaults to 50)
+ * @type Number
+ */
+ increment : 100,
+
+ /**
+ * The frequency of scrolls in milliseconds (defaults to 500)
+ * @type Number
+ */
+ frequency : 500,
+
+ /**
+ * True to animate the scroll (defaults to true)
+ * @type Boolean
+ */
+ animate: true,
+
+ /**
+ * The animation duration in seconds -
+ * MUST BE less than Roo.dd.ScrollManager.frequency! (defaults to .4)
+ * @type Number
+ */
+ animDuration: .4,
+
+ /**
+ * Manually trigger a cache refresh.
+ */
+ refreshCache : function(){
+ for(var id in els){
+ if(typeof els[id] == 'object'){ // for people extending the object prototype
+ els[id]._region = els[id].getRegion();
+ }
+ }
+ }
+ };
+}();/*
* Based on:
* Ext JS Library 1.1.1
* Copyright(c) 2006-2007, Ext JS, LLC.
* Fork - LGPL
* <script type="text/javascript">
*/
-
+
/**
- * @class Roo.dd.DragZone
- * @extends Roo.dd.DragSource
- * This class provides a container DD instance that proxies for multiple child node sources.<br />
- * By default, this class requires that draggable child nodes are registered with {@link Roo.dd.Registry}.
- * @constructor
- * @param {String/HTMLElement/Element} el The container element
- * @param {Object} config
+ * @class Roo.dd.Registry
+ * Provides easy access to all drag drop components that are registered on a page. Items can be retrieved either
+ * directly by DOM node id, or by passing in the drag drop event that occurred and looking up the event target.
+ * @static
*/
-Roo.dd.DragZone = function(el, config){
- Roo.dd.DragZone.superclass.constructor.call(this, el, config);
- if(this.containerScroll){
- Roo.dd.ScrollManager.register(this.el);
- }
-};
+Roo.dd.Registry = function(){
+ var elements = {};
+ var handles = {};
+ var autoIdSeed = 0;
-Roo.extend(Roo.dd.DragZone, Roo.dd.DragSource, {
+ var getId = function(el, autogen){
+ if(typeof el == "string"){
+ return el;
+ }
+ var id = el.id;
+ if(!id && autogen !== false){
+ id = "roodd-" + (++autoIdSeed);
+ el.id = id;
+ }
+ return id;
+ };
+
+ return {
/**
- * @cfg {Boolean} containerScroll True to register this container with the Scrollmanager
- * for auto scrolling during drag operations.
+ * Register a drag drop element
+ * @param {String|HTMLElement} element The id or DOM node to register
+ * @param {Object} data (optional) A custom data object that will be passed between the elements that are involved
+ * in drag drop operations. You can populate this object with any arbitrary properties that your own code
+ * knows how to interpret, plus there are some specific properties known to the Registry that should be
+ * populated in the data object (if applicable):
+ * <pre>
+Value Description<br />
+--------- ------------------------------------------<br />
+handles Array of DOM nodes that trigger dragging<br />
+ for the element being registered<br />
+isHandle True if the element passed in triggers<br />
+ dragging itself, else false
+</pre>
*/
+ register : function(el, data){
+ data = data || {};
+ if(typeof el == "string"){
+ el = document.getElementById(el);
+ }
+ data.ddel = el;
+ elements[getId(el)] = data;
+ if(data.isHandle !== false){
+ handles[data.ddel.id] = data;
+ }
+ if(data.handles){
+ var hs = data.handles;
+ for(var i = 0, len = hs.length; i < len; i++){
+ handles[getId(hs[i])] = data;
+ }
+ }
+ },
+
/**
- * @cfg {String} hlColor The color to use when visually highlighting the drag source in the afterRepair
- * method after a failed drop (defaults to "c3daf9" - light blue)
+ * Unregister a drag drop element
+ * @param {String|HTMLElement} element The id or DOM node to unregister
*/
+ unregister : function(el){
+ var id = getId(el, false);
+ var data = elements[id];
+ if(data){
+ delete elements[id];
+ if(data.handles){
+ var hs = data.handles;
+ for(var i = 0, len = hs.length; i < len; i++){
+ delete handles[getId(hs[i], false)];
+ }
+ }
+ }
+ },
/**
- * Called when a mousedown occurs in this container. Looks in {@link Roo.dd.Registry}
- * for a valid target to drag based on the mouse down. Override this method
- * to provide your own lookup logic (e.g. finding a child by class name). Make sure your returned
- * object has a "ddel" attribute (with an HTML Element) for other functions to work.
- * @param {EventObject} e The mouse down event
- * @return {Object} The dragData
+ * Returns the handle registered for a DOM Node by id
+ * @param {String|HTMLElement} id The DOM node or id to look up
+ * @return {Object} handle The custom handle data
*/
- getDragData : function(e){
- return Roo.dd.Registry.getHandleFromEvent(e);
- },
-
+ getHandle : function(id){
+ if(typeof id != "string"){ // must be element?
+ id = id.id;
+ }
+ return handles[id];
+ },
+
/**
- * Called once drag threshold has been reached to initialize the proxy element. By default, it clones the
- * this.dragData.ddel
- * @param {Number} x The x position of the click on the dragged object
- * @param {Number} y The y position of the click on the dragged object
- * @return {Boolean} true to continue the drag, false to cancel
+ * Returns the handle that is registered for the DOM node that is the target of the event
+ * @param {Event} e The event
+ * @return {Object} handle The custom handle data
*/
- onInitDrag : function(x, y){
- this.proxy.update(this.dragData.ddel.cloneNode(true));
- this.onStartDrag(x, y);
- return true;
- },
-
+ getHandleFromEvent : function(e){
+ var t = Roo.lib.Event.getTarget(e);
+ return t ? handles[t.id] : null;
+ },
+
/**
- * Called after a repair of an invalid drop. By default, highlights this.dragData.ddel
+ * Returns a custom data object that is registered for a DOM node by id
+ * @param {String|HTMLElement} id The DOM node or id to look up
+ * @return {Object} data The custom data
*/
- afterRepair : function(){
- if(Roo.enableFx){
- Roo.Element.fly(this.dragData.ddel).highlight(this.hlColor || "c3daf9");
- }
- this.dragging = false;
- },
+ getTarget : function(id){
+ if(typeof id != "string"){ // must be element?
+ id = id.id;
+ }
+ return elements[id];
+ },
/**
- * Called before a repair of an invalid drop to get the XY to animate to. By default returns
- * the XY of this.dragData.ddel
- * @param {EventObject} e The mouse up event
- * @return {Array} The xy location (e.g. [100, 200])
+ * Returns a custom data object that is registered for the DOM node that is the target of the event
+ * @param {Event} e The event
+ * @return {Object} data The custom data
*/
- getRepairXY : function(e){
- return Roo.Element.fly(this.dragData.ddel).getXY();
- }
-});/*
+ getTargetFromEvent : function(e){
+ var t = Roo.lib.Event.getTarget(e);
+ return t ? elements[t.id] || handles[t.id] : null;
+ }
+ };
+}();/*
* Based on:
* Ext JS Library 1.1.1
* Copyright(c) 2006-2007, Ext JS, LLC.
* Fork - LGPL
* <script type="text/javascript">
*/
+
+
/**
- * @class Roo.dd.DropZone
- * @extends Roo.dd.DropTarget
- * This class provides a container DD instance that proxies for multiple child node targets.<br />
- * By default, this class requires that child nodes accepting drop are registered with {@link Roo.dd.Registry}.
+ * @class Roo.dd.StatusProxy
+ * A specialized drag proxy that supports a drop status icon, {@link Roo.Layer} styles and auto-repair. This is the
+ * default drag proxy used by all Roo.dd components.
* @constructor
- * @param {String/HTMLElement/Element} el The container element
* @param {Object} config
*/
-Roo.dd.DropZone = function(el, config){
- Roo.dd.DropZone.superclass.constructor.call(this, el, config);
+Roo.dd.StatusProxy = function(config){
+ Roo.apply(this, config);
+ this.id = this.id || Roo.id();
+ this.el = new Roo.Layer({
+ dh: {
+ id: this.id, tag: "div", cls: "x-dd-drag-proxy "+this.dropNotAllowed, children: [
+ {tag: "div", cls: "x-dd-drop-icon"},
+ {tag: "div", cls: "x-dd-drag-ghost"}
+ ]
+ },
+ shadow: !config || config.shadow !== false
+ });
+ this.ghost = Roo.get(this.el.dom.childNodes[1]);
+ this.dropStatus = this.dropNotAllowed;
};
-Roo.extend(Roo.dd.DropZone, Roo.dd.DropTarget, {
+Roo.dd.StatusProxy.prototype = {
/**
- * Returns a custom data object associated with the DOM node that is the target of the event. By default
- * this looks up the event target in the {@link Roo.dd.Registry}, although you can override this method to
- * provide your own custom lookup.
- * @param {Event} e The event
- * @return {Object} data The custom data
+ * @cfg {String} dropAllowed
+ * The CSS class to apply to the status element when drop is allowed (defaults to "x-dd-drop-ok").
*/
- getTargetFromEvent : function(e){
- return Roo.dd.Registry.getTargetFromEvent(e);
- },
-
+ dropAllowed : "x-dd-drop-ok",
/**
- * Called internally when the DropZone determines that a {@link Roo.dd.DragSource} has entered a drop node
- * that it has registered. This method has no default implementation and should be overridden to provide
- * node-specific processing if necessary.
- * @param {Object} nodeData The custom data associated with the drop node (this is the same value returned from
- * {@link #getTargetFromEvent} for this node)
- * @param {Roo.dd.DragSource} source The drag source that was dragged over this drop zone
- * @param {Event} e The event
- * @param {Object} data An object containing arbitrary data supplied by the drag source
+ * @cfg {String} dropNotAllowed
+ * The CSS class to apply to the status element when drop is not allowed (defaults to "x-dd-drop-nodrop").
*/
- onNodeEnter : function(n, dd, e, data){
-
- },
+ dropNotAllowed : "x-dd-drop-nodrop",
/**
- * Called internally while the DropZone determines that a {@link Roo.dd.DragSource} is over a drop node
- * that it has registered. The default implementation returns this.dropNotAllowed, so it should be
- * overridden to provide the proper feedback.
- * @param {Object} nodeData The custom data associated with the drop node (this is the same value returned from
- * {@link #getTargetFromEvent} for this node)
- * @param {Roo.dd.DragSource} source The drag source that was dragged over this drop zone
- * @param {Event} e The event
- * @param {Object} data An object containing arbitrary data supplied by the drag source
- * @return {String} status The CSS class that communicates the drop status back to the source so that the
- * underlying {@link Roo.dd.StatusProxy} can be updated
+ * Updates the proxy's visual element to indicate the status of whether or not drop is allowed
+ * over the current target element.
+ * @param {String} cssClass The css class for the new drop status indicator image
*/
- onNodeOver : function(n, dd, e, data){
- return this.dropAllowed;
+ setStatus : function(cssClass){
+ cssClass = cssClass || this.dropNotAllowed;
+ if(this.dropStatus != cssClass){
+ this.el.replaceClass(this.dropStatus, cssClass);
+ this.dropStatus = cssClass;
+ }
},
/**
- * Called internally when the DropZone determines that a {@link Roo.dd.DragSource} has been dragged out of
- * the drop node without dropping. This method has no default implementation and should be overridden to provide
- * node-specific processing if necessary.
- * @param {Object} nodeData The custom data associated with the drop node (this is the same value returned from
- * {@link #getTargetFromEvent} for this node)
- * @param {Roo.dd.DragSource} source The drag source that was dragged over this drop zone
- * @param {Event} e The event
- * @param {Object} data An object containing arbitrary data supplied by the drag source
+ * Resets the status indicator to the default dropNotAllowed value
+ * @param {Boolean} clearGhost True to also remove all content from the ghost, false to preserve it
*/
- onNodeOut : function(n, dd, e, data){
-
+ reset : function(clearGhost){
+ this.el.dom.className = "x-dd-drag-proxy " + this.dropNotAllowed;
+ this.dropStatus = this.dropNotAllowed;
+ if(clearGhost){
+ this.ghost.update("");
+ }
},
/**
- * Called internally when the DropZone determines that a {@link Roo.dd.DragSource} has been dropped onto
- * the drop node. The default implementation returns false, so it should be overridden to provide the
- * appropriate processing of the drop event and return true so that the drag source's repair action does not run.
- * @param {Object} nodeData The custom data associated with the drop node (this is the same value returned from
- * {@link #getTargetFromEvent} for this node)
- * @param {Roo.dd.DragSource} source The drag source that was dragged over this drop zone
- * @param {Event} e The event
- * @param {Object} data An object containing arbitrary data supplied by the drag source
- * @return {Boolean} True if the drop was valid, else false
+ * Updates the contents of the ghost element
+ * @param {String} html The html that will replace the current innerHTML of the ghost element
*/
- onNodeDrop : function(n, dd, e, data){
- return false;
+ update : function(html){
+ if(typeof html == "string"){
+ this.ghost.update(html);
+ }else{
+ this.ghost.update("");
+ html.style.margin = "0";
+ this.ghost.dom.appendChild(html);
+ }
+ // ensure float = none set?? cant remember why though.
+ var el = this.ghost.dom.firstChild;
+ if(el){
+ Roo.fly(el).setStyle('float', 'none');
+ }
},
-
+
/**
- * Called internally while the DropZone determines that a {@link Roo.dd.DragSource} is being dragged over it,
- * but not over any of its registered drop nodes. The default implementation returns this.dropNotAllowed, so
- * it should be overridden to provide the proper feedback if necessary.
- * @param {Roo.dd.DragSource} source The drag source that was dragged over this drop zone
- * @param {Event} e The event
- * @param {Object} data An object containing arbitrary data supplied by the drag source
- * @return {String} status The CSS class that communicates the drop status back to the source so that the
- * underlying {@link Roo.dd.StatusProxy} can be updated
- */
- onContainerOver : function(dd, e, data){
- return this.dropNotAllowed;
+ * Returns the underlying proxy {@link Roo.Layer}
+ * @return {Roo.Layer} el
+ */
+ getEl : function(){
+ return this.el;
},
/**
- * Called internally when the DropZone determines that a {@link Roo.dd.DragSource} has been dropped on it,
- * but not on any of its registered drop nodes. The default implementation returns false, so it should be
- * overridden to provide the appropriate processing of the drop event if you need the drop zone itself to
- * be able to accept drops. It should return true when valid so that the drag source's repair action does not run.
- * @param {Roo.dd.DragSource} source The drag source that was dragged over this drop zone
- * @param {Event} e The event
- * @param {Object} data An object containing arbitrary data supplied by the drag source
- * @return {Boolean} True if the drop was valid, else false
+ * Returns the ghost element
+ * @return {Roo.Element} el
*/
- onContainerDrop : function(dd, e, data){
- return false;
+ getGhost : function(){
+ return this.ghost;
},
/**
- * The function a {@link Roo.dd.DragSource} calls once to notify this drop zone that the source is now over
- * the zone. The default implementation returns this.dropNotAllowed and expects that only registered drop
- * nodes can process drag drop operations, so if you need the drop zone itself to be able to process drops
- * you should override this method and provide a custom implementation.
- * @param {Roo.dd.DragSource} source The drag source that was dragged over this drop zone
- * @param {Event} e The event
- * @param {Object} data An object containing arbitrary data supplied by the drag source
- * @return {String} status The CSS class that communicates the drop status back to the source so that the
- * underlying {@link Roo.dd.StatusProxy} can be updated
+ * Hides the proxy
+ * @param {Boolean} clear True to reset the status and clear the ghost contents, false to preserve them
*/
- notifyEnter : function(dd, e, data){
- return this.dropNotAllowed;
+ hide : function(clear){
+ this.el.hide();
+ if(clear){
+ this.reset(true);
+ }
},
/**
- * The function a {@link Roo.dd.DragSource} calls continuously while it is being dragged over the drop zone.
- * This method will be called on every mouse movement while the drag source is over the drop zone.
- * It will call {@link #onNodeOver} while the drag source is over a registered node, and will also automatically
- * delegate to the appropriate node-specific methods as necessary when the drag source enters and exits
- * registered nodes ({@link #onNodeEnter}, {@link #onNodeOut}). If the drag source is not currently over a
- * registered node, it will call {@link #onContainerOver}.
- * @param {Roo.dd.DragSource} source The drag source that was dragged over this drop zone
- * @param {Event} e The event
- * @param {Object} data An object containing arbitrary data supplied by the drag source
- * @return {String} status The CSS class that communicates the drop status back to the source so that the
- * underlying {@link Roo.dd.StatusProxy} can be updated
+ * Stops the repair animation if it's currently running
*/
- notifyOver : function(dd, e, data){
- var n = this.getTargetFromEvent(e);
- if(!n){ // not over valid drop target
- if(this.lastOverNode){
- this.onNodeOut(this.lastOverNode, dd, e, data);
- this.lastOverNode = null;
- }
- return this.onContainerOver(dd, e, data);
- }
- if(this.lastOverNode != n){
- if(this.lastOverNode){
- this.onNodeOut(this.lastOverNode, dd, e, data);
- }
- this.onNodeEnter(n, dd, e, data);
- this.lastOverNode = n;
+ stop : function(){
+ if(this.anim && this.anim.isAnimated && this.anim.isAnimated()){
+ this.anim.stop();
}
- return this.onNodeOver(n, dd, e, data);
},
/**
- * The function a {@link Roo.dd.DragSource} calls once to notify this drop zone that the source has been dragged
- * out of the zone without dropping. If the drag source is currently over a registered node, the notification
- * will be delegated to {@link #onNodeOut} for node-specific handling, otherwise it will be ignored.
- * @param {Roo.dd.DragSource} source The drag source that was dragged over this drop target
- * @param {Event} e The event
- * @param {Object} data An object containing arbitrary data supplied by the drag zone
+ * Displays this proxy
*/
- notifyOut : function(dd, e, data){
- if(this.lastOverNode){
- this.onNodeOut(this.lastOverNode, dd, e, data);
- this.lastOverNode = null;
- }
+ show : function(){
+ this.el.show();
},
/**
- * The function a {@link Roo.dd.DragSource} calls once to notify this drop zone that the dragged item has
- * been dropped on it. The drag zone will look up the target node based on the event passed in, and if there
- * is a node registered for that event, it will delegate to {@link #onNodeDrop} for node-specific handling,
- * otherwise it will call {@link #onContainerDrop}.
- * @param {Roo.dd.DragSource} source The drag source that was dragged over this drop zone
- * @param {Event} e The event
- * @param {Object} data An object containing arbitrary data supplied by the drag source
- * @return {Boolean} True if the drop was valid, else false
+ * Force the Layer to sync its shadow and shim positions to the element
*/
- notifyDrop : function(dd, e, data){
- if(this.lastOverNode){
- this.onNodeOut(this.lastOverNode, dd, e, data);
- this.lastOverNode = null;
+ sync : function(){
+ this.el.sync();
+ },
+
+ /**
+ * Causes the proxy to return to its position of origin via an animation. Should be called after an
+ * invalid drop operation by the item being dragged.
+ * @param {Array} xy The XY position of the element ([x, y])
+ * @param {Function} callback The function to call after the repair is complete
+ * @param {Object} scope The scope in which to execute the callback
+ */
+ repair : function(xy, callback, scope){
+ this.callback = callback;
+ this.scope = scope;
+ if(xy && this.animRepair !== false){
+ this.el.addClass("x-dd-drag-repair");
+ this.el.hideUnders(true);
+ this.anim = this.el.shift({
+ duration: this.repairDuration || .5,
+ easing: 'easeOut',
+ xy: xy,
+ stopFx: true,
+ callback: this.afterRepair,
+ scope: this
+ });
+ }else{
+ this.afterRepair();
}
- var n = this.getTargetFromEvent(e);
- return n ?
- this.onNodeDrop(n, dd, e, data) :
- this.onContainerDrop(dd, e, data);
},
// private
- triggerCacheRefresh : function(){
- Roo.dd.DDM.refreshCache(this.groups);
- }
-});/*
+ afterRepair : function(){
+ this.hide(true);
+ if(typeof this.callback == "function"){
+ this.callback.call(this.scope || this);
+ }
+ this.callback = null;
+ this.scope = null;
+ }
+};/*
* Based on:
* Ext JS Library 1.1.1
* Copyright(c) 2006-2007, Ext JS, LLC.
* <script type="text/javascript">
*/
-
/**
- * @class Roo.data.SortTypes
- * @singleton
- * Defines the default sorting (casting?) comparison functions used when sorting data.
+ * @class Roo.dd.DragSource
+ * @extends Roo.dd.DDProxy
+ * A simple class that provides the basic implementation needed to make any element draggable.
+ * @constructor
+ * @param {String/HTMLElement/Element} el The container element
+ * @param {Object} config
*/
-Roo.data.SortTypes = {
- /**
- * Default sort that does nothing
- * @param {Mixed} s The value being converted
- * @return {Mixed} The comparison value
- */
- none : function(s){
- return s;
- },
+Roo.dd.DragSource = function(el, config){
+ this.el = Roo.get(el);
+ this.dragData = {};
- /**
- * The regular expression used to strip tags
- * @type {RegExp}
- * @property
- */
- stripTagsRE : /<\/?[^>]+>/gi,
+ Roo.apply(this, config);
- /**
- * Strips all HTML tags to sort on text only
- * @param {Mixed} s The value being converted
- * @return {String} The comparison value
- */
- asText : function(s){
- return String(s).replace(this.stripTagsRE, "");
- },
+ if(!this.proxy){
+ this.proxy = new Roo.dd.StatusProxy();
+ }
+
+ Roo.dd.DragSource.superclass.constructor.call(this, this.el.dom, this.ddGroup || this.group,
+ {dragElId : this.proxy.id, resizeFrame: false, isTarget: false, scroll: this.scroll === true});
+ this.dragging = false;
+};
+
+Roo.extend(Roo.dd.DragSource, Roo.dd.DDProxy, {
/**
- * Strips all HTML tags to sort on text only - Case insensitive
- * @param {Mixed} s The value being converted
- * @return {String} The comparison value
+ * @cfg {String} dropAllowed
+ * The CSS class returned to the drag source when drop is allowed (defaults to "x-dd-drop-ok").
*/
- asUCText : function(s){
- return String(s).toUpperCase().replace(this.stripTagsRE, "");
- },
-
+ dropAllowed : "x-dd-drop-ok",
/**
- * Case insensitive string
- * @param {Mixed} s The value being converted
- * @return {String} The comparison value
+ * @cfg {String} dropNotAllowed
+ * The CSS class returned to the drag source when drop is not allowed (defaults to "x-dd-drop-nodrop").
*/
- asUCString : function(s) {
- return String(s).toUpperCase();
- },
-
+ dropNotAllowed : "x-dd-drop-nodrop",
+
/**
- * Date sorting
- * @param {Mixed} s The value being converted
- * @return {Number} The comparison value
+ * Returns the data object associated with this drag source
+ * @return {Object} data An object containing arbitrary data
*/
- asDate : function(s) {
- if(!s){
- return 0;
- }
- if(s instanceof Date){
- return s.getTime();
- }
- return Date.parse(String(s));
+ getDragData : function(e){
+ return this.dragData;
},
-
- /**
- * Float sorting
- * @param {Mixed} s The value being converted
- * @return {Float} The comparison value
- */
- asFloat : function(s) {
- var val = parseFloat(String(s).replace(/,/g, ""));
- if(isNaN(val)) {
- val = 0;
+
+ // private
+ onDragEnter : function(e, id){
+ var target = Roo.dd.DragDropMgr.getDDById(id);
+ this.cachedTarget = target;
+ if(this.beforeDragEnter(target, e, id) !== false){
+ if(target.isNotifyTarget){
+ var status = target.notifyEnter(this, e, this.dragData);
+ this.proxy.setStatus(status);
+ }else{
+ this.proxy.setStatus(this.dropAllowed);
+ }
+
+ if(this.afterDragEnter){
+ /**
+ * An empty function by default, but provided so that you can perform a custom action
+ * when the dragged item enters the drop target by providing an implementation.
+ * @param {Roo.dd.DragDrop} target The drop target
+ * @param {Event} e The event object
+ * @param {String} id The id of the dragged element
+ * @method afterDragEnter
+ */
+ this.afterDragEnter(target, e, id);
+ }
}
- return val;
},
-
+
/**
- * Integer sorting
- * @param {Mixed} s The value being converted
- * @return {Number} The comparison value
+ * An empty function by default, but provided so that you can perform a custom action
+ * before the dragged item enters the drop target and optionally cancel the onDragEnter.
+ * @param {Roo.dd.DragDrop} target The drop target
+ * @param {Event} e The event object
+ * @param {String} id The id of the dragged element
+ * @return {Boolean} isValid True if the drag event is valid, else false to cancel
*/
- asInt : function(s) {
- var val = parseInt(String(s).replace(/,/g, ""));
- if(isNaN(val)) {
- val = 0;
- }
- return val;
- }
-};/*
- * 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.data.Record
- * Instances of this class encapsulate both record <em>definition</em> information, and record
- * <em>value</em> information for use in {@link Roo.data.Store} objects, or any code which needs
- * to access Records cached in an {@link Roo.data.Store} object.<br>
- * <p>
- * Constructors for this class are generated by passing an Array of field definition objects to {@link #create}.
- * Instances are usually only created by {@link Roo.data.Reader} implementations when processing unformatted data
- * objects.<br>
- * <p>
- * Record objects generated by this constructor inherit all the methods of Roo.data.Record listed below.
- * @constructor
- * This constructor should not be used to create Record objects. Instead, use the constructor generated by
- * {@link #create}. The parameters are the same.
- * @param {Array} data An associative Array of data values keyed by the field name.
- * @param {Object} id (Optional) The id of the record. This id should be unique, and is used by the
- * {@link Roo.data.Store} object which owns the Record to index its collection of Records. If
- * not specified an integer id is generated.
- */
-Roo.data.Record = function(data, id){
- this.id = (id || id === 0) ? id : ++Roo.data.Record.AUTO_ID;
- this.data = data;
-};
+ beforeDragEnter : function(target, e, id){
+ return true;
+ },
-/**
- * Generate a constructor for a specific record layout.
- * @param {Array} o An Array of field definition objects which specify field names, and optionally,
- * data types, and a mapping for an {@link Roo.data.Reader} to extract the field's value from a data object.
- * Each field definition object may contain the following properties: <ul>
- * <li><b>name</b> : String<p style="margin-left:1em">The name by which the field is referenced within the Record. This is referenced by,
- * for example the <em>dataIndex</em> property in column definition objects passed to {@link Roo.grid.ColumnModel}</p></li>
- * <li><b>mapping</b> : String<p style="margin-left:1em">(Optional) A path specification for use by the {@link Roo.data.Reader} implementation
- * that is creating the Record to access the data value from the data object. If an {@link Roo.data.JsonReader}
- * is being used, then this is a string containing the javascript expression to reference the data relative to
- * the record item's root. If an {@link Roo.data.XmlReader} is being used, this is an {@link Roo.DomQuery} path
- * to the data item relative to the record element. If the mapping expression is the same as the field name,
- * this may be omitted.</p></li>
- * <li><b>type</b> : String<p style="margin-left:1em">(Optional) The data type for conversion to displayable value. Possible values are
- * <ul><li>auto (Default, implies no conversion)</li>
- * <li>string</li>
- * <li>int</li>
- * <li>float</li>
- * <li>boolean</li>
- * <li>date</li></ul></p></li>
- * <li><b>sortType</b> : Mixed<p style="margin-left:1em">(Optional) A member of {@link Roo.data.SortTypes}.</p></li>
- * <li><b>sortDir</b> : String<p style="margin-left:1em">(Optional) Initial direction to sort. "ASC" or "DESC"</p></li>
- * <li><b>convert</b> : Function<p style="margin-left:1em">(Optional) A function which converts the value provided
- * by the Reader into an object that will be stored in the Record. It is passed the
- * following parameters:<ul>
- * <li><b>v</b> : Mixed<p style="margin-left:1em">The data value as read by the Reader.</p></li>
- * </ul></p></li>
- * <li><b>dateFormat</b> : String<p style="margin-left:1em">(Optional) A format String for the Date.parseDate function.</p></li>
- * </ul>
- * <br>usage:<br><pre><code>
-var TopicRecord = Roo.data.Record.create(
- {name: 'title', mapping: 'topic_title'},
- {name: 'author', mapping: 'username'},
- {name: 'totalPosts', mapping: 'topic_replies', type: 'int'},
- {name: 'lastPost', mapping: 'post_time', type: 'date'},
- {name: 'lastPoster', mapping: 'user2'},
- {name: 'excerpt', mapping: 'post_text'}
-);
+ // private
+ alignElWithMouse: function() {
+ Roo.dd.DragSource.superclass.alignElWithMouse.apply(this, arguments);
+ this.proxy.sync();
+ },
-var myNewRecord = new TopicRecord({
- title: 'Do my job please',
- author: 'noobie',
- totalPosts: 1,
- lastPost: new Date(),
- lastPoster: 'Animal',
- excerpt: 'No way dude!'
-});
-myStore.add(myNewRecord);
-</code></pre>
- * @method create
- * @static
- */
-Roo.data.Record.create = function(o){
- var f = function(){
- f.superclass.constructor.apply(this, arguments);
- };
- Roo.extend(f, Roo.data.Record);
- var p = f.prototype;
- p.fields = new Roo.util.MixedCollection(false, function(field){
- return field.name;
- });
- for(var i = 0, len = o.length; i < len; i++){
- p.fields.add(new Roo.data.Field(o[i]));
- }
- f.getField = function(name){
- return p.fields.get(name);
- };
- return f;
-};
+ // private
+ onDragOver : function(e, id){
+ var target = this.cachedTarget || Roo.dd.DragDropMgr.getDDById(id);
+ if(this.beforeDragOver(target, e, id) !== false){
+ if(target.isNotifyTarget){
+ var status = target.notifyOver(this, e, this.dragData);
+ this.proxy.setStatus(status);
+ }
-Roo.data.Record.AUTO_ID = 1000;
-Roo.data.Record.EDIT = 'edit';
-Roo.data.Record.REJECT = 'reject';
-Roo.data.Record.COMMIT = 'commit';
+ if(this.afterDragOver){
+ /**
+ * An empty function by default, but provided so that you can perform a custom action
+ * while the dragged item is over the drop target by providing an implementation.
+ * @param {Roo.dd.DragDrop} target The drop target
+ * @param {Event} e The event object
+ * @param {String} id The id of the dragged element
+ * @method afterDragOver
+ */
+ this.afterDragOver(target, e, id);
+ }
+ }
+ },
-Roo.data.Record.prototype = {
/**
- * Readonly flag - true if this record has been modified.
- * @type Boolean
+ * An empty function by default, but provided so that you can perform a custom action
+ * while the dragged item is over the drop target and optionally cancel the onDragOver.
+ * @param {Roo.dd.DragDrop} target The drop target
+ * @param {Event} e The event object
+ * @param {String} id The id of the dragged element
+ * @return {Boolean} isValid True if the drag event is valid, else false to cancel
*/
- dirty : false,
- editing : false,
- error: null,
- modified: null,
+ beforeDragOver : function(target, e, id){
+ return true;
+ },
// private
- join : function(store){
- this.store = store;
+ onDragOut : function(e, id){
+ var target = this.cachedTarget || Roo.dd.DragDropMgr.getDDById(id);
+ if(this.beforeDragOut(target, e, id) !== false){
+ if(target.isNotifyTarget){
+ target.notifyOut(this, e, this.dragData);
+ }
+ this.proxy.reset();
+ if(this.afterDragOut){
+ /**
+ * An empty function by default, but provided so that you can perform a custom action
+ * after the dragged item is dragged out of the target without dropping.
+ * @param {Roo.dd.DragDrop} target The drop target
+ * @param {Event} e The event object
+ * @param {String} id The id of the dragged element
+ * @method afterDragOut
+ */
+ this.afterDragOut(target, e, id);
+ }
+ }
+ this.cachedTarget = null;
},
/**
- * Set the named field to the specified value.
- * @param {String} name The name of the field to set.
- * @param {Object} value The value to set the field to.
+ * An empty function by default, but provided so that you can perform a custom action before the dragged
+ * item is dragged out of the target without dropping, and optionally cancel the onDragOut.
+ * @param {Roo.dd.DragDrop} target The drop target
+ * @param {Event} e The event object
+ * @param {String} id The id of the dragged element
+ * @return {Boolean} isValid True if the drag event is valid, else false to cancel
*/
- set : function(name, value){
- if(this.data[name] == value){
- return;
- }
- this.dirty = true;
- if(!this.modified){
- this.modified = {};
- }
- if(typeof this.modified[name] == 'undefined'){
- this.modified[name] = this.data[name];
+ beforeDragOut : function(target, e, id){
+ return true;
+ },
+
+ // private
+ onDragDrop : function(e, id){
+ var target = this.cachedTarget || Roo.dd.DragDropMgr.getDDById(id);
+ if(this.beforeDragDrop(target, e, id) !== false){
+ if(target.isNotifyTarget){
+ if(target.notifyDrop(this, e, this.dragData)){ // valid drop?
+ this.onValidDrop(target, e, id);
+ }else{
+ this.onInvalidDrop(target, e, id);
+ }
+ }else{
+ this.onValidDrop(target, e, id);
+ }
+
+ if(this.afterDragDrop){
+ /**
+ * An empty function by default, but provided so that you can perform a custom action
+ * after a valid drag drop has occurred by providing an implementation.
+ * @param {Roo.dd.DragDrop} target The drop target
+ * @param {Event} e The event object
+ * @param {String} id The id of the dropped element
+ * @method afterDragDrop
+ */
+ this.afterDragDrop(target, e, id);
+ }
}
- this.data[name] = value;
- if(!this.editing && this.store){
- this.store.afterEdit(this);
- }
+ delete this.cachedTarget;
},
/**
- * Get the value of the named field.
- * @param {String} name The name of the field to get the value of.
- * @return {Object} The value of the field.
+ * An empty function by default, but provided so that you can perform a custom action before the dragged
+ * item is dropped onto the target and optionally cancel the onDragDrop.
+ * @param {Roo.dd.DragDrop} target The drop target
+ * @param {Event} e The event object
+ * @param {String} id The id of the dragged element
+ * @return {Boolean} isValid True if the drag drop event is valid, else false to cancel
*/
- get : function(name){
- return this.data[name];
+ beforeDragDrop : function(target, e, id){
+ return true;
},
// private
- beginEdit : function(){
- this.editing = true;
- this.modified = {};
+ onValidDrop : function(target, e, id){
+ this.hideProxy();
+ if(this.afterValidDrop){
+ /**
+ * An empty function by default, but provided so that you can perform a custom action
+ * after a valid drop has occurred by providing an implementation.
+ * @param {Object} target The target DD
+ * @param {Event} e The event object
+ * @param {String} id The id of the dropped element
+ * @method afterInvalidDrop
+ */
+ this.afterValidDrop(target, e, id);
+ }
},
// private
- cancelEdit : function(){
- this.editing = false;
- delete this.modified;
+ getRepairXY : function(e, data){
+ return this.el.getXY();
},
// private
- endEdit : function(){
- this.editing = false;
- if(this.dirty && this.store){
- this.store.afterEdit(this);
+ onInvalidDrop : function(target, e, id){
+ this.beforeInvalidDrop(target, e, id);
+ if(this.cachedTarget){
+ if(this.cachedTarget.isNotifyTarget){
+ this.cachedTarget.notifyOut(this, e, this.dragData);
+ }
+ this.cacheTarget = null;
+ }
+ this.proxy.repair(this.getRepairXY(e, this.dragData), this.afterRepair, this);
+
+ if(this.afterInvalidDrop){
+ /**
+ * An empty function by default, but provided so that you can perform a custom action
+ * after an invalid drop has occurred by providing an implementation.
+ * @param {Event} e The event object
+ * @param {String} id The id of the dropped element
+ * @method afterInvalidDrop
+ */
+ this.afterInvalidDrop(e, id);
+ }
+ },
+
+ // private
+ afterRepair : function(){
+ if(Roo.enableFx){
+ this.el.highlight(this.hlColor || "c3daf9");
}
+ this.dragging = false;
},
/**
- * Usually called by the {@link Roo.data.Store} which owns the Record.
- * Rejects all changes made to the Record since either creation, or the last commit operation.
- * Modified fields are reverted to their original values.
- * <p>
- * Developers should subscribe to the {@link Roo.data.Store#update} event to have their code notified
- * of reject operations.
+ * An empty function by default, but provided so that you can perform a custom action after an invalid
+ * drop has occurred.
+ * @param {Roo.dd.DragDrop} target The drop target
+ * @param {Event} e The event object
+ * @param {String} id The id of the dragged element
+ * @return {Boolean} isValid True if the invalid drop should proceed, else false to cancel
*/
- reject : function(){
- var m = this.modified;
- for(var n in m){
- if(typeof m[n] != "function"){
- this.data[n] = m[n];
- }
- }
- this.dirty = false;
- delete this.modified;
- this.editing = false;
- if(this.store){
- this.store.afterReject(this);
+ beforeInvalidDrop : function(target, e, id){
+ return true;
+ },
+
+ // private
+ handleMouseDown : function(e){
+ if(this.dragging) {
+ return;
}
+ var data = this.getDragData(e);
+ if(data && this.onBeforeDrag(data, e) !== false){
+ this.dragData = data;
+ this.proxy.stop();
+ Roo.dd.DragSource.superclass.handleMouseDown.apply(this, arguments);
+ }
},
/**
- * Usually called by the {@link Roo.data.Store} which owns the Record.
- * Commits all changes made to the Record since either creation, or the last commit operation.
- * <p>
- * Developers should subscribe to the {@link Roo.data.Store#update} event to have their code notified
- * of commit operations.
+ * An empty function by default, but provided so that you can perform a custom action before the initial
+ * drag event begins and optionally cancel it.
+ * @param {Object} data An object containing arbitrary data to be shared with drop targets
+ * @param {Event} e The event object
+ * @return {Boolean} isValid True if the drag event is valid, else false to cancel
*/
- commit : function(){
- this.dirty = false;
- delete this.modified;
- this.editing = false;
- if(this.store){
- this.store.afterCommit(this);
- }
+ onBeforeDrag : function(data, e){
+ return true;
},
- // private
- hasError : function(){
- return this.error != null;
+ /**
+ * An empty function by default, but provided so that you can perform a custom action once the initial
+ * drag event has begun. The drag cannot be canceled from this function.
+ * @param {Number} x The x position of the click on the dragged object
+ * @param {Number} y The y position of the click on the dragged object
+ */
+ onStartDrag : Roo.emptyFn,
+
+ // private - YUI override
+ startDrag : function(x, y){
+ this.proxy.reset();
+ this.dragging = true;
+ this.proxy.update("");
+ this.onInitDrag(x, y);
+ this.proxy.show();
},
// private
- clearError : function(){
- this.error = null;
+ onInitDrag : function(x, y){
+ var clone = this.el.dom.cloneNode(true);
+ clone.id = Roo.id(); // prevent duplicate ids
+ this.proxy.update(clone);
+ this.onStartDrag(x, y);
+ return true;
},
/**
- * Creates a copy of this record.
- * @param {String} id (optional) A new record id if you don't want to use this record's id
- * @return {Record}
+ * Returns the drag source's underlying {@link Roo.dd.StatusProxy}
+ * @return {Roo.dd.StatusProxy} proxy The StatusProxy
*/
- copy : function(newId) {
- return new this.constructor(Roo.apply({}, this.data), newId || this.id);
- }
-};/*
+ getProxy : function(){
+ return this.proxy;
+ },
+
+ /**
+ * Hides the drag source's {@link Roo.dd.StatusProxy}
+ */
+ hideProxy : function(){
+ this.proxy.hide();
+ this.proxy.reset(true);
+ this.dragging = false;
+ },
+
+ // private
+ triggerCacheRefresh : function(){
+ Roo.dd.DDM.refreshCache(this.groups);
+ },
+
+ // private - override to prevent hiding
+ b4EndDrag: function(e) {
+ },
+
+ // private - override to prevent moving
+ endDrag : function(e){
+ this.onEndDrag(this.dragData, e);
+ },
+
+ // private
+ onEndDrag : function(data, e){
+ },
+
+ // private - pin to cursor
+ autoOffset : function(x, y) {
+ this.setDelta(-12, -20);
+ }
+});/*
* Based on:
* Ext JS Library 1.1.1
* Copyright(c) 2006-2007, Ext JS, LLC.
*/
-
/**
- * @class Roo.data.Store
- * @extends Roo.util.Observable
- * The Store class encapsulates a client side cache of {@link Roo.data.Record} objects which provide input data
- * for widgets such as the Roo.grid.Grid, or the Roo.form.ComboBox.<br>
- * <p>
- * A Store object uses an implementation of {@link Roo.data.DataProxy} to access a data object unless you call loadData() directly and pass in your data. The Store object
- * has no knowledge of the format of the data returned by the Proxy.<br>
- * <p>
- * A Store object uses its configured implementation of {@link Roo.data.DataReader} to create {@link Roo.data.Record}
- * instances from the data object. These records are cached and made available through accessor functions.
+ * @class Roo.dd.DropTarget
+ * @extends Roo.dd.DDTarget
+ * A simple class that provides the basic implementation needed to make any element a drop target that can have
+ * draggable items dropped onto it. The drop has no effect until an implementation of notifyDrop is provided.
* @constructor
- * Creates a new Store.
- * @param {Object} config A config object containing the objects needed for the Store to access data,
- * and read the data into Records.
+ * @param {String/HTMLElement/Element} el The container element
+ * @param {Object} config
*/
-Roo.data.Store = function(config){
- this.data = new Roo.util.MixedCollection(false);
- this.data.getKey = function(o){
- return o.id;
- };
- this.baseParams = {};
- // private
- this.paramNames = {
- "start" : "start",
- "limit" : "limit",
- "sort" : "sort",
- "dir" : "dir",
- "multisort" : "_multisort"
- };
-
- if(config && config.data){
- this.inlineData = config.data;
- delete config.data;
+Roo.dd.DropTarget = function(el, config){
+ this.el = Roo.get(el);
+
+ var listeners = false; ;
+ if (config && config.listeners) {
+ listeners= config.listeners;
+ delete config.listeners;
}
-
Roo.apply(this, config);
- if(this.reader){ // reader passed
- this.reader = Roo.factory(this.reader, Roo.data);
- this.reader.xmodule = this.xmodule || false;
- if(!this.recordType){
- this.recordType = this.reader.recordType;
- }
- if(this.reader.onMetaChange){
- this.reader.onMetaChange = this.onMetaChange.createDelegate(this);
- }
- }
-
- if(this.recordType){
- this.fields = this.recordType.prototype.fields;
+ if(this.containerScroll){
+ Roo.dd.ScrollManager.register(this.el);
}
- this.modified = [];
-
- this.addEvents({
- /**
- * @event datachanged
- * Fires when the data cache has changed, and a widget which is using this Store
- * as a Record cache should refresh its view.
- * @param {Store} this
- */
- datachanged : true,
- /**
- * @event metachange
- * Fires when this store's reader provides new metadata (fields). This is currently only support for JsonReaders.
- * @param {Store} this
- * @param {Object} meta The JSON metadata
- */
- metachange : true,
- /**
- * @event add
- * Fires when Records have been added to the Store
- * @param {Store} this
- * @param {Roo.data.Record[]} records The array of Records added
- * @param {Number} index The index at which the record(s) were added
- */
- add : true,
- /**
- * @event remove
- * Fires when a Record has been removed from the Store
- * @param {Store} this
- * @param {Roo.data.Record} record The Record that was removed
- * @param {Number} index The index at which the record was removed
- */
- remove : true,
- /**
- * @event update
- * Fires when a Record has been updated
- * @param {Store} this
- * @param {Roo.data.Record} record The Record that was updated
- * @param {String} operation The update operation being performed. Value may be one of:
- * <pre><code>
- Roo.data.Record.EDIT
- Roo.data.Record.REJECT
- Roo.data.Record.COMMIT
- * </code></pre>
- */
- update : true,
- /**
- * @event clear
- * Fires when the data cache has been cleared.
- * @param {Store} this
+ this.addEvents( {
+ /**
+ * @scope Roo.dd.DropTarget
*/
- clear : true,
- /**
- * @event beforeload
- * Fires before a request is made for a new data object. If the beforeload handler returns false
- * the load action will be canceled.
- * @param {Store} this
- * @param {Object} options The loading options that were specified (see {@link #load} for details)
+
+ /**
+ * @event enter
+ * The function a {@link Roo.dd.DragSource} calls once to notify this drop target that the source is now over the
+ * target. This default implementation adds the CSS class specified by overClass (if any) to the drop element
+ * and returns the dropAllowed config value. This method should be overridden if drop validation is required.
+ *
+ * IMPORTANT : it should set this.valid to true|false
+ *
+ * @param {Roo.dd.DragSource} source The drag source that was dragged over this drop target
+ * @param {Event} e The event
+ * @param {Object} data An object containing arbitrary data supplied by the drag source
*/
- beforeload : true,
- /**
- * @event beforeloadadd
- * Fires after a new set of Records has been loaded.
- * @param {Store} this
- * @param {Roo.data.Record[]} records The Records that were loaded
- * @param {Object} options The loading options that were specified (see {@link #load} for details)
+ "enter" : true,
+
+ /**
+ * @event over
+ * The function a {@link Roo.dd.DragSource} calls continuously while it is being dragged over the target.
+ * This method will be called on every mouse movement while the drag source is over the drop target.
+ * This default implementation simply returns the dropAllowed config value.
+ *
+ * IMPORTANT : it should set this.valid to true|false
+ *
+ * @param {Roo.dd.DragSource} source The drag source that was dragged over this drop target
+ * @param {Event} e The event
+ * @param {Object} data An object containing arbitrary data supplied by the drag source
+
*/
- beforeloadadd : true,
+ "over" : true,
/**
- * @event load
- * Fires after a new set of Records has been loaded, before they are added to the store.
- * @param {Store} this
- * @param {Roo.data.Record[]} records The Records that were loaded
- * @param {Object} options The loading options that were specified (see {@link #load} for details)
- * @params {Object} return from reader
+ * @event out
+ * The function a {@link Roo.dd.DragSource} calls once to notify this drop target that the source has been dragged
+ * out of the target without dropping. This default implementation simply removes the CSS class specified by
+ * overClass (if any) from the drop element.
+ *
+ *
+ * @param {Roo.dd.DragSource} source The drag source that was dragged over this drop target
+ * @param {Event} e The event
+ * @param {Object} data An object containing arbitrary data supplied by the drag source
*/
- load : true,
+ "out" : true,
+
/**
- * @event loadexception
- * Fires if an exception occurs in the Proxy during loading.
- * Called with the signature of the Proxy's "loadexception" event.
- * If you return Json { data: [] , success: false, .... } then this will be thrown with the following args
+ * @event drop
+ * The function a {@link Roo.dd.DragSource} calls once to notify this drop target that the dragged item has
+ * been dropped on it. This method has no default implementation and returns false, so you must provide an
+ * implementation that does something to process the drop event and returns true so that the drag source's
+ * repair action does not run.
*
- * @param {Proxy}
- * @param {Object} return from JsonData.reader() - success, totalRecords, records
- * @param {Object} load options
- * @param {Object} jsonData from your request (normally this contains the Exception)
- */
- loadexception : true
+ * IMPORTANT : it should set this.success
+ *
+ * @param {Roo.dd.DragSource} source The drag source that was dragged over this drop target
+ * @param {Event} e The event
+ * @param {Object} data An object containing arbitrary data supplied by the drag source
+ */
+ "drop" : true
});
-
- if(this.proxy){
- this.proxy = Roo.factory(this.proxy, Roo.data);
- this.proxy.xmodule = this.xmodule || false;
- this.relayEvents(this.proxy, ["loadexception"]);
- }
- this.sortToggle = {};
- this.sortOrder = []; // array of order of sorting - updated by grid if multisort is enabled.
-
- Roo.data.Store.superclass.constructor.call(this);
+
+
+ Roo.dd.DropTarget.superclass.constructor.call( this,
+ this.el.dom,
+ this.ddGroup || this.group,
+ {
+ isTarget: true,
+ listeners : listeners || {}
+
+
+ }
+ );
- if(this.inlineData){
- this.loadData(this.inlineData);
- delete this.inlineData;
- }
};
-Roo.extend(Roo.data.Store, Roo.util.Observable, {
- /**
- * @cfg {boolean} isLocal flag if data is locally available (and can be always looked up
- * without a remote query - used by combo/forms at present.
- */
-
- /**
- * @cfg {Roo.data.DataProxy} proxy The Proxy object which provides access to a data object.
- */
- /**
- * @cfg {Array} data Inline data to be loaded when the store is initialized.
- */
- /**
- * @cfg {Roo.data.Reader} reader The Reader object which processes the data object and returns
- * an Array of Roo.data.record objects which are cached keyed by their <em>id</em> property.
- */
- /**
- * @cfg {Object} baseParams An object containing properties which are to be sent as parameters
- * on any HTTP request
- */
+Roo.extend(Roo.dd.DropTarget, Roo.dd.DDTarget, {
/**
- * @cfg {Object} sortInfo A config object in the format: {field: "fieldName", direction: "ASC|DESC"}
- */
+ * @cfg {String} overClass
+ * The CSS class applied to the drop target element while the drag source is over it (defaults to "").
+ */
+ /**
+ * @cfg {String} ddGroup
+ * The drag drop group to handle drop events for
+ */
+
/**
- * @cfg {Boolean} multiSort enable multi column sorting (sort is based on the order of columns, remote only at present)
- */
- multiSort: false,
+ * @cfg {String} dropAllowed
+ * The CSS class returned to the drag source when drop is allowed (defaults to "x-dd-drop-ok").
+ */
+ dropAllowed : "x-dd-drop-ok",
/**
- * @cfg {boolean} remoteSort True if sorting is to be handled by requesting the Proxy to provide a refreshed
- * version of the data object in sorted order, as opposed to sorting the Record cache in place (defaults to false).
- */
- remoteSort : false,
-
+ * @cfg {String} dropNotAllowed
+ * The CSS class returned to the drag source when drop is not allowed (defaults to "x-dd-drop-nodrop").
+ */
+ dropNotAllowed : "x-dd-drop-nodrop",
/**
- * @cfg {boolean} pruneModifiedRecords True to clear all modified record information each time the store is
- * loaded or when a record is removed. (defaults to false).
- */
- pruneModifiedRecords : false,
-
- // private
- lastOptions : null,
-
+ * @cfg {boolean} success
+ * set this after drop listener..
+ */
+ success : false,
/**
- * Add Records to the Store and fires the add event.
- * @param {Roo.data.Record[]} records An Array of Roo.data.Record objects to add to the cache.
+ * @cfg {boolean|String} valid true/false or string (ok-add/ok-sub/ok/nodrop)
+ * if the drop point is valid for over/enter..
*/
- add : function(records){
- records = [].concat(records);
- for(var i = 0, len = records.length; i < len; i++){
- records[i].join(this);
- }
- var index = this.data.length;
- this.data.addAll(records);
- this.fireEvent("add", this, records, index);
- },
+ valid : false,
+ // private
+ isTarget : true,
+ // private
+ isNotifyTarget : true,
+
/**
- * Remove a Record from the Store and fires the remove event.
- * @param {Ext.data.Record} record The Roo.data.Record object to remove from the cache.
+ * @hide
*/
- remove : function(record){
- var index = this.data.indexOf(record);
- this.data.removeAt(index);
- if(this.pruneModifiedRecords){
- this.modified.remove(record);
+ notifyEnter : function(dd, e, data)
+ {
+ this.valid = true;
+ this.fireEvent('enter', dd, e, data);
+ if(this.overClass){
+ this.el.addClass(this.overClass);
}
- this.fireEvent("remove", this, record, index);
+ return typeof(this.valid) == 'string' ? 'x-dd-drop-' + this.valid : (
+ this.valid ? this.dropAllowed : this.dropNotAllowed
+ );
},
/**
- * Remove all Records from the Store and fires the clear event.
+ * @hide
*/
- removeAll : function(){
- this.data.clear();
- if(this.pruneModifiedRecords){
- this.modified = [];
- }
- this.fireEvent("clear", this);
+ notifyOver : function(dd, e, data)
+ {
+ this.valid = true;
+ this.fireEvent('over', dd, e, data);
+ return typeof(this.valid) == 'string' ? 'x-dd-drop-' + this.valid : (
+ this.valid ? this.dropAllowed : this.dropNotAllowed
+ );
},
/**
- * Inserts Records to the Store at the given index and fires the add event.
- * @param {Number} index The start index at which to insert the passed Records.
- * @param {Roo.data.Record[]} records An Array of Roo.data.Record objects to add to the cache.
+ * @hide
*/
- insert : function(index, records){
- records = [].concat(records);
- for(var i = 0, len = records.length; i < len; i++){
- this.data.insert(index, records[i]);
- records[i].join(this);
+ notifyOut : function(dd, e, data)
+ {
+ this.fireEvent('out', dd, e, data);
+ if(this.overClass){
+ this.el.removeClass(this.overClass);
}
- this.fireEvent("add", this, records, index);
},
/**
- * Get the index within the cache of the passed Record.
- * @param {Roo.data.Record} record The Roo.data.Record object to to find.
- * @return {Number} The index of the passed Record. Returns -1 if not found.
+ * @hide
*/
- indexOf : function(record){
- return this.data.indexOf(record);
- },
-
- /**
- * Get the index within the cache of the Record with the passed id.
- * @param {String} id The id of the Record to find.
- * @return {Number} The index of the Record. Returns -1 if not found.
- */
- indexOfId : function(id){
- return this.data.indexOfKey(id);
- },
+ notifyDrop : function(dd, e, data)
+ {
+ this.success = false;
+ 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.dd.DragZone
+ * @extends Roo.dd.DragSource
+ * This class provides a container DD instance that proxies for multiple child node sources.<br />
+ * By default, this class requires that draggable child nodes are registered with {@link Roo.dd.Registry}.
+ * @constructor
+ * @param {String/HTMLElement/Element} el The container element
+ * @param {Object} config
+ */
+Roo.dd.DragZone = function(el, config){
+ Roo.dd.DragZone.superclass.constructor.call(this, el, config);
+ if(this.containerScroll){
+ Roo.dd.ScrollManager.register(this.el);
+ }
+};
+Roo.extend(Roo.dd.DragZone, Roo.dd.DragSource, {
/**
- * Get the Record with the specified id.
- * @param {String} id The id of the Record to find.
- * @return {Roo.data.Record} The Record with the passed id. Returns undefined if not found.
+ * @cfg {Boolean} containerScroll True to register this container with the Scrollmanager
+ * for auto scrolling during drag operations.
*/
- getById : function(id){
- return this.data.key(id);
- },
-
/**
- * Get the Record at the specified index.
- * @param {Number} index The index of the Record to find.
- * @return {Roo.data.Record} The Record at the passed index. Returns undefined if not found.
+ * @cfg {String} hlColor The color to use when visually highlighting the drag source in the afterRepair
+ * method after a failed drop (defaults to "c3daf9" - light blue)
*/
- getAt : function(index){
- return this.data.itemAt(index);
- },
/**
- * Returns a range of Records between specified indices.
- * @param {Number} startIndex (optional) The starting index (defaults to 0)
- * @param {Number} endIndex (optional) The ending index (defaults to the last Record in the Store)
- * @return {Roo.data.Record[]} An array of Records
+ * Called when a mousedown occurs in this container. Looks in {@link Roo.dd.Registry}
+ * for a valid target to drag based on the mouse down. Override this method
+ * to provide your own lookup logic (e.g. finding a child by class name). Make sure your returned
+ * object has a "ddel" attribute (with an HTML Element) for other functions to work.
+ * @param {EventObject} e The mouse down event
+ * @return {Object} The dragData
*/
- getRange : function(start, end){
- return this.data.getRange(start, end);
+ getDragData : function(e){
+ return Roo.dd.Registry.getHandleFromEvent(e);
},
-
- // private
- storeOptions : function(o){
- o = Roo.apply({}, o);
- delete o.callback;
- delete o.scope;
- this.lastOptions = o;
+
+ /**
+ * Called once drag threshold has been reached to initialize the proxy element. By default, it clones the
+ * this.dragData.ddel
+ * @param {Number} x The x position of the click on the dragged object
+ * @param {Number} y The y position of the click on the dragged object
+ * @return {Boolean} true to continue the drag, false to cancel
+ */
+ onInitDrag : function(x, y){
+ this.proxy.update(this.dragData.ddel.cloneNode(true));
+ this.onStartDrag(x, y);
+ return true;
},
-
+
/**
- * Loads the Record cache from the configured Proxy using the configured Reader.
- * <p>
- * If using remote paging, then the first load call must specify the <em>start</em>
- * and <em>limit</em> properties in the options.params property to establish the initial
- * position within the dataset, and the number of Records to cache on each read from the Proxy.
- * <p>
- * <strong>It is important to note that for remote data sources, loading is asynchronous,
- * and this call will return before the new data has been loaded. Perform any post-processing
- * in a callback function, or in a "load" event handler.</strong>
- * <p>
- * @param {Object} options An object containing properties which control loading options:<ul>
- * <li>params {Object} An object containing properties to pass as HTTP parameters to a remote data source.</li>
- * <li>callback {Function} A function to be called after the Records have been loaded. The callback is
- * passed the following arguments:<ul>
- * <li>r : Roo.data.Record[]</li>
- * <li>options: Options object from the load call</li>
- * <li>success: Boolean success indicator</li></ul></li>
- * <li>scope {Object} Scope with which to call the callback (defaults to the Store object)</li>
- * <li>add {Boolean} indicator to append loaded records rather than replace the current cache.</li>
- * </ul>
+ * Called after a repair of an invalid drop. By default, highlights this.dragData.ddel
*/
- load : function(options){
- options = options || {};
- if(this.fireEvent("beforeload", this, options) !== false){
- this.storeOptions(options);
- var p = Roo.apply(options.params || {}, this.baseParams);
- // if meta was not loaded from remote source.. try requesting it.
- if (!this.reader.metaFromRemote) {
- p._requestMeta = 1;
- }
- if(this.sortInfo && this.remoteSort){
- var pn = this.paramNames;
- p[pn["sort"]] = this.sortInfo.field;
- p[pn["dir"]] = this.sortInfo.direction;
- }
- if (this.multiSort) {
- var pn = this.paramNames;
- p[pn["multisort"]] = Roo.encode( { sort : this.sortToggle, order: this.sortOrder });
- }
-
- this.proxy.load(p, this.reader, this.loadRecords, this, options);
+ afterRepair : function(){
+ if(Roo.enableFx){
+ Roo.Element.fly(this.dragData.ddel).highlight(this.hlColor || "c3daf9");
}
+ this.dragging = false;
},
/**
- * Reloads the Record cache from the configured Proxy using the configured Reader and
- * the options from the last load operation performed.
- * @param {Object} options (optional) An object containing properties which may override the options
- * used in the last load operation. See {@link #load} for details (defaults to null, in which case
- * the most recently used options are reused).
+ * Called before a repair of an invalid drop to get the XY to animate to. By default returns
+ * the XY of this.dragData.ddel
+ * @param {EventObject} e The mouse up event
+ * @return {Array} The xy location (e.g. [100, 200])
*/
- reload : function(options){
- this.load(Roo.applyIf(options||{}, this.lastOptions));
+ getRepairXY : function(e){
+ return Roo.Element.fly(this.dragData.ddel).getXY();
+ }
+});/*
+ * 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.dd.DropZone
+ * @extends Roo.dd.DropTarget
+ * This class provides a container DD instance that proxies for multiple child node targets.<br />
+ * By default, this class requires that child nodes accepting drop are registered with {@link Roo.dd.Registry}.
+ * @constructor
+ * @param {String/HTMLElement/Element} el The container element
+ * @param {Object} config
+ */
+Roo.dd.DropZone = function(el, config){
+ Roo.dd.DropZone.superclass.constructor.call(this, el, config);
+};
+
+Roo.extend(Roo.dd.DropZone, Roo.dd.DropTarget, {
+ /**
+ * Returns a custom data object associated with the DOM node that is the target of the event. By default
+ * this looks up the event target in the {@link Roo.dd.Registry}, although you can override this method to
+ * provide your own custom lookup.
+ * @param {Event} e The event
+ * @return {Object} data The custom data
+ */
+ getTargetFromEvent : function(e){
+ return Roo.dd.Registry.getTargetFromEvent(e);
},
- // private
- // Called as a callback by the Reader during a load operation.
- loadRecords : function(o, options, success){
- if(!o || success === false){
- if(success !== false){
- this.fireEvent("load", this, [], options, o);
- }
- if(options.callback){
- options.callback.call(options.scope || this, [], options, false);
- }
- return;
- }
- // if data returned failure - throw an exception.
- if (o.success === false) {
- // show a message if no listener is registered.
- if (!this.hasListener('loadexception') && typeof(o.raw.errorMsg) != 'undefined') {
- Roo.MessageBox.alert("Error loading",o.raw.errorMsg);
- }
- // loadmask wil be hooked into this..
- this.fireEvent("loadexception", this, o, options, o.raw.errorMsg);
- return;
- }
- var r = o.records, t = o.totalRecords || r.length;
-
- this.fireEvent("beforeloadadd", this, r, options, o);
+ /**
+ * Called internally when the DropZone determines that a {@link Roo.dd.DragSource} has entered a drop node
+ * that it has registered. This method has no default implementation and should be overridden to provide
+ * node-specific processing if necessary.
+ * @param {Object} nodeData The custom data associated with the drop node (this is the same value returned from
+ * {@link #getTargetFromEvent} for this node)
+ * @param {Roo.dd.DragSource} source The drag source that was dragged over this drop zone
+ * @param {Event} e The event
+ * @param {Object} data An object containing arbitrary data supplied by the drag source
+ */
+ onNodeEnter : function(n, dd, e, data){
- if(!options || options.add !== true){
- if(this.pruneModifiedRecords){
- this.modified = [];
- }
- for(var i = 0, len = r.length; i < len; i++){
- r[i].join(this);
- }
- if(this.snapshot){
- this.data = this.snapshot;
- delete this.snapshot;
- }
- this.data.clear();
- this.data.addAll(r);
- this.totalLength = t;
- this.applySort();
- this.fireEvent("datachanged", this);
- }else{
- this.totalLength = Math.max(t, this.data.length+r.length);
- this.add(r);
- }
- this.fireEvent("load", this, r, options, o);
- if(options.callback){
- options.callback.call(options.scope || this, r, options, true);
- }
},
-
/**
- * Loads data from a passed data block. A Reader which understands the format of the data
- * must have been configured in the constructor.
- * @param {Object} data The data block from which to read the Records. The format of the data expected
- * is dependent on the type of Reader that is configured and should correspond to that Reader's readRecords parameter.
- * @param {Boolean} append (Optional) True to append the new Records rather than replace the existing cache.
+ * Called internally while the DropZone determines that a {@link Roo.dd.DragSource} is over a drop node
+ * that it has registered. The default implementation returns this.dropNotAllowed, so it should be
+ * overridden to provide the proper feedback.
+ * @param {Object} nodeData The custom data associated with the drop node (this is the same value returned from
+ * {@link #getTargetFromEvent} for this node)
+ * @param {Roo.dd.DragSource} source The drag source that was dragged over this drop zone
+ * @param {Event} e The event
+ * @param {Object} data An object containing arbitrary data supplied by the drag source
+ * @return {String} status The CSS class that communicates the drop status back to the source so that the
+ * underlying {@link Roo.dd.StatusProxy} can be updated
*/
- loadData : function(o, append){
- var r = this.reader.readRecords(o);
- this.loadRecords(r, {add: append}, true);
+ onNodeOver : function(n, dd, e, data){
+ return this.dropAllowed;
},
/**
- * Gets the number of cached records.
- * <p>
- * <em>If using paging, this may not be the total size of the dataset. If the data object
- * used by the Reader contains the dataset size, then the getTotalCount() function returns
- * the data set size</em>
+ * Called internally when the DropZone determines that a {@link Roo.dd.DragSource} has been dragged out of
+ * the drop node without dropping. This method has no default implementation and should be overridden to provide
+ * node-specific processing if necessary.
+ * @param {Object} nodeData The custom data associated with the drop node (this is the same value returned from
+ * {@link #getTargetFromEvent} for this node)
+ * @param {Roo.dd.DragSource} source The drag source that was dragged over this drop zone
+ * @param {Event} e The event
+ * @param {Object} data An object containing arbitrary data supplied by the drag source
*/
- getCount : function(){
- return this.data.length || 0;
+ onNodeOut : function(n, dd, e, data){
+
},
/**
- * Gets the total number of records in the dataset as returned by the server.
- * <p>
- * <em>If using paging, for this to be accurate, the data object used by the Reader must contain
- * the dataset size</em>
+ * Called internally when the DropZone determines that a {@link Roo.dd.DragSource} has been dropped onto
+ * the drop node. The default implementation returns false, so it should be overridden to provide the
+ * appropriate processing of the drop event and return true so that the drag source's repair action does not run.
+ * @param {Object} nodeData The custom data associated with the drop node (this is the same value returned from
+ * {@link #getTargetFromEvent} for this node)
+ * @param {Roo.dd.DragSource} source The drag source that was dragged over this drop zone
+ * @param {Event} e The event
+ * @param {Object} data An object containing arbitrary data supplied by the drag source
+ * @return {Boolean} True if the drop was valid, else false
*/
- getTotalCount : function(){
- return this.totalLength || 0;
+ onNodeDrop : function(n, dd, e, data){
+ return false;
},
/**
- * Returns the sort state of the Store as an object with two properties:
- * <pre><code>
- field {String} The name of the field by which the Records are sorted
- direction {String} The sort order, "ASC" or "DESC"
- * </code></pre>
+ * Called internally while the DropZone determines that a {@link Roo.dd.DragSource} is being dragged over it,
+ * but not over any of its registered drop nodes. The default implementation returns this.dropNotAllowed, so
+ * it should be overridden to provide the proper feedback if necessary.
+ * @param {Roo.dd.DragSource} source The drag source that was dragged over this drop zone
+ * @param {Event} e The event
+ * @param {Object} data An object containing arbitrary data supplied by the drag source
+ * @return {String} status The CSS class that communicates the drop status back to the source so that the
+ * underlying {@link Roo.dd.StatusProxy} can be updated
*/
- getSortState : function(){
- return this.sortInfo;
+ onContainerOver : function(dd, e, data){
+ return this.dropNotAllowed;
},
- // private
- applySort : function(){
- if(this.sortInfo && !this.remoteSort){
- var s = this.sortInfo, f = s.field;
- var st = this.fields.get(f).sortType;
- var fn = function(r1, r2){
- var v1 = st(r1.data[f]), v2 = st(r2.data[f]);
- return v1 > v2 ? 1 : (v1 < v2 ? -1 : 0);
- };
- this.data.sort(s.direction, fn);
- if(this.snapshot && this.snapshot != this.data){
- this.snapshot.sort(s.direction, fn);
- }
- }
+ /**
+ * Called internally when the DropZone determines that a {@link Roo.dd.DragSource} has been dropped on it,
+ * but not on any of its registered drop nodes. The default implementation returns false, so it should be
+ * overridden to provide the appropriate processing of the drop event if you need the drop zone itself to
+ * be able to accept drops. It should return true when valid so that the drag source's repair action does not run.
+ * @param {Roo.dd.DragSource} source The drag source that was dragged over this drop zone
+ * @param {Event} e The event
+ * @param {Object} data An object containing arbitrary data supplied by the drag source
+ * @return {Boolean} True if the drop was valid, else false
+ */
+ onContainerDrop : function(dd, e, data){
+ return false;
},
/**
- * Sets the default sort column and order to be used by the next load operation.
- * @param {String} fieldName The name of the field to sort by.
- * @param {String} dir (optional) The sort order, "ASC" or "DESC" (defaults to "ASC")
+ * The function a {@link Roo.dd.DragSource} calls once to notify this drop zone that the source is now over
+ * the zone. The default implementation returns this.dropNotAllowed and expects that only registered drop
+ * nodes can process drag drop operations, so if you need the drop zone itself to be able to process drops
+ * you should override this method and provide a custom implementation.
+ * @param {Roo.dd.DragSource} source The drag source that was dragged over this drop zone
+ * @param {Event} e The event
+ * @param {Object} data An object containing arbitrary data supplied by the drag source
+ * @return {String} status The CSS class that communicates the drop status back to the source so that the
+ * underlying {@link Roo.dd.StatusProxy} can be updated
*/
- setDefaultSort : function(field, dir){
- this.sortInfo = {field: field, direction: dir ? dir.toUpperCase() : "ASC"};
+ notifyEnter : function(dd, e, data){
+ return this.dropNotAllowed;
},
/**
- * Sort the Records.
- * If remote sorting is used, the sort is performed on the server, and the cache is
- * reloaded. If local sorting is used, the cache is sorted internally.
- * @param {String} fieldName The name of the field to sort by.
- * @param {String} dir (optional) The sort order, "ASC" or "DESC" (defaults to "ASC")
+ * The function a {@link Roo.dd.DragSource} calls continuously while it is being dragged over the drop zone.
+ * This method will be called on every mouse movement while the drag source is over the drop zone.
+ * It will call {@link #onNodeOver} while the drag source is over a registered node, and will also automatically
+ * delegate to the appropriate node-specific methods as necessary when the drag source enters and exits
+ * registered nodes ({@link #onNodeEnter}, {@link #onNodeOut}). If the drag source is not currently over a
+ * registered node, it will call {@link #onContainerOver}.
+ * @param {Roo.dd.DragSource} source The drag source that was dragged over this drop zone
+ * @param {Event} e The event
+ * @param {Object} data An object containing arbitrary data supplied by the drag source
+ * @return {String} status The CSS class that communicates the drop status back to the source so that the
+ * underlying {@link Roo.dd.StatusProxy} can be updated
*/
- sort : function(fieldName, dir){
- var f = this.fields.get(fieldName);
- if(!dir){
- this.sortToggle[f.name] = this.sortToggle[f.name] || f.sortDir;
-
- if(this.multiSort || (this.sortInfo && this.sortInfo.field == f.name) ){ // toggle sort dir
- dir = (this.sortToggle[f.name] || "ASC").toggle("ASC", "DESC");
- }else{
- dir = f.sortDir;
+ notifyOver : function(dd, e, data){
+ var n = this.getTargetFromEvent(e);
+ if(!n){ // not over valid drop target
+ if(this.lastOverNode){
+ this.onNodeOut(this.lastOverNode, dd, e, data);
+ this.lastOverNode = null;
}
+ return this.onContainerOver(dd, e, data);
}
- this.sortToggle[f.name] = dir;
- this.sortInfo = {field: f.name, direction: dir};
- if(!this.remoteSort){
- this.applySort();
- this.fireEvent("datachanged", this);
- }else{
- this.load(this.lastOptions);
+ if(this.lastOverNode != n){
+ if(this.lastOverNode){
+ this.onNodeOut(this.lastOverNode, dd, e, data);
+ }
+ this.onNodeEnter(n, dd, e, data);
+ this.lastOverNode = n;
}
+ return this.onNodeOver(n, dd, e, data);
},
/**
- * Calls the specified function for each of the Records in the cache.
- * @param {Function} fn The function to call. The Record is passed as the first parameter.
- * Returning <em>false</em> aborts and exits the iteration.
- * @param {Object} scope (optional) The scope in which to call the function (defaults to the Record).
+ * The function a {@link Roo.dd.DragSource} calls once to notify this drop zone that the source has been dragged
+ * out of the zone without dropping. If the drag source is currently over a registered node, the notification
+ * will be delegated to {@link #onNodeOut} for node-specific handling, otherwise it will be ignored.
+ * @param {Roo.dd.DragSource} source The drag source that was dragged over this drop target
+ * @param {Event} e The event
+ * @param {Object} data An object containing arbitrary data supplied by the drag zone
*/
- each : function(fn, scope){
- this.data.each(fn, scope);
+ notifyOut : function(dd, e, data){
+ if(this.lastOverNode){
+ this.onNodeOut(this.lastOverNode, dd, e, data);
+ this.lastOverNode = null;
+ }
},
/**
- * Gets all records modified since the last commit. Modified records are persisted across load operations
- * (e.g., during paging).
- * @return {Roo.data.Record[]} An array of Records containing outstanding modifications.
+ * The function a {@link Roo.dd.DragSource} calls once to notify this drop zone that the dragged item has
+ * been dropped on it. The drag zone will look up the target node based on the event passed in, and if there
+ * is a node registered for that event, it will delegate to {@link #onNodeDrop} for node-specific handling,
+ * otherwise it will call {@link #onContainerDrop}.
+ * @param {Roo.dd.DragSource} source The drag source that was dragged over this drop zone
+ * @param {Event} e The event
+ * @param {Object} data An object containing arbitrary data supplied by the drag source
+ * @return {Boolean} True if the drop was valid, else false
*/
- getModifiedRecords : function(){
- return this.modified;
+ notifyDrop : function(dd, e, data){
+ if(this.lastOverNode){
+ this.onNodeOut(this.lastOverNode, dd, e, data);
+ this.lastOverNode = null;
+ }
+ var n = this.getTargetFromEvent(e);
+ return n ?
+ this.onNodeDrop(n, dd, e, data) :
+ this.onContainerDrop(dd, e, data);
},
// private
- createFilterFn : function(property, value, anyMatch){
- if(!value.exec){ // not a regex
- value = String(value);
- if(value.length == 0){
- return false;
- }
- value = new RegExp((anyMatch === true ? '' : '^') + Roo.escapeRe(value), "i");
- }
- return function(r){
- return value.test(r.data[property]);
- };
- },
+ triggerCacheRefresh : function(){
+ Roo.dd.DDM.refreshCache(this.groups);
+ }
+});/*
+ * 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.data.SortTypes
+ * @static
+ * Defines the default sorting (casting?) comparison functions used when sorting data.
+ */
+Roo.data.SortTypes = {
/**
- * Sums the value of <i>property</i> for each record between start and end and returns the result.
- * @param {String} property A field on your records
- * @param {Number} start The record index to start at (defaults to 0)
- * @param {Number} end The last record index to include (defaults to length - 1)
- * @return {Number} The sum
+ * Default sort that does nothing
+ * @param {Mixed} s The value being converted
+ * @return {Mixed} The comparison value
*/
- sum : function(property, start, end){
- var rs = this.data.items, v = 0;
- start = start || 0;
- end = (end || end === 0) ? end : rs.length-1;
-
- for(var i = start; i <= end; i++){
- v += (rs[i].data[property] || 0);
- }
- return v;
+ none : function(s){
+ return s;
},
-
+
/**
- * Filter the records by a specified property.
- * @param {String} field A field on your records
- * @param {String/RegExp} value Either a string that the field
- * should start with or a RegExp to test against the field
- * @param {Boolean} anyMatch True to match any part not just the beginning
+ * The regular expression used to strip tags
+ * @type {RegExp}
+ * @property
*/
- filter : function(property, value, anyMatch){
- var fn = this.createFilterFn(property, value, anyMatch);
- return fn ? this.filterBy(fn) : this.clearFilter();
- },
-
+ stripTagsRE : /<\/?[^>]+>/gi,
+
/**
- * Filter by a function. The specified function will be called with each
- * record in this data source. If the function returns true the record is included,
- * otherwise it is filtered.
- * @param {Function} fn The function to be called, it will receive 2 args (record, id)
- * @param {Object} scope (optional) The scope of the function (defaults to this)
+ * Strips all HTML tags to sort on text only
+ * @param {Mixed} s The value being converted
+ * @return {String} The comparison value
*/
- filterBy : function(fn, scope){
- this.snapshot = this.snapshot || this.data;
- this.data = this.queryBy(fn, scope||this);
- this.fireEvent("datachanged", this);
+ asText : function(s){
+ return String(s).replace(this.stripTagsRE, "");
},
-
+
/**
- * Query the records by a specified property.
- * @param {String} field A field on your records
- * @param {String/RegExp} value Either a string that the field
- * should start with or a RegExp to test against the field
- * @param {Boolean} anyMatch True to match any part not just the beginning
- * @return {MixedCollection} Returns an Roo.util.MixedCollection of the matched records
+ * Strips all HTML tags to sort on text only - Case insensitive
+ * @param {Mixed} s The value being converted
+ * @return {String} The comparison value
*/
- query : function(property, value, anyMatch){
- var fn = this.createFilterFn(property, value, anyMatch);
- return fn ? this.queryBy(fn) : this.data.clone();
+ asUCText : function(s){
+ return String(s).toUpperCase().replace(this.stripTagsRE, "");
+ },
+
+ /**
+ * Case insensitive string
+ * @param {Mixed} s The value being converted
+ * @return {String} The comparison value
+ */
+ asUCString : function(s) {
+ return String(s).toUpperCase();
+ },
+
+ /**
+ * Date sorting
+ * @param {Mixed} s The value being converted
+ * @return {Number} The comparison value
+ */
+ asDate : function(s) {
+ if(!s){
+ return 0;
+ }
+ if(s instanceof Date){
+ return s.getTime();
+ }
+ return Date.parse(String(s));
+ },
+
+ /**
+ * Float sorting
+ * @param {Mixed} s The value being converted
+ * @return {Float} The comparison value
+ */
+ asFloat : function(s) {
+ var val = parseFloat(String(s).replace(/,/g, ""));
+ if(isNaN(val)) {
+ val = 0;
+ }
+ return val;
},
+
+ /**
+ * Integer sorting
+ * @param {Mixed} s The value being converted
+ * @return {Number} The comparison value
+ */
+ asInt : function(s) {
+ var val = parseInt(String(s).replace(/,/g, ""));
+ if(isNaN(val)) {
+ val = 0;
+ }
+ return val;
+ }
+};/*
+ * 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.data.Record
+ * Instances of this class encapsulate both record <em>definition</em> information, and record
+ * <em>value</em> information for use in {@link Roo.data.Store} objects, or any code which needs
+ * to access Records cached in an {@link Roo.data.Store} object.<br>
+ * <p>
+ * Constructors for this class are generated by passing an Array of field definition objects to {@link #create}.
+ * Instances are usually only created by {@link Roo.data.Reader} implementations when processing unformatted data
+ * objects.<br>
+ * <p>
+ * Record objects generated by this constructor inherit all the methods of Roo.data.Record listed below.
+ * @constructor
+ * This constructor should not be used to create Record objects. Instead, use the constructor generated by
+ * {@link #create}. The parameters are the same.
+ * @param {Array} data An associative Array of data values keyed by the field name.
+ * @param {Object} id (Optional) The id of the record. This id should be unique, and is used by the
+ * {@link Roo.data.Store} object which owns the Record to index its collection of Records. If
+ * not specified an integer id is generated.
+ */
+Roo.data.Record = function(data, id){
+ this.id = (id || id === 0) ? id : ++Roo.data.Record.AUTO_ID;
+ this.data = data;
+};
+
+/**
+ * Generate a constructor for a specific record layout.
+ * @param {Array} o An Array of field definition objects which specify field names, and optionally,
+ * data types, and a mapping for an {@link Roo.data.Reader} to extract the field's value from a data object.
+ * Each field definition object may contain the following properties: <ul>
+ * <li><b>name</b> : String<p style="margin-left:1em">The name by which the field is referenced within the Record. This is referenced by,
+ * for example the <em>dataIndex</em> property in column definition objects passed to {@link Roo.grid.ColumnModel}</p></li>
+ * <li><b>mapping</b> : String<p style="margin-left:1em">(Optional) A path specification for use by the {@link Roo.data.Reader} implementation
+ * that is creating the Record to access the data value from the data object. If an {@link Roo.data.JsonReader}
+ * is being used, then this is a string containing the javascript expression to reference the data relative to
+ * the record item's root. If an {@link Roo.data.XmlReader} is being used, this is an {@link Roo.DomQuery} path
+ * to the data item relative to the record element. If the mapping expression is the same as the field name,
+ * this may be omitted.</p></li>
+ * <li><b>type</b> : String<p style="margin-left:1em">(Optional) The data type for conversion to displayable value. Possible values are
+ * <ul><li>auto (Default, implies no conversion)</li>
+ * <li>string</li>
+ * <li>int</li>
+ * <li>float</li>
+ * <li>boolean</li>
+ * <li>date</li></ul></p></li>
+ * <li><b>sortType</b> : Mixed<p style="margin-left:1em">(Optional) A member of {@link Roo.data.SortTypes}.</p></li>
+ * <li><b>sortDir</b> : String<p style="margin-left:1em">(Optional) Initial direction to sort. "ASC" or "DESC"</p></li>
+ * <li><b>convert</b> : Function<p style="margin-left:1em">(Optional) A function which converts the value provided
+ * by the Reader into an object that will be stored in the Record. It is passed the
+ * following parameters:<ul>
+ * <li><b>v</b> : Mixed<p style="margin-left:1em">The data value as read by the Reader.</p></li>
+ * </ul></p></li>
+ * <li><b>dateFormat</b> : String<p style="margin-left:1em">(Optional) A format String for the Date.parseDate function.</p></li>
+ * </ul>
+ * <br>usage:<br><pre><code>
+var TopicRecord = Roo.data.Record.create(
+ {name: 'title', mapping: 'topic_title'},
+ {name: 'author', mapping: 'username'},
+ {name: 'totalPosts', mapping: 'topic_replies', type: 'int'},
+ {name: 'lastPost', mapping: 'post_time', type: 'date'},
+ {name: 'lastPoster', mapping: 'user2'},
+ {name: 'excerpt', mapping: 'post_text'}
+);
+
+var myNewRecord = new TopicRecord({
+ title: 'Do my job please',
+ author: 'noobie',
+ totalPosts: 1,
+ lastPost: new Date(),
+ lastPoster: 'Animal',
+ excerpt: 'No way dude!'
+});
+myStore.add(myNewRecord);
+</code></pre>
+ * @method create
+ * @static
+ */
+Roo.data.Record.create = function(o){
+ var f = function(){
+ f.superclass.constructor.apply(this, arguments);
+ };
+ Roo.extend(f, Roo.data.Record);
+ var p = f.prototype;
+ p.fields = new Roo.util.MixedCollection(false, function(field){
+ return field.name;
+ });
+ for(var i = 0, len = o.length; i < len; i++){
+ p.fields.add(new Roo.data.Field(o[i]));
+ }
+ f.getField = function(name){
+ return p.fields.get(name);
+ };
+ return f;
+};
+
+Roo.data.Record.AUTO_ID = 1000;
+Roo.data.Record.EDIT = 'edit';
+Roo.data.Record.REJECT = 'reject';
+Roo.data.Record.COMMIT = 'commit';
+Roo.data.Record.prototype = {
/**
- * Query by a function. The specified function will be called with each
- * record in this data source. If the function returns true the record is included
- * in the results.
- * @param {Function} fn The function to be called, it will receive 2 args (record, id)
- * @param {Object} scope (optional) The scope of the function (defaults to this)
- @return {MixedCollection} Returns an Roo.util.MixedCollection of the matched records
- **/
- queryBy : function(fn, scope){
- var data = this.snapshot || this.data;
- return data.filterBy(fn, scope||this);
+ * Readonly flag - true if this record has been modified.
+ * @type Boolean
+ */
+ dirty : false,
+ editing : false,
+ error: null,
+ modified: null,
+
+ // private
+ join : function(store){
+ this.store = store;
},
/**
- * Collects unique values for a particular dataIndex from this store.
- * @param {String} dataIndex The property to collect
- * @param {Boolean} allowNull (optional) Pass true to allow null, undefined or empty string values
- * @param {Boolean} bypassFilter (optional) Pass true to collect from all records, even ones which are filtered
- * @return {Array} An array of the unique values
- **/
- collect : function(dataIndex, allowNull, bypassFilter){
- var d = (bypassFilter === true && this.snapshot) ?
- this.snapshot.items : this.data.items;
- var v, sv, r = [], l = {};
- for(var i = 0, len = d.length; i < len; i++){
- v = d[i].data[dataIndex];
- sv = String(v);
- if((allowNull || !Roo.isEmpty(v)) && !l[sv]){
- l[sv] = true;
- r[r.length] = v;
- }
+ * Set the named field to the specified value.
+ * @param {String} name The name of the field to set.
+ * @param {Object} value The value to set the field to.
+ */
+ set : function(name, value){
+ if(this.data[name] == value){
+ return;
}
- return r;
+ this.dirty = true;
+ if(!this.modified){
+ this.modified = {};
+ }
+ if(typeof this.modified[name] == 'undefined'){
+ this.modified[name] = this.data[name];
+ }
+ this.data[name] = value;
+ if(!this.editing && this.store){
+ this.store.afterEdit(this);
+ }
},
/**
- * Revert to a view of the Record cache with no filtering applied.
- * @param {Boolean} suppressEvent If true the filter is cleared silently without notifying listeners
+ * Get the value of the named field.
+ * @param {String} name The name of the field to get the value of.
+ * @return {Object} The value of the field.
*/
- clearFilter : function(suppressEvent){
- if(this.snapshot && this.snapshot != this.data){
- this.data = this.snapshot;
- delete this.snapshot;
- if(suppressEvent !== true){
- this.fireEvent("datachanged", this);
- }
- }
+ get : function(name){
+ return this.data[name];
},
// private
- afterEdit : function(record){
- if(this.modified.indexOf(record) == -1){
- this.modified.push(record);
- }
- this.fireEvent("update", this, record, Roo.data.Record.EDIT);
+ beginEdit : function(){
+ this.editing = true;
+ this.modified = {};
},
-
+
// private
- afterReject : function(record){
- this.modified.remove(record);
- this.fireEvent("update", this, record, Roo.data.Record.REJECT);
+ cancelEdit : function(){
+ this.editing = false;
+ delete this.modified;
},
// private
- afterCommit : function(record){
- this.modified.remove(record);
- this.fireEvent("update", this, record, Roo.data.Record.COMMIT);
+ endEdit : function(){
+ this.editing = false;
+ if(this.dirty && this.store){
+ this.store.afterEdit(this);
+ }
},
/**
- * Commit all Records with outstanding changes. To handle updates for changes, subscribe to the
- * Store's "update" event, and perform updating when the third parameter is Roo.data.Record.COMMIT.
+ * Usually called by the {@link Roo.data.Store} which owns the Record.
+ * Rejects all changes made to the Record since either creation, or the last commit operation.
+ * Modified fields are reverted to their original values.
+ * <p>
+ * Developers should subscribe to the {@link Roo.data.Store#update} event to have their code notified
+ * of reject operations.
*/
- commitChanges : function(){
- var m = this.modified.slice(0);
- this.modified = [];
- for(var i = 0, len = m.length; i < len; i++){
- m[i].commit();
+ reject : function(){
+ var m = this.modified;
+ for(var n in m){
+ if(typeof m[n] != "function"){
+ this.data[n] = m[n];
+ }
+ }
+ this.dirty = false;
+ delete this.modified;
+ this.editing = false;
+ if(this.store){
+ this.store.afterReject(this);
}
},
/**
- * Cancel outstanding changes on all changed records.
+ * Usually called by the {@link Roo.data.Store} which owns the Record.
+ * Commits all changes made to the Record since either creation, or the last commit operation.
+ * <p>
+ * Developers should subscribe to the {@link Roo.data.Store#update} event to have their code notified
+ * of commit operations.
*/
- rejectChanges : function(){
- var m = this.modified.slice(0);
- this.modified = [];
- for(var i = 0, len = m.length; i < len; i++){
- m[i].reject();
+ commit : function(){
+ this.dirty = false;
+ delete this.modified;
+ this.editing = false;
+ if(this.store){
+ this.store.afterCommit(this);
}
},
- onMetaChange : function(meta, rtype, o){
- this.recordType = rtype;
- this.fields = rtype.prototype.fields;
- delete this.snapshot;
- this.sortInfo = meta.sortInfo || this.sortInfo;
- this.modified = [];
- this.fireEvent('metachange', this, this.reader.meta);
+ // private
+ hasError : function(){
+ return this.error != null;
},
-
- moveIndex : function(data, type)
- {
- var index = this.indexOf(data);
-
- var newIndex = index + type;
-
- this.remove(data);
-
- this.insert(newIndex, data);
-
+
+ // private
+ clearError : function(){
+ this.error = null;
+ },
+
+ /**
+ * Creates a copy of this record.
+ * @param {String} id (optional) A new record id if you don't want to use this record's id
+ * @return {Record}
+ */
+ copy : function(newId) {
+ return new this.constructor(Roo.apply({}, this.data), newId || this.id);
}
-});/*
+};/*
* Based on:
* Ext JS Library 1.1.1
* Copyright(c) 2006-2007, Ext JS, LLC.
* <script type="text/javascript">
*/
-/**
- * @class Roo.data.SimpleStore
- * @extends Roo.data.Store
- * Small helper class to make creating Stores from Array data easier.
- * @cfg {Number} id The array index of the record id. Leave blank to auto generate ids.
- * @cfg {Array} fields An array of field definition objects, or field name strings.
- * @cfg {Array} data The multi-dimensional array of data
- * @constructor
- * @param {Object} config
- */
-Roo.data.SimpleStore = function(config){
- Roo.data.SimpleStore.superclass.constructor.call(this, {
- isLocal : true,
- reader: new Roo.data.ArrayReader({
- id: config.id
- },
- Roo.data.Record.create(config.fields)
- ),
- proxy : new Roo.data.MemoryProxy(config.data)
- });
- this.load();
-};
-Roo.extend(Roo.data.SimpleStore, Roo.data.Store);/*
- * 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">
- */
+
/**
-/**
- * @extends Roo.data.Store
- * @class Roo.data.JsonStore
- * Small helper class to make creating Stores for JSON data easier. <br/>
-<pre><code>
-var store = new Roo.data.JsonStore({
- url: 'get-images.php',
- root: 'images',
- fields: ['name', 'url', {name:'size', type: 'float'}, {name:'lastmod', type:'date'}]
-});
-</code></pre>
- * <b>Note: Although they are not listed, this class inherits all of the config options of Store,
- * JsonReader and HttpProxy (unless inline data is provided).</b>
- * @cfg {Array} fields An array of field definition objects, or field name strings.
+ * @class Roo.data.Store
+ * @extends Roo.util.Observable
+ * The Store class encapsulates a client side cache of {@link Roo.data.Record} objects which provide input data
+ * for widgets such as the Roo.grid.Grid, or the Roo.form.ComboBox.<br>
+ * <p>
+ * A Store object uses an implementation of {@link Roo.data.DataProxy} to access a data object unless you call loadData() directly and pass in your data. The Store object
+ * has no knowledge of the format of the data returned by the Proxy.<br>
+ * <p>
+ * A Store object uses its configured implementation of {@link Roo.data.DataReader} to create {@link Roo.data.Record}
+ * instances from the data object. These records are cached and made available through accessor functions.
* @constructor
- * @param {Object} config
- */
-Roo.data.JsonStore = function(c){
- Roo.data.JsonStore.superclass.constructor.call(this, Roo.apply(c, {
- proxy: !c.data ? new Roo.data.HttpProxy({url: c.url}) : undefined,
- reader: new Roo.data.JsonReader(c, c.fields)
- }));
-};
-Roo.extend(Roo.data.JsonStore, Roo.data.Store);/*
- * 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">
+ * Creates a new Store.
+ * @param {Object} config A config object containing the objects needed for the Store to access data,
+ * and read the data into Records.
*/
+Roo.data.Store = function(config){
+ this.data = new Roo.util.MixedCollection(false);
+ this.data.getKey = function(o){
+ return o.id;
+ };
+ this.baseParams = {};
+ // private
+ this.paramNames = {
+ "start" : "start",
+ "limit" : "limit",
+ "sort" : "sort",
+ "dir" : "dir",
+ "multisort" : "_multisort"
+ };
-
-Roo.data.Field = function(config){
- if(typeof config == "string"){
- config = {name: config};
+ if(config && config.data){
+ this.inlineData = config.data;
+ delete config.data;
}
+
Roo.apply(this, config);
- if(!this.type){
- this.type = "auto";
- }
-
- var st = Roo.data.SortTypes;
- // named sortTypes are supported, here we look them up
- if(typeof this.sortType == "string"){
- this.sortType = st[this.sortType];
- }
-
- // set default sortType for strings and dates
- if(!this.sortType){
- switch(this.type){
- case "string":
- this.sortType = st.asUCString;
- break;
- case "date":
- this.sortType = st.asDate;
- break;
- default:
- this.sortType = st.none;
+ if(this.reader){ // reader passed
+ this.reader = Roo.factory(this.reader, Roo.data);
+ this.reader.xmodule = this.xmodule || false;
+ if(!this.recordType){
+ this.recordType = this.reader.recordType;
+ }
+ if(this.reader.onMetaChange){
+ this.reader.onMetaChange = this.onMetaChange.createDelegate(this);
}
}
- // define once
- var stripRe = /[\$,%]/g;
+ if(this.recordType){
+ this.fields = this.recordType.prototype.fields;
+ }
+ this.modified = [];
- // prebuilt conversion function for this field, instead of
- // switching every time we're reading a value
- if(!this.convert){
- var cv, dateFormat = this.dateFormat;
- switch(this.type){
- case "":
- case "auto":
- case undefined:
- cv = function(v){ return v; };
- break;
- case "string":
- cv = function(v){ return (v === undefined || v === null) ? '' : String(v); };
- break;
- case "int":
- cv = function(v){
- return v !== undefined && v !== null && v !== '' ?
- parseInt(String(v).replace(stripRe, ""), 10) : '';
- };
- break;
- case "float":
- cv = function(v){
- return v !== undefined && v !== null && v !== '' ?
- parseFloat(String(v).replace(stripRe, ""), 10) : '';
- };
- break;
- case "bool":
- case "boolean":
- cv = function(v){ return v === true || v === "true" || v == 1; };
- break;
- case "date":
- cv = function(v){
- if(!v){
- return '';
- }
- if(v instanceof Date){
- return v;
- }
- if(dateFormat){
- if(dateFormat == "timestamp"){
- return new Date(v*1000);
- }
- return Date.parseDate(v, dateFormat);
- }
- var parsed = Date.parse(v);
- return parsed ? new Date(parsed) : null;
- };
- break;
-
- }
- this.convert = cv;
- }
-};
-
-Roo.data.Field.prototype = {
- dateFormat: null,
- defaultValue: "",
- mapping: null,
- sortType : null,
- sortDir : "ASC"
-};/*
- * 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">
- */
-
-// Base class for reading structured data from a data source. This class is intended to be
-// extended (see ArrayReader, JsonReader and XmlReader) and should not be created directly.
-
-/**
- * @class Roo.data.DataReader
- * Base class for reading structured data from a data source. This class is intended to be
- * extended (see {Roo.data.ArrayReader}, {Roo.data.JsonReader} and {Roo.data.XmlReader}) and should not be created directly.
- */
-
-Roo.data.DataReader = function(meta, recordType){
-
- this.meta = meta;
-
- this.recordType = recordType instanceof Array ?
- Roo.data.Record.create(recordType) : recordType;
-};
-
-Roo.data.DataReader.prototype = {
- /**
- * Create an empty record
- * @param {Object} data (optional) - overlay some values
- * @return {Roo.data.Record} record created.
- */
- newRow : function(d) {
- var da = {};
- this.recordType.prototype.fields.each(function(c) {
- switch( c.type) {
- case 'int' : da[c.name] = 0; break;
- case 'date' : da[c.name] = new Date(); break;
- case 'float' : da[c.name] = 0.0; break;
- case 'boolean' : da[c.name] = false; break;
- default : da[c.name] = ""; break;
- }
-
- });
- return new this.recordType(Roo.apply(da, d));
- }
-
-};/*
- * 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.data.DataProxy
- * @extends Roo.data.Observable
- * This class is an abstract base class for implementations which provide retrieval of
- * unformatted data objects.<br>
- * <p>
- * DataProxy implementations are usually used in conjunction with an implementation of Roo.data.DataReader
- * (of the appropriate type which knows how to parse the data object) to provide a block of
- * {@link Roo.data.Records} to an {@link Roo.data.Store}.<br>
- * <p>
- * Custom implementations must implement the load method as described in
- * {@link Roo.data.HttpProxy#load}.
- */
-Roo.data.DataProxy = function(){
this.addEvents({
+ /**
+ * @event datachanged
+ * Fires when the data cache has changed, and a widget which is using this Store
+ * as a Record cache should refresh its view.
+ * @param {Store} this
+ */
+ datachanged : true,
+ /**
+ * @event metachange
+ * Fires when this store's reader provides new metadata (fields). This is currently only support for JsonReaders.
+ * @param {Store} this
+ * @param {Object} meta The JSON metadata
+ */
+ metachange : true,
+ /**
+ * @event add
+ * Fires when Records have been added to the Store
+ * @param {Store} this
+ * @param {Roo.data.Record[]} records The array of Records added
+ * @param {Number} index The index at which the record(s) were added
+ */
+ add : true,
+ /**
+ * @event remove
+ * Fires when a Record has been removed from the Store
+ * @param {Store} this
+ * @param {Roo.data.Record} record The Record that was removed
+ * @param {Number} index The index at which the record was removed
+ */
+ remove : true,
+ /**
+ * @event update
+ * Fires when a Record has been updated
+ * @param {Store} this
+ * @param {Roo.data.Record} record The Record that was updated
+ * @param {String} operation The update operation being performed. Value may be one of:
+ * <pre><code>
+ Roo.data.Record.EDIT
+ Roo.data.Record.REJECT
+ Roo.data.Record.COMMIT
+ * </code></pre>
+ */
+ update : true,
+ /**
+ * @event clear
+ * Fires when the data cache has been cleared.
+ * @param {Store} this
+ */
+ clear : true,
/**
* @event beforeload
- * Fires before a network request is made to retrieve a data object.
- * @param {Object} This DataProxy object.
- * @param {Object} params The params parameter to the load function.
+ * Fires before a request is made for a new data object. If the beforeload handler returns false
+ * the load action will be canceled.
+ * @param {Store} this
+ * @param {Object} options The loading options that were specified (see {@link #load} for details)
*/
beforeload : true,
+ /**
+ * @event beforeloadadd
+ * Fires after a new set of Records has been loaded.
+ * @param {Store} this
+ * @param {Roo.data.Record[]} records The Records that were loaded
+ * @param {Object} options The loading options that were specified (see {@link #load} for details)
+ */
+ beforeloadadd : true,
/**
* @event load
- * Fires before the load method's callback is called.
- * @param {Object} This DataProxy object.
- * @param {Object} o The data object.
- * @param {Object} arg The callback argument object passed to the load function.
+ * Fires after a new set of Records has been loaded, before they are added to the store.
+ * @param {Store} this
+ * @param {Roo.data.Record[]} records The Records that were loaded
+ * @param {Object} options The loading options that were specified (see {@link #load} for details)
+ * @params {Object} return from reader
*/
load : true,
/**
* @event loadexception
- * Fires if an Exception occurs during data retrieval.
- * @param {Object} This DataProxy object.
- * @param {Object} o The data object.
- * @param {Object} arg The callback argument object passed to the load function.
- * @param {Object} e The Exception.
+ * Fires if an exception occurs in the Proxy during loading.
+ * Called with the signature of the Proxy's "loadexception" event.
+ * If you return Json { data: [] , success: false, .... } then this will be thrown with the following args
+ *
+ * @param {Proxy}
+ * @param {Object} return from JsonData.reader() - success, totalRecords, records
+ * @param {Object} load options
+ * @param {Object} jsonData from your request (normally this contains the Exception)
*/
loadexception : true
});
- Roo.data.DataProxy.superclass.constructor.call(this);
-};
+
+ if(this.proxy){
+ this.proxy = Roo.factory(this.proxy, Roo.data);
+ this.proxy.xmodule = this.xmodule || false;
+ this.relayEvents(this.proxy, ["loadexception"]);
+ }
+ this.sortToggle = {};
+ this.sortOrder = []; // array of order of sorting - updated by grid if multisort is enabled.
-Roo.extend(Roo.data.DataProxy, Roo.util.Observable);
+ Roo.data.Store.superclass.constructor.call(this);
- /**
- * @cfg {void} listeners (Not available) Constructor blocks listeners from being set
- */
-/*
- * 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.data.MemoryProxy
- * An implementation of Roo.data.DataProxy that simply passes the data specified in its constructor
- * to the Reader when its load method is called.
- * @constructor
- * @param {Object} data The data object which the Reader uses to construct a block of Roo.data.Records.
- */
-Roo.data.MemoryProxy = function(data){
- if (data.data) {
- data = data.data;
+ if(this.inlineData){
+ this.loadData(this.inlineData);
+ delete this.inlineData;
}
- Roo.data.MemoryProxy.superclass.constructor.call(this);
- this.data = data;
};
-Roo.extend(Roo.data.MemoryProxy, Roo.data.DataProxy, {
- /**
- * Load data from the requested source (in this case an in-memory
- * data object passed to the constructor), read the data object into
- * a block of Roo.data.Records using the passed Roo.data.DataReader implementation, and
- * process that block using the passed callback.
- * @param {Object} params This parameter is not used by the MemoryProxy class.
- * @param {Roo.data.DataReader} reader The Reader object which converts the data
- * object into a block of Roo.data.Records.
- * @param {Function} callback The function into which to pass the block of Roo.data.records.
- * The function must be passed <ul>
- * <li>The Record block object</li>
- * <li>The "arg" argument from the load function</li>
- * <li>A boolean success indicator</li>
- * </ul>
- * @param {Object} scope The scope in which to call the callback
- * @param {Object} arg An optional argument which is passed to the callback as its second parameter.
- */
- load : function(params, reader, callback, scope, arg){
- params = params || {};
- var result;
- try {
- result = reader.readRecords(this.data);
- }catch(e){
- this.fireEvent("loadexception", this, arg, null, e);
- callback.call(scope, null, arg, false);
- return;
- }
- callback.call(scope, result, arg, true);
- },
+Roo.extend(Roo.data.Store, Roo.util.Observable, {
+ /**
+ * @cfg {boolean} isLocal flag if data is locally available (and can be always looked up
+ * without a remote query - used by combo/forms at present.
+ */
+ /**
+ * @cfg {Roo.data.DataProxy} proxy [required] The Proxy object which provides access to a data object.
+ */
+ /**
+ * @cfg {Array} data Inline data to be loaded when the store is initialized.
+ */
+ /**
+ * @cfg {Roo.data.DataReader} reader [required] The Reader object which processes the data object and returns
+ * an Array of Roo.data.record objects which are cached keyed by their <em>id</em> property.
+ */
+ /**
+ * @cfg {Object} baseParams An object containing properties which are to be sent as parameters
+ * on any HTTP request
+ */
+ /**
+ * @cfg {Object} sortInfo A config object in the format: {field: "fieldName", direction: "ASC|DESC"}
+ */
+ /**
+ * @cfg {Boolean} multiSort enable multi column sorting (sort is based on the order of columns, remote only at present)
+ */
+ multiSort: false,
+ /**
+ * @cfg {boolean} remoteSort True if sorting is to be handled by requesting the Proxy to provide a refreshed
+ * version of the data object in sorted order, as opposed to sorting the Record cache in place (defaults to false).
+ */
+ remoteSort : false,
+
+ /**
+ * @cfg {boolean} pruneModifiedRecords True to clear all modified record information each time the store is
+ * loaded or when a record is removed. (defaults to false).
+ */
+ pruneModifiedRecords : false,
+
// private
- update : function(params, records){
-
- }
-});/*
- * 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.data.HttpProxy
- * @extends Roo.data.DataProxy
- * An implementation of {@link Roo.data.DataProxy} that reads a data object from an {@link Roo.data.Connection} object
- * configured to reference a certain URL.<br><br>
- * <p>
- * <em>Note that this class cannot be used to retrieve data from a domain other than the domain
- * from which the running page was served.<br><br>
- * <p>
- * For cross-domain access to remote data, use an {@link Roo.data.ScriptTagProxy}.</em><br><br>
- * <p>
- * Be aware that to enable the browser to parse an XML document, the server must set
- * the Content-Type header in the HTTP response to "text/xml".
- * @constructor
- * @param {Object} conn Connection config options to add to each request (e.g. {url: 'foo.php'} or
- * an {@link Roo.data.Connection} object. If a Connection config is passed, the singleton {@link Roo.Ajax} object
- * will be used to make the request.
- */
-Roo.data.HttpProxy = function(conn){
- Roo.data.HttpProxy.superclass.constructor.call(this);
- // is conn a conn config or a real conn?
- this.conn = conn;
- this.useAjax = !conn || !conn.events;
-
-};
+ lastOptions : null,
-Roo.extend(Roo.data.HttpProxy, Roo.data.DataProxy, {
- // thse are take from connection...
-
/**
- * @cfg {String} url (Optional) The default URL to be used for requests to the server. (defaults to undefined)
+ * Add Records to the Store and fires the add event.
+ * @param {Roo.data.Record[]} records An Array of Roo.data.Record objects to add to the cache.
*/
+ add : function(records){
+ records = [].concat(records);
+ for(var i = 0, len = records.length; i < len; i++){
+ records[i].join(this);
+ }
+ var index = this.data.length;
+ this.data.addAll(records);
+ this.fireEvent("add", this, records, index);
+ },
+
/**
- * @cfg {Object} extraParams (Optional) An object containing properties which are used as
- * extra parameters to each request made by this object. (defaults to undefined)
+ * Remove a Record from the Store and fires the remove event.
+ * @param {Ext.data.Record} record The Roo.data.Record object to remove from the cache.
*/
+ remove : function(record){
+ var index = this.data.indexOf(record);
+ this.data.removeAt(index);
+
+ if(this.pruneModifiedRecords){
+ this.modified.remove(record);
+ }
+ this.fireEvent("remove", this, record, index);
+ },
+
/**
- * @cfg {Object} defaultHeaders (Optional) An object containing request headers which are added
- * to each request made by this object. (defaults to undefined)
+ * Remove all Records from the Store and fires the clear event.
*/
+ removeAll : function(){
+ this.data.clear();
+ if(this.pruneModifiedRecords){
+ this.modified = [];
+ }
+ this.fireEvent("clear", this);
+ },
+
/**
- * @cfg {String} method (Optional) The default HTTP method to be used for requests. (defaults to undefined; if not set but parms are present will use POST, otherwise GET)
+ * Inserts Records to the Store at the given index and fires the add event.
+ * @param {Number} index The start index at which to insert the passed Records.
+ * @param {Roo.data.Record[]} records An Array of Roo.data.Record objects to add to the cache.
*/
+ insert : function(index, records){
+ records = [].concat(records);
+ for(var i = 0, len = records.length; i < len; i++){
+ this.data.insert(index, records[i]);
+ records[i].join(this);
+ }
+ this.fireEvent("add", this, records, index);
+ },
+
/**
- * @cfg {Number} timeout (Optional) The timeout in milliseconds to be used for requests. (defaults to 30000)
- */
- /**
- * @cfg {Boolean} autoAbort (Optional) Whether this request should abort any pending requests. (defaults to false)
- * @type Boolean
+ * Get the index within the cache of the passed Record.
+ * @param {Roo.data.Record} record The Roo.data.Record object to to find.
+ * @return {Number} The index of the passed Record. Returns -1 if not found.
*/
-
+ indexOf : function(record){
+ return this.data.indexOf(record);
+ },
/**
- * @cfg {Boolean} disableCaching (Optional) True to add a unique cache-buster param to GET requests. (defaults to true)
- * @type Boolean
+ * Get the index within the cache of the Record with the passed id.
+ * @param {String} id The id of the Record to find.
+ * @return {Number} The index of the Record. Returns -1 if not found.
*/
+ indexOfId : function(id){
+ return this.data.indexOfKey(id);
+ },
+
/**
- * Return the {@link Roo.data.Connection} object being used by this Proxy.
- * @return {Connection} The Connection object. This object may be used to subscribe to events on
- * a finer-grained basis than the DataProxy events.
+ * Get the Record with the specified id.
+ * @param {String} id The id of the Record to find.
+ * @return {Roo.data.Record} The Record with the passed id. Returns undefined if not found.
*/
- getConnection : function(){
- return this.useAjax ? Roo.Ajax : this.conn;
+ getById : function(id){
+ return this.data.key(id);
},
/**
- * Load data from the configured {@link Roo.data.Connection}, read the data object into
- * a block of Roo.data.Records using the passed {@link Roo.data.DataReader} implementation, and
- * process that block using the passed callback.
- * @param {Object} params An object containing properties which are to be used as HTTP parameters
- * for the request to the remote server.
- * @param {Roo.data.DataReader} reader The Reader object which converts the data
- * object into a block of Roo.data.Records.
- * @param {Function} callback The function into which to pass the block of Roo.data.Records.
- * The function must be passed <ul>
- * <li>The Record block object</li>
- * <li>The "arg" argument from the load function</li>
- * <li>A boolean success indicator</li>
- * </ul>
- * @param {Object} scope The scope in which to call the callback
- * @param {Object} arg An optional argument which is passed to the callback as its second parameter.
+ * Get the Record at the specified index.
+ * @param {Number} index The index of the Record to find.
+ * @return {Roo.data.Record} The Record at the passed index. Returns undefined if not found.
*/
- load : function(params, reader, callback, scope, arg){
- if(this.fireEvent("beforeload", this, params) !== false){
- var o = {
- params : params || {},
- request: {
- callback : callback,
- scope : scope,
- arg : arg
- },
- reader: reader,
- callback : this.loadResponse,
- scope: this
- };
- if(this.useAjax){
- Roo.applyIf(o, this.conn);
- if(this.activeRequest){
- Roo.Ajax.abort(this.activeRequest);
- }
- this.activeRequest = Roo.Ajax.request(o);
- }else{
- this.conn.request(o);
- }
- }else{
- callback.call(scope||this, null, arg, false);
- }
+ getAt : function(index){
+ return this.data.itemAt(index);
},
- // private
- loadResponse : function(o, success, response){
- delete this.activeRequest;
- if(!success){
- this.fireEvent("loadexception", this, o, response);
- o.request.callback.call(o.request.scope, null, o.request.arg, false);
- return;
- }
- var result;
- try {
- result = o.reader.read(response);
- }catch(e){
- this.fireEvent("loadexception", this, o, response, e);
- o.request.callback.call(o.request.scope, null, o.request.arg, false);
- return;
- }
-
- this.fireEvent("load", this, o, o.request.arg);
- o.request.callback.call(o.request.scope, result, o.request.arg, true);
+ /**
+ * Returns a range of Records between specified indices.
+ * @param {Number} startIndex (optional) The starting index (defaults to 0)
+ * @param {Number} endIndex (optional) The ending index (defaults to the last Record in the Store)
+ * @return {Roo.data.Record[]} An array of Records
+ */
+ getRange : function(start, end){
+ return this.data.getRange(start, end);
},
// private
- update : function(dataSet){
-
+ storeOptions : function(o){
+ o = Roo.apply({}, o);
+ delete o.callback;
+ delete o.scope;
+ this.lastOptions = o;
},
- // private
- updateResponse : function(dataSet){
-
- }
-});/*
- * 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.data.ScriptTagProxy
- * An implementation of Roo.data.DataProxy that reads a data object from a URL which may be in a domain
- * other than the originating domain of the running page.<br><br>
- * <p>
- * <em>Note that if you are retrieving data from a page that is in a domain that is NOT the same as the originating domain
- * of the running page, you must use this class, rather than DataProxy.</em><br><br>
- * <p>
- * The content passed back from a server resource requested by a ScriptTagProxy is executable JavaScript
- * source code that is used as the source inside a <script> tag.<br><br>
- * <p>
- * In order for the browser to process the returned data, the server must wrap the data object
- * with a call to a callback function, the name of which is passed as a parameter by the ScriptTagProxy.
- * Below is a Java example for a servlet which returns data for either a ScriptTagProxy, or an HttpProxy
- * depending on whether the callback name was passed:
- * <p>
- * <pre><code>
-boolean scriptTag = false;
-String cb = request.getParameter("callback");
-if (cb != null) {
- scriptTag = true;
- response.setContentType("text/javascript");
-} else {
- response.setContentType("application/x-json");
-}
-Writer out = response.getWriter();
-if (scriptTag) {
- out.write(cb + "(");
-}
-out.print(dataBlock.toJsonString());
-if (scriptTag) {
- out.write(");");
-}
-</pre></code>
- *
- * @constructor
- * @param {Object} config A configuration object.
- */
-Roo.data.ScriptTagProxy = function(config){
- Roo.data.ScriptTagProxy.superclass.constructor.call(this);
- Roo.apply(this, config);
- this.head = document.getElementsByTagName("head")[0];
-};
-
-Roo.data.ScriptTagProxy.TRANS_ID = 1000;
-
-Roo.extend(Roo.data.ScriptTagProxy, Roo.data.DataProxy, {
- /**
- * @cfg {String} url The URL from which to request the data object.
- */
- /**
- * @cfg {Number} timeout (Optional) The number of milliseconds to wait for a response. Defaults to 30 seconds.
- */
- timeout : 30000,
- /**
- * @cfg {String} callbackParam (Optional) The name of the parameter to pass to the server which tells
- * the server the name of the callback function set up by the load call to process the returned data object.
- * Defaults to "callback".<p>The server-side processing must read this parameter value, and generate
- * javascript output which calls this named function passing the data object as its only parameter.
- */
- callbackParam : "callback",
/**
- * @cfg {Boolean} nocache (Optional) Defaults to true. Disable cacheing by adding a unique parameter
- * name to the request.
+ * Loads the Record cache from the configured Proxy using the configured Reader.
+ * <p>
+ * If using remote paging, then the first load call must specify the <em>start</em>
+ * and <em>limit</em> properties in the options.params property to establish the initial
+ * position within the dataset, and the number of Records to cache on each read from the Proxy.
+ * <p>
+ * <strong>It is important to note that for remote data sources, loading is asynchronous,
+ * and this call will return before the new data has been loaded. Perform any post-processing
+ * in a callback function, or in a "load" event handler.</strong>
+ * <p>
+ * @param {Object} options An object containing properties which control loading options:<ul>
+ * <li>params {Object} An object containing properties to pass as HTTP parameters to a remote data source.</li>
+ * <li>params.data {Object} if you are using a MemoryProxy / JsonReader, use this as the data to load stuff..
+ * <pre>
+ {
+ data : data, // array of key=>value data like JsonReader
+ total : data.length,
+ success : true
+
+ }
+ </pre>
+ }.</li>
+ * <li>callback {Function} A function to be called after the Records have been loaded. The callback is
+ * passed the following arguments:<ul>
+ * <li>r : Roo.data.Record[]</li>
+ * <li>options: Options object from the load call</li>
+ * <li>success: Boolean success indicator</li></ul></li>
+ * <li>scope {Object} Scope with which to call the callback (defaults to the Store object)</li>
+ * <li>add {Boolean} indicator to append loaded records rather than replace the current cache.</li>
+ * </ul>
*/
- nocache : true,
+ load : function(options){
+ options = options || {};
+ if(this.fireEvent("beforeload", this, options) !== false){
+ this.storeOptions(options);
+ var p = Roo.apply(options.params || {}, this.baseParams);
+ // if meta was not loaded from remote source.. try requesting it.
+ if (!this.reader.metaFromRemote) {
+ p._requestMeta = 1;
+ }
+ if(this.sortInfo && this.remoteSort){
+ var pn = this.paramNames;
+ p[pn["sort"]] = this.sortInfo.field;
+ p[pn["dir"]] = this.sortInfo.direction;
+ }
+ if (this.multiSort) {
+ var pn = this.paramNames;
+ p[pn["multisort"]] = Roo.encode( { sort : this.sortToggle, order: this.sortOrder });
+ }
+
+ this.proxy.load(p, this.reader, this.loadRecords, this, options);
+ }
+ },
/**
- * Load data from the configured URL, read the data object into
- * a block of Roo.data.Records using the passed Roo.data.DataReader implementation, and
- * process that block using the passed callback.
- * @param {Object} params An object containing properties which are to be used as HTTP parameters
- * for the request to the remote server.
- * @param {Roo.data.DataReader} reader The Reader object which converts the data
- * object into a block of Roo.data.Records.
- * @param {Function} callback The function into which to pass the block of Roo.data.Records.
- * The function must be passed <ul>
- * <li>The Record block object</li>
- * <li>The "arg" argument from the load function</li>
- * <li>A boolean success indicator</li>
- * </ul>
- * @param {Object} scope The scope in which to call the callback
- * @param {Object} arg An optional argument which is passed to the callback as its second parameter.
+ * Reloads the Record cache from the configured Proxy using the configured Reader and
+ * the options from the last load operation performed.
+ * @param {Object} options (optional) An object containing properties which may override the options
+ * used in the last load operation. See {@link #load} for details (defaults to null, in which case
+ * the most recently used options are reused).
*/
- load : function(params, reader, callback, scope, arg){
- if(this.fireEvent("beforeload", this, params) !== false){
-
- var p = Roo.urlEncode(Roo.apply(params, this.extraParams));
+ reload : function(options){
+ this.load(Roo.applyIf(options||{}, this.lastOptions));
+ },
- var url = this.url;
- url += (url.indexOf("?") != -1 ? "&" : "?") + p;
- if(this.nocache){
- url += "&_dc=" + (new Date().getTime());
+ // private
+ // Called as a callback by the Reader during a load operation.
+ loadRecords : function(o, options, success){
+
+ if(!o){
+ if(success !== false){
+ this.fireEvent("load", this, [], options, o);
}
- var transId = ++Roo.data.ScriptTagProxy.TRANS_ID;
- var trans = {
- id : transId,
- cb : "stcCallback"+transId,
- scriptId : "stcScript"+transId,
- params : params,
- arg : arg,
- url : url,
- callback : callback,
- scope : scope,
- reader : reader
- };
- var conn = this;
-
- window[trans.cb] = function(o){
- conn.handleResponse(o, trans);
- };
-
- url += String.format("&{0}={1}", this.callbackParam, trans.cb);
-
- if(this.autoAbort !== false){
- this.abort();
+ if(options.callback){
+ options.callback.call(options.scope || this, [], options, false);
}
+ return;
+ }
+ // if data returned failure - throw an exception.
+ if (o.success === false) {
+ // show a message if no listener is registered.
+ if (!this.hasListener('loadexception') && typeof(o.raw.errorMsg) != 'undefined') {
+ Roo.MessageBox.alert("Error loading",o.raw.errorMsg);
+ }
+ // loadmask wil be hooked into this..
+ this.fireEvent("loadexception", this, o, options, o.raw.errorMsg);
+ return;
+ }
+ var r = o.records, t = o.totalRecords || r.length;
+
+ this.fireEvent("beforeloadadd", this, r, options, o);
+
+ if(!options || options.add !== true){
+ if(this.pruneModifiedRecords){
+ this.modified = [];
+ }
+ for(var i = 0, len = r.length; i < len; i++){
+ r[i].join(this);
+ }
+ if(this.snapshot){
+ this.data = this.snapshot;
+ delete this.snapshot;
+ }
+ this.data.clear();
+ this.data.addAll(r);
+ this.totalLength = t;
+ this.applySort();
+ this.fireEvent("datachanged", this);
+ }else{
+ this.totalLength = Math.max(t, this.data.length+r.length);
+ this.add(r);
+ }
+
+ if(this.parent && !Roo.isIOS && !this.useNativeIOS && this.parent.emptyTitle.length) {
+
+ var e = new Roo.data.Record({});
- trans.timeoutId = this.handleFailure.defer(this.timeout, this, [trans]);
-
- var script = document.createElement("script");
- script.setAttribute("src", url);
- script.setAttribute("type", "text/javascript");
- script.setAttribute("id", trans.scriptId);
- this.head.appendChild(script);
+ e.set(this.parent.displayField, this.parent.emptyTitle);
+ e.set(this.parent.valueField, '');
- this.trans = trans;
- }else{
- callback.call(scope||this, null, arg, false);
+ this.insert(0, e);
+ }
+
+ this.fireEvent("load", this, r, options, o);
+ if(options.callback){
+ options.callback.call(options.scope || this, r, options, true);
}
},
- // private
- isLoading : function(){
- return this.trans ? true : false;
+
+ /**
+ * Loads data from a passed data block. A Reader which understands the format of the data
+ * must have been configured in the constructor.
+ * @param {Object} data The data block from which to read the Records. The format of the data expected
+ * is dependent on the type of Reader that is configured and should correspond to that Reader's readRecords parameter.
+ * @param {Boolean} append (Optional) True to append the new Records rather than replace the existing cache.
+ */
+ loadData : function(o, append){
+ var r = this.reader.readRecords(o);
+ this.loadRecords(r, {add: append}, true);
+ },
+
+ /**
+ * using 'cn' the nested child reader read the child array into it's child stores.
+ * @param {Object} rec The record with a 'children array
+ */
+ loadDataFromChildren : function(rec)
+ {
+ this.loadData(this.reader.toLoadData(rec));
},
+
/**
- * Abort the current server request.
+ * Gets the number of cached records.
+ * <p>
+ * <em>If using paging, this may not be the total size of the dataset. If the data object
+ * used by the Reader contains the dataset size, then the getTotalCount() function returns
+ * the data set size</em>
*/
- abort : function(){
- if(this.isLoading()){
- this.destroyTrans(this.trans);
- }
+ getCount : function(){
+ return this.data.length || 0;
},
- // private
- destroyTrans : function(trans, isLoaded){
- this.head.removeChild(document.getElementById(trans.scriptId));
- clearTimeout(trans.timeoutId);
- if(isLoaded){
- window[trans.cb] = undefined;
- try{
- delete window[trans.cb];
- }catch(e){}
- }else{
- // if hasn't been loaded, wait for load to remove it to prevent script error
- window[trans.cb] = function(){
- window[trans.cb] = undefined;
- try{
- delete window[trans.cb];
- }catch(e){}
- };
- }
+ /**
+ * Gets the total number of records in the dataset as returned by the server.
+ * <p>
+ * <em>If using paging, for this to be accurate, the data object used by the Reader must contain
+ * the dataset size</em>
+ */
+ getTotalCount : function(){
+ return this.totalLength || 0;
},
- // private
- handleResponse : function(o, trans){
- this.trans = false;
- this.destroyTrans(trans, true);
- var result;
- try {
- result = trans.reader.readRecords(o);
- }catch(e){
- this.fireEvent("loadexception", this, o, trans.arg, e);
- trans.callback.call(trans.scope||window, null, trans.arg, false);
- return;
- }
- this.fireEvent("load", this, o, trans.arg);
- trans.callback.call(trans.scope||window, result, trans.arg, true);
+ /**
+ * Returns the sort state of the Store as an object with two properties:
+ * <pre><code>
+ field {String} The name of the field by which the Records are sorted
+ direction {String} The sort order, "ASC" or "DESC"
+ * </code></pre>
+ */
+ getSortState : function(){
+ return this.sortInfo;
},
// private
- handleFailure : function(trans){
- this.trans = false;
- this.destroyTrans(trans, false);
- this.fireEvent("loadexception", this, null, trans.arg);
- trans.callback.call(trans.scope||window, null, trans.arg, false);
- }
-});/*
- * 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">
- */
+ applySort : function(){
+ if(this.sortInfo && !this.remoteSort){
+ var s = this.sortInfo, f = s.field;
+ var st = this.fields.get(f).sortType;
+ var fn = function(r1, r2){
+ var v1 = st(r1.data[f]), v2 = st(r2.data[f]);
+ return v1 > v2 ? 1 : (v1 < v2 ? -1 : 0);
+ };
+ this.data.sort(s.direction, fn);
+ if(this.snapshot && this.snapshot != this.data){
+ this.snapshot.sort(s.direction, fn);
+ }
+ }
+ },
-/**
- * @class Roo.data.JsonReader
- * @extends Roo.data.DataReader
- * Data reader class to create an Array of Roo.data.Record objects from a JSON response
- * based on mappings in a provided Roo.data.Record constructor.
- *
- * The default behaviour of a store is to send ?_requestMeta=1, unless the class has recieved 'metaData' property
- * in the reply previously.
- *
- * <p>
- * Example code:
- * <pre><code>
-var RecordDef = Roo.data.Record.create([
- {name: 'name', mapping: 'name'}, // "mapping" property not needed if it's the same as "name"
- {name: 'occupation'} // This field will use "occupation" as the mapping.
-]);
-var myReader = new Roo.data.JsonReader({
- totalProperty: "results", // The property which contains the total dataset size (optional)
- root: "rows", // The property which contains an Array of row objects
- id: "id" // The property within each row object that provides an ID for the record (optional)
-}, RecordDef);
-</code></pre>
- * <p>
- * This would consume a JSON file like this:
- * <pre><code>
-{ 'results': 2, 'rows': [
- { 'id': 1, 'name': 'Bill', occupation: 'Gardener' },
- { 'id': 2, 'name': 'Ben', occupation: 'Horticulturalist' } ]
-}
-</code></pre>
- * @cfg {String} totalProperty Name of the property from which to retrieve the total number of records
- * in the dataset. This is only needed if the whole dataset is not passed in one go, but is being
- * paged from the remote server.
- * @cfg {String} successProperty Name of the property from which to retrieve the success attribute used by forms.
- * @cfg {String} root name of the property which contains the Array of row objects.
- * @cfg {String} id Name of the property within a row object that contains a record identifier value.
- * @cfg {Array} fields Array of field definition objects
- * @constructor
- * Create a new JsonReader
- * @param {Object} meta Metadata configuration options
- * @param {Object} recordType Either an Array of field definition objects,
- * or an {@link Roo.data.Record} object created using {@link Roo.data.Record#create}.
- */
-Roo.data.JsonReader = function(meta, recordType){
-
- meta = meta || {};
- // set some defaults:
- Roo.applyIf(meta, {
- totalProperty: 'total',
- successProperty : 'success',
- root : 'data',
- id : 'id'
- });
-
- Roo.data.JsonReader.superclass.constructor.call(this, meta, recordType||meta.fields);
-};
-Roo.extend(Roo.data.JsonReader, Roo.data.DataReader, {
-
/**
- * @prop {Boolean} metaFromRemote - if the meta data was loaded from the remote source.
- * Used by Store query builder to append _requestMeta to params.
- *
+ * Sets the default sort column and order to be used by the next load operation.
+ * @param {String} fieldName The name of the field to sort by.
+ * @param {String} dir (optional) The sort order, "ASC" or "DESC" (defaults to "ASC")
*/
- metaFromRemote : false,
+ setDefaultSort : function(field, dir){
+ this.sortInfo = {field: field, direction: dir ? dir.toUpperCase() : "ASC"};
+ },
+
/**
- * This method is only used by a DataProxy which has retrieved data from a remote server.
- * @param {Object} response The XHR object which contains the JSON data in its responseText.
- * @return {Object} data A data block which is used by an Roo.data.Store object as
- * a cache of Roo.data.Records.
+ * Sort the Records.
+ * If remote sorting is used, the sort is performed on the server, and the cache is
+ * reloaded. If local sorting is used, the cache is sorted internally.
+ * @param {String} fieldName The name of the field to sort by.
+ * @param {String} dir (optional) The sort order, "ASC" or "DESC" (defaults to "ASC")
*/
- read : function(response){
- var json = response.responseText;
-
- var o = /* eval:var:o */ eval("("+json+")");
- if(!o) {
- throw {message: "JsonReader.read: Json object not found"};
- }
-
- if(o.metaData){
+ sort : function(fieldName, dir){
+ var f = this.fields.get(fieldName);
+ if(!dir){
+ this.sortToggle[f.name] = this.sortToggle[f.name] || f.sortDir;
- delete this.ef;
- this.metaFromRemote = true;
- this.meta = o.metaData;
- this.recordType = Roo.data.Record.create(o.metaData.fields);
- this.onMetaChange(this.meta, this.recordType, o);
+ if(this.multiSort || (this.sortInfo && this.sortInfo.field == f.name) ){ // toggle sort dir
+ dir = (this.sortToggle[f.name] || "ASC").toggle("ASC", "DESC");
+ }else{
+ dir = f.sortDir;
+ }
+ }
+ this.sortToggle[f.name] = dir;
+ this.sortInfo = {field: f.name, direction: dir};
+ if(!this.remoteSort){
+ this.applySort();
+ this.fireEvent("datachanged", this);
+ }else{
+ this.load(this.lastOptions);
}
- return this.readRecords(o);
},
- // private function a store will implement
- onMetaChange : function(meta, recordType, o){
-
+ /**
+ * Calls the specified function for each of the Records in the cache.
+ * @param {Function} fn The function to call. The Record is passed as the first parameter.
+ * Returning <em>false</em> aborts and exits the iteration.
+ * @param {Object} scope (optional) The scope in which to call the function (defaults to the Record).
+ */
+ each : function(fn, scope){
+ this.data.each(fn, scope);
},
/**
- * @ignore
- */
- simpleAccess: function(obj, subsc) {
- return obj[subsc];
+ * Gets all records modified since the last commit. Modified records are persisted across load operations
+ * (e.g., during paging).
+ * @return {Roo.data.Record[]} An array of Records containing outstanding modifications.
+ */
+ getModifiedRecords : function(){
+ return this.modified;
},
- /**
- * @ignore
- */
- getJsonAccessor: function(){
- var re = /[\[\.]/;
- return function(expr) {
- try {
- return(re.test(expr))
- ? new Function("obj", "return obj." + expr)
- : function(obj){
- return obj[expr];
- };
- } catch(e){}
- return Roo.emptyFn;
+ // private
+ createFilterFn : function(property, value, anyMatch){
+ if(!value.exec){ // not a regex
+ value = String(value);
+ if(value.length == 0){
+ return false;
+ }
+ value = new RegExp((anyMatch === true ? '' : '^') + Roo.escapeRe(value), "i");
+ }
+ return function(r){
+ return value.test(r.data[property]);
};
- }(),
+ },
/**
- * Create a data block containing Roo.data.Records from an XML document.
- * @param {Object} o An object which contains an Array of row objects in the property specified
- * in the config as 'root, and optionally a property, specified in the config as 'totalProperty'
- * which contains the total size of the dataset.
- * @return {Object} data A data block which is used by an Roo.data.Store object as
- * a cache of Roo.data.Records.
+ * Sums the value of <i>property</i> for each record between start and end and returns the result.
+ * @param {String} property A field on your records
+ * @param {Number} start The record index to start at (defaults to 0)
+ * @param {Number} end The last record index to include (defaults to length - 1)
+ * @return {Number} The sum
*/
- readRecords : function(o){
- /**
- * After any data loads, the raw JSON data is available for further custom processing.
- * @type Object
- */
- this.o = o;
- var s = this.meta, Record = this.recordType,
- f = Record ? Record.prototype.fields : null, fi = f ? f.items : [], fl = f ? f.length : 0;
+ sum : function(property, start, end){
+ var rs = this.data.items, v = 0;
+ start = start || 0;
+ end = (end || end === 0) ? end : rs.length-1;
-// Generate extraction functions for the totalProperty, the root, the id, and for each field
- if (!this.ef) {
- if(s.totalProperty) {
- this.getTotal = this.getJsonAccessor(s.totalProperty);
- }
- if(s.successProperty) {
- this.getSuccess = this.getJsonAccessor(s.successProperty);
- }
- this.getRoot = s.root ? this.getJsonAccessor(s.root) : function(p){return p;};
- if (s.id) {
- var g = this.getJsonAccessor(s.id);
- this.getId = function(rec) {
- var r = g(rec);
- return (r === undefined || r === "") ? null : r;
- };
- } else {
- this.getId = function(){return null;};
- }
- this.ef = [];
- for(var jj = 0; jj < fl; jj++){
- f = fi[jj];
- var map = (f.mapping !== undefined && f.mapping !== null) ? f.mapping : f.name;
- this.ef[jj] = this.getJsonAccessor(map);
- }
+ for(var i = start; i <= end; i++){
+ v += (rs[i].data[property] || 0);
}
+ return v;
+ },
- var root = this.getRoot(o), c = root.length, totalRecords = c, success = true;
- if(s.totalProperty){
- var vt = parseInt(this.getTotal(o), 10);
- if(!isNaN(vt)){
- totalRecords = vt;
+ /**
+ * Filter the records by a specified property.
+ * @param {String} field A field on your records
+ * @param {String/RegExp} value Either a string that the field
+ * should start with or a RegExp to test against the field
+ * @param {Boolean} anyMatch True to match any part not just the beginning
+ */
+ filter : function(property, value, anyMatch){
+ var fn = this.createFilterFn(property, value, anyMatch);
+ return fn ? this.filterBy(fn) : this.clearFilter();
+ },
+
+ /**
+ * Filter by a function. The specified function will be called with each
+ * record in this data source. If the function returns true the record is included,
+ * otherwise it is filtered.
+ * @param {Function} fn The function to be called, it will receive 2 args (record, id)
+ * @param {Object} scope (optional) The scope of the function (defaults to this)
+ */
+ filterBy : function(fn, scope){
+ this.snapshot = this.snapshot || this.data;
+ this.data = this.queryBy(fn, scope||this);
+ this.fireEvent("datachanged", this);
+ },
+
+ /**
+ * Query the records by a specified property.
+ * @param {String} field A field on your records
+ * @param {String/RegExp} value Either a string that the field
+ * should start with or a RegExp to test against the field
+ * @param {Boolean} anyMatch True to match any part not just the beginning
+ * @return {MixedCollection} Returns an Roo.util.MixedCollection of the matched records
+ */
+ query : function(property, value, anyMatch){
+ var fn = this.createFilterFn(property, value, anyMatch);
+ return fn ? this.queryBy(fn) : this.data.clone();
+ },
+
+ /**
+ * Query by a function. The specified function will be called with each
+ * record in this data source. If the function returns true the record is included
+ * in the results.
+ * @param {Function} fn The function to be called, it will receive 2 args (record, id)
+ * @param {Object} scope (optional) The scope of the function (defaults to this)
+ @return {MixedCollection} Returns an Roo.util.MixedCollection of the matched records
+ **/
+ queryBy : function(fn, scope){
+ var data = this.snapshot || this.data;
+ return data.filterBy(fn, scope||this);
+ },
+
+ /**
+ * Collects unique values for a particular dataIndex from this store.
+ * @param {String} dataIndex The property to collect
+ * @param {Boolean} allowNull (optional) Pass true to allow null, undefined or empty string values
+ * @param {Boolean} bypassFilter (optional) Pass true to collect from all records, even ones which are filtered
+ * @return {Array} An array of the unique values
+ **/
+ collect : function(dataIndex, allowNull, bypassFilter){
+ var d = (bypassFilter === true && this.snapshot) ?
+ this.snapshot.items : this.data.items;
+ var v, sv, r = [], l = {};
+ for(var i = 0, len = d.length; i < len; i++){
+ v = d[i].data[dataIndex];
+ sv = String(v);
+ if((allowNull || !Roo.isEmpty(v)) && !l[sv]){
+ l[sv] = true;
+ r[r.length] = v;
}
}
- if(s.successProperty){
- var vs = this.getSuccess(o);
- if(vs === false || vs === 'false'){
- success = false;
+ return r;
+ },
+
+ /**
+ * Revert to a view of the Record cache with no filtering applied.
+ * @param {Boolean} suppressEvent If true the filter is cleared silently without notifying listeners
+ */
+ clearFilter : function(suppressEvent){
+ if(this.snapshot && this.snapshot != this.data){
+ this.data = this.snapshot;
+ delete this.snapshot;
+ if(suppressEvent !== true){
+ this.fireEvent("datachanged", this);
}
}
- var records = [];
- for(var i = 0; i < c; i++){
- var n = root[i];
- var values = {};
- var id = this.getId(n);
- for(var j = 0; j < fl; j++){
- f = fi[j];
- var v = this.ef[j](n);
- if (!f.convert) {
- Roo.log('missing convert for ' + f.name);
- Roo.log(f);
- continue;
- }
- values[f.name] = f.convert((v !== undefined) ? v : f.defaultValue);
- }
- var record = new Record(values, id);
- record.json = n;
- records[i] = record;
+ },
+
+ // private
+ afterEdit : function(record){
+ if(this.modified.indexOf(record) == -1){
+ this.modified.push(record);
}
- return {
- raw : o,
- success : success,
- records : records,
- totalRecords : totalRecords
- };
+ this.fireEvent("update", this, record, Roo.data.Record.EDIT);
+ },
+
+ // private
+ afterReject : function(record){
+ this.modified.remove(record);
+ this.fireEvent("update", this, record, Roo.data.Record.REJECT);
+ },
+
+ // private
+ afterCommit : function(record){
+ this.modified.remove(record);
+ this.fireEvent("update", this, record, Roo.data.Record.COMMIT);
+ },
+
+ /**
+ * Commit all Records with outstanding changes. To handle updates for changes, subscribe to the
+ * Store's "update" event, and perform updating when the third parameter is Roo.data.Record.COMMIT.
+ */
+ commitChanges : function(){
+ var m = this.modified.slice(0);
+ this.modified = [];
+ for(var i = 0, len = m.length; i < len; i++){
+ m[i].commit();
+ }
+ },
+
+ /**
+ * Cancel outstanding changes on all changed records.
+ */
+ rejectChanges : function(){
+ var m = this.modified.slice(0);
+ this.modified = [];
+ for(var i = 0, len = m.length; i < len; i++){
+ m[i].reject();
+ }
+ },
+
+ onMetaChange : function(meta, rtype, o){
+ this.recordType = rtype;
+ this.fields = rtype.prototype.fields;
+ delete this.snapshot;
+ this.sortInfo = meta.sortInfo || this.sortInfo;
+ this.modified = [];
+ this.fireEvent('metachange', this, this.reader.meta);
+ },
+
+ moveIndex : function(data, type)
+ {
+ var index = this.indexOf(data);
+
+ var newIndex = index + type;
+
+ this.remove(data);
+
+ this.insert(newIndex, data);
+
}
});/*
* Based on:
*/
/**
- * @class Roo.data.XmlReader
- * @extends Roo.data.DataReader
- * Data reader class to create an Array of {@link Roo.data.Record} objects from an XML document
- * based on mappings in a provided Roo.data.Record constructor.<br><br>
- * <p>
- * <em>Note that in order for the browser to parse a returned XML document, the Content-Type
- * header in the HTTP response must be set to "text/xml".</em>
- * <p>
- * Example code:
- * <pre><code>
-var RecordDef = Roo.data.Record.create([
- {name: 'name', mapping: 'name'}, // "mapping" property not needed if it's the same as "name"
- {name: 'occupation'} // This field will use "occupation" as the mapping.
-]);
-var myReader = new Roo.data.XmlReader({
- totalRecords: "results", // The element which contains the total dataset size (optional)
- record: "row", // The repeated element which contains row information
- id: "id" // The element within the row that provides an ID for the record (optional)
-}, RecordDef);
-</code></pre>
- * <p>
- * This would consume an XML file like this:
- * <pre><code>
-<?xml?>
-<dataset>
- <results>2</results>
- <row>
- <id>1</id>
- <name>Bill</name>
- <occupation>Gardener</occupation>
- </row>
- <row>
- <id>2</id>
- <name>Ben</name>
- <occupation>Horticulturalist</occupation>
- </row>
-</dataset>
-</code></pre>
- * @cfg {String} totalRecords The DomQuery path from which to retrieve the total number of records
- * in the dataset. This is only needed if the whole dataset is not passed in one go, but is being
- * paged from the remote server.
- * @cfg {String} record The DomQuery path to the repeated element which contains record information.
- * @cfg {String} success The DomQuery path to the success attribute used by forms.
- * @cfg {String} id The DomQuery path relative from the record element to the element that contains
- * a record identifier value.
+ * @class Roo.data.SimpleStore
+ * @extends Roo.data.Store
+ * Small helper class to make creating Stores from Array data easier.
+ * @cfg {Number} id The array index of the record id. Leave blank to auto generate ids.
+ * @cfg {Array} fields An array of field definition objects, or field name strings.
+ * @cfg {Object} an existing reader (eg. copied from another store)
+ * @cfg {Array} data The multi-dimensional array of data
+ * @cfg {Roo.data.DataProxy} proxy [not-required]
+ * @cfg {Roo.data.Reader} reader [not-required]
* @constructor
- * Create a new XmlReader
- * @param {Object} meta Metadata configuration options
- * @param {Mixed} recordType The definition of the data record type to produce. This can be either a valid
- * Record subclass created with {@link Roo.data.Record#create}, or an array of objects with which to call
- * Roo.data.Record.create. See the {@link Roo.data.Record} class for more details.
+ * @param {Object} config
*/
-Roo.data.XmlReader = function(meta, recordType){
- meta = meta || {};
- Roo.data.XmlReader.superclass.constructor.call(this, meta, recordType||meta.fields);
+Roo.data.SimpleStore = function(config)
+{
+ Roo.data.SimpleStore.superclass.constructor.call(this, {
+ isLocal : true,
+ reader: typeof(config.reader) != 'undefined' ? config.reader : new Roo.data.ArrayReader({
+ id: config.id
+ },
+ Roo.data.Record.create(config.fields)
+ ),
+ proxy : new Roo.data.MemoryProxy(config.data)
+ });
+ this.load();
};
-Roo.extend(Roo.data.XmlReader, Roo.data.DataReader, {
- /**
- * This method is only used by a DataProxy which has retrieved data from a remote server.
- * @param {Object} response The XHR object which contains the parsed XML document. The response is expected
- * to contain a method called 'responseXML' that returns an XML document object.
- * @return {Object} records A data block which is used by an {@link Roo.data.Store} as
- * a cache of Roo.data.Records.
- */
- read : function(response){
- var doc = response.responseXML;
- if(!doc) {
- throw {message: "XmlReader.read: XML Document not available"};
- }
- return this.readRecords(doc);
- },
-
- /**
- * Create a data block containing Roo.data.Records from an XML document.
- * @param {Object} doc A parsed XML document.
- * @return {Object} records A data block which is used by an {@link Roo.data.Store} as
- * a cache of Roo.data.Records.
- */
- readRecords : function(doc){
- /**
- * After any data loads/reads, the raw XML Document is available for further custom processing.
- * @type XMLDocument
- */
- this.xmlData = doc;
- var root = doc.documentElement || doc;
- var q = Roo.DomQuery;
- var recordType = this.recordType, fields = recordType.prototype.fields;
- var sid = this.meta.id;
- var totalRecords = 0, success = true;
- if(this.meta.totalRecords){
- totalRecords = q.selectNumber(this.meta.totalRecords, root, 0);
- }
-
- if(this.meta.success){
- var sv = q.selectValue(this.meta.success, root, true);
- success = sv !== false && sv !== 'false';
- }
- var records = [];
- var ns = q.select(this.meta.record, root);
- for(var i = 0, len = ns.length; i < len; i++) {
- var n = ns[i];
- var values = {};
- var id = sid ? q.selectValue(sid, n) : undefined;
- for(var j = 0, jlen = fields.length; j < jlen; j++){
- var f = fields.items[j];
- var v = q.selectValue(f.mapping || f.name, n, f.defaultValue);
- v = f.convert(v);
- values[f.name] = v;
- }
- var record = new recordType(values, id);
- record.node = n;
- records[records.length] = record;
- }
-
- return {
- success : success,
- records : records,
- totalRecords : totalRecords || records.length
- };
- }
-});/*
+Roo.extend(Roo.data.SimpleStore, Roo.data.Store);/*
* Based on:
* Ext JS Library 1.1.1
* Copyright(c) 2006-2007, Ext JS, LLC.
*/
/**
- * @class Roo.data.ArrayReader
- * @extends Roo.data.DataReader
- * Data reader class to create an Array of Roo.data.Record objects from an Array.
- * Each element of that Array represents a row of data fields. The
- * fields are pulled into a Record object using as a subscript, the <em>mapping</em> property
- * of the field definition if it exists, or the field's ordinal position in the definition.<br>
- * <p>
- * Example code:.
- * <pre><code>
-var RecordDef = Roo.data.Record.create([
- {name: 'name', mapping: 1}, // "mapping" only needed if an "id" field is present which
- {name: 'occupation', mapping: 2} // precludes using the ordinal position as the index.
-]);
-var myReader = new Roo.data.ArrayReader({
- id: 0 // The subscript within row Array that provides an ID for the Record (optional)
-}, RecordDef);
+/**
+ * @extends Roo.data.Store
+ * @class Roo.data.JsonStore
+ * Small helper class to make creating Stores for JSON data easier. <br/>
+<pre><code>
+var store = new Roo.data.JsonStore({
+ url: 'get-images.php',
+ root: 'images',
+ fields: ['name', 'url', {name:'size', type: 'float'}, {name:'lastmod', type:'date'}]
+});
</code></pre>
- * <p>
- * This would consume an Array like this:
- * <pre><code>
-[ [1, 'Bill', 'Gardener'], [2, 'Ben', 'Horticulturalist'] ]
- </code></pre>
- * @cfg {String} id (optional) The subscript within row Array that provides an ID for the Record
+ * <b>Note: Although they are not listed, this class inherits all of the config options of Store,
+ * JsonReader and HttpProxy (unless inline data is provided).</b>
+ * @cfg {Array} fields An array of field definition objects, or field name strings.
* @constructor
- * Create a new JsonReader
- * @param {Object} meta Metadata configuration options.
- * @param {Object} recordType Either an Array of field definition objects
- * as specified to {@link Roo.data.Record#create},
- * or an {@link Roo.data.Record} object
- * created using {@link Roo.data.Record#create}.
+ * @param {Object} config
*/
-Roo.data.ArrayReader = function(meta, recordType){
- Roo.data.ArrayReader.superclass.constructor.call(this, meta, recordType);
+Roo.data.JsonStore = function(c){
+ Roo.data.JsonStore.superclass.constructor.call(this, Roo.apply(c, {
+ proxy: !c.data ? new Roo.data.HttpProxy({url: c.url}) : undefined,
+ reader: new Roo.data.JsonReader(c, c.fields)
+ }));
};
-
-Roo.extend(Roo.data.ArrayReader, Roo.data.JsonReader, {
- /**
- * Create a data block containing Roo.data.Records from an XML document.
- * @param {Object} o An Array of row objects which represents the dataset.
- * @return {Object} data A data block which is used by an Roo.data.Store object as
- * a cache of Roo.data.Records.
- */
- readRecords : function(o){
- var sid = this.meta ? this.meta.id : null;
- var recordType = this.recordType, fields = recordType.prototype.fields;
- var records = [];
- var root = o;
- for(var i = 0; i < root.length; i++){
- var n = root[i];
- var values = {};
- var id = ((sid || sid === 0) && n[sid] !== undefined && n[sid] !== "" ? n[sid] : null);
- for(var j = 0, jlen = fields.length; j < jlen; j++){
- var f = fields.items[j];
- var k = f.mapping !== undefined && f.mapping !== null ? f.mapping : j;
- var v = n[k] !== undefined ? n[k] : f.defaultValue;
- v = f.convert(v);
- values[f.name] = v;
- }
- var record = new recordType(values, id);
- record.json = n;
- records[records.length] = record;
- }
- return {
- records : records,
- totalRecords : records.length
- };
- }
-});/*
+Roo.extend(Roo.data.JsonStore, Roo.data.Store);/*
* Based on:
* Ext JS Library 1.1.1
* Copyright(c) 2006-2007, Ext JS, LLC.
* <script type="text/javascript">
*/
+
+Roo.data.Field = function(config){
+ if(typeof config == "string"){
+ config = {name: config};
+ }
+ Roo.apply(this, config);
+
+ if(!this.type){
+ this.type = "auto";
+ }
+
+ var st = Roo.data.SortTypes;
+ // named sortTypes are supported, here we look them up
+ if(typeof this.sortType == "string"){
+ this.sortType = st[this.sortType];
+ }
+
+ // set default sortType for strings and dates
+ if(!this.sortType){
+ switch(this.type){
+ case "string":
+ this.sortType = st.asUCString;
+ break;
+ case "date":
+ this.sortType = st.asDate;
+ break;
+ default:
+ this.sortType = st.none;
+ }
+ }
-/**
- * @class Roo.data.Tree
- * @extends Roo.util.Observable
- * Represents a tree data structure and bubbles all the events for its nodes. The nodes
- * in the tree have most standard DOM functionality.
- * @constructor
- * @param {Node} root (optional) The root node
- */
-Roo.data.Tree = function(root){
- this.nodeHash = {};
- /**
- * The root node for this tree
- * @type Node
- */
- this.root = null;
- if(root){
- this.setRootNode(root);
- }
- this.addEvents({
- /**
- * @event append
- * Fires when a new child node is appended to a node in this tree.
- * @param {Tree} tree The owner tree
- * @param {Node} parent The parent node
- * @param {Node} node The newly appended node
- * @param {Number} index The index of the newly appended node
- */
- "append" : true,
- /**
- * @event remove
- * Fires when a child node is removed from a node in this tree.
- * @param {Tree} tree The owner tree
- * @param {Node} parent The parent node
- * @param {Node} node The child node removed
- */
- "remove" : true,
- /**
- * @event move
- * Fires when a node is moved to a new location in the tree
- * @param {Tree} tree The owner tree
- * @param {Node} node The node moved
- * @param {Node} oldParent The old parent of this node
- * @param {Node} newParent The new parent of this node
- * @param {Number} index The index it was moved to
- */
- "move" : true,
- /**
- * @event insert
- * Fires when a new child node is inserted in a node in this tree.
- * @param {Tree} tree The owner tree
- * @param {Node} parent The parent node
- * @param {Node} node The child node inserted
- * @param {Node} refNode The child node the node was inserted before
- */
- "insert" : true,
- /**
- * @event beforeappend
- * Fires before a new child is appended to a node in this tree, return false to cancel the append.
- * @param {Tree} tree The owner tree
- * @param {Node} parent The parent node
- * @param {Node} node The child node to be appended
- */
- "beforeappend" : true,
- /**
- * @event beforeremove
- * Fires before a child is removed from a node in this tree, return false to cancel the remove.
- * @param {Tree} tree The owner tree
- * @param {Node} parent The parent node
- * @param {Node} node The child node to be removed
- */
- "beforeremove" : true,
- /**
- * @event beforemove
- * Fires before a node is moved to a new location in the tree. Return false to cancel the move.
- * @param {Tree} tree The owner tree
- * @param {Node} node The node being moved
- * @param {Node} oldParent The parent of the node
- * @param {Node} newParent The new parent the node is moving to
- * @param {Number} index The index it is being moved to
- */
- "beforemove" : true,
- /**
- * @event beforeinsert
- * Fires before a new child is inserted in a node in this tree, return false to cancel the insert.
- * @param {Tree} tree The owner tree
- * @param {Node} parent The parent node
- * @param {Node} node The child node to be inserted
- * @param {Node} refNode The child node the node is being inserted before
- */
- "beforeinsert" : true
- });
+ // define once
+ var stripRe = /[\$,%]/g;
- Roo.data.Tree.superclass.constructor.call(this);
+ // prebuilt conversion function for this field, instead of
+ // switching every time we're reading a value
+ if(!this.convert){
+ var cv, dateFormat = this.dateFormat;
+ switch(this.type){
+ case "":
+ case "auto":
+ case undefined:
+ cv = function(v){ return v; };
+ break;
+ case "string":
+ cv = function(v){ return (v === undefined || v === null) ? '' : String(v); };
+ break;
+ case "int":
+ cv = function(v){
+ return v !== undefined && v !== null && v !== '' ?
+ parseInt(String(v).replace(stripRe, ""), 10) : '';
+ };
+ break;
+ case "float":
+ cv = function(v){
+ return v !== undefined && v !== null && v !== '' ?
+ parseFloat(String(v).replace(stripRe, ""), 10) : '';
+ };
+ break;
+ case "bool":
+ case "boolean":
+ cv = function(v){ return v === true || v === "true" || v == 1; };
+ break;
+ case "date":
+ cv = function(v){
+ if(!v){
+ return '';
+ }
+ if(v instanceof Date){
+ return v;
+ }
+ if(dateFormat){
+ if(dateFormat == "timestamp"){
+ return new Date(v*1000);
+ }
+ return Date.parseDate(v, dateFormat);
+ }
+ var parsed = Date.parse(v);
+ return parsed ? new Date(parsed) : null;
+ };
+ break;
+
+ }
+ this.convert = cv;
+ }
};
-Roo.extend(Roo.data.Tree, Roo.util.Observable, {
- pathSeparator: "/",
-
- proxyNodeEvent : function(){
- return this.fireEvent.apply(this, arguments);
- },
+Roo.data.Field.prototype = {
+ dateFormat: null,
+ defaultValue: "",
+ mapping: null,
+ sortType : null,
+ sortDir : "ASC"
+};/*
+ * 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">
+ */
+
+// Base class for reading structured data from a data source. This class is intended to be
+// extended (see ArrayReader, JsonReader and XmlReader) and should not be created directly.
- /**
- * Returns the root node for this tree.
- * @return {Node}
- */
- getRootNode : function(){
- return this.root;
- },
+/**
+ * @class Roo.data.DataReader
+ * @abstract
+ * Base class for reading structured data from a data source. This class is intended to be
+ * extended (see {Roo.data.ArrayReader}, {Roo.data.JsonReader} and {Roo.data.XmlReader}) and should not be created directly.
+ */
- /**
- * Sets the root node for this tree.
- * @param {Node} node
- * @return {Node}
- */
- setRootNode : function(node){
- this.root = node;
- node.ownerTree = this;
- node.isRoot = true;
- this.registerNode(node);
- return node;
- },
+Roo.data.DataReader = function(meta, recordType){
+
+ this.meta = meta;
+
+ this.recordType = recordType instanceof Array ?
+ Roo.data.Record.create(recordType) : recordType;
+};
- /**
- * Gets a node in this tree by its id.
- * @param {String} id
- * @return {Node}
+Roo.data.DataReader.prototype = {
+
+
+ readerType : 'Data',
+ /**
+ * Create an empty record
+ * @param {Object} data (optional) - overlay some values
+ * @return {Roo.data.Record} record created.
*/
- getNodeById : function(id){
- return this.nodeHash[id];
- },
-
- registerNode : function(node){
- this.nodeHash[node.id] = node;
- },
-
- unregisterNode : function(node){
- delete this.nodeHash[node.id];
- },
-
- toString : function(){
- return "[Tree"+(this.id?" "+this.id:"")+"]";
+ newRow : function(d) {
+ var da = {};
+ this.recordType.prototype.fields.each(function(c) {
+ switch( c.type) {
+ case 'int' : da[c.name] = 0; break;
+ case 'date' : da[c.name] = new Date(); break;
+ case 'float' : da[c.name] = 0.0; break;
+ case 'boolean' : da[c.name] = false; break;
+ default : da[c.name] = ""; break;
+ }
+
+ });
+ return new this.recordType(Roo.apply(da, d));
}
-});
+
+
+};/*
+ * 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.data.Node
+ * @class Roo.data.DataProxy
* @extends Roo.util.Observable
- * @cfg {Boolean} leaf true if this node is a leaf and does not have children
- * @cfg {String} id The id for this node. If one is not specified, one is generated.
- * @constructor
- * @param {Object} attributes The attributes/config for the node
+ * @abstract
+ * This class is an abstract base class for implementations which provide retrieval of
+ * unformatted data objects.<br>
+ * <p>
+ * DataProxy implementations are usually used in conjunction with an implementation of Roo.data.DataReader
+ * (of the appropriate type which knows how to parse the data object) to provide a block of
+ * {@link Roo.data.Records} to an {@link Roo.data.Store}.<br>
+ * <p>
+ * Custom implementations must implement the load method as described in
+ * {@link Roo.data.HttpProxy#load}.
*/
-Roo.data.Node = function(attributes){
- /**
- * The attributes supplied for the node. You can use this property to access any custom attributes you supplied.
- * @type {Object}
- */
- this.attributes = attributes || {};
- this.leaf = this.attributes.leaf;
+Roo.data.DataProxy = function(){
+ this.addEvents({
+ /**
+ * @event beforeload
+ * Fires before a network request is made to retrieve a data object.
+ * @param {Object} This DataProxy object.
+ * @param {Object} params The params parameter to the load function.
+ */
+ beforeload : true,
+ /**
+ * @event load
+ * Fires before the load method's callback is called.
+ * @param {Object} This DataProxy object.
+ * @param {Object} o The data object.
+ * @param {Object} arg The callback argument object passed to the load function.
+ */
+ load : true,
+ /**
+ * @event loadexception
+ * Fires if an Exception occurs during data retrieval.
+ * @param {Object} This DataProxy object.
+ * @param {Object} o The data object.
+ * @param {Object} arg The callback argument object passed to the load function.
+ * @param {Object} e The Exception.
+ */
+ loadexception : true
+ });
+ Roo.data.DataProxy.superclass.constructor.call(this);
+};
+
+Roo.extend(Roo.data.DataProxy, Roo.util.Observable);
+
/**
- * The node id. @type String
+ * @cfg {void} listeners (Not available) Constructor blocks listeners from being set
*/
- this.id = this.attributes.id;
- if(!this.id){
- this.id = Roo.id(null, "ynode-");
- this.attributes.id = this.id;
+/*
+ * 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.data.MemoryProxy
+ * @extends Roo.data.DataProxy
+ * An implementation of Roo.data.DataProxy that simply passes the data specified in its constructor
+ * to the Reader when its load method is called.
+ * @constructor
+ * @param {Object} config A config object containing the objects needed for the Store to access data,
+ */
+Roo.data.MemoryProxy = function(config){
+ var data = config;
+ if (typeof(config) != 'undefined' && typeof(config.data) != 'undefined') {
+ data = config.data;
}
-
+ Roo.data.MemoryProxy.superclass.constructor.call(this);
+ this.data = data;
+};
+
+Roo.extend(Roo.data.MemoryProxy, Roo.data.DataProxy, {
/**
- * All child nodes of this node. @type Array
+ * @cfg {Object} data The data object which the Reader uses to construct a block of Roo.data.Records.
*/
- this.childNodes = [];
- if(!this.childNodes.indexOf){ // indexOf is a must
- this.childNodes.indexOf = function(o){
- for(var i = 0, len = this.length; i < len; i++){
- if(this[i] == o) {
- return i;
- }
- }
- return -1;
- };
- }
/**
- * The parent node for this node. @type Node
+ * Load data from the requested source (in this case an in-memory
+ * data object passed to the constructor), read the data object into
+ * a block of Roo.data.Records using the passed Roo.data.DataReader implementation, and
+ * process that block using the passed callback.
+ * @param {Object} params This parameter is not used by the MemoryProxy class.
+ * @param {Roo.data.DataReader} reader The Reader object which converts the data
+ * object into a block of Roo.data.Records.
+ * @param {Function} callback The function into which to pass the block of Roo.data.records.
+ * The function must be passed <ul>
+ * <li>The Record block object</li>
+ * <li>The "arg" argument from the load function</li>
+ * <li>A boolean success indicator</li>
+ * </ul>
+ * @param {Object} scope The scope in which to call the callback
+ * @param {Object} arg An optional argument which is passed to the callback as its second parameter.
*/
- this.parentNode = null;
+ load : function(params, reader, callback, scope, arg){
+ params = params || {};
+ var result;
+ try {
+ result = reader.readRecords(params.data ? params.data :this.data);
+ }catch(e){
+ this.fireEvent("loadexception", this, arg, null, e);
+ callback.call(scope, null, arg, false);
+ return;
+ }
+ callback.call(scope, result, arg, true);
+ },
+
+ // private
+ update : function(params, records){
+
+ }
+});/*
+ * 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.data.HttpProxy
+ * @extends Roo.data.DataProxy
+ * An implementation of {@link Roo.data.DataProxy} that reads a data object from an {@link Roo.data.Connection} object
+ * configured to reference a certain URL.<br><br>
+ * <p>
+ * <em>Note that this class cannot be used to retrieve data from a domain other than the domain
+ * from which the running page was served.<br><br>
+ * <p>
+ * For cross-domain access to remote data, use an {@link Roo.data.ScriptTagProxy}.</em><br><br>
+ * <p>
+ * Be aware that to enable the browser to parse an XML document, the server must set
+ * the Content-Type header in the HTTP response to "text/xml".
+ * @constructor
+ * @param {Object} conn Connection config options to add to each request (e.g. {url: 'foo.php'} or
+ * an {@link Roo.data.Connection} object. If a Connection config is passed, the singleton {@link Roo.Ajax} object
+ * will be used to make the request.
+ */
+Roo.data.HttpProxy = function(conn){
+ Roo.data.HttpProxy.superclass.constructor.call(this);
+ // is conn a conn config or a real conn?
+ this.conn = conn;
+ this.useAjax = !conn || !conn.events;
+
+};
+
+Roo.extend(Roo.data.HttpProxy, Roo.data.DataProxy, {
+ // thse are take from connection...
+
/**
- * The first direct child node of this node, or null if this node has no child nodes. @type Node
+ * @cfg {String} url (Optional) The default URL to be used for requests to the server. (defaults to undefined)
*/
- this.firstChild = null;
/**
- * The last direct child node of this node, or null if this node has no child nodes. @type Node
+ * @cfg {Object} extraParams (Optional) An object containing properties which are used as
+ * extra parameters to each request made by this object. (defaults to undefined)
*/
- this.lastChild = null;
/**
- * The node immediately preceding this node in the tree, or null if there is no sibling node. @type Node
+ * @cfg {Object} defaultHeaders (Optional) An object containing request headers which are added
+ * to each request made by this object. (defaults to undefined)
*/
- this.previousSibling = null;
/**
- * The node immediately following this node in the tree, or null if there is no sibling node. @type Node
+ * @cfg {String} method (Optional) The default HTTP method to be used for requests. (defaults to undefined; if not set but parms are present will use POST, otherwise GET)
*/
- this.nextSibling = null;
-
- this.addEvents({
- /**
- * @event append
- * Fires when a new child node is appended
- * @param {Tree} tree The owner tree
- * @param {Node} this This node
- * @param {Node} node The newly appended node
- * @param {Number} index The index of the newly appended node
- */
- "append" : true,
- /**
- * @event remove
- * Fires when a child node is removed
- * @param {Tree} tree The owner tree
- * @param {Node} this This node
- * @param {Node} node The removed node
- */
- "remove" : true,
- /**
- * @event move
- * Fires when this node is moved to a new location in the tree
- * @param {Tree} tree The owner tree
- * @param {Node} this This node
- * @param {Node} oldParent The old parent of this node
- * @param {Node} newParent The new parent of this node
- * @param {Number} index The index it was moved to
- */
- "move" : true,
- /**
- * @event insert
- * Fires when a new child node is inserted.
- * @param {Tree} tree The owner tree
- * @param {Node} this This node
- * @param {Node} node The child node inserted
- * @param {Node} refNode The child node the node was inserted before
- */
- "insert" : true,
- /**
- * @event beforeappend
- * Fires before a new child is appended, return false to cancel the append.
- * @param {Tree} tree The owner tree
- * @param {Node} this This node
- * @param {Node} node The child node to be appended
- */
- "beforeappend" : true,
- /**
- * @event beforeremove
- * Fires before a child is removed, return false to cancel the remove.
- * @param {Tree} tree The owner tree
- * @param {Node} this This node
- * @param {Node} node The child node to be removed
- */
- "beforeremove" : true,
- /**
- * @event beforemove
- * Fires before this node is moved to a new location in the tree. Return false to cancel the move.
- * @param {Tree} tree The owner tree
- * @param {Node} this This node
- * @param {Node} oldParent The parent of this node
- * @param {Node} newParent The new parent this node is moving to
- * @param {Number} index The index it is being moved to
- */
- "beforemove" : true,
- /**
- * @event beforeinsert
- * Fires before a new child is inserted, return false to cancel the insert.
- * @param {Tree} tree The owner tree
- * @param {Node} this This node
- * @param {Node} node The child node to be inserted
- * @param {Node} refNode The child node the node is being inserted before
- */
- "beforeinsert" : true
- });
- this.listeners = this.attributes.listeners;
- Roo.data.Node.superclass.constructor.call(this);
-};
-
-Roo.extend(Roo.data.Node, Roo.util.Observable, {
- fireEvent : function(evtName){
- // first do standard event for this node
- if(Roo.data.Node.superclass.fireEvent.apply(this, arguments) === false){
- return false;
- }
- // then bubble it up to the tree if the event wasn't cancelled
- var ot = this.getOwnerTree();
- if(ot){
- if(ot.proxyNodeEvent.apply(ot, arguments) === false){
- return false;
- }
- }
- return true;
- },
-
/**
- * Returns true if this node is a leaf
- * @return {Boolean}
+ * @cfg {Number} timeout (Optional) The timeout in milliseconds to be used for requests. (defaults to 30000)
*/
- isLeaf : function(){
- return this.leaf === true;
- },
-
- // private
- setFirstChild : function(node){
- this.firstChild = node;
- },
-
- //private
- setLastChild : function(node){
- this.lastChild = node;
- },
-
+ /**
+ * @cfg {Boolean} autoAbort (Optional) Whether this request should abort any pending requests. (defaults to false)
+ * @type Boolean
+ */
+
/**
- * Returns true if this node is the last child of its parent
- * @return {Boolean}
+ * @cfg {Boolean} disableCaching (Optional) True to add a unique cache-buster param to GET requests. (defaults to true)
+ * @type Boolean
*/
- isLast : function(){
- return (!this.parentNode ? true : this.parentNode.lastChild == this);
- },
-
/**
- * Returns true if this node is the first child of its parent
- * @return {Boolean}
+ * Return the {@link Roo.data.Connection} object being used by this Proxy.
+ * @return {Connection} The Connection object. This object may be used to subscribe to events on
+ * a finer-grained basis than the DataProxy events.
*/
- isFirst : function(){
- return (!this.parentNode ? true : this.parentNode.firstChild == this);
- },
-
- hasChildNodes : function(){
- return !this.isLeaf() && this.childNodes.length > 0;
+ getConnection : function(){
+ return this.useAjax ? Roo.Ajax : this.conn;
},
/**
- * Insert node(s) as the last child node of this node.
- * @param {Node/Array} node The node or Array of nodes to append
- * @return {Node} The appended node if single append, or null if an array was passed
+ * Load data from the configured {@link Roo.data.Connection}, read the data object into
+ * a block of Roo.data.Records using the passed {@link Roo.data.DataReader} implementation, and
+ * process that block using the passed callback.
+ * @param {Object} params An object containing properties which are to be used as HTTP parameters
+ * for the request to the remote server.
+ * @param {Roo.data.DataReader} reader The Reader object which converts the data
+ * object into a block of Roo.data.Records.
+ * @param {Function} callback The function into which to pass the block of Roo.data.Records.
+ * The function must be passed <ul>
+ * <li>The Record block object</li>
+ * <li>The "arg" argument from the load function</li>
+ * <li>A boolean success indicator</li>
+ * </ul>
+ * @param {Object} scope The scope in which to call the callback
+ * @param {Object} arg An optional argument which is passed to the callback as its second parameter.
*/
- appendChild : function(node){
- var multi = false;
- if(node instanceof Array){
- multi = node;
- }else if(arguments.length > 1){
- multi = arguments;
- }
- // if passed an array or multiple args do them one by one
- if(multi){
- for(var i = 0, len = multi.length; i < len; i++) {
- this.appendChild(multi[i]);
- }
- }else{
- if(this.fireEvent("beforeappend", this.ownerTree, this, node) === false){
- return false;
- }
- var index = this.childNodes.length;
- var oldParent = node.parentNode;
- // it's a move, make sure we move it cleanly
- if(oldParent){
- if(node.fireEvent("beforemove", node.getOwnerTree(), node, oldParent, this, index) === false){
- return false;
+ load : function(params, reader, callback, scope, arg){
+ if(this.fireEvent("beforeload", this, params) !== false){
+ var o = {
+ params : params || {},
+ request: {
+ callback : callback,
+ scope : scope,
+ arg : arg
+ },
+ reader: reader,
+ callback : this.loadResponse,
+ scope: this
+ };
+ if(this.useAjax){
+ Roo.applyIf(o, this.conn);
+ if(this.activeRequest){
+ Roo.Ajax.abort(this.activeRequest);
}
- oldParent.removeChild(node);
- }
- index = this.childNodes.length;
- if(index == 0){
- this.setFirstChild(node);
- }
- this.childNodes.push(node);
- node.parentNode = this;
- var ps = this.childNodes[index-1];
- if(ps){
- node.previousSibling = ps;
- ps.nextSibling = node;
+ this.activeRequest = Roo.Ajax.request(o);
}else{
- node.previousSibling = null;
- }
- node.nextSibling = null;
- this.setLastChild(node);
- node.setOwnerTree(this.getOwnerTree());
- this.fireEvent("append", this.ownerTree, this, node, index);
- if(oldParent){
- node.fireEvent("move", this.ownerTree, node, oldParent, this, index);
+ this.conn.request(o);
}
- return node;
+ }else{
+ callback.call(scope||this, null, arg, false);
}
},
- /**
- * Removes a child node from this node.
- * @param {Node} node The node to remove
- * @return {Node} The removed node
- */
- removeChild : function(node){
- var index = this.childNodes.indexOf(node);
- if(index == -1){
- return false;
- }
- if(this.fireEvent("beforeremove", this.ownerTree, this, node) === false){
- return false;
- }
-
- // remove it from childNodes collection
- this.childNodes.splice(index, 1);
-
- // update siblings
- if(node.previousSibling){
- node.previousSibling.nextSibling = node.nextSibling;
+ // private
+ loadResponse : function(o, success, response){
+ delete this.activeRequest;
+ if(!success){
+ this.fireEvent("loadexception", this, o, response);
+ o.request.callback.call(o.request.scope, null, o.request.arg, false);
+ return;
}
- if(node.nextSibling){
- node.nextSibling.previousSibling = node.previousSibling;
+ var result;
+ try {
+ result = o.reader.read(response);
+ }catch(e){
+ o.success = false;
+ o.raw = { errorMsg : response.responseText };
+ this.fireEvent("loadexception", this, o, response, e);
+ o.request.callback.call(o.request.scope, o, o.request.arg, false);
+ return;
}
+
+ this.fireEvent("load", this, o, o.request.arg);
+ o.request.callback.call(o.request.scope, result, o.request.arg, true);
+ },
- // update child refs
- if(this.firstChild == node){
- this.setFirstChild(node.nextSibling);
- }
- if(this.lastChild == node){
- this.setLastChild(node.previousSibling);
- }
+ // private
+ update : function(dataSet){
- node.setOwnerTree(null);
- // clear any references from the node
- node.parentNode = null;
- node.previousSibling = null;
- node.nextSibling = null;
- this.fireEvent("remove", this.ownerTree, this, node);
- return node;
},
- /**
- * Inserts the first node before the second node in this nodes childNodes collection.
- * @param {Node} node The node to insert
- * @param {Node} refNode The node to insert before (if null the node is appended)
- * @return {Node} The inserted node
- */
- insertBefore : function(node, refNode){
- if(!refNode){ // like standard Dom, refNode can be null for append
- return this.appendChild(node);
- }
- // nothing to do
- if(node == refNode){
- return false;
- }
+ // private
+ updateResponse : function(dataSet){
- if(this.fireEvent("beforeinsert", this.ownerTree, this, node, refNode) === false){
- return false;
- }
- var index = this.childNodes.indexOf(refNode);
- var oldParent = node.parentNode;
- var refIndex = index;
+ }
+});/*
+ * 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">
+ */
- // when moving internally, indexes will change after remove
- if(oldParent == this && this.childNodes.indexOf(node) < index){
- refIndex--;
- }
+/**
+ * @class Roo.data.ScriptTagProxy
+ * An implementation of Roo.data.DataProxy that reads a data object from a URL which may be in a domain
+ * other than the originating domain of the running page.<br><br>
+ * <p>
+ * <em>Note that if you are retrieving data from a page that is in a domain that is NOT the same as the originating domain
+ * of the running page, you must use this class, rather than DataProxy.</em><br><br>
+ * <p>
+ * The content passed back from a server resource requested by a ScriptTagProxy is executable JavaScript
+ * source code that is used as the source inside a <script> tag.<br><br>
+ * <p>
+ * In order for the browser to process the returned data, the server must wrap the data object
+ * with a call to a callback function, the name of which is passed as a parameter by the ScriptTagProxy.
+ * Below is a Java example for a servlet which returns data for either a ScriptTagProxy, or an HttpProxy
+ * depending on whether the callback name was passed:
+ * <p>
+ * <pre><code>
+boolean scriptTag = false;
+String cb = request.getParameter("callback");
+if (cb != null) {
+ scriptTag = true;
+ response.setContentType("text/javascript");
+} else {
+ response.setContentType("application/x-json");
+}
+Writer out = response.getWriter();
+if (scriptTag) {
+ out.write(cb + "(");
+}
+out.print(dataBlock.toJsonString());
+if (scriptTag) {
+ out.write(");");
+}
+</pre></code>
+ *
+ * @constructor
+ * @param {Object} config A configuration object.
+ */
+Roo.data.ScriptTagProxy = function(config){
+ Roo.data.ScriptTagProxy.superclass.constructor.call(this);
+ Roo.apply(this, config);
+ this.head = document.getElementsByTagName("head")[0];
+};
- // it's a move, make sure we move it cleanly
- if(oldParent){
- if(node.fireEvent("beforemove", node.getOwnerTree(), node, oldParent, this, index, refNode) === false){
- return false;
- }
- oldParent.removeChild(node);
- }
- if(refIndex == 0){
- this.setFirstChild(node);
- }
- this.childNodes.splice(refIndex, 0, node);
- node.parentNode = this;
- var ps = this.childNodes[refIndex-1];
- if(ps){
- node.previousSibling = ps;
- ps.nextSibling = node;
- }else{
- node.previousSibling = null;
- }
- node.nextSibling = refNode;
- refNode.previousSibling = node;
- node.setOwnerTree(this.getOwnerTree());
- this.fireEvent("insert", this.ownerTree, this, node, refNode);
- if(oldParent){
- node.fireEvent("move", this.ownerTree, node, oldParent, this, refIndex, refNode);
- }
- return node;
- },
+Roo.data.ScriptTagProxy.TRANS_ID = 1000;
+Roo.extend(Roo.data.ScriptTagProxy, Roo.data.DataProxy, {
/**
- * Returns the child node at the specified index.
- * @param {Number} index
- * @return {Node}
+ * @cfg {String} url The URL from which to request the data object.
*/
- item : function(index){
- return this.childNodes[index];
- },
-
/**
- * Replaces one child node in this node with another.
- * @param {Node} newChild The replacement node
- * @param {Node} oldChild The node to replace
- * @return {Node} The replaced node
+ * @cfg {Number} timeout (Optional) The number of milliseconds to wait for a response. Defaults to 30 seconds.
*/
- replaceChild : function(newChild, oldChild){
- this.insertBefore(newChild, oldChild);
- this.removeChild(oldChild);
- return oldChild;
- },
-
+ timeout : 30000,
/**
- * Returns the index of a child node
- * @param {Node} node
- * @return {Number} The index of the node or -1 if it was not found
+ * @cfg {String} callbackParam (Optional) The name of the parameter to pass to the server which tells
+ * the server the name of the callback function set up by the load call to process the returned data object.
+ * Defaults to "callback".<p>The server-side processing must read this parameter value, and generate
+ * javascript output which calls this named function passing the data object as its only parameter.
*/
- indexOf : function(child){
- return this.childNodes.indexOf(child);
- },
-
+ callbackParam : "callback",
/**
- * Returns the tree this node is in.
- * @return {Tree}
+ * @cfg {Boolean} nocache (Optional) Defaults to true. Disable cacheing by adding a unique parameter
+ * name to the request.
*/
- getOwnerTree : function(){
- // if it doesn't have one, look for one
- if(!this.ownerTree){
- var p = this;
- while(p){
- if(p.ownerTree){
- this.ownerTree = p.ownerTree;
- break;
- }
- p = p.parentNode;
- }
- }
- return this.ownerTree;
- },
+ nocache : true,
/**
- * Returns depth of this node (the root node has a depth of 0)
- * @return {Number}
+ * Load data from the configured URL, read the data object into
+ * a block of Roo.data.Records using the passed Roo.data.DataReader implementation, and
+ * process that block using the passed callback.
+ * @param {Object} params An object containing properties which are to be used as HTTP parameters
+ * for the request to the remote server.
+ * @param {Roo.data.DataReader} reader The Reader object which converts the data
+ * object into a block of Roo.data.Records.
+ * @param {Function} callback The function into which to pass the block of Roo.data.Records.
+ * The function must be passed <ul>
+ * <li>The Record block object</li>
+ * <li>The "arg" argument from the load function</li>
+ * <li>A boolean success indicator</li>
+ * </ul>
+ * @param {Object} scope The scope in which to call the callback
+ * @param {Object} arg An optional argument which is passed to the callback as its second parameter.
*/
- getDepth : function(){
- var depth = 0;
- var p = this;
- while(p.parentNode){
- ++depth;
- p = p.parentNode;
- }
- return depth;
- },
+ load : function(params, reader, callback, scope, arg){
+ if(this.fireEvent("beforeload", this, params) !== false){
- // private
- setOwnerTree : function(tree){
- // if it's move, we need to update everyone
- if(tree != this.ownerTree){
- if(this.ownerTree){
- this.ownerTree.unregisterNode(this);
- }
- this.ownerTree = tree;
- var cs = this.childNodes;
- for(var i = 0, len = cs.length; i < len; i++) {
- cs[i].setOwnerTree(tree);
- }
- if(tree){
- tree.registerNode(this);
+ var p = Roo.urlEncode(Roo.apply(params, this.extraParams));
+
+ var url = this.url;
+ url += (url.indexOf("?") != -1 ? "&" : "?") + p;
+ if(this.nocache){
+ url += "&_dc=" + (new Date().getTime());
}
- }
- },
+ var transId = ++Roo.data.ScriptTagProxy.TRANS_ID;
+ var trans = {
+ id : transId,
+ cb : "stcCallback"+transId,
+ scriptId : "stcScript"+transId,
+ params : params,
+ arg : arg,
+ url : url,
+ callback : callback,
+ scope : scope,
+ reader : reader
+ };
+ var conn = this;
- /**
- * Returns the path for this node. The path can be used to expand or select this node programmatically.
- * @param {String} attr (optional) The attr to use for the path (defaults to the node's id)
- * @return {String} The path
- */
- getPath : function(attr){
- attr = attr || "id";
- var p = this.parentNode;
- var b = [this.attributes[attr]];
- while(p){
- b.unshift(p.attributes[attr]);
- p = p.parentNode;
- }
- var sep = this.getOwnerTree().pathSeparator;
- return sep + b.join(sep);
- },
+ window[trans.cb] = function(o){
+ conn.handleResponse(o, trans);
+ };
- /**
- * Bubbles up the tree from this node, calling the specified function with each node. The scope (<i>this</i>) of
- * function call will be the scope provided or the current node. The arguments to the function
- * will be the args provided or the current node. If the function returns false at any point,
- * the bubble is stopped.
- * @param {Function} fn The function to call
- * @param {Object} scope (optional) The scope of the function (defaults to current node)
- * @param {Array} args (optional) The args to call the function with (default to passing the current node)
- */
- bubble : function(fn, scope, args){
- var p = this;
- while(p){
- if(fn.call(scope || p, args || p) === false){
- break;
+ url += String.format("&{0}={1}", this.callbackParam, trans.cb);
+
+ if(this.autoAbort !== false){
+ this.abort();
}
- p = p.parentNode;
+
+ trans.timeoutId = this.handleFailure.defer(this.timeout, this, [trans]);
+
+ var script = document.createElement("script");
+ script.setAttribute("src", url);
+ script.setAttribute("type", "text/javascript");
+ script.setAttribute("id", trans.scriptId);
+ this.head.appendChild(script);
+
+ this.trans = trans;
+ }else{
+ callback.call(scope||this, null, arg, false);
}
},
- /**
- * Cascades down the tree from this node, calling the specified function with each node. The scope (<i>this</i>) of
- * function call will be the scope provided or the current node. The arguments to the function
- * will be the args provided or the current node. If the function returns false at any point,
- * the cascade is stopped on that branch.
- * @param {Function} fn The function to call
- * @param {Object} scope (optional) The scope of the function (defaults to current node)
- * @param {Array} args (optional) The args to call the function with (default to passing the current node)
- */
- cascade : function(fn, scope, args){
- if(fn.call(scope || this, args || this) !== false){
- var cs = this.childNodes;
- for(var i = 0, len = cs.length; i < len; i++) {
- cs[i].cascade(fn, scope, args);
- }
- }
+ // private
+ isLoading : function(){
+ return this.trans ? true : false;
},
/**
- * Interates the child nodes of this node, calling the specified function with each node. The scope (<i>this</i>) of
- * function call will be the scope provided or the current node. The arguments to the function
- * will be the args provided or the current node. If the function returns false at any point,
- * the iteration stops.
- * @param {Function} fn The function to call
- * @param {Object} scope (optional) The scope of the function (defaults to current node)
- * @param {Array} args (optional) The args to call the function with (default to passing the current node)
+ * Abort the current server request.
*/
- eachChild : function(fn, scope, args){
- var cs = this.childNodes;
- for(var i = 0, len = cs.length; i < len; i++) {
- if(fn.call(scope || this, args || cs[i]) === false){
- break;
- }
+ abort : function(){
+ if(this.isLoading()){
+ this.destroyTrans(this.trans);
}
},
- /**
- * Finds the first child that has the attribute with the specified value.
- * @param {String} attribute The attribute name
- * @param {Mixed} value The value to search for
- * @return {Node} The found child or null if none was found
- */
- findChild : function(attribute, value){
- var cs = this.childNodes;
- for(var i = 0, len = cs.length; i < len; i++) {
- if(cs[i].attributes[attribute] == value){
- return cs[i];
- }
+ // private
+ destroyTrans : function(trans, isLoaded){
+ this.head.removeChild(document.getElementById(trans.scriptId));
+ clearTimeout(trans.timeoutId);
+ if(isLoaded){
+ window[trans.cb] = undefined;
+ try{
+ delete window[trans.cb];
+ }catch(e){}
+ }else{
+ // if hasn't been loaded, wait for load to remove it to prevent script error
+ window[trans.cb] = function(){
+ window[trans.cb] = undefined;
+ try{
+ delete window[trans.cb];
+ }catch(e){}
+ };
}
- return null;
},
- /**
- * Finds the first child by a custom function. The child matches if the function passed
- * returns true.
- * @param {Function} fn
- * @param {Object} scope (optional)
- * @return {Node} The found child or null if none was found
- */
- findChildBy : function(fn, scope){
- var cs = this.childNodes;
- for(var i = 0, len = cs.length; i < len; i++) {
- if(fn.call(scope||cs[i], cs[i]) === true){
- return cs[i];
- }
+ // private
+ handleResponse : function(o, trans){
+ this.trans = false;
+ this.destroyTrans(trans, true);
+ var result;
+ try {
+ result = trans.reader.readRecords(o);
+ }catch(e){
+ this.fireEvent("loadexception", this, o, trans.arg, e);
+ trans.callback.call(trans.scope||window, null, trans.arg, false);
+ return;
}
- return null;
+ this.fireEvent("load", this, o, trans.arg);
+ trans.callback.call(trans.scope||window, result, trans.arg, true);
},
- /**
- * Sorts this nodes children using the supplied sort function
- * @param {Function} fn
- * @param {Object} scope (optional)
- */
- sort : function(fn, scope){
- var cs = this.childNodes;
- var len = cs.length;
- if(len > 0){
- var sortFn = scope ? function(){fn.apply(scope, arguments);} : fn;
- cs.sort(sortFn);
- for(var i = 0; i < len; i++){
- var n = cs[i];
- n.previousSibling = cs[i-1];
- n.nextSibling = cs[i+1];
- if(i == 0){
- this.setFirstChild(n);
- }
- if(i == len-1){
- this.setLastChild(n);
- }
- }
- }
- },
-
- /**
- * Returns true if this node is an ancestor (at any point) of the passed node.
- * @param {Node} node
- * @return {Boolean}
- */
- contains : function(node){
- return node.isAncestor(this);
- },
-
- /**
- * Returns true if the passed node is an ancestor (at any point) of this node.
- * @param {Node} node
- * @return {Boolean}
- */
- isAncestor : function(node){
- var p = this.parentNode;
- while(p){
- if(p == node){
- return true;
- }
- p = p.parentNode;
- }
- return false;
- },
-
- toString : function(){
- return "[Node"+(this.id?" "+this.id:"")+"]";
+ // private
+ handleFailure : function(trans){
+ this.trans = false;
+ this.destroyTrans(trans, false);
+ this.fireEvent("loadexception", this, null, trans.arg);
+ trans.callback.call(trans.scope||window, null, trans.arg, false);
}
});/*
* Based on:
* Fork - LGPL
* <script type="text/javascript">
*/
- (function(){
+
/**
- * @class Roo.Layer
- * @extends Roo.Element
- * An extended {@link Roo.Element} object that supports a shadow and shim, constrain to viewport and
- * automatic maintaining of shadow/shim positions.
- * @cfg {Boolean} shim False to disable the iframe shim in browsers which need one (defaults to true)
- * @cfg {String/Boolean} shadow True to create a shadow element with default class "x-layer-shadow", or
- * you can pass a string with a CSS class name. False turns off the shadow.
- * @cfg {Object} dh DomHelper object config to create element with (defaults to {tag: "div", cls: "x-layer"}).
- * @cfg {Boolean} constrain False to disable constrain to viewport (defaults to true)
- * @cfg {String} cls CSS class to add to the element
- * @cfg {Number} zindex Starting z-index (defaults to 11000)
- * @cfg {Number} shadowOffset Number of pixels to offset the shadow (defaults to 3)
+ * @class Roo.data.JsonReader
+ * @extends Roo.data.DataReader
+ * Data reader class to create an Array of Roo.data.Record objects from a JSON response
+ * based on mappings in a provided Roo.data.Record constructor.
+ *
+ * The default behaviour of a store is to send ?_requestMeta=1, unless the class has recieved 'metaData' property
+ * in the reply previously.
+ *
+ * <p>
+ * Example code:
+ * <pre><code>
+var RecordDef = Roo.data.Record.create([
+ {name: 'name', mapping: 'name'}, // "mapping" property not needed if it's the same as "name"
+ {name: 'occupation'} // This field will use "occupation" as the mapping.
+]);
+var myReader = new Roo.data.JsonReader({
+ totalProperty: "results", // The property which contains the total dataset size (optional)
+ root: "rows", // The property which contains an Array of row objects
+ id: "id" // The property within each row object that provides an ID for the record (optional)
+}, RecordDef);
+</code></pre>
+ * <p>
+ * This would consume a JSON file like this:
+ * <pre><code>
+{ 'results': 2, 'rows': [
+ { 'id': 1, 'name': 'Bill', occupation: 'Gardener' },
+ { 'id': 2, 'name': 'Ben', occupation: 'Horticulturalist' } ]
+}
+</code></pre>
+ * @cfg {String} totalProperty Name of the property from which to retrieve the total number of records
+ * in the dataset. This is only needed if the whole dataset is not passed in one go, but is being
+ * paged from the remote server.
+ * @cfg {String} successProperty Name of the property from which to retrieve the success attribute used by forms.
+ * @cfg {String} root name of the property which contains the Array of row objects.
+ * @cfg {String} id Name of the property within a row object that contains a record identifier value.
+ * @cfg {Array} fields Array of field definition objects
* @constructor
- * @param {Object} config An object with config options.
- * @param {String/HTMLElement} existingEl (optional) Uses an existing DOM element. If the element is not found it creates it.
+ * Create a new JsonReader
+ * @param {Object} meta Metadata configuration options
+ * @param {Object} recordType Either an Array of field definition objects,
+ * or an {@link Roo.data.Record} object created using {@link Roo.data.Record#create}.
*/
-
-Roo.Layer = function(config, existingEl){
- config = config || {};
- var dh = Roo.DomHelper;
- var cp = config.parentEl, pel = cp ? Roo.getDom(cp) : document.body;
- if(existingEl){
- this.dom = Roo.getDom(existingEl);
- }
- if(!this.dom){
- var o = config.dh || {tag: "div", cls: "x-layer"};
- this.dom = dh.append(pel, o);
- }
- if(config.cls){
- this.addClass(config.cls);
- }
- this.constrain = config.constrain !== false;
- this.visibilityMode = Roo.Element.VISIBILITY;
- if(config.id){
- this.id = this.dom.id = config.id;
- }else{
- this.id = Roo.id(this.dom);
- }
- this.zindex = config.zindex || this.getZIndex();
- this.position("absolute", this.zindex);
- if(config.shadow){
- this.shadowOffset = config.shadowOffset || 4;
- this.shadow = new Roo.Shadow({
- offset : this.shadowOffset,
- mode : config.shadow
- });
- }else{
- this.shadowOffset = 0;
- }
- this.useShim = config.shim !== false && Roo.useShims;
- this.useDisplay = config.useDisplay;
- this.hide();
+Roo.data.JsonReader = function(meta, recordType){
+
+ meta = meta || {};
+ // set some defaults:
+ Roo.applyIf(meta, {
+ totalProperty: 'total',
+ successProperty : 'success',
+ root : 'data',
+ id : 'id'
+ });
+
+ Roo.data.JsonReader.superclass.constructor.call(this, meta, recordType||meta.fields);
};
-
-var supr = Roo.Element.prototype;
-
-// shims are shared among layer to keep from having 100 iframes
-var shims = [];
-
-Roo.extend(Roo.Layer, Roo.Element, {
-
- getZIndex : function(){
- return this.zindex || parseInt(this.getStyle("z-index"), 10) || 11000;
- },
-
- getShim : function(){
- if(!this.useShim){
- return null;
- }
- if(this.shim){
- return this.shim;
- }
- var shim = shims.shift();
- if(!shim){
- shim = this.createShim();
- shim.enableDisplayMode('block');
- shim.dom.style.display = 'none';
- shim.dom.style.visibility = 'visible';
+Roo.extend(Roo.data.JsonReader, Roo.data.DataReader, {
+
+ readerType : 'Json',
+
+ /**
+ * @prop {Boolean} metaFromRemote - if the meta data was loaded from the remote source.
+ * Used by Store query builder to append _requestMeta to params.
+ *
+ */
+ metaFromRemote : false,
+ /**
+ * This method is only used by a DataProxy which has retrieved data from a remote server.
+ * @param {Object} response The XHR object which contains the JSON data in its responseText.
+ * @return {Object} data A data block which is used by an Roo.data.Store object as
+ * a cache of Roo.data.Records.
+ */
+ read : function(response){
+ var json = response.responseText;
+
+ var o = /* eval:var:o */ eval("("+json+")");
+ if(!o) {
+ throw {message: "JsonReader.read: Json object not found"};
}
- var pn = this.dom.parentNode;
- if(shim.dom.parentNode != pn){
- pn.insertBefore(shim.dom, this.dom);
+
+ if(o.metaData){
+
+ delete this.ef;
+ this.metaFromRemote = true;
+ this.meta = o.metaData;
+ this.recordType = Roo.data.Record.create(o.metaData.fields);
+ this.onMetaChange(this.meta, this.recordType, o);
}
- shim.setStyle('z-index', this.getZIndex()-2);
- this.shim = shim;
- return shim;
+ return this.readRecords(o);
},
- hideShim : function(){
- if(this.shim){
- this.shim.setDisplayed(false);
- shims.push(this.shim);
- delete this.shim;
- }
- },
+ // private function a store will implement
+ onMetaChange : function(meta, recordType, o){
- disableShadow : function(){
- if(this.shadow){
- this.shadowDisabled = true;
- this.shadow.hide();
- this.lastShadowOffset = this.shadowOffset;
- this.shadowOffset = 0;
- }
},
- enableShadow : function(show){
- if(this.shadow){
- this.shadowDisabled = false;
- this.shadowOffset = this.lastShadowOffset;
- delete this.lastShadowOffset;
- if(show){
- this.sync(true);
- }
- }
+ /**
+ * @ignore
+ */
+ simpleAccess: function(obj, subsc) {
+ return obj[subsc];
},
- // private
- // this code can execute repeatedly in milliseconds (i.e. during a drag) so
- // code size was sacrificed for effeciency (e.g. no getBox/setBox, no XY calls)
- sync : function(doShow){
- var sw = this.shadow;
- if(!this.updating && this.isVisible() && (sw || this.useShim)){
- var sh = this.getShim();
-
- var w = this.getWidth(),
- h = this.getHeight();
+ /**
+ * @ignore
+ */
+ getJsonAccessor: function(){
+ var re = /[\[\.]/;
+ return function(expr) {
+ try {
+ return(re.test(expr))
+ ? new Function("obj", "return obj." + expr)
+ : function(obj){
+ return obj[expr];
+ };
+ } catch(e){}
+ return Roo.emptyFn;
+ };
+ }(),
- var l = this.getLeft(true),
- t = this.getTop(true);
+ /**
+ * Create a data block containing Roo.data.Records from an XML document.
+ * @param {Object} o An object which contains an Array of row objects in the property specified
+ * in the config as 'root, and optionally a property, specified in the config as 'totalProperty'
+ * which contains the total size of the dataset.
+ * @return {Object} data A data block which is used by an Roo.data.Store object as
+ * a cache of Roo.data.Records.
+ */
+ readRecords : function(o){
+ /**
+ * After any data loads, the raw JSON data is available for further custom processing.
+ * @type Object
+ */
+ this.o = o;
+ var s = this.meta, Record = this.recordType,
+ f = Record ? Record.prototype.fields : null, fi = f ? f.items : [], fl = f ? f.length : 0;
- if(sw && !this.shadowDisabled){
- if(doShow && !sw.isVisible()){
- sw.show(this);
- }else{
- sw.realign(l, t, w, h);
- }
- if(sh){
- if(doShow){
- sh.show();
- }
- // fit the shim behind the shadow, so it is shimmed too
- var a = sw.adjusts, s = sh.dom.style;
- s.left = (Math.min(l, l+a.l))+"px";
- s.top = (Math.min(t, t+a.t))+"px";
- s.width = (w+a.w)+"px";
- s.height = (h+a.h)+"px";
- }
- }else if(sh){
- if(doShow){
- sh.show();
- }
- sh.setSize(w, h);
- sh.setLeftTop(l, t);
+// Generate extraction functions for the totalProperty, the root, the id, and for each field
+ if (!this.ef) {
+ if(s.totalProperty) {
+ this.getTotal = this.getJsonAccessor(s.totalProperty);
+ }
+ if(s.successProperty) {
+ this.getSuccess = this.getJsonAccessor(s.successProperty);
+ }
+ this.getRoot = s.root ? this.getJsonAccessor(s.root) : function(p){return p;};
+ if (s.id) {
+ var g = this.getJsonAccessor(s.id);
+ this.getId = function(rec) {
+ var r = g(rec);
+ return (r === undefined || r === "") ? null : r;
+ };
+ } else {
+ this.getId = function(){return null;};
+ }
+ this.ef = [];
+ for(var jj = 0; jj < fl; jj++){
+ f = fi[jj];
+ var map = (f.mapping !== undefined && f.mapping !== null) ? f.mapping : f.name;
+ this.ef[jj] = this.getJsonAccessor(map);
}
-
}
- },
- // private
- destroy : function(){
- this.hideShim();
- if(this.shadow){
- this.shadow.hide();
+ var root = this.getRoot(o), c = root.length, totalRecords = c, success = true;
+ if(s.totalProperty){
+ var vt = parseInt(this.getTotal(o), 10);
+ if(!isNaN(vt)){
+ totalRecords = vt;
+ }
}
- this.removeAllListeners();
- var pn = this.dom.parentNode;
- if(pn){
- pn.removeChild(this.dom);
+ if(s.successProperty){
+ var vs = this.getSuccess(o);
+ if(vs === false || vs === 'false'){
+ success = false;
+ }
}
- Roo.Element.uncache(this.id);
- },
-
- remove : function(){
- this.destroy();
- },
-
- // private
- beginUpdate : function(){
- this.updating = true;
- },
-
- // private
- endUpdate : function(){
- this.updating = false;
- this.sync(true);
+ var records = [];
+ for(var i = 0; i < c; i++){
+ var n = root[i];
+ var values = {};
+ var id = this.getId(n);
+ for(var j = 0; j < fl; j++){
+ f = fi[j];
+ var v = this.ef[j](n);
+ if (!f.convert) {
+ Roo.log('missing convert for ' + f.name);
+ Roo.log(f);
+ continue;
+ }
+ values[f.name] = f.convert((v !== undefined) ? v : f.defaultValue);
+ }
+ if (!Record) {
+ return {
+ raw : { errorMsg : "JSON Reader Error: fields or metadata not available to create Record" },
+ success : false,
+ records : [],
+ totalRecords : 0
+ };
+ }
+ var record = new Record(values, id);
+ record.json = n;
+ records[i] = record;
+ }
+ return {
+ raw : o,
+ success : success,
+ records : records,
+ totalRecords : totalRecords
+ };
},
+ // used when loading children.. @see loadDataFromChildren
+ toLoadData: function(rec)
+ {
+ // expect rec just to be an array.. eg [a,b,c, [...] << cn ]
+ var data = typeof(rec.data.cn) == 'undefined' ? [] : rec.data.cn;
+ return { data : data, total : data.length };
+
+ }
+});/*
+ * 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">
+ */
- // private
- hideUnders : function(negOffset){
- if(this.shadow){
- this.shadow.hide();
+/**
+ * @class Roo.data.XmlReader
+ * @extends Roo.data.DataReader
+ * Data reader class to create an Array of {@link Roo.data.Record} objects from an XML document
+ * based on mappings in a provided Roo.data.Record constructor.<br><br>
+ * <p>
+ * <em>Note that in order for the browser to parse a returned XML document, the Content-Type
+ * header in the HTTP response must be set to "text/xml".</em>
+ * <p>
+ * Example code:
+ * <pre><code>
+var RecordDef = Roo.data.Record.create([
+ {name: 'name', mapping: 'name'}, // "mapping" property not needed if it's the same as "name"
+ {name: 'occupation'} // This field will use "occupation" as the mapping.
+]);
+var myReader = new Roo.data.XmlReader({
+ totalRecords: "results", // The element which contains the total dataset size (optional)
+ record: "row", // The repeated element which contains row information
+ id: "id" // The element within the row that provides an ID for the record (optional)
+}, RecordDef);
+</code></pre>
+ * <p>
+ * This would consume an XML file like this:
+ * <pre><code>
+<?xml?>
+<dataset>
+ <results>2</results>
+ <row>
+ <id>1</id>
+ <name>Bill</name>
+ <occupation>Gardener</occupation>
+ </row>
+ <row>
+ <id>2</id>
+ <name>Ben</name>
+ <occupation>Horticulturalist</occupation>
+ </row>
+</dataset>
+</code></pre>
+ * @cfg {String} totalRecords The DomQuery path from which to retrieve the total number of records
+ * in the dataset. This is only needed if the whole dataset is not passed in one go, but is being
+ * paged from the remote server.
+ * @cfg {String} record The DomQuery path to the repeated element which contains record information.
+ * @cfg {String} success The DomQuery path to the success attribute used by forms.
+ * @cfg {String} id The DomQuery path relative from the record element to the element that contains
+ * a record identifier value.
+ * @constructor
+ * Create a new XmlReader
+ * @param {Object} meta Metadata configuration options
+ * @param {Mixed} recordType The definition of the data record type to produce. This can be either a valid
+ * Record subclass created with {@link Roo.data.Record#create}, or an array of objects with which to call
+ * Roo.data.Record.create. See the {@link Roo.data.Record} class for more details.
+ */
+Roo.data.XmlReader = function(meta, recordType){
+ meta = meta || {};
+ Roo.data.XmlReader.superclass.constructor.call(this, meta, recordType||meta.fields);
+};
+Roo.extend(Roo.data.XmlReader, Roo.data.DataReader, {
+
+ readerType : 'Xml',
+
+ /**
+ * This method is only used by a DataProxy which has retrieved data from a remote server.
+ * @param {Object} response The XHR object which contains the parsed XML document. The response is expected
+ * to contain a method called 'responseXML' that returns an XML document object.
+ * @return {Object} records A data block which is used by an {@link Roo.data.Store} as
+ * a cache of Roo.data.Records.
+ */
+ read : function(response){
+ var doc = response.responseXML;
+ if(!doc) {
+ throw {message: "XmlReader.read: XML Document not available"};
}
- this.hideShim();
+ return this.readRecords(doc);
},
- // private
- constrainXY : function(){
- if(this.constrain){
- var vw = Roo.lib.Dom.getViewWidth(),
- vh = Roo.lib.Dom.getViewHeight();
- var s = Roo.get(document).getScroll();
-
- var xy = this.getXY();
- var x = xy[0], y = xy[1];
- var w = this.dom.offsetWidth+this.shadowOffset, h = this.dom.offsetHeight+this.shadowOffset;
- // only move it if it needs it
- var moved = false;
- // first validate right/bottom
- if((x + w) > vw+s.left){
- x = vw - w - this.shadowOffset;
- moved = true;
- }
- if((y + h) > vh+s.top){
- y = vh - h - this.shadowOffset;
- 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){
- if(this.avoidY){
- var ay = this.avoidY;
- if(y <= ay && (y+h) >= ay){
- y = ay-h-5;
- }
- }
- xy = [x, y];
- this.storeXY(xy);
- supr.setXY.call(this, xy);
- this.sync();
- }
- }
- },
-
- isVisible : function(){
- return this.visible;
- },
-
- // private
- showAction : function(){
- this.visible = true; // track visibility to prevent getStyle calls
- if(this.useDisplay === true){
- this.setDisplayed("");
- }else if(this.lastXY){
- supr.setXY.call(this, this.lastXY);
- }else if(this.lastLT){
- supr.setLeftTop.call(this, this.lastLT[0], this.lastLT[1]);
- }
- },
-
- // private
- hideAction : function(){
- this.visible = false;
- if(this.useDisplay === true){
- this.setDisplayed(false);
- }else{
- this.setLeftTop(-10000,-10000);
- }
- },
-
- // overridden Element method
- setVisible : function(v, a, d, c, e){
- if(v){
- this.showAction();
- }
- if(a && v){
- var cb = function(){
- this.sync(true);
- if(c){
- c();
- }
- }.createDelegate(this);
- supr.setVisible.call(this, true, true, d, cb, e);
- }else{
- if(!v){
- this.hideUnders(true);
- }
- var cb = c;
- if(a){
- cb = function(){
- this.hideAction();
- if(c){
- c();
- }
- }.createDelegate(this);
- }
- supr.setVisible.call(this, v, a, d, cb, e);
- if(v){
- this.sync(true);
- }else if(!a){
- this.hideAction();
- }
- }
- },
-
- storeXY : function(xy){
- delete this.lastLT;
- this.lastXY = xy;
- },
-
- storeLeftTop : function(left, top){
- delete this.lastXY;
- this.lastLT = [left, top];
- },
-
- // private
- beforeFx : function(){
- this.beforeAction();
- return Roo.Layer.superclass.beforeFx.apply(this, arguments);
- },
-
- // private
- afterFx : function(){
- Roo.Layer.superclass.afterFx.apply(this, arguments);
- this.sync(this.isVisible());
- },
-
- // private
- beforeAction : function(){
- if(!this.updating && this.shadow){
- this.shadow.hide();
- }
- },
-
- // overridden Element method
- setLeft : function(left){
- this.storeLeftTop(left, this.getTop(true));
- supr.setLeft.apply(this, arguments);
- this.sync();
- },
-
- setTop : function(top){
- this.storeLeftTop(this.getLeft(true), top);
- supr.setTop.apply(this, arguments);
- this.sync();
- },
-
- setLeftTop : function(left, top){
- this.storeLeftTop(left, top);
- supr.setLeftTop.apply(this, arguments);
- this.sync();
- },
-
- setXY : function(xy, a, d, c, e){
- this.fixDisplay();
- this.beforeAction();
- this.storeXY(xy);
- var cb = this.createCB(c);
- supr.setXY.call(this, xy, a, d, cb, e);
- if(!a){
- cb();
- }
- },
-
- // private
- createCB : function(c){
- var el = this;
- return function(){
- el.constrainXY();
- el.sync(true);
- if(c){
- c();
- }
- };
- },
-
- // overridden Element method
- setX : function(x, a, d, c, e){
- this.setXY([x, this.getY()], a, d, c, e);
- },
-
- // overridden Element method
- setY : function(y, a, d, c, e){
- this.setXY([this.getX(), y], a, d, c, e);
- },
-
- // overridden Element method
- setSize : function(w, h, a, d, c, e){
- this.beforeAction();
- var cb = this.createCB(c);
- supr.setSize.call(this, w, h, a, d, cb, e);
- if(!a){
- cb();
- }
- },
-
- // overridden Element method
- setWidth : function(w, a, d, c, e){
- this.beforeAction();
- var cb = this.createCB(c);
- supr.setWidth.call(this, w, a, d, cb, e);
- if(!a){
- cb();
- }
- },
-
- // overridden Element method
- setHeight : function(h, a, d, c, e){
- this.beforeAction();
- var cb = this.createCB(c);
- supr.setHeight.call(this, h, a, d, cb, e);
- if(!a){
- cb();
- }
- },
-
- // overridden Element method
- setBounds : function(x, y, w, h, a, d, c, e){
- this.beforeAction();
- var cb = this.createCB(c);
- if(!a){
- this.storeXY([x, y]);
- supr.setXY.call(this, [x, y]);
- supr.setSize.call(this, w, h, a, d, cb, e);
- cb();
- }else{
- supr.setBounds.call(this, x, y, w, h, a, d, cb, e);
- }
- return this;
- },
-
/**
- * Sets the z-index of this layer and adjusts any shadow and shim z-indexes. The layer z-index is automatically
- * incremented by two more than the value passed in so that it always shows above any shadow or shim (the shadow
- * element, if any, will be assigned z-index + 1, and the shim element, if any, will be assigned the unmodified z-index).
- * @param {Number} zindex The new z-index to set
- * @return {this} The Layer
+ * Create a data block containing Roo.data.Records from an XML document.
+ * @param {Object} doc A parsed XML document.
+ * @return {Object} records A data block which is used by an {@link Roo.data.Store} as
+ * a cache of Roo.data.Records.
*/
- setZIndex : function(zindex){
- this.zindex = zindex;
- this.setStyle("z-index", zindex + 2);
- if(this.shadow){
- this.shadow.setZIndex(zindex + 1);
- }
- if(this.shim){
- this.shim.setStyle("z-index", zindex);
- }
+ readRecords : function(doc){
+ /**
+ * After any data loads/reads, the raw XML Document is available for further custom processing.
+ * @type XMLDocument
+ */
+ this.xmlData = doc;
+ var root = doc.documentElement || doc;
+ var q = Roo.DomQuery;
+ var recordType = this.recordType, fields = recordType.prototype.fields;
+ var sid = this.meta.id;
+ var totalRecords = 0, success = true;
+ if(this.meta.totalRecords){
+ totalRecords = q.selectNumber(this.meta.totalRecords, root, 0);
+ }
+
+ if(this.meta.success){
+ var sv = q.selectValue(this.meta.success, root, true);
+ success = sv !== false && sv !== 'false';
+ }
+ var records = [];
+ var ns = q.select(this.meta.record, root);
+ for(var i = 0, len = ns.length; i < len; i++) {
+ var n = ns[i];
+ var values = {};
+ var id = sid ? q.selectValue(sid, n) : undefined;
+ for(var j = 0, jlen = fields.length; j < jlen; j++){
+ var f = fields.items[j];
+ var v = q.selectValue(f.mapping || f.name, n, f.defaultValue);
+ v = f.convert(v);
+ values[f.name] = v;
+ }
+ var record = new recordType(values, id);
+ record.node = n;
+ records[records.length] = record;
+ }
+
+ return {
+ success : success,
+ records : records,
+ totalRecords : totalRecords || records.length
+ };
}
-});
-})();/*
+});/*
* Based on:
* Ext JS Library 1.1.1
* Copyright(c) 2006-2007, Ext JS, LLC.
* <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.
+ * @class Roo.data.ArrayReader
+ * @extends Roo.data.DataReader
+ * Data reader class to create an Array of Roo.data.Record objects from an Array.
+ * Each element of that Array represents a row of data fields. The
+ * fields are pulled into a Record object using as a subscript, the <em>mapping</em> property
+ * of the field definition if it exists, or the field's ordinal position in the definition.<br>
+ * <p>
+ * Example code:.
+ * <pre><code>
+var RecordDef = Roo.data.Record.create([
+ {name: 'name', mapping: 1}, // "mapping" only needed if an "id" field is present which
+ {name: 'occupation', mapping: 2} // precludes using the ordinal position as the index.
+]);
+var myReader = new Roo.data.ArrayReader({
+ id: 0 // The subscript within row Array that provides an ID for the Record (optional)
+}, RecordDef);
+</code></pre>
+ * <p>
+ * This would consume an Array like this:
+ * <pre><code>
+[ [1, 'Bill', 'Gardener'], [2, 'Ben', 'Horticulturalist'] ]
+ </code></pre>
+
* @constructor
- * Create a new Shadow
- * @param {Object} config The config object
+ * Create a new JsonReader
+ * @param {Object} meta Metadata configuration options.
+ * @param {Object|Array} recordType Either an Array of field definition objects
+ *
+ * @cfg {Array} fields Array of field definition objects
+ * @cfg {String} id Name of the property within a row object that contains a record identifier value.
+ * as specified to {@link Roo.data.Record#create},
+ * or an {@link Roo.data.Record} object
+ *
+ *
+ * created using {@link Roo.data.Record#create}.
*/
-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.data.ArrayReader = function(meta, recordType)
+{
+ Roo.data.ArrayReader.superclass.constructor.call(this, meta, recordType||meta.fields);
};
-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
+Roo.extend(Roo.data.ArrayReader, Roo.data.JsonReader, {
+
+ /**
+ * Create a data block containing Roo.data.Records from an XML document.
+ * @param {Object} o An Array of row objects which represents the dataset.
+ * @return {Object} A data block which is used by an {@link Roo.data.Store} object as
+ * a cache of Roo.data.Records.
*/
- 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";
+ readRecords : function(o)
+ {
+ var sid = this.meta ? this.meta.id : null;
+ var recordType = this.recordType, fields = recordType.prototype.fields;
+ var records = [];
+ var root = o;
+ for(var i = 0; i < root.length; i++){
+ var n = root[i];
+ var values = {};
+ var id = ((sid || sid === 0) && n[sid] !== undefined && n[sid] !== "" ? n[sid] : null);
+ for(var j = 0, jlen = fields.length; j < jlen; j++){
+ var f = fields.items[j];
+ var k = f.mapping !== undefined && f.mapping !== null ? f.mapping : j;
+ var v = n[k] !== undefined ? n[k] : f.defaultValue;
+ v = f.convert(v);
+ values[f.name] = v;
}
+ var record = new recordType(values, id);
+ record.json = n;
+ records[records.length] = record;
}
+ return {
+ records : records,
+ totalRecords : records.length
+ };
},
-
- /**
- * 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);
- }
+ // used when loading children.. @see loadDataFromChildren
+ toLoadData: function(rec)
+ {
+ // expect rec just to be an array.. eg [a,b,c, [...] << cn ]
+ return typeof(rec.data.cn) == 'undefined' ? [] : rec.data.cn;
+
}
-};
-
-// 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.
/**
- * @class Roo.SplitBar
+ * @class Roo.data.Tree
* @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>
+ * Represents a tree data structure and bubbles all the events for its nodes. The nodes
+ * in the tree have most standard DOM functionality.
* @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).
+ * @param {Node} root (optional) The root node
*/
-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);
+Roo.data.Tree = function(root){
+ this.nodeHash = {};
+ /**
+ * The root node for this tree
+ * @type Node
+ */
+ this.root = null;
+ if(root){
+ this.setRootNode(root);
+ }
+ this.addEvents({
+ /**
+ * @event append
+ * Fires when a new child node is appended to a node in this tree.
+ * @param {Tree} tree The owner tree
+ * @param {Node} parent The parent node
+ * @param {Node} node The newly appended node
+ * @param {Number} index The index of the newly appended node
+ */
+ "append" : true,
+ /**
+ * @event remove
+ * Fires when a child node is removed from a node in this tree.
+ * @param {Tree} tree The owner tree
+ * @param {Node} parent The parent node
+ * @param {Node} node The child node removed
+ */
+ "remove" : true,
+ /**
+ * @event move
+ * Fires when a node is moved to a new location in the tree
+ * @param {Tree} tree The owner tree
+ * @param {Node} node The node moved
+ * @param {Node} oldParent The old parent of this node
+ * @param {Node} newParent The new parent of this node
+ * @param {Number} index The index it was moved to
+ */
+ "move" : true,
+ /**
+ * @event insert
+ * Fires when a new child node is inserted in a node in this tree.
+ * @param {Tree} tree The owner tree
+ * @param {Node} parent The parent node
+ * @param {Node} node The child node inserted
+ * @param {Node} refNode The child node the node was inserted before
+ */
+ "insert" : true,
+ /**
+ * @event beforeappend
+ * Fires before a new child is appended to a node in this tree, return false to cancel the append.
+ * @param {Tree} tree The owner tree
+ * @param {Node} parent The parent node
+ * @param {Node} node The child node to be appended
+ */
+ "beforeappend" : true,
+ /**
+ * @event beforeremove
+ * Fires before a child is removed from a node in this tree, return false to cancel the remove.
+ * @param {Tree} tree The owner tree
+ * @param {Node} parent The parent node
+ * @param {Node} node The child node to be removed
+ */
+ "beforeremove" : true,
+ /**
+ * @event beforemove
+ * Fires before a node is moved to a new location in the tree. Return false to cancel the move.
+ * @param {Tree} tree The owner tree
+ * @param {Node} node The node being moved
+ * @param {Node} oldParent The parent of the node
+ * @param {Node} newParent The new parent the node is moving to
+ * @param {Number} index The index it is being moved to
+ */
+ "beforemove" : true,
+ /**
+ * @event beforeinsert
+ * Fires before a new child is inserted in a node in this tree, return false to cancel the insert.
+ * @param {Tree} tree The owner tree
+ * @param {Node} parent The parent node
+ * @param {Node} node The child node to be inserted
+ * @param {Node} refNode The child node the node is being inserted before
+ */
+ "beforeinsert" : true
+ });
+
+ Roo.data.Tree.superclass.constructor.call(this);
+};
+
+Roo.extend(Roo.data.Tree, Roo.util.Observable, {
+ pathSeparator: "/",
+
+ proxyNodeEvent : function(){
+ return this.fireEvent.apply(this, arguments);
+ },
/**
- * @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
+ * Returns the root node for this tree.
+ * @return {Node}
*/
- this.orientation = orientation || Roo.SplitBar.HORIZONTAL;
-
+ getRootNode : function(){
+ return this.root;
+ },
+
/**
- * The minimum size of the resizing element. (Defaults to 0)
- * @type Number
+ * Sets the root node for this tree.
+ * @param {Node} node
+ * @return {Node}
*/
- this.minSize = 0;
-
+ setRootNode : function(node){
+ this.root = node;
+ node.ownerTree = this;
+ node.isRoot = true;
+ this.registerNode(node);
+ return node;
+ },
+
/**
- * The maximum size of the resizing element. (Defaults to 2000)
- * @type Number
+ * Gets a node in this tree by its id.
+ * @param {String} id
+ * @return {Node}
*/
- this.maxSize = 2000;
-
+ getNodeById : function(id){
+ return this.nodeHash[id];
+ },
+
+ registerNode : function(node){
+ this.nodeHash[node.id] = node;
+ },
+
+ unregisterNode : function(node){
+ delete this.nodeHash[node.id];
+ },
+
+ toString : function(){
+ return "[Tree"+(this.id?" "+this.id:"")+"]";
+ }
+});
+
+/**
+ * @class Roo.data.Node
+ * @extends Roo.util.Observable
+ * @cfg {Boolean} leaf true if this node is a leaf and does not have children
+ * @cfg {String} id The id for this node. If one is not specified, one is generated.
+ * @constructor
+ * @param {Object} attributes The attributes/config for the node
+ */
+Roo.data.Node = function(attributes){
/**
- * Whether to animate the transition to the new size
- * @type Boolean
+ * The attributes supplied for the node. You can use this property to access any custom attributes you supplied.
+ * @type {Object}
*/
- this.animate = false;
-
+ this.attributes = attributes || {};
+ this.leaf = this.attributes.leaf;
/**
- * Whether to create a transparent shim that overlays the page when dragging, enables dragging across iframes.
- * @type Boolean
+ * The node id. @type String
*/
- this.useShim = false;
-
- /** @private */
- this.shim = null;
-
- if(!existingProxy){
- /** @private */
- this.proxy = Roo.SplitBar.createProxy(this.orientation);
- }else{
- this.proxy = Roo.get(existingProxy).dom;
+ this.id = this.attributes.id;
+ if(!this.id){
+ this.id = Roo.id(null, "ynode-");
+ this.attributes.id = this.id;
}
- /** @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
+ * All child nodes of this node. @type Array
*/
- 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.childNodes = [];
+ if(!this.childNodes.indexOf){ // indexOf is a must
+ this.childNodes.indexOf = function(o){
+ for(var i = 0, len = this.length; i < len; i++){
+ if(this[i] == o) {
+ return i;
+ }
+ }
+ return -1;
+ };
}
-
- 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
+ /**
+ * The parent node for this node. @type Node
*/
- 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);
- }
- }
- },
-
+ this.parentNode = null;
/**
- * Get the adapter this SplitBar uses
- * @return The adapter object
+ * The first direct child node of this node, or null if this node has no child nodes. @type Node
*/
- getAdapter : function(){
- return this.adapter;
- },
-
+ this.firstChild = null;
/**
- * Set the adapter this SplitBar uses
- * @param {Object} adapter A SplitBar adapter object
+ * The last direct child node of this node, or null if this node has no child nodes. @type Node
*/
- setAdapter : function(adapter){
- this.adapter = adapter;
- this.adapter.init(this);
- },
-
+ this.lastChild = null;
/**
- * Gets the minimum size for the resizing element
- * @return {Number} The minimum size
+ * The node immediately preceding this node in the tree, or null if there is no sibling node. @type Node
*/
- getMinimumSize : function(){
- return this.minSize;
- },
-
+ this.previousSibling = null;
/**
- * Sets the minimum size for the resizing element
- * @param {Number} minSize The minimum size
+ * The node immediately following this node in the tree, or null if there is no sibling node. @type Node
*/
- setMinimumSize : function(minSize){
- this.minSize = minSize;
+ this.nextSibling = null;
+
+ this.addEvents({
+ /**
+ * @event append
+ * Fires when a new child node is appended
+ * @param {Tree} tree The owner tree
+ * @param {Node} this This node
+ * @param {Node} node The newly appended node
+ * @param {Number} index The index of the newly appended node
+ */
+ "append" : true,
+ /**
+ * @event remove
+ * Fires when a child node is removed
+ * @param {Tree} tree The owner tree
+ * @param {Node} this This node
+ * @param {Node} node The removed node
+ */
+ "remove" : true,
+ /**
+ * @event move
+ * Fires when this node is moved to a new location in the tree
+ * @param {Tree} tree The owner tree
+ * @param {Node} this This node
+ * @param {Node} oldParent The old parent of this node
+ * @param {Node} newParent The new parent of this node
+ * @param {Number} index The index it was moved to
+ */
+ "move" : true,
+ /**
+ * @event insert
+ * Fires when a new child node is inserted.
+ * @param {Tree} tree The owner tree
+ * @param {Node} this This node
+ * @param {Node} node The child node inserted
+ * @param {Node} refNode The child node the node was inserted before
+ */
+ "insert" : true,
+ /**
+ * @event beforeappend
+ * Fires before a new child is appended, return false to cancel the append.
+ * @param {Tree} tree The owner tree
+ * @param {Node} this This node
+ * @param {Node} node The child node to be appended
+ */
+ "beforeappend" : true,
+ /**
+ * @event beforeremove
+ * Fires before a child is removed, return false to cancel the remove.
+ * @param {Tree} tree The owner tree
+ * @param {Node} this This node
+ * @param {Node} node The child node to be removed
+ */
+ "beforeremove" : true,
+ /**
+ * @event beforemove
+ * Fires before this node is moved to a new location in the tree. Return false to cancel the move.
+ * @param {Tree} tree The owner tree
+ * @param {Node} this This node
+ * @param {Node} oldParent The parent of this node
+ * @param {Node} newParent The new parent this node is moving to
+ * @param {Number} index The index it is being moved to
+ */
+ "beforemove" : true,
+ /**
+ * @event beforeinsert
+ * Fires before a new child is inserted, return false to cancel the insert.
+ * @param {Tree} tree The owner tree
+ * @param {Node} this This node
+ * @param {Node} node The child node to be inserted
+ * @param {Node} refNode The child node the node is being inserted before
+ */
+ "beforeinsert" : true
+ });
+ this.listeners = this.attributes.listeners;
+ Roo.data.Node.superclass.constructor.call(this);
+};
+
+Roo.extend(Roo.data.Node, Roo.util.Observable, {
+ fireEvent : function(evtName){
+ // first do standard event for this node
+ if(Roo.data.Node.superclass.fireEvent.apply(this, arguments) === false){
+ return false;
+ }
+ // then bubble it up to the tree if the event wasn't cancelled
+ var ot = this.getOwnerTree();
+ if(ot){
+ if(ot.proxyNodeEvent.apply(ot, arguments) === false){
+ return false;
+ }
+ }
+ return true;
},
-
+
/**
- * Gets the maximum size for the resizing element
- * @return {Number} The maximum size
+ * Returns true if this node is a leaf
+ * @return {Boolean}
*/
- getMaximumSize : function(){
- return this.maxSize;
+ isLeaf : function(){
+ return this.leaf === true;
},
-
+
+ // private
+ setFirstChild : function(node){
+ this.firstChild = node;
+ },
+
+ //private
+ setLastChild : function(node){
+ this.lastChild = node;
+ },
+
+
/**
- * Sets the maximum size for the resizing element
- * @param {Number} maxSize The maximum size
+ * Returns true if this node is the last child of its parent
+ * @return {Boolean}
*/
- setMaximumSize : function(maxSize){
- this.maxSize = maxSize;
+ isLast : function(){
+ return (!this.parentNode ? true : this.parentNode.lastChild == this);
},
-
+
/**
- * Sets the initialize size for the resizing element
- * @param {Number} size The initial size
+ * Returns true if this node is the first child of its parent
+ * @return {Boolean}
*/
- setCurrentSize : function(size){
- var oldAnimate = this.animate;
- this.animate = false;
- this.adapter.setElementSize(this, size);
- this.animate = oldAnimate;
+ isFirst : function(){
+ return (!this.parentNode ? true : this.parentNode.firstChild == this);
},
-
+
+ hasChildNodes : function(){
+ return !this.isLeaf() && this.childNodes.length > 0;
+ },
+
/**
- * Destroy this splitbar.
- * @param {Boolean} removeEl True to remove the element
+ * Insert node(s) as the last child node of this node.
+ * @param {Node/Array} node The node or Array of nodes to append
+ * @return {Node} The appended node if single append, or null if an array was passed
*/
- destroy : function(removeEl){
- if(this.shim){
- this.shim.remove();
- }
- this.dd.unreg();
- this.proxy.parentNode.removeChild(this.proxy);
- if(removeEl){
- this.el.remove();
+ appendChild : function(node){
+ var multi = false;
+ if(node instanceof Array){
+ multi = node;
+ }else if(arguments.length > 1){
+ multi = arguments;
}
- }
-});
+
+ // if passed an array or multiple args do them one by one
+ if(multi){
+ for(var i = 0, len = multi.length; i < len; i++) {
+ this.appendChild(multi[i]);
+ }
+ }else{
+ if(this.fireEvent("beforeappend", this.ownerTree, this, node) === false){
+ return false;
+ }
+ var index = this.childNodes.length;
+ var oldParent = node.parentNode;
+ // it's a move, make sure we move it cleanly
+ if(oldParent){
+ if(node.fireEvent("beforemove", node.getOwnerTree(), node, oldParent, this, index) === false){
+ return false;
+ }
+ oldParent.removeChild(node);
+ }
+
+ index = this.childNodes.length;
+ if(index == 0){
+ this.setFirstChild(node);
+ }
+ this.childNodes.push(node);
+ node.parentNode = this;
+ var ps = this.childNodes[index-1];
+ if(ps){
+ node.previousSibling = ps;
+ ps.nextSibling = node;
+ }else{
+ node.previousSibling = null;
+ }
+ node.nextSibling = null;
+ this.setLastChild(node);
+ node.setOwnerTree(this.getOwnerTree());
+ this.fireEvent("append", this.ownerTree, this, node, index);
+ if(this.ownerTree) {
+ this.ownerTree.fireEvent("appendnode", this, node, index);
+ }
+ if(oldParent){
+ node.fireEvent("move", this.ownerTree, node, oldParent, this, index);
+ }
+ return node;
+ }
+ },
-/**
- * @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;
-};
+ /**
+ * Removes a child node from this node.
+ * @param {Node} node The node to remove
+ * @return {Node} The removed node
+ */
+ removeChild : function(node){
+ var index = this.childNodes.indexOf(node);
+ if(index == -1){
+ return false;
+ }
+ if(this.fireEvent("beforeremove", this.ownerTree, this, node) === false){
+ return false;
+ }
-/**
- * @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(){
-};
+ // remove it from childNodes collection
+ this.childNodes.splice(index, 1);
-Roo.SplitBar.BasicLayoutAdapter.prototype = {
- // do nothing for now
- init : function(s){
-
+ // update siblings
+ if(node.previousSibling){
+ node.previousSibling.nextSibling = node.nextSibling;
+ }
+ if(node.nextSibling){
+ node.nextSibling.previousSibling = node.previousSibling;
+ }
+
+ // update child refs
+ if(this.firstChild == node){
+ this.setFirstChild(node.nextSibling);
+ }
+ if(this.lastChild == node){
+ this.setLastChild(node.previousSibling);
+ }
+
+ node.setOwnerTree(null);
+ // clear any references from the node
+ node.parentNode = null;
+ node.previousSibling = null;
+ node.nextSibling = null;
+ this.fireEvent("remove", this.ownerTree, this, node);
+ return node;
},
+
/**
- * Called before drag operations to get the current size of the resizing element.
- * @param {Roo.SplitBar} s The SplitBar using this adapter
+ * Inserts the first node before the second node in this nodes childNodes collection.
+ * @param {Node} node The node to insert
+ * @param {Node} refNode The node to insert before (if null the node is appended)
+ * @return {Node} The inserted node
*/
- getElementSize : function(s){
- if(s.orientation == Roo.SplitBar.HORIZONTAL){
- return s.resizingEl.getWidth();
+ insertBefore : function(node, refNode){
+ if(!refNode){ // like standard Dom, refNode can be null for append
+ return this.appendChild(node);
+ }
+ // nothing to do
+ if(node == refNode){
+ return false;
+ }
+
+ if(this.fireEvent("beforeinsert", this.ownerTree, this, node, refNode) === false){
+ return false;
+ }
+ var index = this.childNodes.indexOf(refNode);
+ var oldParent = node.parentNode;
+ var refIndex = index;
+
+ // when moving internally, indexes will change after remove
+ if(oldParent == this && this.childNodes.indexOf(node) < index){
+ refIndex--;
+ }
+
+ // it's a move, make sure we move it cleanly
+ if(oldParent){
+ if(node.fireEvent("beforemove", node.getOwnerTree(), node, oldParent, this, index, refNode) === false){
+ return false;
+ }
+ oldParent.removeChild(node);
+ }
+ if(refIndex == 0){
+ this.setFirstChild(node);
+ }
+ this.childNodes.splice(refIndex, 0, node);
+ node.parentNode = this;
+ var ps = this.childNodes[refIndex-1];
+ if(ps){
+ node.previousSibling = ps;
+ ps.nextSibling = node;
}else{
- return s.resizingEl.getHeight();
+ node.previousSibling = null;
+ }
+ node.nextSibling = refNode;
+ refNode.previousSibling = node;
+ node.setOwnerTree(this.getOwnerTree());
+ this.fireEvent("insert", this.ownerTree, this, node, refNode);
+ if(oldParent){
+ node.fireEvent("move", this.ownerTree, node, oldParent, this, refIndex, refNode);
}
+ return node;
},
-
+
/**
- * 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
+ * Returns the child node at the specified index.
+ * @param {Number} index
+ * @return {Node}
*/
- 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);
+ item : function(index){
+ return this.childNodes[index];
+ },
+
+ /**
+ * Replaces one child node in this node with another.
+ * @param {Node} newChild The replacement node
+ * @param {Node} oldChild The node to replace
+ * @return {Node} The replaced node
+ */
+ replaceChild : function(newChild, oldChild){
+ this.insertBefore(newChild, oldChild);
+ this.removeChild(oldChild);
+ return oldChild;
+ },
+
+ /**
+ * Returns the index of a child node
+ * @param {Node} node
+ * @return {Number} The index of the node or -1 if it was not found
+ */
+ indexOf : function(child){
+ return this.childNodes.indexOf(child);
+ },
+
+ /**
+ * Returns the tree this node is in.
+ * @return {Tree}
+ */
+ getOwnerTree : function(){
+ // if it doesn't have one, look for one
+ if(!this.ownerTree){
+ var p = this;
+ while(p){
+ if(p.ownerTree){
+ this.ownerTree = p.ownerTree;
+ break;
}
- }else{
- s.resizingEl.setHeight(newSize, true, .1, onComplete, 'easeOut');
+ p = p.parentNode;
}
}
- }
-};
-
-/**
- *@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);
-};
+ return this.ownerTree;
+ },
-Roo.SplitBar.AbsoluteLayoutAdapter.prototype = {
- init : function(s){
- this.basic.init(s);
+ /**
+ * Returns depth of this node (the root node has a depth of 0)
+ * @return {Number}
+ */
+ getDepth : function(){
+ var depth = 0;
+ var p = this;
+ while(p.parentNode){
+ ++depth;
+ p = p.parentNode;
+ }
+ return depth;
},
-
- getElementSize : function(s){
- return this.basic.getElementSize(s);
+
+ // private
+ setOwnerTree : function(tree){
+ // if it's move, we need to update everyone
+ if(tree != this.ownerTree){
+ if(this.ownerTree){
+ this.ownerTree.unregisterNode(this);
+ }
+ this.ownerTree = tree;
+ var cs = this.childNodes;
+ for(var i = 0, len = cs.length; i < len; i++) {
+ cs[i].setOwnerTree(tree);
+ }
+ if(tree){
+ tree.registerNode(this);
+ }
+ }
},
-
- setElementSize : function(s, newSize, onComplete){
- this.basic.setElementSize(s, newSize, this.moveSplitter.createDelegate(this, [s]));
+
+ /**
+ * Returns the path for this node. The path can be used to expand or select this node programmatically.
+ * @param {String} attr (optional) The attr to use for the path (defaults to the node's id)
+ * @return {String} The path
+ */
+ getPath : function(attr){
+ attr = attr || "id";
+ var p = this.parentNode;
+ var b = [this.attributes[attr]];
+ while(p){
+ b.unshift(p.attributes[attr]);
+ p = p.parentNode;
+ }
+ var sep = this.getOwnerTree().pathSeparator;
+ return sep + b.join(sep);
},
-
- 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());
+
+ /**
+ * Bubbles up the tree from this node, calling the specified function with each node. The scope (<i>this</i>) of
+ * function call will be the scope provided or the current node. The arguments to the function
+ * will be the args provided or the current node. If the function returns false at any point,
+ * the bubble is stopped.
+ * @param {Function} fn The function to call
+ * @param {Object} scope (optional) The scope of the function (defaults to current node)
+ * @param {Array} args (optional) The args to call the function with (default to passing the current node)
+ */
+ bubble : function(fn, scope, args){
+ var p = this;
+ while(p){
+ if(fn.call(scope || p, args || p) === false){
break;
+ }
+ p = p.parentNode;
}
- }
-};
+ },
-/**
- * Orientation constant - Create a vertical SplitBar
- * @static
- * @type Number
- */
-Roo.SplitBar.VERTICAL = 1;
+ /**
+ * Cascades down the tree from this node, calling the specified function with each node. The scope (<i>this</i>) of
+ * function call will be the scope provided or the current node. The arguments to the function
+ * will be the args provided or the current node. If the function returns false at any point,
+ * the cascade is stopped on that branch.
+ * @param {Function} fn The function to call
+ * @param {Object} scope (optional) The scope of the function (defaults to current node)
+ * @param {Array} args (optional) The args to call the function with (default to passing the current node)
+ */
+ cascade : function(fn, scope, args){
+ if(fn.call(scope || this, args || this) !== false){
+ var cs = this.childNodes;
+ for(var i = 0, len = cs.length; i < len; i++) {
+ cs[i].cascade(fn, scope, args);
+ }
+ }
+ },
-/**
- * Orientation constant - Create a horizontal SplitBar
- * @static
- * @type Number
- */
-Roo.SplitBar.HORIZONTAL = 2;
+ /**
+ * Interates the child nodes of this node, calling the specified function with each node. The scope (<i>this</i>) of
+ * function call will be the scope provided or the current node. The arguments to the function
+ * will be the args provided or the current node. If the function returns false at any point,
+ * the iteration stops.
+ * @param {Function} fn The function to call
+ * @param {Object} scope (optional) The scope of the function (defaults to current node)
+ * @param {Array} args (optional) The args to call the function with (default to passing the current node)
+ */
+ eachChild : function(fn, scope, args){
+ var cs = this.childNodes;
+ for(var i = 0, len = cs.length; i < len; i++) {
+ if(fn.call(scope || this, args || cs[i]) === false){
+ break;
+ }
+ }
+ },
-/**
- * Placement constant - The resizing element is to the left of the splitter element
- * @static
- * @type Number
- */
-Roo.SplitBar.LEFT = 1;
+ /**
+ * Finds the first child that has the attribute with the specified value.
+ * @param {String} attribute The attribute name
+ * @param {Mixed} value The value to search for
+ * @return {Node} The found child or null if none was found
+ */
+ findChild : function(attribute, value){
+ var cs = this.childNodes;
+ for(var i = 0, len = cs.length; i < len; i++) {
+ if(cs[i].attributes[attribute] == value){
+ return cs[i];
+ }
+ }
+ return null;
+ },
-/**
- * Placement constant - The resizing element is to the right of the splitter element
- * @static
- * @type Number
- */
-Roo.SplitBar.RIGHT = 2;
+ /**
+ * Finds the first child by a custom function. The child matches if the function passed
+ * returns true.
+ * @param {Function} fn
+ * @param {Object} scope (optional)
+ * @return {Node} The found child or null if none was found
+ */
+ findChildBy : function(fn, scope){
+ var cs = this.childNodes;
+ for(var i = 0, len = cs.length; i < len; i++) {
+ if(fn.call(scope||cs[i], cs[i]) === true){
+ return cs[i];
+ }
+ }
+ return null;
+ },
-/**
- * Placement constant - The resizing element is positioned above the splitter element
- * @static
- * @type Number
- */
-Roo.SplitBar.TOP = 3;
+ /**
+ * Sorts this nodes children using the supplied sort function
+ * @param {Function} fn
+ * @param {Object} scope (optional)
+ */
+ sort : function(fn, scope){
+ var cs = this.childNodes;
+ var len = cs.length;
+ if(len > 0){
+ var sortFn = scope ? function(){fn.apply(scope, arguments);} : fn;
+ cs.sort(sortFn);
+ for(var i = 0; i < len; i++){
+ var n = cs[i];
+ n.previousSibling = cs[i-1];
+ n.nextSibling = cs[i+1];
+ if(i == 0){
+ this.setFirstChild(n);
+ }
+ if(i == len-1){
+ this.setLastChild(n);
+ }
+ }
+ }
+ },
-/**
- * Placement constant - The resizing element is positioned under splitter element
- * @static
- * @type Number
- */
-Roo.SplitBar.BOTTOM = 4;
-/*
+ /**
+ * Returns true if this node is an ancestor (at any point) of the passed node.
+ * @param {Node} node
+ * @return {Boolean}
+ */
+ contains : function(node){
+ return node.isAncestor(this);
+ },
+
+ /**
+ * Returns true if the passed node is an ancestor (at any point) of this node.
+ * @param {Node} node
+ * @return {Boolean}
+ */
+ isAncestor : function(node){
+ var p = this.parentNode;
+ while(p){
+ if(p == node){
+ return true;
+ }
+ p = p.parentNode;
+ }
+ return false;
+ },
+
+ toString : function(){
+ return "[Node"+(this.id?" "+this.id:"")+"]";
+ }
+});/*
* Based on:
* Ext JS Library 1.1.1
* Copyright(c) 2006-2007, Ext JS, LLC.
* <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)
- *
+/**
+ * @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 View
+ * Create a new Shadow
* @param {Object} config The config object
- *
*/
-Roo.View = function(config, depreciated_tpl, depreciated_config){
-
- this.parent = false;
-
- 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);
- }
- this.wrapEl = this.el.wrap().wrap();
- ///this.el = this.wrapEla.appendChild(document.createElement("div"));
-
-
- if(typeof(this.tpl) == "string"){
- this.tpl = new Roo.Template(this.tpl);
- } else {
- // support xtype ctors..
- this.tpl = new Roo.factory(this.tpl, Roo);
+Roo.Shadow = function(config){
+ Roo.apply(this, config);
+ if(typeof this.mode != "string"){
+ this.mode = this.defaultMode;
}
-
-
- 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,
- /**
- * @event preparedata
- * Fires on every row to render, to allow you to change the data.
- * @param {Roo.View} this
- * @param {Object} data to be rendered (change this)
- */
- "preparedata" : true
-
-
- });
-
-
-
- this.el.on({
- "click": this.onClick,
- "dblclick": this.onDblClick,
- "contextmenu": this.onContextMenu,
- scope:this
- });
+ 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.selections = [];
- this.nodes = [];
- this.cmp = new Roo.CompositeElementLite([]);
- if(this.store){
- this.store = Roo.factory(this.store, Roo.data);
- this.setStore(this.store, true);
- }
-
- if ( this.footer && this.footer.xtype) {
-
- var fctr = this.wrapEl.appendChild(document.createElement("div"));
-
- this.footer.dataSource = this.store;
- this.footer.container = fctr;
- this.footer = Roo.factory(this.footer, Roo);
- fctr.insertFirst(this.el);
-
- // this is a bit insane - as the paging toolbar seems to detach the el..
-// dom.parentNode.parentNode.parentNode
- // they get detached?
- }
-
-
- Roo.View.superclass.constructor.call(this);
-
-
+ this.adjusts = a;
};
-Roo.extend(Roo.View, Roo.util.Observable, {
-
- /**
- * @cfg {Roo.data.Store} store Data store to load data from.
- */
- store : false,
-
+Roo.Shadow.prototype = {
/**
- * @cfg {String|Roo.Element} el The container element.
+ * @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)
*/
- el : '',
-
+ mode: false,
/**
- * @cfg {String|Roo.Template} tpl The template used by this View
+ * @cfg {String} offset
+ * The number of pixels to offset the shadow from the element (defaults to 4)
*/
- tpl : false,
+ offset: 4,
+
+ // private
+ defaultMode: "drop",
+
/**
- * @cfg {String} dataName the named area of the template to use as the data area
- * Works with domtemplates roo-name="name"
+ * Displays the shadow under the target element
+ * @param {String/HTMLElement/Element} targetEl The id or element under which the shadow should display
*/
- dataName: false,
+ 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";
+ },
+
/**
- * @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.
+ * Returns true if the shadow is visible, else false
*/
- emptyText : "",
-
+ isVisible : function(){
+ return this.el ? true : false;
+ },
+
/**
- * @cfg {String} text to display on mask (default Loading)
+ * 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
*/
- mask : false,
+ 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";
+ }
+ }
+ },
+
/**
- * @cfg {Boolean} multiSelect Allow multiple selection
+ * Hides this shadow
*/
- multiSelect : false,
+ hide : function(){
+ if(this.el){
+ this.el.dom.style.display = "none";
+ Roo.Shadow.Pool.push(this.el);
+ delete this.el;
+ }
+ },
+
/**
- * @cfg {Boolean} singleSelect Allow single selection
+ * Adjust the z-index of this shadow
+ * @param {Number} zindex The new z-index
*/
- singleSelect: false,
+ 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.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);
+
/**
- * @cfg {Boolean} toggleSelect - selecting
+ * @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
*/
- toggleSelect : false,
+ this.orientation = orientation || Roo.SplitBar.HORIZONTAL;
/**
- * @cfg {Boolean} tickable - selecting
+ * The minimum size of the resizing element. (Defaults to 0)
+ * @type Number
*/
- tickable : false,
+ this.minSize = 0;
/**
- * Returns the element this view is bound to.
- * @return {Roo.Element}
+ * The maximum size of the resizing element. (Defaults to 2000)
+ * @type Number
*/
- getEl : function(){
- return this.wrapEl;
- },
-
+ this.maxSize = 2000;
-
/**
- * Refreshes the view. - called by datachanged on the store. - do not call directly.
+ * Whether to animate the transition to the new size
+ * @type Boolean
*/
- refresh : function(){
- //Roo.log('refresh');
- var t = this.tpl;
-
- // if we are using something like 'domtemplate', then
- // the what gets used is:
- // t.applySubtemplate(NAME, data, wrapping data..)
- // the outer template then get' applied with
- // the store 'extra data'
- // and the body get's added to the
- // roo-name="data" node?
- // <span class='roo-tpl-{name}'></span> ?????
-
-
-
- this.clearSelections();
- this.el.update("");
- var html = [];
- var records = this.store.getRange();
- if(records.length < 1) {
-
- // is this valid?? = should it render a template??
-
- this.el.update(this.emptyText);
- return;
- }
- var el = this.el;
- if (this.dataName) {
- this.el.update(t.apply(this.store.meta)); //????
- el = this.el.child('.roo-tpl-' + this.dataName);
- }
-
- for(var i = 0, len = records.length; i < len; i++){
- var data = this.prepareData(records[i].data, i, records[i]);
- this.fireEvent("preparedata", this, data, i, records[i]);
-
- var d = Roo.apply({}, data);
-
- if(this.tickable){
- Roo.apply(d, {'roo-id' : Roo.id()});
-
- var _this = this;
-
- Roo.each(this.parent.item, function(item){
- if(item[_this.parent.valueField] != data[_this.parent.valueField]){
- return;
- }
- Roo.apply(d, {'roo-data-checked' : 'checked'});
- });
- }
-
- html[html.length] = Roo.util.Format.trim(
- this.dataName ?
- t.applySubtemplate(this.dataName, d, this.store.meta) :
- t.apply(d)
- );
- }
-
-
-
- el.update(html.join(""));
- this.nodes = el.dom.childNodes;
- this.updateIndexes(0);
- },
+ this.animate = false;
-
/**
- * Function to override to reformat the data that is sent to
- * the template for each node.
- * DEPRICATED - use the preparedata event handler.
- * @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).
+ * Whether to create a transparent shim that overlays the page when dragging, enables dragging across iframes.
+ * @type Boolean
*/
- prepareData : function(data, index, record)
- {
- this.fireEvent("preparedata", this, data, index, record);
- return data;
- },
-
- onUpdate : function(ds, record){
- // Roo.log('on update');
- this.clearSelections();
- var index = this.store.indexOf(record);
- var n = this.nodes[index];
- this.tpl.insertBefore(n, this.prepareData(record.data, index, record));
- n.parentNode.removeChild(n);
- this.updateIndexes(index, index);
- },
-
+ 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 = {};
-// --------- FIXME
- onAdd : function(ds, records, index)
- {
- //Roo.log(['on Add', 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, i, records[i]);
- if(n){
- this.tpl.insertBefore(n, d);
- }else{
-
- this.tpl.append(this.el, d);
- }
- }
- this.updateIndexes(index);
- },
-
- onRemove : function(ds, record, index){
- // Roo.log('onRemove');
- this.clearSelections();
- var el = this.dataName ?
- this.el.child('.roo-tpl-' + this.dataName) :
- this.el;
-
- el.dom.removeChild(this.nodes[index]);
- this.updateIndexes(index);
- },
-
/**
- * Refresh an individual node.
- * @param {Number} index
+ * @private The adapter to use to positon and resize elements
*/
- refreshNode : function(index){
- this.onUpdate(this.store, this.store.getAt(index));
- },
+ 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,
- 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;
+ "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);
},
-
- /**
- * Changes the data store this view uses and refresh the view.
- * @param {Store} store
+
+ /**
+ * @private Called after the drag operation by the DDProxy
*/
- 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);
- this.store.un("beforeload", this.onBeforeLoad);
- this.store.un("load", this.onLoad);
- this.store.un("loadexception", this.onLoad);
+ onEndProxyDrag : function(e){
+ Roo.get(this.proxy).setDisplayed(false);
+ var endPoint = Roo.lib.Event.getXY(e);
+ if(this.overlay){
+ this.overlay.hide();
}
- 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);
- store.on("beforeload", this.onBeforeLoad, this);
- store.on("load", this.onLoad, this);
- store.on("loadexception", this.onLoad, this);
+ 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]
+ );
}
-
- if(store){
- this.refresh();
+ 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);
+ }
}
},
+
/**
- * onbeforeLoad - masks the loading area.
- *
+ * Get the adapter this SplitBar uses
+ * @return The adapter object
*/
- onBeforeLoad : function(store,opts)
- {
- //Roo.log('onBeforeLoad');
- if (!opts.add) {
- this.el.update("");
- }
- this.el.mask(this.mask ? this.mask : "Loading" );
- },
- onLoad : function ()
- {
- this.el.unmask();
+ getAdapter : function(){
+ return this.adapter;
},
-
/**
- * 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
+ * Set the adapter this SplitBar uses
+ * @param {Object} adapter A SplitBar adapter object
*/
- findItemFromChild : function(node){
- var el = this.dataName ?
- this.el.child('.roo-tpl-' + this.dataName,true) :
- 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.toggleSelect) {
- var m = this.isSelected(item) ? 'unselect' : 'select';
- //Roo.log(m);
- var _t = this;
- _t[m](item, true, false);
- return true;
- }
- 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;
- }
-
- if(!this.tickable){
- e.preventDefault();
- }
-
- }
- return true;
+ setAdapter : function(adapter){
+ this.adapter = adapter;
+ this.adapter.init(this);
},
-
+
/**
- * Get the number of selected nodes.
- * @return {Number}
+ * Gets the minimum size for the resizing element
+ * @return {Number} The minimum size
*/
- getSelectionCount : function(){
- return this.selections.length;
+ getMinimumSize : function(){
+ return this.minSize;
},
-
+
/**
- * Get the currently selected nodes.
- * @return {Array} An array of HTMLElements
+ * Sets the minimum size for the resizing element
+ * @param {Number} minSize The minimum size
*/
- getSelectedNodes : function(){
- return this.selections;
+ setMinimumSize : function(minSize){
+ this.minSize = minSize;
},
-
+
/**
- * Get the indexes of the selected nodes.
- * @return {Array}
+ * Gets the maximum size for the resizing element
+ * @return {Number} The maximum size
*/
- getSelectedIndexes : function(){
- var indexes = [], s = this.selections;
- for(var i = 0, len = s.length; i < len; i++){
- indexes.push(s[i].nodeIndex);
- }
- return indexes;
+ getMaximumSize : function(){
+ return this.maxSize;
},
-
+
/**
- * Clear all selections
- * @param {Boolean} suppressEvent (optional) true to skip firing of the selectionchange event
+ * Sets the maximum size for the resizing element
+ * @param {Number} maxSize The maximum size
*/
- 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);
- }
- }
+ setMaximumSize : function(maxSize){
+ this.maxSize = maxSize;
},
-
+
/**
- * Returns true if the passed node is selected
- * @param {HTMLElement/Number} node The node or node index
- * @return {Boolean}
+ * Sets the initialize size for the resizing element
+ * @param {Number} size The initial size
*/
- isSelected : function(node){
- var s = this.selections;
- if(s.length < 1){
- return false;
- }
- node = this.getNode(node);
- return s.indexOf(node) !== -1;
+ setCurrentSize : function(size){
+ var oldAnimate = this.animate;
+ this.animate = false;
+ this.adapter.setElementSize(this, size);
+ this.animate = oldAnimate;
},
-
+
/**
- * 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);
- }
- return;
- }
- var node = this.getNode(nodeInfo);
- if(!node || this.isSelected(node)){
- return; // already selected.
- }
- 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);
- }
- }
-
-
- },
- /**
- * Unselects 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 IGNORED (for campatibility with select)
- * @param {Boolean} suppressEvent (optional) true to skip firing of the selectionchange vent
+ * Destroy this splitbar.
+ * @param {Boolean} removeEl True to remove the element
*/
- unselect : function(nodeInfo, keepExisting, suppressEvent)
- {
- if(nodeInfo instanceof Array){
- Roo.each(this.selections, function(s) {
- this.unselect(s, nodeInfo);
- }, this);
- return;
+ destroy : function(removeEl){
+ if(this.shim){
+ this.shim.remove();
}
- var node = this.getNode(nodeInfo);
- if(!node || !this.isSelected(node)){
- //Roo.log("not selected");
- return; // not selected.
+ this.dd.unreg();
+ this.proxy.parentNode.removeChild(this.proxy);
+ if(removeEl){
+ this.el.remove();
}
- // fireevent???
- var ns = [];
- Roo.each(this.selections, function(s) {
- if (s == node ) {
- Roo.fly(node).removeClass(this.selectedClass);
+ }
+});
- return;
- }
- ns.push(s);
- },this);
-
- this.selections= ns;
- this.fireEvent("selectionchange", this, this.selections);
- },
+/**
+ * @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){
+
+ },
/**
- * 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
+ * Called before drag operations to get the current size of the resizing element.
+ * @param {Roo.SplitBar} s The SplitBar using this adapter
*/
- getNode : function(nodeInfo){
- if(typeof nodeInfo == "string"){
- return document.getElementById(nodeInfo);
- }else if(typeof nodeInfo == "number"){
- return this.nodes[nodeInfo];
+ getElementSize : function(s){
+ if(s.orientation == Roo.SplitBar.HORIZONTAL){
+ return s.resizingEl.getWidth();
+ }else{
+ return s.resizingEl.getHeight();
}
- return nodeInfo;
},
-
+
/**
- * Gets a range template nodes.
- * @param {Number} startIndex
- * @param {Number} endIndex
- * @return {Array} An array of nodes
+ * 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
*/
- 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]);
+ 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{
- for(var i = start; i >= end; i--){
- nodes.push(ns[i]);
+ }else{
+
+ if(!s.animate){
+ s.resizingEl.setHeight(newSize);
+ if(onComplete){
+ onComplete(s, newSize);
+ }
+ }else{
+ s.resizingEl.setHeight(newSize, true, .1, onComplete, 'easeOut');
}
}
- 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;
- }
+/**
+ *@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;
}
- return -1;
}
-});
+};
+
+/**
+ * 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
*/
/**
- * @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.");
-});
+ * @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(...);
-// direct load of JSON data
-view.load("foobar.php");
+ 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
+ });
-// 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 />"
-);
+ // listen for node click?
+ view.on("click", function(vw, index, node, e){
+ alert('Node "' + node.id + '" at index: ' + index + " was clicked.");
+ });
-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
+ // 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.JsonView = function(config, depreciated_tpl, depreciated_config){
+Roo.View = function(config, depreciated_tpl, depreciated_config){
+ this.parent = false;
- Roo.JsonView.superclass.constructor.call(this, 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);
+ }
+ this.wrapEl = this.el.wrap().wrap();
+ ///this.el = this.wrapEla.appendChild(document.createElement("div"));
+
+
+ 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,
+ /**
+ * @event preparedata
+ * Fires on every row to render, to allow you to change the data.
+ * @param {Roo.View} this
+ * @param {Object} data to be rendered (change this)
+ */
+ "preparedata" : true
+
+
+ });
- var um = this.el.getUpdateManager();
- um.setRenderer(this);
- um.on("update", this.onLoad, this);
- um.on("failure", this.onLoadException, this);
+
+ 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);
+ }
+
+ if ( this.footer && this.footer.xtype) {
+
+ var fctr = this.wrapEl.appendChild(document.createElement("div"));
+
+ this.footer.dataSource = this.store;
+ this.footer.container = fctr;
+ this.footer = Roo.factory(this.footer, Roo);
+ fctr.insertFirst(this.el);
+
+ // this is a bit insane - as the paging toolbar seems to detach the el..
+// dom.parentNode.parentNode.parentNode
+ // they get detached?
+ }
+
+
+ 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,
+
/**
- * @event beforerender
- * Fires before rendering of the downloaded JSON data.
- * @param {Roo.JsonView} this
- * @param {Object} data The JSON data loaded
+ * @cfg {String|Roo.Element} el The container element.
*/
+ el : '',
+
/**
- * @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
+ * @cfg {String|Roo.Template} tpl The template used by this View
*/
+ tpl : false,
/**
- * @event loadexception
- * Fires when loading fails.
- * @param {Roo.JsonView} this
- * @param {Object} response The raw Connect response object
+ * @cfg {String} dataName the named area of the template to use as the data area
+ * Works with domtemplates roo-name="name"
*/
- this.addEvents({
- 'beforerender' : true,
- 'load' : true,
- 'loadexception' : true
- });
-};
-Roo.extend(Roo.JsonView, Roo.View, {
+ dataName: false,
/**
- * @type {String} The root property in the loaded JSON object that contains the data
+ * @cfg {String} selectedClass The css class to add to selected nodes
*/
- jsonRoot : "",
+ selectedClass : "x-view-selected",
+ /**
+ * @cfg {String} emptyText The empty text to show when nothing is loaded.
+ */
+ emptyText : "",
+
+ /**
+ * @cfg {String} text to display on mask (default Loading)
+ */
+ mask : false,
+ /**
+ * @cfg {Boolean} multiSelect Allow multiple selection
+ */
+ multiSelect : false,
+ /**
+ * @cfg {Boolean} singleSelect Allow single selection
+ */
+ singleSelect: false,
+
+ /**
+ * @cfg {Boolean} toggleSelect - selecting
+ */
+ toggleSelect : false,
+
+ /**
+ * @cfg {Boolean} tickable - selecting
+ */
+ tickable : false,
+
+ /**
+ * Returns the element this view is bound to.
+ * @return {Roo.Element}
+ */
+ getEl : function(){
+ return this.wrapEl;
+ },
+
+
/**
- * Refreshes the view.
+ * Refreshes the view. - called by datachanged on the store. - do not call directly.
*/
refresh : function(){
+ //Roo.log('refresh');
+ var t = this.tpl;
+
+ // if we are using something like 'domtemplate', then
+ // the what gets used is:
+ // t.applySubtemplate(NAME, data, wrapping data..)
+ // the outer template then get' applied with
+ // the store 'extra data'
+ // and the body get's added to the
+ // roo-name="data" node?
+ // <span class='roo-tpl-{name}'></span> ?????
+
+
+
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);
+ var records = this.store.getRange();
+ if(records.length < 1) {
+
+ // is this valid?? = should it render a template??
+
+ this.el.update(this.emptyText);
+ return;
+ }
+ var el = this.el;
+ if (this.dataName) {
+ this.el.update(t.apply(this.store.meta)); //????
+ el = this.el.child('.roo-tpl-' + this.dataName);
+ }
+
+ for(var i = 0, len = records.length; i < len; i++){
+ var data = this.prepareData(records[i].data, i, records[i]);
+ this.fireEvent("preparedata", this, data, i, records[i]);
+
+ var d = Roo.apply({}, data);
+
+ if(this.tickable){
+ Roo.apply(d, {'roo-id' : Roo.id()});
+
+ var _this = this;
+
+ Roo.each(this.parent.item, function(item){
+ if(item[_this.parent.valueField] != data[_this.parent.valueField]){
+ return;
+ }
+ Roo.apply(d, {'roo-data-checked' : 'checked'});
+ });
}
- }else{
- html.push(this.emptyText);
+
+ html[html.length] = Roo.util.Format.trim(
+ this.dataName ?
+ t.applySubtemplate(this.dataName, d, this.store.meta) :
+ t.apply(d)
+ );
}
- this.el.update(html.join(""));
- this.nodes = this.el.dom.childNodes;
+
+
+
+ el.update(html.join(""));
+ this.nodes = 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.
+ * Function to override to reformat the data that is sent to
+ * the template for each node.
+ * DEPRICATED - use the preparedata event handler.
+ * @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).
*/
- load : function(){
- var um = this.el.getUpdateManager();
- um.update.apply(um, arguments);
+ prepareData : function(data, index, record)
+ {
+ this.fireEvent("preparedata", this, data, index, record);
+ return data;
},
- render : function(el, response){
+ onUpdate : function(ds, record){
+ // Roo.log('on update');
this.clearSelections();
- this.el.update("");
- var o;
- try{
- o = Roo.util.JSON.decode(response.responseText);
- if(this.jsonRoot){
+ var index = this.store.indexOf(record);
+ var n = this.nodes[index];
+ this.tpl.insertBefore(n, this.prepareData(record.data, index, record));
+ n.parentNode.removeChild(n);
+ this.updateIndexes(index, index);
+ },
+
+
+
+// --------- FIXME
+ onAdd : function(ds, records, index)
+ {
+ //Roo.log(['on Add', 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, i, records[i]);
+ if(n){
+ this.tpl.insertBefore(n, d);
+ }else{
- o = o[this.jsonRoot];
+ this.tpl.append(this.el, d);
}
- } catch(e){
}
- /**
- * The current JSON data or null
- */
- this.jsonData = o;
- this.beforeRender();
- this.refresh();
+ this.updateIndexes(index);
+ },
+
+ onRemove : function(ds, record, index){
+ // Roo.log('onRemove');
+ this.clearSelections();
+ var el = this.dataName ?
+ this.el.child('.roo-tpl-' + this.dataName) :
+ this.el;
+
+ 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);
+ this.store.un("beforeload", this.onBeforeLoad);
+ this.store.un("load", this.onLoad);
+ this.store.un("loadexception", this.onLoad);
+ }
+ 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);
+ store.on("beforeload", this.onBeforeLoad, this);
+ store.on("load", this.onLoad, this);
+ store.on("loadexception", this.onLoad, this);
+ }
+
+ if(store){
+ this.refresh();
+ }
+ },
+ /**
+ * onbeforeLoad - masks the loading area.
+ *
+ */
+ onBeforeLoad : function(store,opts)
+ {
+ //Roo.log('onBeforeLoad');
+ if (!opts.add) {
+ this.el.update("");
+ }
+ this.el.mask(this.mask ? this.mask : "Loading" );
+ },
+ onLoad : function ()
+ {
+ this.el.unmask();
+ },
+
+
+ /**
+ * 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.dataName ?
+ this.el.child('.roo-tpl-' + this.dataName,true) :
+ 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.toggleSelect) {
+ var m = this.isSelected(item) ? 'unselect' : 'select';
+ //Roo.log(m);
+ var _t = this;
+ _t[m](item, true, false);
+ return true;
+ }
+ 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;
+ }
+
+ if(!this.tickable){
+ 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);
+ }
+ return;
+ }
+ var node = this.getNode(nodeInfo);
+ if(!node || this.isSelected(node)){
+ return; // already selected.
+ }
+ 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);
+ }
+ }
+
+
+ },
+ /**
+ * Unselects 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 IGNORED (for campatibility with select)
+ * @param {Boolean} suppressEvent (optional) true to skip firing of the selectionchange vent
+ */
+ unselect : function(nodeInfo, keepExisting, suppressEvent)
+ {
+ if(nodeInfo instanceof Array){
+ Roo.each(this.selections, function(s) {
+ this.unselect(s, nodeInfo);
+ }, this);
+ return;
+ }
+ var node = this.getNode(nodeInfo);
+ if(!node || !this.isSelected(node)){
+ //Roo.log("not selected");
+ return; // not selected.
+ }
+ // fireevent???
+ var ns = [];
+ Roo.each(this.selections, function(s) {
+ if (s == node ) {
+ Roo.fly(node).removeClass(this.selectedClass);
+
+ return;
+ }
+ ns.push(s);
+ },this);
+
+ this.selections= ns;
+ 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);
+ },
+
+ // note - render is a standard framework call...
+ // using it for the response is really flaky... - it's called by UpdateManager normally, except when called by the XComponent/addXtype.
+ render : function(el, response){
+
+ this.clearSelections();
+ this.el.update("");
+ var o;
+ try{
+ if (response != '') {
+ 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();
},
/**
*/
enableToggle: false,
/**
- * @cfg {Mixed} menu
+ * @cfg {Roo.menu.Menu} 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,
this.hide();
}
},
-
+ /**
+ * Similar to toggle, but does not trigger event.
+ * @param {Boolean} state [required] Force a particular state
+ */
+ setPressed : function(state)
+ {
+ if(state != this.pressed){
+ if(state){
+ this.el.addClass("x-btn-pressed");
+ this.pressed = true;
+ }else{
+ this.el.removeClass("x-btn-pressed");
+ this.pressed = false;
+ }
+ }
+ },
+
/**
* If a state it passed, it becomes the pressed state otherwise the current state is toggled.
* @param {Boolean} state (optional) Force a particular state
}
},
+
+
/**
* Focus the button
*/
/**
* @class Roo.Toolbar
+ * @children Roo.Toolbar.Item Roo.Toolbar.Button Roo.Toolbar.SplitButton Roo.form.Field
* Basic Toolbar class.
* @constructor
* Creates a new Toolbar
* @cfg {Array} items
* array of button configs or elements to add (will be converted to a MixedCollection)
*/
-
+ items: false,
/**
* @cfg {String/HTMLElement/Element} container
* The id or element that will contain the toolbar
* A simple class that renders text directly into a toolbar.
* @constructor
* Creates a new TextItem
- * @param {String} text
+ * @cfg {string} text
*/
Roo.Toolbar.TextItem = function(cfg){
var text = cfg || "";
enable:Roo.emptyFn,
disable:Roo.emptyFn,
- focus:Roo.emptyFn
+ focus:Roo.emptyFn,
+ /**
+ * Shows this button
+ */
+ show: function(){
+ this.hidden = false;
+ this.el.style.display = "";
+ },
+
+ /**
+ * Hides this button
+ */
+ hide: function(){
+ this.hidden = true;
+ this.el.style.display = "none";
+ }
+
});
/**
Roo.Toolbar.Button = function(config){
Roo.Toolbar.Button.superclass.constructor.call(this, null, config);
};
-Roo.extend(Roo.Toolbar.Button, Roo.Button, {
+Roo.extend(Roo.Toolbar.Button, Roo.Button,
+{
+
+
render : function(td){
this.td = td;
Roo.Toolbar.Button.superclass.render.call(this, td);
/**
* @class Roo.PagingToolbar
* @extends Roo.Toolbar
+ * @children Roo.Toolbar.Item Roo.Toolbar.Button Roo.Toolbar.SplitButton Roo.form.Field
* A specialized toolbar that is bound to a {@link Roo.data.Store} and provides automatic paging controls.
* @constructor
* Create a new PagingToolbar
};
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)
this.loading.disable();
}
},
-
+ /**
+ * event that occurs when you click on the navigation buttons - can be used to trigger load of a grid.
+ * @param {String} which (first|prev|next|last|refresh) which button to press.
+ *
+ */
// private
onClick : function(which){
var ds = this.ds;
/**
* @class Roo.BasicDialog
* @extends Roo.util.Observable
+ * @parent none builder
* 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", {
/**
* @class Roo.LayoutDialog
* @extends Roo.BasicDialog
+ * @children Roo.ContentPanel
+ * @parent builder none
* 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):
};
Roo.extend(Roo.LayoutDialog, Roo.BasicDialog, {
+
+
+ /**
+ * @cfg {Roo.LayoutRegion} east
+ */
+ /**
+ * @cfg {Roo.LayoutRegion} west
+ */
+ /**
+ * @cfg {Roo.LayoutRegion} south
+ */
+ /**
+ * @cfg {Roo.LayoutRegion} north
+ */
+ /**
+ * @cfg {Roo.LayoutRegion} center
+ */
+ /**
+ * @cfg {Roo.Button} buttons[] Bottom buttons..
+ */
+
+
/**
* Ends update of the layout <strike>and resets display to none</strike>. Use standard beginUpdate/endUpdate on the layout.
* @deprecated
/**
* @class Roo.MessageBox
+ * @static
* Utility class for generating different styles of message boxes. The alias Roo.Msg can also be used.
* Example usage:
*<pre><code>
animEl: 'elId'
});
</code></pre>
- * @singleton
+ * @static
*/
Roo.MessageBox = function(){
var dlg, opt, mask, waitTimer;
}
}
});
+
dlg.on("hide", handleHide);
mask = dlg.mask;
dlg.addKeyListener(27, handleEsc);
d.animateTarget = null;
d.show(options.animEl);
}
+ dlg.toFront();
return this;
},
/**
* @class Roo.QuickTips
* Provides attractive and customizable tooltips for any element.
- * @singleton
+ * @static
*/
Roo.QuickTips = function(){
var el, tipBody, tipBodyText, tipTitle, tm, cfg, close, tagEls = {}, esc, removeCls = null, bdLeft, bdRight;
if(ttp){
showProc = show.defer(tm.showDelay, tm, [{
el: t,
- text: ttp,
+ text: ttp.replace(/\\n/g,'<br/>'),
width: et.getAttributeNS(ns, cfg.width),
autoHide: et.getAttributeNS(ns, cfg.hide) != "user",
title: et.getAttributeNS(ns, cfg.title),
/**
* @class Roo.tree.TreePanel
* @extends Roo.data.Tree
-
+ * @cfg {Roo.tree.TreeNode} root The root node
* @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} 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 {Object|Roo.tree.TreeEditor} editor The TreeEditor or xtype data to display when clicked.
+ * @cfg {Roo.tree.TreeLoader} loader A TreeLoader for use with this TreePanel
+ * @cfg {Roo.tree.TreeEditor} editor The TreeEditor to display when clicked.
* @cfg {String} pathSeparator The token used to separate sub-paths in path strings (defaults to '/')
* @cfg {Function} renderer DEPRECATED - use TreeLoader:create event / 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 DEPRECATED - use TreeLoader:create event / 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>
* </ul>
* @param {Object} dragOverEvent
*/
- "nodedragover" : true
+ "nodedragover" : true,
+ /**
+ * @event appendnode
+ * Fires when append node to the tree
+ * @param {Roo.tree.TreePanel} this
+ * @param {Roo.tree.TreeNode} node
+ * @param {Number} index The index of the newly appended node
+ */
+ "appendnode" : true
});
if(this.singleExpand){
},
/**
- * Returns the container element for this TreePanel
+ * 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) {
+ Roo.log("ROOT not set in tree");
+ return this;
+ }
+ 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.
+ * @param {Object} cfg Configuration
+ */
+Roo.tree.DefaultSelectionModel = function(cfg){
+ 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.tree.DefaultSelectionModel.superclass.constructor.call(this,cfg);
+};
+
+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.
+ * @param {Object} cfg Configuration
+ */
+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.tree.MultiSelectionModel.superclass.constructor.call(this,cfg);
+
+};
+
+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);
+
+ // finally support items[]
+ if (typeof(this.attributes.items) == 'undefined' || !this.attributes.items) {
+ return;
+ }
+
+
+ Roo.each(this.attributes.items, function(c) {
+ this.appendChild(Roo.factory(c,Roo.Tree));
+ }, this);
+ delete this.attributes.items;
+
+
+
+};
+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() && 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 ? (ot.enableDD || ot.enableDrag || ot.enableDrop) : false;
+ 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 && t.renderer ? t.renderer(n.attributes) : Roo.util.Format.htmlEncode(n.text);
+ if (typeof(n.attributes.html) != 'undefined') {
+ txt = n.attributes.html;
+ }
+ var tip = t && 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{
+ // this changes non-leafs into leafs if they have no children.
+ // it's not very rational behaviour..
+
+ if(!this.wasLeaf && this.node.leaf){
+ 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>
+{ success : true,
+ data : [
+
+ { 'id': 1, 'text': 'A folder Node', 'leaf': false },
+ { 'id': 2, 'text': 'A leaf Node', 'leaf': true }
+ ]
+}
+
+
+</code></pre>
+ * <br><br>
+ * The old style respose with just an array is still supported, but not recommended.
+ * <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 {String} requestMethod either GET or POST
+ * defaults to POST (due to BC)
+ * 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
+ *
+ * DEPRECATED - 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 = Roo.decode(json);
+
+ if (this.root === false && typeof(o.success) != undefined) {
+ this.root = 'data'; // the default behaviour for list like data..
+ }
+
+ if (this.root !== false && !o.success) {
+ // it's a failure condition.
+ var a = response.argument;
+ this.fireEvent("loadexception", this, a.node, response);
+ Roo.log("Load failed - should have a handler really");
+ return;
+ }
+
+
+
+ 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)
+ {
+ // should handle failure better..
+ 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",
+ scroll: true,
+
+ 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 {Object} config (used to be the tree panel.)
+ * @param {Object} oldconfig DEPRECIATED Either a prebuilt {@link Roo.form.Field} instance or a Field config object
+ *
+ * @cfg {Roo.tree.TreePanel} tree The tree to bind to.
+ * @cfg {Roo.form.TextField} field [required] The field configuration
+ *
+ *
+ */
+Roo.tree.TreeEditor = function(config, oldconfig) { // was -- (tree, config){
+ var tree = config;
+ var field;
+ if (oldconfig) { // old style..
+ field = oldconfig.events ? oldconfig : new Roo.form.TextField(oldconfig);
+ } else {
+ // new style..
+ tree = config.tree;
+ config.field = config.field || {};
+ config.field.xtype = 'TextField';
+ field = Roo.factory(config.field, Roo.form);
+ }
+ config = config || {};
+
+
+ this.addEvents({
+ /**
+ * @event beforenodeedit
+ * 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.tree.Node} node
+ */
+ "beforenodeedit" : true
+ });
+
+ //Roo.log(config);
+ Roo.tree.TreeEditor.superclass.constructor.call(this, field, config);
+
+ 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").
*/
- getEl : function(){
- return this.el;
- },
-
+ alignment: "l-l",
+ // inherit
+ autoSize: false,
/**
- * Returns the default TreeLoader for this TreePanel
+ * @cfg {Boolean} hideEl
+ * True to hide the bound element while the editor is displayed (defaults to false)
*/
- getLoader : function(){
- return this.loader;
- },
-
+ hideEl : false,
/**
- * Expand all nodes
+ * @cfg {String} cls
+ * CSS class to apply to the editor (defaults to "x-small-editor x-tree-editor")
*/
- expandAll : function(){
- this.root.expand(true);
- },
-
+ cls: "x-small-editor x-tree-editor",
/**
- * Collapse all nodes
+ * @cfg {Boolean} shim
+ * True to shim the editor if selects/iframes could be displayed beneath it (defaults to false)
*/
- collapseAll : function(){
- this.root.collapse(true);
- },
-
+ shim:false,
+ // inherit
+ shadow:"frame",
/**
- * Returns the selection model used by this TreePanel
+ * @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.
*/
- getSelectionModel : function(){
- if(!this.selModel){
- this.selModel = new Roo.tree.DefaultSelectionModel();
+ 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;
}
- return this.selModel;
+ 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, '');
+
+ return this.fireEvent('beforenodeedit', this, this.editNode);
+
},
- /**
- * 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;
+ // private
+ triggerEdit : function(node){
+ this.completeEdit();
+ this.editNode = node;
+ this.startEdit(node.ui.textNode, node.text);
},
- /**
- * 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);
+ // private
+ bindScroll : function(){
+ this.tree.getTreeEl().on('scroll', this.cancelEdit, this);
},
- /**
- * 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);
- }
+ // 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;
}
+ return true;
},
- getTreeEl : function(){
- return this.el;
+ // private
+ updateNode : function(ed, value){
+ this.tree.getTreeEl().un('scroll', this.cancelEdit, this);
+ this.editNode.setText(value);
},
- /**
- * Trigger rendering of this TreePanel
- */
- render : function(){
- if (this.innerCt) {
- return this; // stop it rendering more than once!!
+ // private
+ onHide : function(){
+ Roo.tree.TreeEditor.superclass.onHide.call(this);
+ if(this.editNode){
+ this.editNode.ui.focus();
}
-
- 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) {
- Roo.log("ROOT not set in tree");
- return this;
- }
- this.root.render();
- if(!this.rootVisible){
- this.root.renderChildren();
+ // 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();
}
- return this;
}
-});/*
+});//<Script type="text/javascript">
+/*
* Based on:
* Ext JS Library 1.1.1
* Copyright(c) 2006-2007, Ext JS, LLC.
* <script type="text/javascript">
*/
-
/**
- * @class Roo.tree.DefaultSelectionModel
- * @extends Roo.util.Observable
- * The default single selection for a TreePanel.
- * @param {Object} cfg Configuration
+ * Not documented??? - probably should be...
*/
-Roo.tree.DefaultSelectionModel = function(cfg){
- 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.tree.DefaultSelectionModel.superclass.constructor.call(this,cfg);
-};
-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);
- },
+Roo.tree.ColumnNodeUI = Roo.extend(Roo.tree.TreeNodeUI, {
+ //focus: Roo.emptyFn, // prevent odd scrolling behavior
- onNodeClick : function(node, e){
- if (e.ctrlKey && this.selNode == node) {
- this.unselect(node);
- return;
+ 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(""));
}
- 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);
+ 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++;
}
- return node;
- },
-
- /**
- * Deselect a node.
- * @param {TreeNode} node The node to unselect
- */
- unselect : function(node){
- if(this.selNode == node){
- this.clearSelections();
- }
+ this.anchor = cs[index];
+
+ this.textNode = cs[index].firstChild;
+
+ //el.on("click", this.onClick, this);
+ //el.on("dblclick", this.onDblClick, this);
+
+
+ // console.log(this);
},
-
- /**
- * Clear all selections
- */
- clearSelections : function(){
- var n = this.selNode;
- if(n){
- n.ui.onSelectedChange(false);
- this.selNode = null;
- this.fireEvent("selectionchange", this, null);
+ 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");
}
- return n;
- },
-
- /**
- * Get the selected node
- * @return {TreeNode} The selected node
- */
- getSelectedNode : function(){
- return this.selNode;
+
+ el.on("click", this.onClick, this);
+ el.on("dblclick", this.onDblClick, this);
+ el.on("contextmenu", this.onContextMenu, this);
+
},
- /**
- * 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);
+ /*onSelectedChange : function(state){
+ if(state){
+ this.focus();
+ this.addClass("x-tree-selected");
+ }else{
+ //this.blur();
+ this.removeClass("x-tree-selected");
}
- 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;
+ },*/
+ addClass : function(cls){
+ if(this.elRow){
+ Roo.fly(this.elRow).addClass(cls);
}
- 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;
+
+
+ removeClass : function(cls){
+ if(this.elRow){
+ Roo.fly(this.elRow).removeClass(cls);
}
- 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;
- };
}
-});
+
+
+
+});//<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.MultiSelectionModel
- * @extends Roo.util.Observable
- * Multi selection for a TreePanel.
- * @param {Object} cfg Configuration
+ * @class Roo.tree.ColumnTree
+ * @extends Roo.tree.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.MultiSelectionModel = function(){
- this.selNodes = [];
- this.selMap = {};
+Roo.tree.ColumnTree = function(el, config)
+{
+ Roo.tree.ColumnTree.superclass.constructor.call(this, el , config);
this.addEvents({
- /**
- * @event selectionchange
- * Fires when the selected nodes change
- * @param {MultiSelectionModel} this
- * @param {Array} nodes Array of the selected nodes
+ /**
+ * @event resize
+ * Fire this event on a container when it resizes
+ * @param {int} w Width
+ * @param {int} h Height
*/
- "selectionchange" : true
- });
- Roo.tree.MultiSelectionModel.superclass.constructor.call(this,cfg);
-
+ "resize" : true
+ });
+ this.on('resize', this.onResize, this);
};
-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);
- },
+Roo.extend(Roo.tree.ColumnTree, Roo.tree.TreePanel, {
+ //lines:false,
- 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;
- },
+ borderWidth: Roo.isBorderBox ? 0 : 2,
+ headEls : false,
- /**
- * 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);
+ 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);
+
+
},
-
- /**
- * 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);
+ 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;
+
}
- },
-
- /**
- * 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,
+ if (expEl) {
+ expEl.setWidth( ((w - totalWidth)-this.borderWidth - 20));
+ }
+ this.headers.setWidth(w-20);
- selectPrevious : Roo.tree.DefaultSelectionModel.prototype.selectPrevious
-});/*
+
+
+
+ }
+});
+/*
* Based on:
* Ext JS Library 1.1.1
* Copyright(c) 2006-2007, Ext JS, LLC.
*/
/**
- * @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)
+ * @class Roo.menu.Menu
+ * @extends Roo.util.Observable
+ * @children Roo.menu.Item Roo.menu.Separator Roo.menu.TextItem
+ * 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
- * @param {Object/String} attributes The attributes/config for the node or just a string with the text for the node
+ * Creates a new Menu
+ * @param {Object} config Configuration options
*/
-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;
-
+Roo.menu.Menu = function(config){
+
+ Roo.menu.Menu.superclass.constructor.call(this, config);
+
+ this.id = this.id || Roo.id();
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 beforeshow
+ * Fires before this menu is displayed
+ * @param {Roo.menu.Menu} this
+ */
+ beforeshow : true,
/**
- * @event collapse
- * Fires when this node is collapsed
- * @param {Node} this This node
- */
- "collapse" : true,
+ * @event beforehide
+ * Fires before this menu is hidden
+ * @param {Roo.menu.Menu} this
+ */
+ beforehide : 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 show
+ * Fires after this menu is displayed
+ * @param {Roo.menu.Menu} this
+ */
+ show : 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 hide
+ * Fires after this menu is hidden
+ * @param {Roo.menu.Menu} this
+ */
+ hide : true,
/**
- * @event click
- * Fires when this node is clicked
- * @param {Node} this This node
- * @param {Roo.EventObject} e The event object
- */
- "click":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 dblclick
- * Fires when this node is double clicked
- * @param {Node} this This node
- * @param {Roo.EventObject} e The event object
- */
- "dblclick":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 contextmenu
- * Fires when this node is right clicked
- * @param {Node} this This node
- * @param {Roo.EventObject} e The event object
- */
- "contextmenu":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 beforechildrenrendered
- * Fires right before the child nodes for this node are rendered
- * @param {Node} this This node
- */
- "beforechildrenrendered":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
});
-
- var uiClass = this.attributes.uiProvider || Roo.tree.TreeNodeUI;
-
- /**
- * Read-only. The UI for this node
- * @type TreeNodeUI
- */
- this.ui = new uiClass(this);
-
- // finally support items[]
- if (typeof(this.attributes.items) == 'undefined' || !this.attributes.items) {
- return;
+ if (this.registerMenu) {
+ Roo.menu.MenuMgr.register(this);
}
-
- Roo.each(this.attributes.items, function(c) {
- this.appendChild(Roo.factory(c,Roo.Tree));
- }, this);
- delete this.attributes.items;
-
-
-
+ var mis = this.items;
+ this.items = new Roo.util.MixedCollection();
+ if(mis){
+ this.add.apply(this, mis);
+ }
};
-Roo.extend(Roo.tree.TreeNode, Roo.data.Node, {
- preventHScroll: true,
+
+Roo.extend(Roo.menu.Menu, Roo.util.Observable, {
/**
- * Returns true if this node is expanded
- * @return {Boolean}
+ * @cfg {Number} minWidth The minimum width of the menu in pixels (defaults to 120)
*/
- isExpanded : function(){
- return this.expanded;
- },
-
+ minWidth : 120,
/**
- * Returns the UI object for this node
- * @return {TreeNodeUI}
+ * @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")
*/
- getUI : function(){
- return this.ui;
+ 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"});
+ //disabling touch- as it's causing issues ..
+ //ul.on(Roo.isTouch ? 'touchstart' : 'click' , this.onClick, this);
+ ul.on('click' , this.onClick, this);
+
+
+ ul.on("mouseover", this.onMouseOver, this);
+ ul.on("mouseout", this.onMouseOut, this);
+ this.items.each(function(item){
+ if (item.hidden) {
+ return;
+ }
+
+ 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 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);
+ // private
+ autoWidth : function(){
+ var el = this.el, ul = this.ul;
+ if(!el){
+ return;
}
- if(this.rendered){
- this.renderIndent(true, true);
+ 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 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);
- }
+ // private
+ delayAutoWidth : function(){
if(this.rendered){
- this.renderIndent(true, true);
+ if(!this.awTask){
+ this.awTask = new Roo.util.DelayedTask(this.autoWidth, this);
+ }
+ this.awTask.delay(20);
}
},
- // 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();
+ // 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);
}
- 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();
+ // private
+ onClick : function(e){
+ Roo.log("menu.onClick");
+ var t = this.findTargetItem(e);
+ if(!t){
+ return;
}
- if(!this.firstChild) {
- this.childrenRendered = false;
+ Roo.log(e);
+ if (Roo.isTouch && e.type == 'touchstart' && t.menu && !t.disabled) {
+ if(t == this.activeItem && t.shouldDeactivate(e)){
+ this.activeItem.deactivate();
+ delete this.activeItem;
+ return;
+ }
+ if(t.canActivate){
+ this.setActiveItem(t, true);
+ }
+ return;
+
+
}
- return node;
+
+ t.onClick(e);
+ this.fireEvent("click", this, t, e);
},
- // private override
- insertBefore : function(node, refNode){
- var newNode = Roo.tree.TreeNode.superclass.insertBefore.apply(this, arguments);
- if(newNode && refNode && this.childrenRendered){
- node.render();
+ // 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();
}
- 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);
+ // 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;
+ }
}
- this.fireEvent("textchange", this, text, oldText);
+ return false;
},
- /**
- * Triggers selection of this node
- */
- select : function(){
- this.getOwnerTree().getSelectionModel().select(this);
+ // 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);
},
- /**
- * Triggers deselection of this node
- */
- unselect : function(){
- this.getOwnerTree().getSelectionModel().unselect(this);
+ // 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);
},
/**
- * Returns true if this node is selected
- * @return {Boolean}
+ * Read-only. Returns true if the menu is currently displayed, else false.
+ * @type Boolean
*/
- isSelected : function(){
- return this.getOwnerTree().getSelectionModel().isSelected(this);
+ isVisible : function(){
+ return this.el && !this.hidden;
},
/**
- * 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.
+ * 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)
*/
- 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);
+ show : function(el, pos, parentMenu){
+ this.parentMenu = parentMenu;
+ if(!this.el){
+ this.render();
}
- },
-
- isHiddenRoot : function(){
- return this.isRoot && !this.getOwnerTree().rootVisible;
+ this.fireEvent("beforeshow", this);
+ this.showAt(this.el.getAlignToXY(el, pos || this.defaultAlign), parentMenu, false);
},
/**
- * Collapse this node.
- * @param {Boolean} deep (optional) True to collapse all children as well
- * @param {Boolean} anim (optional) false to cancel the default animation
+ * 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)
*/
- 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);
- }
+ showAt : function(xy, parentMenu, /* private: */_e){
+ this.parentMenu = parentMenu;
+ if(!this.el){
+ this.render();
}
- if(deep === true){
- var cs = this.childNodes;
- for(var i = 0, len = cs.length; i < len; i++) {
- cs[i].collapse(true, false);
- }
+ 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);
},
- // private
- delayedExpand : function(delay){
- if(!this.expandProcId){
- this.expandProcId = this.expand.defer(delay, this);
+ focus : function(){
+ if(!this.hidden){
+ this.doFocus.defer(50, this);
}
},
- // private
- cancelExpand : function(){
- if(this.expandProcId){
- clearTimeout(this.expandProcId);
+ doFocus : function(){
+ if(!this.hidden){
+ this.focusEl.focus();
}
- this.expandProcId = false;
},
/**
- * Toggles expanded/collapsed state of the node
+ * Hides this menu and optionally all parent menus
+ * @param {Boolean} deep (optional) True to hide all parent menus recursively, if any (defaults to false)
*/
- toggle : function(){
- if(this.expanded){
- this.collapse();
- }else{
- this.expand();
+ 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);
}
},
/**
- * 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));
- },
+ * 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();
- /**
- * Expand all child nodes
- * @param {Boolean} deep (optional) true if the child nodes should also expand their child nodes
+// 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
*/
- expandChildNodes : function(deep){
- var cs = this.childNodes;
- for(var i = 0, len = cs.length; i < len; i++) {
- cs[i].expand(deep);
+ 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;
},
/**
- * Collapse all child nodes
- * @param {Boolean} deep (optional) true if the child nodes should also collapse their child nodes
+ * Returns this menu's underlying {@link Roo.Element} object
+ * @return {Roo.Element} The element
*/
- collapseChildNodes : function(deep){
- var cs = this.childNodes;
- for(var i = 0, len = cs.length; i < len; i++) {
- cs[i].collapse(deep);
+ getEl : function(){
+ if(!this.el){
+ this.render();
}
+ return this.el;
},
/**
- * Disables this node
+ * Adds a separator bar to the menu
+ * @return {Roo.menu.Item} The menu item that was added
*/
- 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);
+ addSeparator : function(){
+ return this.addItem(new Roo.menu.Separator());
},
/**
- * Enables this node
+ * 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
*/
- 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);
- }
- }
+ addElement : function(el){
+ return this.addItem(new Roo.menu.BaseItem(el));
},
- // 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
+ * 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
*/
-};
-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;
+ 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();
}
- 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;
+ 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);
}
}
- Roo.tree.AsyncTreeNode.superclass.expand.call(this, deep, anim, callback);
+ return this.addItem(config);
},
-
+
/**
- * Returns true if this node is currently loading
- * @return {Boolean}
+ * 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
*/
- 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);
+ addText : function(text){
+ return this.addItem(new Roo.menu.TextItem({ text : text }));
},
-
+
/**
- * Returns true if this node has been loaded
- * @return {Boolean}
+ * 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
*/
- isLoaded : function(){
- return this.loaded;
- },
-
- hasChildNodes : function(){
- if(!this.isLeaf() && !this.loaded){
- return true;
- }else{
- return Roo.tree.AsyncTreeNode.superclass.hasChildNodes.call(this);
+ 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;
},
/**
- * Trigger a reload for this node
- * @param {Function} callback
+ * Removes an {@link Roo.menu.Item} from the menu and destroys the object
+ * @param {Roo.menu.Item} item The menu item to remove
*/
- reload : function(callback){
- this.collapse(false, false);
- while(this.firstChild){
- this.removeChild(this.firstChild);
+ 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);
}
- this.childrenRendered = false;
- this.loaded = false;
- if(this.isHiddenRoot()){
- this.expanded = false;
+ }
+});
+
+// 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;
}
- this.expand(false, false, callback);
}
});/*
* Based on:
*/
/**
- * @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.
+ * @class Roo.menu.MenuMgr
+ * Provides a common registry of all menu items on a page so that they can be easily accessed by id.
+ * @static
*/
-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");
- },
+Roo.menu.MenuMgr = function(){
+ var menus, active, groups = {}, attached = false, lastShow = new Date();
- afterLoad : function(){
- this.removeClass("x-tree-node-loading");
- },
+ // 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();
+ }
+ });
+ }
- onTextChange : function(node, text, oldText){
- if(this.rendered){
- this.textNode.innerHTML = text;
- }
- },
+ // private
+ function hideAll(){
+ if(active && active.length > 0){
+ var c = active.clone();
+ c.each(function(m){
+ m.hide();
+ });
+ }
+ }
- onDisableChange : function(node, state){
- this.disabled = state;
- if(state){
- this.addClass("x-tree-node-disabled");
- }else{
- this.removeClass("x-tree-node-disabled");
- }
- },
+ // private
+ function onHide(m){
+ active.remove(m);
+ if(active.length < 1){
+ Roo.get(document).un("mousedown", onMouseDown);
+ attached = false;
+ }
+ }
- onSelectedChange : function(state){
- if(state){
- this.focus();
- this.addClass("x-tree-selected");
- }else{
- //this.blur();
- this.removeClass("x-tree-selected");
- }
- },
+ // 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);
+ }
+ }
- 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);
- }
- },
+ // private
+ function onBeforeHide(m){
+ if(m.activeChild){
+ m.activeChild.hide();
+ }
+ if(m.autoHideTimer){
+ clearTimeout(m.autoHideTimer);
+ delete m.autoHideTimer;
+ }
+ }
- addClass : function(cls){
- if(this.elNode){
- Roo.fly(this.elNode).addClass(cls);
- }
- },
+ // private
+ function onBeforeShow(m){
+ var pm = m.parentMenu;
+ if(!pm && !m.allowOtherMenus){
+ hideAll();
+ }else if(pm && pm.activeChild && active != m){
+ pm.activeChild.hide();
+ }
+ }
- removeClass : function(cls){
- if(this.elNode){
- Roo.fly(this.elNode).removeClass(cls);
- }
- },
+ // private
+ function onMouseDown(e){
+ if(lastShow.getElapsed() > 50 && active.length > 0 && !e.getTarget(".x-menu")){
+ hideAll();
+ }
+ }
- remove : function(){
- if(this.rendered){
- this.holder = document.createElement("div");
- this.holder.appendChild(this.wrap);
- }
- },
+ // 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);
+ }
+ }
+ }
+ }
- fireEvent : function(){
- return this.node.fireEvent.apply(this.node, arguments);
- },
+ return {
- initEvents : function(){
- this.node.on("move", this.onMove, this);
- var E = Roo.EventManager;
- var a = this.anchor;
+ /**
+ * Hides all menus that are currently visible
+ */
+ hideAll : function(){
+ hideAll();
+ },
- var el = Roo.fly(a, '_treeui');
+ // 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);
+ }
+ },
- if(Roo.isOpera){ // opera render bug ignores the CSS
- el.setStyle("text-decoration", "none");
- }
+ /**
+ * 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);
+ }
+ },
- el.on("click", this.onClick, this);
- el.on("dblclick", this.onDblClick, this);
+ // 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);
+ }
+ },
- if(this.checkbox){
- Roo.EventManager.on(this.checkbox,
- Roo.isIE ? 'click' : 'change', this.onCheckChange, this);
- }
+ // private
+ registerCheckable : function(menuItem){
+ var g = menuItem.group;
+ if(g){
+ if(!groups[g]){
+ groups[g] = [];
+ }
+ groups[g].push(menuItem);
+ menuItem.on("beforecheckchange", onBeforeCheck);
+ }
+ },
- el.on("contextmenu", this.onContextMenu, this);
+ // 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">
+ */
+
- 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);
+/**
+ * @class Roo.menu.BaseItem
+ * @extends Roo.Component
+ * @abstract
+ * 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);
- 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
- });
- }
- },
+ 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
+ });
- getDDHandles : function(){
- return [this.iconNode, this.textNode];
- },
+ if(this.handler){
+ this.on("click", this.handler, this.scope, true);
+ }
+};
- hide : function(){
- if(this.rendered){
- this.wrap.style.display = "none";
- }
- },
+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 {Boolean} hidden True to prevent creation of this menu item (defaults to false)
+ */
+ hidden: 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,
- show : function(){
- if(this.rendered){
- this.wrap.style.display = "";
- }
+ // 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;
},
- onContextMenu : function(e){
- if (this.node.hasListener("contextmenu") || this.node.getOwnerTree().hasListener("contextmenu")) {
- e.preventDefault();
- this.focus();
- this.fireEvent("contextmenu", this.node, e);
- }
+ // private
+ onRender : function(container, position){
+ this.el = Roo.get(this.el);
+ container.dom.appendChild(this.el.dom);
},
+ // private
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);
+ if(!this.disabled && this.fireEvent("click", this, e) !== false
+ && this.parentMenu.fireEvent("itemclick", this, e) !== false){
+ this.handleClick(e);
}else{
e.stopEvent();
}
},
- onDblClick : function(e){
- e.preventDefault();
+ // private
+ activate : function(){
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();
+ 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;
},
- 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 = "";
+ // private
+ deactivate : function(){
+ this.container.removeClass(this.activeClass);
+ this.fireEvent("deactivate", this);
},
- 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){}
- }
+ // private
+ shouldDeactivate : function(e){
+ return !this.region || !this.region.contains(e.getPoint());
},
- toggleCheck : function(value){
- var cb = this.checkbox;
- if(cb){
- cb.checked = (value === undefined ? !cb.checked : value);
+ // private
+ handleClick : function(e){
+ if(this.hideOnClick){
+ this.parentMenu.hide.defer(this.hideDelay, this.parentMenu, [true]);
}
},
- blur : function(){
- try{
- this.anchor.blur();
- }catch(e){}
+ // private
+ expandMenu : function(autoActivate){
+ // do nothing
},
- 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
- });
- },
+ // 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
+ * @abstract
+ * 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,
- highlight : function(){
- var tree = this.node.getOwnerTree();
- Roo.fly(this.wrap).highlight(
- tree.hlColor || "C3DAF9",
- {endColor: tree.hlBaseColor}
- );
+ // private
+ onRender : function(container, position){
+ this.component.render(container);
+ this.el = this.component.getEl();
},
- collapse : function(){
- this.updateExpandIcon();
- this.ctNode.style.display = "none";
+ // private
+ activate : function(){
+ if(this.disabled){
+ return false;
+ }
+ this.component.focus();
+ this.fireEvent("activate", this);
+ return true;
},
- 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
- });
+ // private
+ deactivate : function(){
+ this.fireEvent("deactivate", this);
},
- getContainer : function(){
- return this.ctNode;
+ // private
+ disable : function(){
+ this.component.disable();
+ Roo.menu.Adapter.superclass.disable.call(this);
},
- getEl : function(){
- return this.wrap;
- },
+ // 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">
+ */
- appendDDGhost : function(ghostNode){
- ghostNode.appendChild(this.elNode.cloneNode(true));
- },
+/**
+ * @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);
+};
- getDDRepairXY : function(){
- return Roo.lib.Dom.getXY(this.iconNode);
- },
+Roo.extend(Roo.menu.TextItem, Roo.menu.BaseItem, {
+ /**
+ * @cfg {String} 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(){
- this.render();
- },
+ 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">
+ */
- render : function(bulkRender){
- var n = this.node, a = n.attributes;
- var targetNode = n.parentNode ?
- n.parentNode.ui.getContainer() : n.ownerTree.innerCt.dom;
+/**
+ * @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);
+};
- if(!this.rendered){
- this.rendered = true;
+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,
- this.renderElements(n, a, targetNode, bulkRender);
+ // 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 {Roo.menu.Menu} menu
+ * A Sub menu
+ */
+ /**
+ * @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,
- 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);
- }
+ // 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);
},
- 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);
- if (typeof(n.attributes.html) != 'undefined') {
- txt = n.attributes.html;
- }
- 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(""));
+ /**
+ * 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 = '';
}
-
- 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++;
+ 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();
}
- this.anchor = cs[index];
- this.textNode = cs[index].firstChild;
},
- getAnchor : function(){
- return this.anchor;
+ // 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);
},
- getTextEl : function(){
- return this.textNode;
+ // private
+ activate : function(autoExpand){
+ if(Roo.menu.Item.superclass.activate.apply(this, arguments)){
+ this.focus();
+ if(autoExpand){
+ this.expandMenu();
+ }
+ }
+ return true;
},
- getIconEl : function(){
- return this.iconNode;
+ // 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;
},
- isChecked : function(){
- return this.checkbox ? this.checkbox.checked : false;
+ // private
+ deactivate : function(){
+ Roo.menu.Item.superclass.deactivate.apply(this, arguments);
+ this.hideMenu();
},
- 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{
- // this changes non-leafs into leafs if they have no children.
- // it's not very rational behaviour..
-
- if(!this.wasLeaf && this.node.leaf){
- 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;
+ // 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);
}
}
},
- 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("");
+ // 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);
}
- 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;
+ // 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);
}
},
- collapse : function(){
- },
- expand : function(){
+
+ // private
+ deferHide : function(){
+ delete this.hideTimer;
+ this.menu.hide();
}
});/*
* Based on:
* 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>
-{ success : true,
- data : [
-
- { 'id': 1, 'text': 'A folder Node', 'leaf': false },
- { 'id': 2, 'text': 'A leaf Node', 'leaf': true }
- ]
-}
-
-
-</code></pre>
- * <br><br>
- * The old style respose with just an array is still supported, but not recommended.
- * <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.
+ * @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 Treeloader.
- * @param {Object} config A config object containing config properties.
+ * Creates a new CheckItem
+ * @param {Object} config Configuration options
*/
-Roo.tree.TreeLoader = function(config){
- this.baseParams = {};
- this.requestMethod = "POST";
- Roo.apply(this, config);
-
+Roo.menu.CheckItem = function(config){
+ Roo.menu.CheckItem.superclass.constructor.call(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.
+ * @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
*/
- loadexception : true,
+ "beforecheckchange" : 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)
+ * @event checkchange
+ * Fires after the checked value has been set
+ * @param {Roo.menu.CheckItem} this
+ * @param {Boolean} checked The checked value that was set
*/
- create : true
+ "checkchange" : true
});
-
- Roo.tree.TreeLoader.superclass.constructor.call(this);
+ if(this.checkHandler){
+ this.on('checkchange', this.checkHandler, this.scope);
+ }
};
-
-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 {String} requestMethod either GET or POST
- * defaults to POST (due to BC)
- * to be loaded.
- */
- /**
- * @cfg {Object} baseParams (optional) An object containing properties which
- * specify HTTP parameters to be passed to each request for child nodes.
- */
+Roo.extend(Roo.menu.CheckItem, Roo.menu.Item, {
/**
- * @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 {String} group
+ * All check items with the same group name will automatically be grouped into a single-select
+ * radio button group (defaults to '')
+ */
/**
- * @cfg {Object} uiProviders (optional) An object containing properties which
- *
- * DEPRECATED - 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 {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 {Boolean} clearOnLoad (optional) Default to true. Remove previously existing
- * child nodes before loading.
- */
- clearOnLoad : true,
+ * @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 {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
+ * @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.
*/
- 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);
- }
- },
+ checked: false,
- 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("");
- },
+ // private
+ ctype: "Roo.menu.CheckItem",
- 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();
- }
+ // private
+ onRender : function(c){
+ Roo.menu.CheckItem.superclass.onRender.apply(this, arguments);
+ if(this.group){
+ this.el.addClass(this.groupClass);
}
- },
-
- isLoading : function(){
- return this.transId ? true : false;
- },
-
- abort : function(){
- if(this.isLoading()){
- Roo.Ajax.abort(this.transId);
+ Roo.menu.MenuMgr.registerCheckable(this);
+ if(this.checked){
+ this.checked = false;
+ this.setChecked(true, true);
}
},
// 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'];
+ destroy : function(){
+ if(this.rendered){
+ Roo.menu.MenuMgr.unregisterCheckable(this);
}
-
- 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));
+ Roo.menu.CheckItem.superclass.destroy.apply(this, arguments);
},
- processResponse : function(response, node, callback)
- {
- var json = response.responseText;
- try {
-
- var o = Roo.decode(json);
-
- if (this.root === false && typeof(o.success) != undefined) {
- this.root = 'data'; // the default behaviour for list like data..
- }
-
- if (this.root !== false && !o.success) {
- // it's a failure condition.
- var a = response.argument;
- this.fireEvent("loadexception", this, a.node, response);
- Roo.log("Load failed - should have a handler really");
- return;
- }
-
-
-
- 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);
- }
+ /**
+ * 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");
}
- if(typeof callback == "function"){
- callback(this, node);
+ this.checked = state;
+ if(suppressEvent !== true){
+ this.fireEvent("checkchange", this, state);
}
- }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);
- },
+ // 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");
+ });
- handleFailure : function(response)
- {
- // should handle failure better..
- this.transId = false;
- var a = response.argument;
- this.fireEvent("loadexception", this, a.node, response);
- if(typeof a.callback == "function"){
- a.callback(this, a.node);
- }
+ 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:
* 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.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)
+ * @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.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.
+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
*/
- 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);
- },
-
+ this.picker = di.picker;
/**
- * 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)
+ * @event select
+ * @param {DatePicker} picker
+ * @param {Date} date
*/
- 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);
- }
- }
- }
+ this.relayEvents(di, ["select"]);
+ this.on('beforeshow', function(){
+ if(this.picker){
+ this.picker.hideMonthPicker(false);
}
- },
+ }, 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);
/**
- * Clears the current filter. Note: with the "remove" option
- * set a filter cannot be cleared.
+ * The {@link Roo.ColorPalette} instance for this ColorMenu
+ * @type ColorPalette
*/
- 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 = {};
- }
+ 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.
* <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
+ * @class Roo.form.TextItem
+ * @extends Roo.BoxComponent
+ * Base class for form fields that provides default event handling, sizing, value handling and other functionality.
* @constructor
- * @param {TreePanel} tree
- * @param {Object} config
+ * Creates a new TextItem
+ * @param {Object} config Configuration options
*/
-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.form.TextItem = function(config){
+ Roo.form.TextItem.superclass.constructor.call(this, config);
};
-Roo.tree.TreeSorter.prototype = {
- doSort : function(node){
- node.sort(this.sortFn);
- },
+Roo.extend(Roo.form.TextItem, Roo.BoxComponent, {
- compareNodes : function(n1, n2){
- return (n1.text.toUpperCase() > n2.text.toUpperCase() ? 1 : -1);
+ /**
+ * @cfg {String} tag the tag for this item (default div)
+ */
+ tag : 'div',
+ /**
+ * @cfg {String} html the content for this item
+ */
+ html : '',
+
+ getAutoCreate : function()
+ {
+ var cfg = {
+ id: this.id,
+ tag: this.tag,
+ html: this.html,
+ cls: 'x-form-item'
+ };
+
+ return cfg;
+
},
- updateSort : function(tree, node){
- if(node.childrenRendered){
- this.doSort.defer(1, this, [node]);
+ onRender : function(ct, position)
+ {
+ Roo.form.TextItem.superclass.onRender.call(this, ct, position);
+
+ if(!this.el){
+ var cfg = this.getAutoCreate();
+ if(!cfg.name){
+ cfg.name = typeof(this.name) == 'undefined' ? this.id : this.name;
+ }
+ if (!cfg.name.length) {
+ delete cfg.name;
+ }
+ this.el = ct.createChild(cfg, position);
}
+ },
+ /*
+ * setHTML
+ * @param {String} html update the Contents of the element.
+ */
+ setHTML : function(html)
+ {
+ this.fieldEl.dom.innerHTML = html;
}
-};/*
+
+});/*
* Based on:
* Ext JS Library 1.1.1
* Copyright(c) 2006-2007, Ext JS, LLC.
* 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 = {};
+
+/**
+ * @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.tree.TreeDropZone, Roo.dd.DropZone, {
- ddGroup : "TreeDD",
- scroll: true,
-
- expandDelay : 1000,
-
- expandNode : function(node){
- if(node.hasChildNodes() && !node.isExpanded()){
- node.expand(false, null, this.triggerCacheRefresh.createDelegate(this));
- }
- },
+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: "new-password"},
+ /**
+ * @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,
- queueExpand : function(node){
- this.expandProcId = this.expandNode.defer(this.expandDelay, this, [node]);
+ /**
+ * @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
+ loadedValue : false,
+
+
+ // 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
+ });
},
-
- cancelExpand : function(){
- if(this.expandProcId){
- clearTimeout(this.expandProcId);
- this.expandProcId = false;
- }
+
+ /**
+ * 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 || '');
},
-
- 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;
+
+ // 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 = typeof(this.name) == 'undefined' ? this.id : this.name;
+ }
+ if (!cfg.name.length) {
+ delete cfg.name;
+ }
+ if(this.inputType){
+ cfg.type = this.inputType;
+ }
+ this.el = ct.createChild(cfg, position);
}
- // 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 type = this.el.dom.type;
+ if(type){
+ if(type == 'password'){
+ type = 'text';
+ }
+ this.el.addClass('x-form-'+type);
}
- 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";
+ if(this.readOnly){
+ this.el.dom.readOnly = true;
}
- var noBelow = false;
- if(!this.allowParentInsert){
- noBelow = tn.hasChildNodes() && tn.isExpanded();
+ if(this.tabIndex !== undefined){
+ this.el.dom.setAttribute('tabIndex', this.tabIndex);
}
- 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";
+
+ 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);
}
},
-
- onNodeEnter : function(n, dd, e, data)
+
+ /**
+ * Returns true if this field has been changed since it was originally loaded and is not disabled.
+ * DEPRICATED - it never worked well - use hasChanged/resetHasChanged.
+ */
+ isDirty : function() {
+ if(this.disabled) {
+ return false;
+ }
+ return String(this.getValue()) !== String(this.originalValue);
+ },
+
+ /**
+ * stores the current value in loadedValue
+ */
+ resetHasChanged : function()
{
- this.cancelExpand();
+ this.loadedValue = String(this.getValue());
},
-
- onNodeOver : function(n, dd, e, data)
+ /**
+ * checks the current value against the 'loaded' value.
+ * Note - will return false if 'resetHasChanged' has not been called first.
+ */
+ hasChanged : function()
{
-
- 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();
+ if(this.disabled || this.readOnly) {
+ return false;
}
-
- // 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;
+ return this.loadedValue !== false && String(this.getValue()) !== this.loadedValue;
},
- 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;
+
+ // 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);
}
- // 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;
+ },
+
+ /**
+ * Resets the current field value to the originally loaded value and clears any validation messages
+ */
+ reset : function(){
+ this.setValue(this.resetValue);
+ this.originalValue = this.getValue();
+ 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();
+ this.resetValue = this.getValue();
+ },
+
+ // private
+ onFocus : function(){
+ if(!Roo.isOpera && this.focusClass){ // don't touch in Opera
+ this.el.addClass(this.focusClass);
}
- // 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);
+ if(!this.hasFocus){
+ this.hasFocus = true;
+ this.startValue = this.getValue();
+ this.fireEvent("focus", this);
}
- return true;
},
-
- completeDrop : function(de){
- var ns = de.dropNode, p = de.point, t = de.target;
- if(!(ns instanceof Array)){
- ns = [ns];
+
+ beforeBlur : Roo.emptyFn,
+
+ // private
+ onBlur : function(){
+ this.beforeBlur();
+ if(!Roo.isOpera && this.focusClass){ // don't touch in Opera
+ this.el.removeClass(this.focusClass);
}
- 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);
- }
+ this.hasFocus = false;
+ if(this.validationEvent !== false && this.validateOnBlur && this.validationEvent != "blur"){
+ this.validate();
}
- n.ui.focus();
- if(this.tree.hlDrop){
- n.ui.highlight();
+ var v = this.getValue();
+ if(String(v) !== String(this.startValue)){
+ this.fireEvent('change', this, v, this.startValue);
}
- t.ui.endDrop();
- this.tree.fireEvent("nodedrop", de);
+ this.fireEvent("blur", this);
},
-
- afterNodeMoved : function(dd, data, e, targetNode, dropNode){
- if(this.tree.hlDrop){
- dropNode.ui.focus();
- dropNode.ui.highlight();
+
+ /**
+ * 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;
}
- this.tree.fireEvent("nodedrop", this.tree, targetNode, data, dd, e);
- },
-
- getTree : function(){
- return this.tree;
+ var restore = this.preventMark;
+ this.preventMark = preventMark === true;
+ var v = this.validateValue(this.processValue(this.getRawValue()));
+ this.preventMark = restore;
+ return v;
},
-
- 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";
+
+ /**
+ * 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;
},
-
- beforeDragDrop : function(target, e, id){
- this.cancelExpand();
+
+ processValue : function(value){
+ return value;
+ },
+
+ // private
+ // Subclasses should provide the validation implementation by overriding this
+ validateValue : function(value){
return true;
},
-
- afterRepair : function(data){
- if(data && Roo.enableFx){
- data.node.ui.highlight();
+
+ /**
+ * Mark this field as invalid
+ * @param {String} msg The validation message
+ */
+ markInvalid : function(msg){
+ if(!this.rendered || this.preventMark){ // not rendered
+ return;
}
- this.hideProxy();
- }
-
-});
+
+ var obj = (typeof(this.combo) != 'undefined') ? this.combo : this; // fix the combox array!!
+
+ obj.el.addClass(this.invalidClass);
+ msg = msg || this.invalidText;
+ switch(this.msgTarget){
+ case 'qtip':
+ obj.el.dom.qtip = msg;
+ obj.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);
+ },
-}
-/*
- * 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">
- */
-
+ // private
+ alignErrorIcon : function(){
+ this.errorIcon.alignTo(this.el, 'tl-tr', [2, 0]);
+ },
-if(Roo.dd.DragZone){
-Roo.tree.TreeDragZone = function(tree, config){
- Roo.tree.TreeDragZone.superclass.constructor.call(this, tree.getTreeEl(), config);
- this.tree = tree;
-};
+ /**
+ * Clear any invalid styles/messages for this field
+ */
+ clearInvalid : function(){
+ if(!this.rendered || this.preventMark){ // not rendered
+ return;
+ }
+ var obj = (typeof(this.combo) != 'undefined') ? this.combo : this; // fix the combox array!!
+
+ obj.el.removeClass(this.invalidClass);
+ switch(this.msgTarget){
+ case 'qtip':
+ obj.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);
+ },
-Roo.extend(Roo.tree.TreeDragZone, Roo.dd.DragZone, {
- ddGroup : "TreeDD",
-
- onBeforeDrag : function(data, e){
- var n = data.node;
- return n && n.draggable && !n.disabled;
+ /**
+ * 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();
+
+ return v;
},
-
-
- 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);
+
+ /**
+ * 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();
+
+ return v;
},
-
- getRepairXY : function(e, data){
- return data.node.ui.getDDRepairXY();
+
+ /**
+ * 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);
},
-
- onEndDrag : function(data, e){
- this.tree.fireEvent("enddrag", this.tree, data.node, e);
-
-
+
+ /**
+ * 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();
+ }
},
-
- onValidDrop : function(dd, e, id){
- this.tree.fireEvent("dragdrop", this.tree, this.dragData.node, dd, e);
- this.hideProxy();
+
+ 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;
},
-
- beforeInvalidDrop : function(e, id){
- // this scrolls the original position back into view
- var sm = this.tree.getSelectionModel();
- sm.clearSelections();
- sm.select(this.dragData.node);
+
+ 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.
* 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.
+ * @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
- * @param {Object} config (used to be the tree panel.)
- * @param {Object} oldconfig DEPRECIATED Either a prebuilt {@link Roo.form.Field} instance or a Field config object
- *
- * @cfg {Roo.tree.TreePanel} tree The tree to bind to.
- * @cfg {Roo.form.TextField|Object} field The field configuration
- *
- *
+ * Creates a new TextField
+ * @param {Object} config Configuration options
*/
-Roo.tree.TreeEditor = function(config, oldconfig) { // was -- (tree, config){
- var tree = config;
- var field;
- if (oldconfig) { // old style..
- field = oldconfig.events ? oldconfig : new Roo.form.TextField(oldconfig);
- } else {
- // new style..
- tree = config.tree;
- config.field = config.field || {};
- config.field.xtype = 'TextField';
- field = Roo.factory(config.field, Roo.form);
- }
- config = config || {};
-
-
+Roo.form.TextField = function(config){
+ Roo.form.TextField.superclass.constructor.call(this, config);
this.addEvents({
/**
- * @event beforenodeedit
- * 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.tree.Node} node
- */
- "beforenodeedit" : true
+ * @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.log(config);
- Roo.tree.TreeEditor.superclass.constructor.call(this, field, config);
-
- 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, {
+Roo.extend(Roo.form.TextField, Roo.form.Field, {
/**
- * @cfg {String} alignment
- * The position to align to (see {@link Roo.Element#alignTo} for more details, defaults to "l-l").
+ * @cfg {Boolean} grow True if this field should automatically grow and shrink to its content
*/
- alignment: "l-l",
- // inherit
- autoSize: false,
+ grow : false,
/**
- * @cfg {Boolean} hideEl
- * True to hide the bound element while the editor is displayed (defaults to false)
+ * @cfg {Number} growMin The minimum width to allow when grow = true (defaults to 30)
*/
- hideEl : false,
+ growMin : 30,
/**
- * @cfg {String} cls
- * CSS class to apply to the editor (defaults to "x-small-editor x-tree-editor")
+ * @cfg {Number} growMax The maximum width to allow when grow = true (defaults to 800)
*/
- cls: "x-small-editor x-tree-editor",
+ growMax : 800,
/**
- * @cfg {Boolean} shim
- * True to shim the editor if selects/iframes could be displayed beneath it (defaults to false)
+ * @cfg {String} vtype A validation type name as defined in {@link Roo.form.VTypes} (defaults to null)
*/
- shim:false,
- // inherit
- shadow:"frame",
+ vtype : null,
/**
- * @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.
+ * @cfg {String} maskRe An input mask regular expression that will be used to filter keystrokes that don't match (defaults to null)
*/
- maxWidth: 250,
-
- editDelay : 350,
+ 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 {Boolean} allowLeadingSpace True to prevent the stripping of leading white space
+ */
+ allowLeadingSpace : 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 - placeholder... (defaults to null).
+ */
+ emptyText : null,
+
// 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;
+ initEvents : function()
+ {
+ if (this.emptyText) {
+ this.el.attr('placeholder', this.emptyText);
}
- 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, '');
- return this.fireEvent('beforenodeedit', this, this.editNode);
+ 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.on("focus", this.preFocus, this);
+ }
+ if (!this.allowLeadingSpace) {
+ this.on('blur', this.cleanLeadingSpace, this);
+ }
+
+ 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);
+ }
+ if(this.el.is('input[type=password]') && Roo.isSafari){
+ this.el.on('keydown', this.SafariOnKeyDown, this);
+ }
},
- // private
- triggerEdit : function(node){
- this.completeEdit();
- this.editNode = node;
- this.startEdit(node.ui.textNode, node.text);
+ processValue : function(value){
+ if(this.stripCharsRe){
+ var newValue = value.replace(this.stripCharsRe, '');
+ if(newValue !== value){
+ this.setRawValue(newValue);
+ return newValue;
+ }
+ }
+ return value;
},
- // private
- bindScroll : function(){
- this.tree.getTreeEl().on('scroll', this.cancelEdit, this);
+ filterValidation : function(e){
+ if(!e.isNavKeyPress()){
+ this.validationTask.delay(this.validationDelay);
+ }
},
// 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;
+ onKeyUp : function(e){
+ if(!e.isNavKeyPress()){
+ this.autoSize();
}
- return true;
},
-
- // private
- updateNode : function(ed, value){
- this.tree.getTreeEl().un('scroll', this.cancelEdit, this);
- this.editNode.setText(value);
+ // private - clean the leading white space
+ cleanLeadingSpace : function(e)
+ {
+ if ( this.inputType == 'file') {
+ return;
+ }
+
+ this.setValue((this.getValue() + '').replace(/^\s+/,''));
},
-
+ /**
+ * Resets the current field value to the originally-loaded value and clears any validation messages.
+ *
+ */
+ reset : function(){
+ Roo.form.TextField.superclass.reset.call(this);
+
+ },
// private
- onHide : function(){
- Roo.tree.TreeEditor.superclass.onHide.call(this);
- if(this.editNode){
- this.editNode.ui.focus();
+ preFocus : function(){
+
+ if(this.selectOnFocus){
+ this.el.dom.select();
}
},
+
// private
- onSpecialKey : function(field, e){
+ filterKeys : function(e){
var k = e.getKey();
- if(k == e.ESC){
- e.stopEvent();
- this.cancelEdit();
- }else if(k == e.ENTER && !e.hasModifier()){
+ 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();
- 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;
+ setValue : function(v){
- 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>");
+ Roo.form.TextField.superclass.setValue.apply(this, arguments);
- 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.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) { // if it's blank
+ if(this.allowBlank){
+ this.clearInvalid();
+ return true;
+ }else{
+ this.markInvalid(this.blankText);
+ return false;
+ }
}
- 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++;
+ if(value.length < this.minLength){
+ this.markInvalid(String.format(this.minLengthText, this.minLength));
+ return false;
}
- this.anchor = cs[index];
-
- this.textNode = cs[index].firstChild;
-
- //el.on("click", this.onClick, this);
- //el.on("dblclick", this.onDblClick, this);
-
-
- // console.log(this);
+ 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;
},
- 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");
+ /**
+ * 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();
+ }
}
+ },
- el.on("click", this.onClick, this);
- el.on("dblclick", this.onDblClick, this);
- el.on("contextmenu", this.onContextMenu, this);
-
+ /**
+ * 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);
},
- /*onSelectedChange : function(state){
- if(state){
- this.focus();
- this.addClass("x-tree-selected");
- }else{
- //this.blur();
- this.removeClass("x-tree-selected");
+ // private
+ SafariOnKeyDown : function(event)
+ {
+ // this is a workaround for a password hang bug on chrome/ webkit.
+
+ var isSelectAll = false;
+
+ if(this.el.dom.selectionEnd > 0){
+ isSelectAll = (this.el.dom.selectionEnd - this.el.dom.selectionStart - this.getValue().length == 0) ? true : false;
}
- },*/
- addClass : function(cls){
- if(this.elRow){
- Roo.fly(this.elRow).addClass(cls);
+ if(((event.getKey() == 8 || event.getKey() == 46) && this.getValue().length ==1)){ // backspace and delete key
+ event.preventDefault();
+ this.setValue('');
+ return;
+ }
+
+ if(isSelectAll && event.getCharCode() > 31){ // backspace and delete key
+
+ event.preventDefault();
+ // this is very hacky as keydown always get's upper case.
+
+ var cc = String.fromCharCode(event.getCharCode());
+
+
+ this.setValue( event.shiftKey ? cc : cc.toLowerCase());
+
}
- },
-
-
- 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.
* <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
+ * @class Roo.form.Hidden
+ * @extends Roo.form.TextField
+ * Simple Hidden element used on forms
+ *
+ * usage: form.add(new Roo.form.HiddenField({ 'name' : 'test1' }));
+ *
* @constructor
- * @param {String/HTMLElement/Element} el The container element
- * @param {Object} config
+ * Creates a new Hidden form element.
+ * @param {Object} config Configuration options
*/
-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);
+
+
+
+// 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'
-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
*/
/**
- * @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).
+ * @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
- * Creates a new Menu
- * @param {Object} config Configuration options
+ * Create a new TriggerField.
+ * @param {Object} config Configuration options (valid {@Roo.form.TextField} config options will also be applied
+ * to the base TextField)
*/
-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.form.TriggerField = function(config){
+ this.mimicing = false;
+ Roo.form.TriggerField.superclass.constructor.call(this, config);
};
-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?",
+Roo.extend(Roo.form.TriggerField, Roo.form.TextField, {
/**
- * @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?")
+ * @cfg {String} triggerClass A CSS class to apply to the trigger
*/
- defaultAlign : "tl-bl?",
/**
- * @cfg {Boolean} allowOtherMenus True to allow multiple menus to be displayed at the same time (defaults to false)
+ * @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"})
*/
- allowOtherMenus : false,
+ defaultAutoCreate : {tag: "input", type: "text", size: "16", autocomplete: "new-password"},
/**
- * @cfg {Boolean} registerMenu True (default) - means that clicking on screen etc. hides it.
+ * @cfg {Boolean} hideTrigger True to hide the trigger element and display only the base text field (defaults to false)
*/
- 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);
+ hideTrigger:false,
- 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"});
- //disabling touch- as it's causing issues ..
- //ul.on(Roo.isTouch ? 'touchstart' : 'click' , this.onClick, this);
- ul.on('click' , this.onClick, this);
-
-
- ul.on("mouseover", this.onMouseOver, this);
- ul.on("mouseout", this.onMouseOut, this);
- this.items.each(function(item){
- if (item.hidden) {
- return;
- }
-
- 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();
- },
+ /** @cfg {Boolean} grow @hide */
+ /** @cfg {Number} growMin @hide */
+ /** @cfg {Number} growMax @hide */
+ /**
+ * @hide
+ * @method
+ */
+ autoSize: Roo.emptyFn,
// 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"));
- }
- },
-
+ monitorTab : true,
// private
- delayAutoWidth : function(){
- if(this.rendered){
- if(!this.awTask){
- this.awTask = new Roo.util.DelayedTask(this.autoWidth, this);
- }
- this.awTask.delay(20);
- }
- },
+ deferHeight : true,
+
+ actionMode : 'wrap',
// 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);
+ 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
- onClick : function(e){
- Roo.log("menu.onClick");
- var t = this.findTargetItem(e);
- if(!t){
- return;
- }
- Roo.log(e);
- if (Roo.isTouch && e.type == 'touchstart' && t.menu && !t.disabled) {
- if(t == this.activeItem && t.shouldDeactivate(e)){
- this.activeItem.deactivate();
- delete this.activeItem;
- return;
- }
- if(t.canActivate){
- this.setActiveItem(t, true);
- }
- return;
-
-
- }
-
- t.onClick(e);
- this.fireEvent("click", this, t, e);
- },
+ adjustSize : Roo.BoxComponent.prototype.adjustSize,
// 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();
- }
+ getResizeEl : function(){
+ return this.wrap;
},
// 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;
+ getPositionEl : function(){
+ return this.wrap;
},
// 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);
+ alignErrorIcon : function(){
+ this.errorIcon.alignTo(this.wrap, 'tl-tr', [2, 0]);
},
// 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);
+ 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.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);
+ this.initTrigger();
+ if(!this.width){
+ this.wrap.setWidth(this.el.getWidth()+this.trigger.getWidth());
}
},
- doFocus : function(){
- if(!this.hidden){
- this.focusEl.focus();
- }
+ // 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');
},
- /**
- * 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);
+ // 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);
},
- /**
- * 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);
+ // 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);
}
}
- return item;
},
- /**
- * Returns this menu's underlying {@link Roo.Element} object
- * @return {Roo.Element} The element
- */
- getEl : function(){
- if(!this.el){
- this.render();
+ // private
+ checkTab : function(e){
+ if(e.getKey() == e.TAB){
+ this.triggerBlur();
}
- 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());
+ // private
+ onBlur : function(){
+ // do nothing
},
- /**
- * 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));
+ // private
+ mimicBlur : function(e, t){
+ if(!this.wrap.contains(t) && this.validateBlur()){
+ this.triggerBlur();
+ }
},
- /**
- * 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();
+ // 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);
}
- return item;
+ this.wrap.removeClass('x-trigger-wrap-focus');
+ Roo.form.TriggerField.superclass.onBlur.call(this);
},
- /**
- * 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);
- }
+ // 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');
}
- 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 }));
+ // private
+ onEnable : function(){
+ Roo.form.TriggerField.superclass.onEnable.call(this);
+ if(this.wrap){
+ this.wrap.removeClass('x-item-disabled');
+ }
},
- /**
- * 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();
+ // private
+ onShow : function(){
+ var ae = this.getActionEl();
+
+ if(ae){
+ ae.dom.style.display = '';
+ ae.dom.style.visibility = 'visible';
}
- 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();
+ // private
+
+ onHide : function(){
+ var ae = this.getActionEl();
+ ae.dom.style.display = 'none';
},
/**
- * Removes and destroys all items in the menu
+ * 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
*/
- removeAll : function(){
- var f;
- while(f = this.items.first()){
- this.remove(f);
- }
- }
+ onTriggerClick : Roo.emptyFn
});
-// 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);
- },
+// 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);
- up : function(e, m){
- if(!m.tryActivate(m.items.indexOf(m.activeItem)-1, -1)){
- m.tryActivate(m.items.length-1, -1);
- }
+ 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}
+ ]};
},
- down : function(e, m){
- if(!m.tryActivate(m.items.indexOf(m.activeItem)+1, 1)){
- m.tryActivate(0, 1);
- }
+ getTrigger : function(index){
+ return this.triggers[index];
},
- right : function(e, m){
- if(m.activeItem){
- m.activeItem.expandMenu(true);
- }
- },
+ 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);
- left : function(e, m){
- m.hide();
- if(m.parentMenu && m.parentMenu.activeItem){
- m.parentMenu.activeItem.activate();
- }
+ 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;
},
- enter : function(e, m){
- if(m.activeItem){
- e.stopPropagation();
- m.activeItem.onClick(e);
- m.fireEvent("click", this, m.activeItem);
- return true;
- }
- }
+ onTrigger1Click : Roo.emptyFn,
+ onTrigger2Click : Roo.emptyFn
});/*
* Based on:
* Ext JS Library 1.1.1
*/
/**
- * @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
+ * @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.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 {
+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;
+ }
+};
- /**
- * Hides all menus that are currently visible
- */
- hideAll : function(){
- hideAll();
- },
+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
- 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);
- }
- },
+ // private
+ onRender : function(ct, position){
+ if(!this.el){
+ this.defaultAutoCreate = {
+ tag: "textarea",
+ style:"width:300px;height:60px;",
+ autocomplete: "new-password"
+ };
+ }
+ 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);
+ }
+ },
- /**
- * 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);
- }
- },
+ onDestroy : function(){
+ if(this.textSizeEl){
+ this.textSizeEl.parentNode.removeChild(this.textSizeEl);
+ }
+ Roo.form.TextArea.superclass.onDestroy.call(this);
+ },
- // 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
+ onKeyUp : function(e){
+ if(!e.isNavKeyPress() || e.getKey() == e.ENTER){
+ this.autoSize();
+ }
+ },
- // private
- registerCheckable : function(menuItem){
- var g = menuItem.group;
- if(g){
- if(!groups[g]){
- groups[g] = [];
- }
- groups[g].push(menuItem);
- menuItem.on("beforecheckchange", onBeforeCheck);
- }
- },
+ /**
+ * 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;
- // private
- unregisterCheckable : function(menuItem){
- var g = menuItem.group;
- if(g){
- groups[g].remove(menuItem);
- menuItem.un("beforecheckchange", onBeforeCheck);
- }
- }
- };
-}();/*
+ 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.
/**
- * @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.
+ * @class Roo.form.NumberField
+ * @extends Roo.form.TextField
+ * Numeric text field that provides automatic keystroke filtering and numeric validation.
* @constructor
- * Creates a new BaseItem
+ * Creates a new NumberField
* @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.form.NumberField = function(config){
+ Roo.form.NumberField.superclass.constructor.call(this, config);
};
-Roo.extend(Roo.menu.BaseItem, Roo.Component, {
+Roo.extend(Roo.form.NumberField, Roo.form.TextField, {
/**
- * @cfg {Function} handler
- * A function that will handle the click event of this menu item (defaults to undefined)
+ * @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} canActivate True if this item can be visually activated (defaults to false)
+ * @cfg {Boolean} allowDecimals False to disallow decimal values (defaults to true)
*/
- canActivate : false,
-
- /**
- * @cfg {Boolean} hidden True to prevent creation of this menu item (defaults to false)
+ allowDecimals : true,
+ /**
+ * @cfg {String} decimalSeparator Character(s) to allow as the decimal separator (defaults to '.')
*/
- hidden: false,
-
+ decimalSeparator : ".",
/**
- * @cfg {String} activeClass The CSS class to use when the item becomes activated (defaults to "x-menu-item-active")
+ * @cfg {Number} decimalPrecision The maximum precision to display after the decimal separator (defaults to 2)
*/
- activeClass : "x-menu-item-active",
+ decimalPrecision : 2,
/**
- * @cfg {Boolean} hideOnClick True to hide the containing menu after this item is clicked (defaults to true)
+ * @cfg {Boolean} allowNegative False to prevent entering a negative sign (defaults to true)
*/
- hideOnClick : true,
+ allowNegative : true,
/**
- * @cfg {Number} hideDelay Length of time in milliseconds to wait before hiding after a click (defaults to 100)
+ * @cfg {Number} minValue The minimum allowed value (defaults to Number.NEGATIVE_INFINITY)
*/
- hideDelay : 100,
+ 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
- ctype: "Roo.menu.BaseItem",
+ 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
- actionMode : "container",
+ 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;
+ },
- // private
- render : function(container, parentMenu){
- this.parentMenu = parentMenu;
- Roo.menu.BaseItem.superclass.render.call(this, container);
- this.container.menuItemId = this.id;
+ getValue : function(){
+ return this.fixPrecision(this.parseValue(Roo.form.NumberField.superclass.getValue.call(this)));
},
// private
- onRender : function(container, position){
- this.el = Roo.get(this.el);
- container.dom.appendChild(this.el.dom);
+ parseValue : function(value){
+ value = parseFloat(String(value).replace(this.decimalSeparator, "."));
+ return isNaN(value) ? '' : value;
},
// 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();
+ 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){
+ v = this.fixPrecision(v);
+ Roo.form.NumberField.superclass.setValue.call(this, String(v).replace(".", this.decimalSeparator));
},
// private
- activate : function(){
- if(this.disabled){
+ decimalPrecisionFcn : function(v){
+ return Math.floor(v);
+ },
+
+ beforeBlur : function(){
+ var v = this.parseValue(this.getRawValue());
+ if(v){
+ this.setValue(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} zeroValue
+ * if the date is less that this number, then the field is rendered as empty
+ * default is 1800
+ */
+ zeroValue : '1800-01-01',
+
+
+ /**
+ * @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 {Boolean} 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');
+ Roo.log("Changing name?");
+ this.el.dom.setAttribute('name', this.name + '____hidden___' );
+ this.hiddenField = this.el.insertSibling({ tag:'input', type:'hidden', name: this.name },
+ 'before', true);
+ this.hiddenField.value = this.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)){
+ Roo.log('super failed');
+ 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){
+ Roo.log('parse date failed' + svalue);
+ 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;
}
- 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);
+ // Provides logic to override the default TriggerField.validateBlur which just returns true
+ validateBlur : function(){
+ return !this.menu || !this.menu.isVisible();
+ },
+
+ getName: function()
+ {
+ // returns hidden if it's set..
+ if (!this.rendered) {return ''};
+ return !this.hiddenName && this.el.dom.name ? this.el.dom.name : (this.hiddenName || '');
+
},
- // private
- shouldDeactivate : function(e){
- return !this.region || !this.region.contains(e.getPoint());
+ /**
+ * 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)));
+ // make sure the value field is always stored as a date..
+ this.value = this.parseDate(date);
+
+
},
// private
- handleClick : function(e){
- if(this.hideOnClick){
- this.parentMenu.hide.defer(this.hideDelay, this.parentMenu, [true]);
+ parseDate : function(value){
+
+ if (value instanceof Date) {
+ if (value < Date.parseDate(this.zeroValue, 'Y-m-d') ) {
+ return '';
+ }
+ return value;
+ }
+
+
+ if(!value || value instanceof Date){
+ return value;
+ }
+ var v = Date.parseDate(value, this.format);
+ if (!v && this.useIso) {
+ v = Date.parseDate(value, 'Y-m-d');
+ }
+ 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]);
+ }
}
+ if (v < Date.parseDate(this.zeroValue, 'Y-m-d') ) {
+ v = '';
+ }
+ return v;
},
// private
- expandMenu : function(autoActivate){
- // do nothing
+ formatDate : function(date, fmt){
+ return (!date || !(date instanceof Date)) ?
+ date : date.dateFormat(fmt || this.format);
},
// 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();
+ 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
- activate : function(){
+ // Implements the default empty TriggerField.onTriggerClick function to display the DatePicker
+ onTriggerClick : function(){
if(this.disabled){
- return false;
+ return;
}
- this.component.focus();
- this.fireEvent("activate", this);
- return true;
+ 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.useIso ? 'Y-m-d' : 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?");
},
- // private
- deactivate : function(){
- this.fireEvent("deactivate", this);
+ beforeBlur : function(){
+ var v = this.parseDate(this.getRawValue());
+ if(v){
+ this.setValue(v);
+ }
},
- // private
- disable : function(){
- this.component.disable();
- Roo.menu.Adapter.superclass.disable.call(this);
+ /*@
+ * overide
+ *
+ */
+ isDirty : function() {
+ if(this.disabled) {
+ return false;
+ }
+
+ if(typeof(this.startValue) === 'undefined'){
+ return false;
+ }
+
+ return String(this.getValue()) !== String(this.startValue);
+
},
-
- // private
- enable : function(){
- this.component.enable();
- Roo.menu.Adapter.superclass.enable.call(this);
+ // @overide
+ cleanLeadingSpace : function(e)
+ {
+ return;
}
+
});/*
* Based on:
* Ext JS Library 1.1.1
* 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
+ * @class Roo.form.MonthField
+ * @extends Roo.form.TriggerField
+ * Provides a date input field with a {@link Roo.DatePicker} dropdown and automatic date validation.
+* @constructor
+* Create a new MonthField
+* @param {Object} config
*/
-Roo.menu.TextItem = function(cfg){
- if (typeof(cfg) == 'string') {
- this.text = cfg;
- } else {
- Roo.apply(this,cfg);
- }
+Roo.form.MonthField = function(config){
- Roo.menu.TextItem.superclass.constructor.call(this);
+ Roo.form.MonthField.superclass.constructor.call(this, config);
+
+ this.addEvents({
+
+ /**
+ * @event select
+ * Fires when a date is selected
+ * @param {Roo.form.MonthFieeld} 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.menu.TextItem, Roo.menu.BaseItem, {
+Roo.extend(Roo.form.MonthField, Roo.form.TriggerField, {
/**
- * @cfg {Boolean} text Text to show on item.
+ * @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').
*/
- text : '',
-
+ format : "M Y",
/**
- * @cfg {Boolean} hideOnClick True to hide the containing menu after this item is clicked (defaults to false)
+ * @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').
*/
- hideOnClick : false,
+ altFormats : "M Y|m/Y|m-y|m-Y|my|mY",
/**
- * @cfg {String} itemCls The default CSS class to use for text items (defaults to "x-menu-text")
+ * @cfg {Array} disabledDays
+ * An array of days to disable, 0 based. For example, [0, 6] disables Sunday and Saturday (defaults to null).
*/
- 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, {
+ disabledDays : [0,1,2,3,4,5,6],
/**
- * @cfg {String} itemCls The default CSS class to use for separators (defaults to "x-menu-sep")
+ * @cfg {String} disabledDaysText
+ * The tooltip to display when the date falls on a disabled day (defaults to 'Disabled')
*/
- itemCls : "x-menu-sep",
+ disabledDaysText : "Disabled",
/**
- * @cfg {Boolean} hideOnClick True to hide the containing menu after this item is clicked (defaults to false)
+ * @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"].
*/
- 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, {
-
+ disabledDates : null,
/**
- * @cfg {String} text
- * The text to show on the menu item.
+ * @cfg {String} disabledDatesText
+ * The tooltip text to display when the date falls on a disabled date (defaults to 'Disabled')
*/
- text: '',
- /**
- * @cfg {String} HTML to render in menu
- * The text to show on the menu item (HTML version).
+ 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).
*/
- html: '',
+ minValue : null,
/**
- * @cfg {String} icon
- * The path to an icon to display in this menu item (defaults to Roo.BLANK_IMAGE_URL)
+ * @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).
*/
- icon: undefined,
+ maxValue : null,
/**
- * @cfg {String} itemCls The default CSS class to use for menu items (defaults to "x-menu-item")
+ * @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}').
*/
- itemCls : "x-menu-item",
+ minText : "The date in this field must be equal to or after {0}",
/**
- * @cfg {Boolean} canActivate True if this item can be visually activated (defaults to true)
+ * @cfg {String} maxTextf
+ * 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}').
*/
- canActivate : true,
+ maxText : "The date in this field must be equal to or before {0}",
/**
- * @cfg {Number} showDelay Length of time in milliseconds to wait before showing this item (defaults to 200)
+ * @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}').
*/
- showDelay: 200,
- // doc'd in BaseItem
- hideDelay: 200,
+ 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 {Boolean} useIso
+ * if enabled, then the date field will use a hidden field to store the
+ * real value as iso formated date. default (true)
+ */
+ useIso : true,
+ /**
+ * @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
- ctype: "Roo.menu.Item",
+ defaultAutoCreate : {tag: "input", type: "text", size: "10", autocomplete: "new-password"},
// 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;
+ hiddenField: false,
+
+ hideMonthPicker : false,
+
+ onRender : function(ct, position)
+ {
+ Roo.form.MonthField.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.value ? this.formatDate(this.value, 'Y-m-d') : '';
+ // prevent input submission
+ this.hiddenName = this.name;
}
- el.className = this.itemCls + (this.menu ? " x-menu-item-arrow" : "") + (this.cls ? " " + this.cls : "");
+
+
+ },
+
+ // private
+ validateValue : function(value)
+ {
+ value = this.formatDate(value);
+ if(!Roo.form.MonthField.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(){
- 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);
+
+ return this.hiddenField ?
+ this.hiddenField.value :
+ this.parseDate(Roo.form.MonthField.superclass.getValue.call(this)) || "";
},
/**
- * 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.
+ * 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 MonthField.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');
+monthField.setValue(dt);
+
+//Pass a date string (default format):
+monthField.setValue('5/4/06');
+
+//Pass a date string (custom format):
+monthField.format = 'Y-m-d';
+monthField.setValue('2006-5-4');
+</code></pre>
+ * @param {String/Date} date The date or valid date string
*/
- 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();
+ setValue : function(date){
+ Roo.log('month setValue' + date);
+ // can only be first of month..
+
+ var val = this.parseDate(date);
+
+ if (this.hiddenField) {
+ this.hiddenField.value = this.formatDate(this.parseDate(date), 'Y-m-d');
}
+ Roo.form.MonthField.superclass.setValue.call(this, this.formatDate(this.parseDate(date)));
+ this.value = this.parseDate(date);
},
// private
- handleClick : function(e){
- if(!this.href){ // if no link defined, stop the event automatically
- e.stopEvent();
+ parseDate : function(value){
+ if(!value || value instanceof Date){
+ value = value ? Date.parseDate(value.format('Y-m') + '-01', 'Y-m-d') : null;
+ return value;
}
- 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();
- }
+ var v = Date.parseDate(value, this.format);
+ if (!v && this.useIso) {
+ v = Date.parseDate(value, 'Y-m-d');
+ }
+ if (v) {
+ //
+ v = Date.parseDate(v.format('Y-m') +'-01', 'Y-m-d');
}
- 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());
+
+
+ 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 true;
}
- return false;
+ return v;
},
// private
- deactivate : function(){
- Roo.menu.Item.superclass.deactivate.apply(this, arguments);
- this.hideMenu();
+ formatDate : function(date, fmt){
+ return (!date || !(date instanceof Date)) ?
+ date : date.dateFormat(fmt || this.format);
},
// 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);
- }
+ 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
- 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);
+ // Implements the default empty TriggerField.onTriggerClick function to display the DatePicker
+ onTriggerClick : function(){
+ if(this.disabled){
+ return;
}
- },
-
- // 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);
+ 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,
+
+ format : this.useIso ? 'Y-m-d' : 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
+ }));
+
+
+ var m = this.menu;
+ var p = m.picker;
+
+ // hide month picker get's called when we called by 'before hide';
+
+ var ignorehide = true;
+ p.hideMonthPicker = function(disableAnim){
+ if (ignorehide) {
+ return;
+ }
+ if(this.monthPicker){
+ Roo.log("hideMonthPicker called");
+ if(disableAnim === true){
+ this.monthPicker.hide();
+ }else{
+ this.monthPicker.slideOut('t', {duration:.2});
+ p.setValue(new Date(m.picker.mpSelYear, m.picker.mpSelMonth, 1));
+ p.fireEvent("select", this, this.value);
+ m.hide();
+ }
+ }
}
+
+ Roo.log('picker set value');
+ Roo.log(this.getValue());
+ p.setValue(this.getValue() ? this.parseDate(this.getValue()) : new Date());
+ m.show(this.el, 'tl-bl?');
+ ignorehide = false;
+ // this will trigger hideMonthPicker..
+
+
+ // hidden the day picker
+ Roo.select('.x-date-picker table', true).first().dom.style.visibility = "hidden";
+
+
+
+
+
+ p.showMonthPicker.defer(100, p);
+
+
+
},
- // private
- deferHide : function(){
- delete this.hideTimer;
- this.menu.hide();
+ 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
* <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.
+ * @class Roo.form.ComboBox
+ * @extends Roo.form.TriggerField
+ * A combobox control with support for autocomplete, remote-loading, paging and many other features.
* @constructor
- * Creates a new CheckItem
+ * Create a new ComboBox.
* @param {Object} config Configuration options
*/
-Roo.menu.CheckItem = function(config){
- Roo.menu.CheckItem.superclass.constructor.call(this, config);
+Roo.form.ComboBox = function(config){
+ Roo.form.ComboBox.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 expand
+ * Fires when the dropdown list is expanded
+ * @param {Roo.form.ComboBox} combo This combo box
+ */
+ 'expand' : 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
+ * @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.checkHandler){
- this.on('checkchange', this.checkHandler, this.scope);
+ 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.menu.CheckItem, Roo.menu.Item, {
+
+Roo.extend(Roo.form.ComboBox, Roo.form.TriggerField, {
/**
- * @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/HTMLElement/Element} transform The id, DOM node or element of an existing select to convert to a ComboBox
*/
/**
- * @cfg {String} itemCls The default CSS class to use for check items (defaults to "x-menu-item x-menu-check-item")
+ * @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)
*/
- 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")
+ * @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"})
*/
- 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.
+ * @cfg {Roo.data.Store} store The data store to which this combo is bound (defaults to undefined)
*/
- 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)
+ * @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)
*/
- 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);
- }
- }
- },
+ /**
+ * @cfg {String/Roo.Template} tpl The template to use to render the output
+ */
+
// 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});
+ 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,
+
- 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
+ * @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)
*/
- this.picker = di.picker;
+ hiddenName: undefined,
/**
- * @event select
- * @param {DatePicker} picker
- * @param {Date} date
+ * @cfg {String} listClass CSS class to apply to the dropdown list element (defaults to '')
*/
- this.relayEvents(di, ["select"]);
- this.on('beforeshow', function(){
- if(this.picker){
- this.picker.hideMonthPicker(false);
- }
- }, 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);
+ 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',
/**
- * The {@link Roo.ColorPalette} instance for this ColorMenu
- * @type ColorPalette
+ * @cfg {String} listAlign A valid anchor position value. See {@link Roo.Element#alignTo} for details on supported
+ * anchor positions (defaults to 'tl-bl')
*/
- this.palette = ci.palette;
+ listAlign: 'tl-bl?',
/**
- * @event select
- * @param {ColorPalette} palette
- * @param {String} color
+ * @cfg {Number} maxHeight The maximum height in pixels of the dropdown list before scrollbars are shown (defaults to 300)
*/
- 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, {
+ maxHeight: 300,
/**
- * @cfg {String} fieldLabel Label to use when rendering a form.
+ * @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')
*/
- /**
- * @cfg {String} qtip Mouse over tip
+ 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 {String} invalidClass The CSS class to use when marking a field invalid (defaults to "x-form-invalid")
+ * @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)
*/
- invalidClass : "x-form-invalid",
+ typeAhead: false,
/**
- * @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")
+ * @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')
*/
- invalidText : "The value in this field is invalid",
+ queryDelay: 500,
/**
- * @cfg {String} focusClass The CSS class to use when the field receives focus (defaults to "x-form-focus")
+ * @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)
*/
- focusClass : "x-form-focus",
+ pageSize: 0,
/**
- * @cfg {String/Boolean} validationEvent The event that should initiate field validation. Set to false to disable
- automatic validation (defaults to "keyup").
+ * @cfg {Boolean} selectOnFocus True to select any existing text in the field immediately on focus. Only applies
+ * when editable = true (defaults to false)
*/
- validationEvent : "keyup",
+ selectOnFocus:false,
/**
- * @cfg {Boolean} validateOnBlur Whether the field should validate when it loses focus (defaults to true).
+ * @cfg {String} queryParam Name of the query as it will be passed on the querystring (defaults to 'query')
*/
- validateOnBlur : true,
+ queryParam: 'query',
/**
- * @cfg {Number} validationDelay The length of time in milliseconds after user input begins until validation is initiated (defaults to 250)
+ * @cfg {String} loadingText The text to display in the dropdown list while data is loading. Only applies
+ * when mode = 'remote' (defaults to 'Loading...')
*/
- validationDelay : 250,
+ loadingText: 'Loading...',
/**
- * @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"})
+ * @cfg {Boolean} resizable True to add a resize handle to the bottom of the dropdown list (defaults to false)
*/
- defaultAutoCreate : {tag: "input", type: "text", size: "20", autocomplete: "new-password"},
+ resizable: false,
/**
- * @cfg {String} fieldClass The default CSS class for the field (defaults to "x-form-field")
+ * @cfg {Number} handleHeight The height in pixels of the dropdown list resize handle if resizable = true (defaults to 8)
*/
- fieldClass : "x-form-field",
+ handleHeight : 8,
/**
- * @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>
+ * @cfg {Boolean} editable False to prevent the user from typing text directly into the field, just like a
+ * traditional select (defaults to true)
*/
- msgTarget : 'qtip',
+ editable: true,
/**
- * @cfg {String} msgFx <b>Experimental</b> The effect used when displaying a validation message under the field (defaults to 'normal').
+ * @cfg {String} allQuery The text query to send to the server to return all records for the list with no filtering (defaults to '')
*/
- msgFx : 'normal',
-
+ allQuery: '',
/**
- * @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.
+ * @cfg {String} mode Set to 'local' if the ComboBox loads local data (defaults to 'remote' which loads from the server)
*/
- readOnly : false,
-
+ mode: 'remote',
/**
- * @cfg {Boolean} disabled True to disable the field (defaults to false).
+ * @cfg {Number} minListWidth The minimum width of the dropdown list in pixels (defaults to 70, will be ignored if
+ * listWidth has a higher value)
*/
- disabled : false,
-
+ minListWidth : 70,
/**
- * @cfg {String} inputType The type attribute for input fields -- e.g. radio, text, password (defaults to "text").
+ * @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)
*/
- inputType : undefined,
-
+ forceSelection:false,
/**
- * @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,
+ * @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,
/**
- * @property {Roo.Element} fieldEl
- * Element Containing the rendered Field (with label etc.)
+ * @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 {Mixed} value A value to initialize this field with.
+ * @cfg {Boolean} blockFocus Prevents all focus calls, so it can work with things like HTML edtor bar
*/
- value : undefined,
-
+ blockFocus : false,
+
/**
- * @cfg {String} name The field's HTML name attribute.
+ * @cfg {Boolean} disableClear Disable showing of clear button.
*/
+ disableClear : false,
/**
- * @cfg {String} cls A CSS class to apply to the field's underlying element.
+ * @cfg {Boolean} alwaysQuery Disable caching of results, and always send query
*/
- // private
- loadedValue : false,
-
+ alwaysQuery : false,
+
+ //private
+ addicon : false,
+ editicon: false,
+
+ // element that contains real text value.. (when hidden is used..)
- // 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
+ // 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
});
- },
- /**
- * 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 || '');
- },
+ var lw = this.listWidth || Math.max(this.wrap.getWidth(), this.minListWidth);
+ this.list.setWidth(lw);
+ this.list.swallowEvent('mousewheel');
+ this.assetHeight = 0;
- // 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 = typeof(this.name) == 'undefined' ? this.id : this.name;
- }
- if (!cfg.name.length) {
- delete cfg.name;
- }
- if(this.inputType){
- cfg.type = this.inputType;
- }
- this.el = ct.createChild(cfg, position);
+ if(this.title){
+ this.header = this.list.createChild({cls:cls+'-hd', html: this.title});
+ this.assetHeight += this.header.getHeight();
}
- var type = this.el.dom.type;
- if(type){
- if(type == 'password'){
- type = 'text';
- }
- this.el.addClass('x-form-'+type);
+
+ 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.readOnly){
- this.el.dom.readOnly = true;
+ 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.tabIndex !== undefined){
- this.el.dom.setAttribute('tabIndex', this.tabIndex);
+
+ 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();
}
+
- this.el.addClass([this.fieldClass, this.cls]);
- this.initValue();
- },
+ if(!this.tpl){
+ this.tpl = '<div class="'+cls+'-item">{' + this.displayField + '}</div>';
+ }
- /**
- * 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;
- },
+ this.view = new Roo.View(this.innerList, this.tpl, {
+ singleSelect:true,
+ store: this.store,
+ selectedClass: this.selectedClass
+ });
- // 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);
- }
- },
+ this.view.on('click', this.onViewClick, this);
- /**
- * Returns true if this field has been changed since it was originally loaded and is not disabled.
- * DEPRICATED - it never worked well - use hasChanged/resetHasChanged.
- */
- isDirty : function() {
- if(this.disabled) {
- return false;
- }
- return String(this.getValue()) !== String(this.originalValue);
- },
+ this.store.on('beforeload', this.onBeforeLoad, this);
+ this.store.on('load', this.onLoad, this);
+ this.store.on('loadexception', this.onLoadException, this);
- /**
- * stores the current value in loadedValue
- */
- resetHasChanged : function()
- {
- this.loadedValue = String(this.getValue());
- },
- /**
- * checks the current value against the 'loaded' value.
- * Note - will return false if 'resetHasChanged' has not been called first.
- */
- hasChanged : function()
- {
- if(this.disabled || this.readOnly) {
- return false;
+ 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');
}
- return this.loadedValue !== false && String(this.getValue()) !== this.loadedValue;
- },
-
-
-
- // 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);
+ 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);
}
- },
-
- /**
- * Resets the current field value to the originally loaded value and clears any validation messages
- */
- reset : function(){
- this.setValue(this.resetValue);
- this.clearInvalid();
+ 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(){
- // 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);
+ Roo.form.ComboBox.superclass.initEvents.call(this);
- // reference to original value for reset
- this.originalValue = this.getValue();
- this.resetValue = this.getValue();
+ 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);
+ this.fireEvent("specialkey", this, e);
+ 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.onLoadException, this);
+ }
+ Roo.form.ComboBox.superclass.onDestroy.call(this);
},
// 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);
+ fireKey : function(e){
+ if(e.isNavKeyPress() && !this.list.isVisible()){
+ this.fireEvent("specialkey", this, e);
}
},
- 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();
+ onResize: function(w, h){
+ Roo.form.ComboBox.superclass.onResize.apply(this, arguments);
+
+ if(typeof w != 'number'){
+ // we do not handle it!?!?
+ return;
}
- var v = this.getValue();
- if(String(v) !== String(this.startValue)){
- this.fireEvent('change', this, v, this.startValue);
+ 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'));
}
- 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
+ * 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
*/
- isValid : function(preventMark){
- if(this.disabled){
- return true;
+ setEditable : function(value){
+ if(value == this.editable){
+ return;
}
- 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;
+ 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');
}
- return false;
- },
-
- processValue : function(value){
- return value;
},
// private
- // Subclasses should provide the validation implementation by overriding this
- validateValue : function(value){
- return true;
+ onBeforeLoad : function(){
+ if(!this.hasFocus){
+ return;
+ }
+ this.innerList.update(this.loadingText ?
+ '<div class="loading-indicator">'+this.loadingText+'</div>' : '');
+ this.restrictHeight();
+ this.selectedIndex = -1;
},
- /**
- * Mark this field as invalid
- * @param {String} msg The validation message
- */
- markInvalid : function(msg){
- if(!this.rendered || this.preventMark){ // not rendered
+ // private
+ onLoad : function(){
+ if(!this.hasFocus){
return;
}
-
- var obj = (typeof(this.combo) != 'undefined') ? this.combo : this; // fix the combox array!!
-
- obj.el.addClass(this.invalidClass);
- msg = msg || this.invalidText;
- switch(this.msgTarget){
- case 'qtip':
- obj.el.dom.qtip = msg;
- obj.el.dom.qclass = 'x-form-invalid-tip';
- if(Roo.QuickTips){ // fix for floating editors interacting with DND
- Roo.QuickTips.enable();
+ if(this.store.getCount() > 0){
+ this.expand();
+ this.restrictHeight();
+ if(this.lastQuery == this.allQuery){
+ if(this.editable){
+ this.el.dom.select();
}
- 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);
+ if(!this.selectByValue(this.value, true)){
+ this.select(0, true);
}
- 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'});
+ }else{
+ this.selectNext();
+ if(this.typeAhead && this.lastKey != Roo.EventObject.BACKSPACE && this.lastKey != Roo.EventObject.DELETE){
+ this.taTask.delay(this.typeAheadDelay);
}
- 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;
+ }
+ }else{
+ this.onEmptyResults();
}
- this.fireEvent('invalid', this, msg);
+ //this.el.focus();
},
-
// 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;
+ onLoadException : function()
+ {
+ this.collapse();
+ Roo.log(this.store.reader.jsonData);
+ if (this.store && typeof(this.store.reader.jsonData.errorMsg) != 'undefined') {
+ Roo.MessageBox.alert("Error loading",this.store.reader.jsonData.errorMsg);
}
- var obj = (typeof(this.combo) != 'undefined') ? this.combo : this; // fix the combox array!!
- obj.el.removeClass(this.invalidClass);
- switch(this.msgTarget){
- case 'qtip':
- obj.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;
+
+ },
+ // 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);
+ }
}
- 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();
-
- return v;
+ // 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 normalized data value (undefined or emptyText will be returned as ''). To return the raw value see {@link #getRawValue}.
- * @return {Mixed} value The field value
+ * Returns the currently selected field value or empty string if no value is set.
+ * @return {String} value The selected value
*/
getValue : function(){
- var v = this.el.getValue();
-
- return v;
+ if(this.valueField){
+ return typeof this.value != 'undefined' ? this.value : '';
+ }
+ return Roo.form.ComboBox.superclass.getValue.call(this);
},
/**
- * 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
+ * Clears any text/value currently set in the field
*/
- setRawValue : function(v){
- return this.el.dom.value = (v === null || v === undefined ? '' : v);
+ clearValue : function(){
+ if(this.hiddenField){
+ this.hiddenField.value = '';
+ }
+ this.value = '';
+ this.setRawValue('');
+ this.lastSelectionText = '';
+
},
/**
- * 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
+ * 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){
- 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;
- }
+ 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;
}
}
- 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});
+ this.lastSelectionText = text;
+ if(this.hiddenField){
+ this.hiddenField.value = v;
}
+ Roo.form.ComboBox.superclass.setValue.call(this, text);
+ this.value = v;
},
-
- 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 "")
+ * @property {Object} the last set data for the element
*/
- regexText : "",
+
+ lastData : false,
/**
- * @cfg {String} emptyText The default text to display in an empty field - placeholder... (defaults to null).
+ * 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?
*/
- emptyText : null,
-
-
+ 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
- initEvents : function()
- {
- if (this.emptyText) {
- this.el.attr('placeholder', this.emptyText);
+ reset : function(){
+ // overridden so that last data is reset..
+ this.setValue(this.resetValue);
+ this.originalValue = this.getValue();
+ this.clearInvalid();
+ this.lastData = false;
+ if (this.view) {
+ this.view.clearSelections();
+ }
+ },
+ // 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 true;
+ });
}
+ return record;
+ },
+
+ getName: function()
+ {
+ // returns hidden if it's set..
+ if (!this.rendered) {return ''};
+ return !this.hiddenName && this.el.dom.name ? this.el.dom.name : (this.hiddenName || '');
- 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);
+ },
+ // private
+ onViewMove : function(e, t){
+ this.inKeyMode = false;
+ },
+
+ // private
+ onViewOver : function(e, t){
+ if(this.inKeyMode){ // prevent key nav and mouse over conflicts
+ return;
}
- else if(this.validationEvent !== false){
- this.el.on(this.validationEvent, this.validate, this, {buffer: this.validationDelay});
+ var item = this.view.findItemFromChild(t);
+ if(item){
+ var index = this.view.indexOf(item);
+ this.select(index, false);
}
-
- if(this.selectOnFocus){
- this.on("focus", this.preFocus, this);
-
+ },
+
+ // private
+ onViewClick : function(doFocus)
+ {
+ var index = this.view.getSelectedIndexes()[0];
+ var r = this.store.getAt(index);
+ if(r){
+ this.onSelect(r, index);
}
- if(this.maskRe || (this.vtype && this.disableKeyFilter !== true && (this.maskRe = Roo.form.VTypes[this.vtype+'Mask']))){
- this.el.on("keypress", this.filterKeys, this);
+ if(doFocus !== false && !this.blockFocus){
+ this.el.focus();
}
- if(this.grow){
- this.el.on("keyup", this.onKeyUp, this, {buffer:50});
- this.el.on("click", this.autoSize, this);
+ },
+
+ // 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;
+ }
}
- if(this.el.is('input[type=password]') && Roo.isSafari){
- this.el.on('keydown', this.SafariOnKeyDown, this);
+ 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);
+ }
}
},
- processValue : function(value){
- if(this.stripCharsRe){
- var newValue = value.replace(this.stripCharsRe, '');
- if(newValue !== value){
- this.setRawValue(newValue);
- return newValue;
+ // 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);
}
}
- return value;
},
- filterValidation : function(e){
- if(!e.isNavKeyPress()){
- this.validationTask.delay(this.validationDelay);
+ // 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(!e.isNavKeyPress()){
- this.autoSize();
+ if(this.editable !== false && !e.isSpecialKey()){
+ this.lastKey = e.getKey();
+ this.dqTask.delay(this.queryDelay);
}
},
- /**
- * Resets the current field value to the originally-loaded value and clears any validation messages.
- *
- */
- reset : function(){
- Roo.form.TextField.superclass.reset.call(this);
-
+ // private
+ validateBlur : function(){
+ return !this.list || !this.list.isVisible();
},
-
// private
- preFocus : function(){
-
- if(this.selectOnFocus){
- this.el.dom.select();
- }
+ initQuery : function(){
+ this.doQuery(this.getRawValue());
},
-
// 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();
+ doForce : function(){
+ if(this.el.dom.value.length > 0){
+ this.el.dom.value =
+ this.lastSelectionText === undefined ? '' : this.lastSelectionText;
+
}
},
- setValue : function(v){
-
- Roo.form.TextField.superclass.setValue.apply(this, arguments);
-
- 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
+ * 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)
*/
- validateValue : function(value){
- if(value.length < 1) { // 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;
+ doQuery : function(q, forceAll){
+ if(q === undefined || q === null){
+ q = '';
}
- if(value.length > this.maxLength){
- this.markInvalid(String.format(this.maxLengthText, this.maxLength));
+ var qe = {
+ query: q,
+ forceAll: forceAll,
+ combo: this,
+ cancel:false
+ };
+ if(this.fireEvent('beforequery', qe)===false || qe.cancel){
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;
+ 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();
}
}
- if(this.regex && !this.regex.test(value)){
- this.markInvalid(this.regexText);
- return false;
+ },
+
+ // private
+ getParams : function(q){
+ var p = {};
+ //p[this.queryParam] = q;
+ if(this.pageSize){
+ p.start = 0;
+ p.limit = this.pageSize;
}
- return true;
+ return p;
},
/**
- * 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)
+ * Hides the dropdown list if it is currently expanded. Fires the 'collapse' event on completion.
*/
- 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();
- }
+ 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();
}
},
/**
- * 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.
+ * Expands the dropdown list if it is currently hidden. Fires the 'expand' event on completion.
*/
- autoSize : function(){
- if(!this.grow || !this.rendered){
+ expand : function(){
+ if(this.isExpanded() || !this.hasFocus){
return;
}
- if(!this.metrics){
- this.metrics = Roo.util.TextMetrics.createInstance(this.el);
+ 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);
}
- 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);
+
+ this.fireEvent('expand', this);
},
-
+
// private
- SafariOnKeyDown : function(event)
- {
- // this is a workaround for a password hang bug on chrome/ webkit.
-
- var isSelectAll = false;
-
- if(this.el.dom.selectionEnd > 0){
- isSelectAll = (this.el.dom.selectionEnd - this.el.dom.selectionStart - this.getValue().length == 0) ? true : false;
- }
- if(((event.getKey() == 8 || event.getKey() == 46) && this.getValue().length ==1)){ // backspace and delete key
- event.preventDefault();
- this.setValue('');
+ // Implements the default empty TriggerField.onTriggerClick function
+ onTriggerClick : function(){
+ if(this.disabled){
return;
}
-
- if(isSelectAll && event.getCharCode() > 31){ // backspace and delete key
-
- event.preventDefault();
- // this is very hacky as keydown always get's upper case.
-
- var cc = String.fromCharCode(event.getCharCode());
-
+ if(this.isExpanded()){
+ this.collapse();
+ if (!this.blockFocus) {
+ this.el.focus();
+ }
- this.setValue( event.shiftKey ? cc : cc.toLowerCase());
+ }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
+ */
});/*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
+ * Copyright(c) 2010-2012, Roo J Solutions Limited
*
- * Originally Released Under LGPL - original licence link has changed is not relivant.
+ * Licence LGPL
*
- * Fork - LGPL
- * <script type="text/javascript">
*/
-
+
/**
- * @class Roo.form.Hidden
+ * @class Roo.form.ComboBoxArray
* @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.
+ * A facebook style adder... for lists of email / people / countries etc...
+ * pick multiple items from a combo box, and shows each one.
*
- * Originally Released Under LGPL - original licence link has changed is not relivant.
+ * Fred [x] Brian [x] [Pick another |v]
*
- * 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.
+ * For this to work: it needs various extra information
+ * - normal combo problay has
+ * name, hiddenName
+ * + displayField, valueField
+ *
+ * For our purpose...
+ *
+ *
+ * If we change from 'extends' to wrapping...
+ *
+ *
+ *
+
+
* @constructor
- * Create a new TriggerField.
- * @param {Object} config Configuration options (valid {@Roo.form.TextField} config options will also be applied
- * to the base TextField)
+ * Create a new ComboBoxArray.
+ * @param {Object} config Configuration options
*/
-Roo.form.TriggerField = function(config){
- this.mimicing = false;
- Roo.form.TriggerField.superclass.constructor.call(this, config);
-};
+
-Roo.extend(Roo.form.TriggerField, Roo.form.TextField, {
+Roo.form.ComboBoxArray = function(config)
+{
+ this.addEvents({
+ /**
+ * @event beforeremove
+ * Fires before remove the value from the list
+ * @param {Roo.form.ComboBoxArray} _self This combo box array
+ * @param {Roo.form.ComboBoxArray.Item} item removed item
+ */
+ 'beforeremove' : true,
+ /**
+ * @event remove
+ * Fires when remove the value from the list
+ * @param {Roo.form.ComboBoxArray} _self This combo box array
+ * @param {Roo.form.ComboBoxArray.Item} item removed item
+ */
+ 'remove' : true
+
+
+ });
+
+ Roo.form.ComboBoxArray.superclass.constructor.call(this, config);
+
+ this.items = new Roo.util.MixedCollection(false);
+
+ // construct the child combo...
+
+
+
+
+
+
+}
+
+
+Roo.extend(Roo.form.ComboBoxArray, Roo.form.TextField,
+{
/**
- * @cfg {String} triggerClass A CSS class to apply to the trigger
+ * @cfg {Roo.form.ComboBox} combo [required] The combo box that is wrapped
*/
+
+ lastData : false,
+
+ // behavies liek a hiddne field
+ inputType: 'hidden',
/**
- * @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: "new-password"},
+ * @cfg {Number} width The width of the box that displays the selected element
+ */
+ width: 300,
+
+
+
/**
- * @cfg {Boolean} hideTrigger True to hide the trigger element and display only the base text field (defaults to false)
+ * @cfg {String} name The name of the visable items on this form (eg. titles not ids)
*/
- hideTrigger:false,
-
- /** @cfg {Boolean} grow @hide */
- /** @cfg {Number} growMin @hide */
- /** @cfg {Number} growMax @hide */
-
+ name : false,
/**
- * @hide
- * @method
+ * @cfg {String} hiddenName The hidden name of the field, often contains an comma seperated list of names
*/
- autoSize: Roo.emptyFn,
- // private
- monitorTab : true,
- // private
- deferHeight : true,
-
+ hiddenName : false,
+ /**
+ * @cfg {String} seperator The value seperator normally ','
+ */
+ seperator : ',',
- 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);
+ // private the array of items that are displayed..
+ items : false,
+ // private - the hidden field el.
+ hiddenEl : false,
+ // private - the filed el..
+ el : false,
+
+ //validateValue : function() { return true; }, // all values are ok!
+ //onAddClick: function() { },
+
+ onRender : function(ct, position)
+ {
+
+ // create the standard hidden element
+ //Roo.form.ComboBoxArray.superclass.onRender.call(this, ct, position);
+
+
+ // give fake names to child combo;
+ this.combo.hiddenName = this.hiddenName ? (this.hiddenName+'-subcombo') : this.hiddenName;
+ this.combo.name = this.name ? (this.name+'-subcombo') : this.name;
+
+ this.combo = Roo.factory(this.combo, Roo.form);
+ this.combo.onRender(ct, position);
+ if (typeof(this.combo.width) != 'undefined') {
+ this.combo.onResize(this.combo.width,0);
}
- this.initTrigger();
- if(!this.width){
- this.wrap.setWidth(this.el.getWidth()+this.trigger.getWidth());
+
+ this.combo.initEvents();
+
+ // assigned so form know we need to do this..
+ this.store = this.combo.store;
+ this.valueField = this.combo.valueField;
+ this.displayField = this.combo.displayField ;
+
+
+ this.combo.wrap.addClass('x-cbarray-grp');
+
+ var cbwrap = this.combo.wrap.createChild(
+ {tag: 'div', cls: 'x-cbarray-cb'},
+ this.combo.el.dom
+ );
+
+
+ this.hiddenEl = this.combo.wrap.createChild({
+ tag: 'input', type:'hidden' , name: this.hiddenName, value : ''
+ });
+ this.el = this.combo.wrap.createChild({
+ tag: 'input', type:'hidden' , name: this.name, value : ''
+ });
+ // this.el.dom.removeAttribute("name");
+
+
+ this.outerWrap = this.combo.wrap;
+ this.wrap = cbwrap;
+
+ this.outerWrap.setWidth(this.width);
+ this.outerWrap.dom.removeChild(this.el.dom);
+
+ this.wrap.dom.appendChild(this.el.dom);
+ this.outerWrap.dom.removeChild(this.combo.trigger.dom);
+ this.combo.wrap.dom.appendChild(this.combo.trigger.dom);
+
+ this.combo.trigger.setStyle('position','relative');
+ this.combo.trigger.setStyle('left', '0px');
+ this.combo.trigger.setStyle('top', '2px');
+
+ this.combo.el.setStyle('vertical-align', 'text-bottom');
+
+ //this.trigger.setStyle('vertical-align', 'top');
+
+ // this should use the code from combo really... on('add' ....)
+ if (this.adder) {
+
+
+ this.adder = this.outerWrap.createChild(
+ {tag: 'img', src: Roo.BLANK_IMAGE_URL, cls: 'x-form-adder', style: 'margin-left:2px'});
+ var _t = this;
+ this.adder.on('click', function(e) {
+ _t.fireEvent('adderclick', this, e);
+ }, _t);
}
+ //var _t = this;
+ //this.adder.on('click', this.onAddClick, _t);
+
+
+ this.combo.on('select', function(cb, rec, ix) {
+ this.addItem(rec.data);
+
+ cb.setValue('');
+ cb.el.dom.value = '';
+ //cb.lastData = rec.data;
+ // add to list
+
+ }, this);
+
+
},
-
- // 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');
+
+
+ getName: function()
+ {
+ // returns hidden if it's set..
+ if (!this.rendered) {return ''};
+ return this.hiddenName ? this.hiddenName : this.name;
+
},
-
- // private
- onDestroy : function(){
- if(this.trigger){
- this.trigger.removeAllListeners();
- this.trigger.remove();
- }
- if(this.wrap){
- this.wrap.remove();
+
+
+ onResize: function(w, h){
+
+ return;
+ // not sure if this is needed..
+ //this.combo.onResize(w,h);
+
+ if(typeof w != 'number'){
+ // we do not handle it!?!?
+ return;
}
- 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);
- }
+ var tw = this.combo.trigger.getWidth();
+ tw += this.addicon ? this.addicon.getWidth() : 0;
+ tw += this.editicon ? this.editicon.getWidth() : 0;
+ var x = w - tw;
+ this.combo.el.setWidth( this.combo.adjustWidth('input', x));
+
+ this.combo.trigger.setStyle('left', '0px');
+
+ if(this.list && this.listWidth === undefined){
+ var lw = Math.max(x + this.combo.trigger.getWidth(), this.combo.minListWidth);
+ this.list.setWidth(lw);
+ this.innerList.setWidth(lw - this.list.getFrameWidth('lr'));
}
+
+
+
},
-
- // private
- checkTab : function(e){
- if(e.getKey() == e.TAB){
- this.triggerBlur();
+
+ addItem: function(rec)
+ {
+ var valueField = this.combo.valueField;
+ var displayField = this.combo.displayField;
+
+ if (this.items.indexOfKey(rec[valueField]) > -1) {
+ //console.log("GOT " + rec.data.id);
+ return;
}
+
+ var x = new Roo.form.ComboBoxArray.Item({
+ //id : rec[this.idField],
+ data : rec,
+ displayField : displayField ,
+ tipField : displayField ,
+ cb : this
+ });
+ // use the
+ this.items.add(rec[valueField],x);
+ // add it before the element..
+ this.updateHiddenEl();
+ x.render(this.outerWrap, this.wrap.dom);
+ // add the image handler..
},
-
- // private
- onBlur : function(){
- // do nothing
- },
-
- // private
- mimicBlur : function(e, t){
- if(!this.wrap.contains(t) && this.validateBlur()){
- this.triggerBlur();
+
+ updateHiddenEl : function()
+ {
+ this.validate();
+ if (!this.hiddenEl) {
+ return;
}
+ var ar = [];
+ var idField = this.combo.valueField;
+
+ this.items.each(function(f) {
+ ar.push(f.data[idField]);
+ });
+ this.hiddenEl.dom.value = ar.join(this.seperator);
+ this.validate();
},
-
- // 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);
+
+ reset : function()
+ {
+ this.items.clear();
+
+ Roo.each(this.outerWrap.select('.x-cbarray-item', true).elements, function(el){
+ el.remove();
+ });
+
+ this.el.dom.value = '';
+ if (this.hiddenEl) {
+ this.hiddenEl.dom.value = '';
}
- 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;
+ getValue: function()
+ {
+ return this.hiddenEl ? this.hiddenEl.dom.value : '';
},
-
- // private
- onDisable : function(){
- Roo.form.TriggerField.superclass.onDisable.call(this);
- if(this.wrap){
- this.wrap.addClass('x-item-disabled');
+ setValue: function(v) // not a valid action - must use addItems..
+ {
+
+ this.reset();
+
+ if (this.store.isLocal && (typeof(v) == 'string')) {
+ // then we can use the store to find the values..
+ // comma seperated at present.. this needs to allow JSON based encoding..
+ this.hiddenEl.value = v;
+ var v_ar = [];
+ Roo.each(v.split(this.seperator), function(k) {
+ Roo.log("CHECK " + this.valueField + ',' + k);
+ var li = this.store.query(this.valueField, k);
+ if (!li.length) {
+ return;
+ }
+ var add = {};
+ add[this.valueField] = k;
+ add[this.displayField] = li.item(0).data[this.displayField];
+
+ this.addItem(add);
+ }, this)
+
}
- },
-
- // private
- onEnable : function(){
- Roo.form.TriggerField.superclass.onEnable.call(this);
- if(this.wrap){
- this.wrap.removeClass('x-item-disabled');
+ if (typeof(v) == 'object' ) {
+ // then let's assume it's an array of objects..
+ Roo.each(v, function(l) {
+ var add = l;
+ if (typeof(l) == 'string') {
+ add = {};
+ add[this.valueField] = l;
+ add[this.displayField] = l
+ }
+ this.addItem(add);
+ }, this);
+
}
+
+
},
-
- // private
- onShow : function(){
- var ae = this.getActionEl();
+ setFromData: function(v)
+ {
+ // this recieves an object, if setValues is called.
+ this.reset();
+ this.el.dom.value = v[this.displayField];
+ this.hiddenEl.dom.value = v[this.valueField];
+ if (typeof(v[this.valueField]) != 'string' || !v[this.valueField].length) {
+ return;
+ }
+ var kv = v[this.valueField];
+ var dv = v[this.displayField];
+ kv = typeof(kv) != 'string' ? '' : kv;
+ dv = typeof(dv) != 'string' ? '' : dv;
- if(ae){
- ae.dom.style.display = '';
- ae.dom.style.visibility = 'visible';
+
+ var keys = kv.split(this.seperator);
+ var display = dv.split(this.seperator);
+ for (var i = 0 ; i < keys.length; i++) {
+ add = {};
+ add[this.valueField] = keys[i];
+ add[this.displayField] = display[i];
+ this.addItem(add);
}
+
+
},
-
- // 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
+ * Validates the combox array value
+ * @return {Boolean} True if the value is valid, else false
*/
- 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}
- ]};
+ validate : function(){
+ if(this.disabled || this.validateValue(this.processValue(this.getValue()))){
+ this.clearInvalid();
+ return true;
+ }
+ return false;
},
-
- getTrigger : function(index){
- return this.triggers[index];
+
+ validateValue : function(value){
+ return Roo.form.ComboBoxArray.superclass.validateValue.call(this, this.getValue());
+
},
+
+ /*@
+ * overide
+ *
+ */
+ isDirty : function() {
+ if(this.disabled) {
+ return false;
+ }
+
+ try {
+ var d = Roo.decode(String(this.originalValue));
+ } catch (e) {
+ return String(this.getValue()) !== String(this.originalValue);
+ }
+
+ var originalValue = [];
+
+ for (var i = 0; i < d.length; i++){
+ originalValue.push(d[i][this.valueField]);
+ }
+
+ return String(this.getValue()) !== String(originalValue.join(this.seperator));
+
+ }
+
+});
+
- 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.
+ * @class Roo.form.ComboBoxArray.Item
+ * @extends Roo.BoxComponent
+ * A selected item in the list
+ * Fred [x] Brian [x] [Pick another |v]
+ *
* @constructor
- * Creates a new TextArea
+ * Create a new item.
* @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"})
- */
+
+Roo.form.ComboBoxArray.Item = function(config) {
+ config.id = Roo.id();
+ Roo.form.ComboBoxArray.Item.superclass.constructor.call(this, config);
+}
- // private
- onRender : function(ct, position){
- if(!this.el){
- this.defaultAutoCreate = {
- tag: "textarea",
- style:"width:300px;height:60px;",
- autocomplete: "new-password"
- };
- }
- 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");
+Roo.extend(Roo.form.ComboBoxArray.Item, Roo.BoxComponent, {
+ data : {},
+ cb: false,
+ displayField : false,
+ tipField : false,
+
+
+ defaultAutoCreate : {
+ tag: 'div',
+ cls: 'x-cbarray-item',
+ cn : [
+ { tag: 'div' },
+ {
+ tag: 'img',
+ width:16,
+ height : 16,
+ src : Roo.BLANK_IMAGE_URL ,
+ align: 'center'
}
- 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();
+
+
+ onRender : function(ct, position)
+ {
+ Roo.form.Field.superclass.onRender.call(this, ct, position);
+
+ if(!this.el){
+ var cfg = this.getAutoCreate();
+ this.el = ct.createChild(cfg, position);
}
+
+ this.el.child('img').dom.setAttribute('src', Roo.BLANK_IMAGE_URL);
+
+ this.el.child('div').dom.innerHTML = this.cb.renderer ?
+ this.cb.renderer(this.data) :
+ String.format('{0}',this.data[this.displayField]);
+
+
+ this.el.child('div').dom.setAttribute('qtip',
+ String.format('{0}',this.data[this.tipField])
+ );
+
+ this.el.child('img').on('click', this.remove, this);
+
},
-
- /**
- * 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){
+
+ remove : function()
+ {
+ if(this.cb.disabled){
return;
}
- var el = this.el;
- var v = el.dom.value;
- var ts = this.textSizeEl;
-
- ts.innerHTML = '';
- ts.appendChild(document.createTextNode(v));
- v = ts.innerHTML;
+
+ if(false !== this.cb.fireEvent('beforeremove', this.cb, this)){
+ this.cb.items.remove(this);
+ this.el.child('img').un('click', this.remove, this);
+ this.el.remove();
+ this.cb.updateHiddenEl();
- 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);
+ this.cb.fireEvent('remove', this.cb, 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.
+ * RooJS Library 1.1.1
+ * Copyright(c) 2008-2011 Alan Knowles
*
- * Fork - LGPL
- * <script type="text/javascript">
+ * License - LGPL
*/
/**
- * @class Roo.form.NumberField
- * @extends Roo.form.TextField
- * Numeric text field that provides automatic keystroke filtering and numeric validation.
+ * @class Roo.form.ComboNested
+ * @extends Roo.form.ComboBox
+ * A combobox for that allows selection of nested items in a list,
+ * eg.
+ *
+ * Book
+ * -> red
+ * -> green
+ * Table
+ * -> square
+ * ->red
+ * ->green
+ * -> rectangle
+ * ->green
+ *
+ *
* @constructor
- * Creates a new NumberField
+ * Create a new ComboNested
* @param {Object} config Configuration options
*/
-Roo.form.NumberField = function(config){
- Roo.form.NumberField.superclass.constructor.call(this, config);
+Roo.form.ComboNested = function(config){
+ Roo.form.ComboCheck.superclass.constructor.call(this, config);
+ // should verify some data...
+ // like
+ // hiddenName = required..
+ // displayField = required
+ // valudField == required
+ var req= [ 'hiddenName', 'displayField', 'valueField' ];
+ var _t = this;
+ Roo.each(req, function(e) {
+ if ((typeof(_t[e]) == 'undefined' ) || !_t[e].length) {
+ throw "Roo.form.ComboNested : missing value for: " + e;
+ }
+ });
+
+
};
-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")
+Roo.extend(Roo.form.ComboNested, Roo.form.ComboBox, {
+
+ /*
+ * @config {Number} max Number of columns to show
*/
- nanText : "{0} is not a valid number",
-
+
+ maxColumns : 3,
+
+ list : null, // the outermost div..
+ innerLists : null, // the
+ views : null,
+ stores : null,
// private
- initEvents : function(){
- Roo.form.NumberField.superclass.initEvents.call(this);
- var allowed = "0123456789";
- if(this.allowDecimals){
- allowed += this.decimalSeparator;
+ loadingChildren : false,
+
+ onRender : function(ct, position)
+ {
+ Roo.form.ComboBox.superclass.onRender.call(this, ct, position); // skip parent call - got to above..
+
+ 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(this.allowNegative){
- allowed += "-";
+
+ if(Roo.isGecko){
+ this.el.dom.setAttribute('autocomplete', 'off');
}
- 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 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();
}
- var num = this.parseValue(value);
- if(isNaN(num)){
- this.markInvalid(String.format(this.nanText, value));
- return false;
+ this.innerLists = [];
+ this.views = [];
+ this.stores = [];
+ for (var i =0 ; i < this.maxColumns; i++) {
+ this.onRenderList( cls, i);
}
- if(num < this.minValue){
- this.markInvalid(String.format(this.minText, this.minValue));
- return false;
+
+ // always needs footer, as we are going to have an 'OK' button.
+ this.footer = this.list.createChild({cls:cls+'-ft'});
+ this.pageTb = new Roo.Toolbar(this.footer);
+ var _this = this;
+ this.pageTb.add( {
+
+ text: 'Done',
+ handler: function()
+ {
+ _this.collapse();
+ }
+ });
+
+ if ( this.allowBlank && !this.disableClear) {
+
+ 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(num > this.maxValue){
- this.markInvalid(String.format(this.maxText, this.maxValue));
- return false;
+ if (this.footer) {
+ this.assetHeight += this.footer.getHeight();
}
- return true;
+
},
+ onRenderList : function ( cls, i)
+ {
+
+ var lw = Math.floor(
+ ((this.listWidth * this.maxColumns || Math.max(this.wrap.getWidth(), this.minListWidth)) - this.list.getFrameWidth('lr')) / this.maxColumns
+ );
+
+ this.list.setWidth(lw); // default to '1'
- getValue : function(){
- return this.fixPrecision(this.parseValue(Roo.form.NumberField.superclass.getValue.call(this)));
- },
+ var il = this.innerLists[i] = this.list.createChild({cls:cls+'-inner'});
+ //il.on('mouseover', this.onViewOver, this, { list: i });
+ //il.on('mousemove', this.onViewMove, this, { list: i });
+ il.setWidth(lw);
+ il.setStyle({ 'overflow-x' : 'hidden'});
- // private
- parseValue : function(value){
- value = parseFloat(String(value).replace(this.decimalSeparator, "."));
- return isNaN(value) ? '' : value;
- },
+ if(!this.tpl){
+ this.tpl = new Roo.Template({
+ html : '<div class="'+cls+'-item '+cls+'-item-{cn:this.isEmpty}">{' + this.displayField + '}</div>',
+ isEmpty: function (value, allValues) {
+ //Roo.log(value);
+ var dl = typeof(value.data) != 'undefined' ? value.data.length : value.length; ///json is a nested response..
+ return dl ? 'has-children' : 'no-children'
+ }
+ });
+ }
+
+ var store = this.store;
+ if (i > 0) {
+ store = new Roo.data.SimpleStore({
+ //fields : this.store.reader.meta.fields,
+ reader : this.store.reader,
+ data : [ ]
+ });
+ }
+ this.stores[i] = store;
+
+ var view = this.views[i] = new Roo.View(
+ il,
+ this.tpl,
+ {
+ singleSelect:true,
+ store: store,
+ selectedClass: this.selectedClass
+ }
+ );
+ view.getEl().setWidth(lw);
+ view.getEl().setStyle({
+ position: i < 1 ? 'relative' : 'absolute',
+ top: 0,
+ left: (i * lw ) + 'px',
+ display : i > 0 ? 'none' : 'block'
+ });
+ view.on('selectionchange', this.onSelectChange.createDelegate(this, {list : i }, true));
+ view.on('dblclick', this.onDoubleClick.createDelegate(this, {list : i }, true));
+ //view.on('click', this.onViewClick, this, { list : i });
+ store.on('beforeload', this.onBeforeLoad, this);
+ store.on('load', this.onLoad, this, { list : i});
+ store.on('loadexception', this.onLoadException, this);
+
+ // hide the other vies..
+
+
+
+ },
+
+ restrictHeight : function()
+ {
+ var mh = 0;
+ Roo.each(this.innerLists, function(il,i) {
+ var el = this.views[i].getEl();
+ el.dom.style.height = '';
+ var inner = el.dom;
+ var h = Math.max(il.clientHeight, il.offsetHeight, il.scrollHeight);
+ // only adjust heights on other ones..
+ mh = Math.max(h, mh);
+ if (i < 1) {
+
+ el.setHeight(h < this.maxHeight ? 'auto' : this.maxHeight);
+ il.setHeight(h < this.maxHeight ? 'auto' : this.maxHeight);
+
+ }
+
+
+ }, this);
+
+ this.list.beginUpdate();
+ this.list.setHeight(mh+this.list.getFrameWidth('tb')+this.assetHeight);
+ this.list.alignTo(this.el, this.listAlign);
+ this.list.endUpdate();
+
+ },
+
+
+ // -- store handlers..
// private
- fixPrecision : function(value){
- var nan = isNaN(value);
- if(!this.allowDecimals || this.decimalPrecision == -1 || nan || !value){
- return nan ? '' : value;
+ onBeforeLoad : function()
+ {
+ if(!this.hasFocus){
+ return;
}
- return parseFloat(value).toFixed(this.decimalPrecision);
+ this.innerLists[0].update(this.loadingText ?
+ '<div class="loading-indicator">'+this.loadingText+'</div>' : '');
+ this.restrictHeight();
+ this.selectedIndex = -1;
},
+ // private
+ onLoad : function(a,b,c,d)
+ {
+ if (!this.loadingChildren) {
+ // then we are loading the top level. - hide the children
+ for (var i = 1;i < this.views.length; i++) {
+ this.views[i].getEl().setStyle({ display : 'none' });
+ }
+ var lw = Math.floor(
+ ((this.listWidth * this.maxColumns || Math.max(this.wrap.getWidth(), this.minListWidth)) - this.list.getFrameWidth('lr')) / this.maxColumns
+ );
+
+ this.list.setWidth(lw); // default to '1'
- setValue : function(v){
- v = this.fixPrecision(v);
- Roo.form.NumberField.superclass.setValue.call(this, String(v).replace(".", this.decimalSeparator));
+
+ }
+ if(!this.hasFocus){
+ return;
+ }
+
+ if(this.store.getCount() > 0) {
+ this.expand();
+ this.restrictHeight();
+ } else {
+ this.onEmptyResults();
+ }
+
+ if (!this.loadingChildren) {
+ this.selectActive();
+ }
+ /*
+ this.stores[1].loadData([]);
+ this.stores[2].loadData([]);
+ this.views
+ */
+
+ //this.el.focus();
},
-
+
+
// private
- decimalPrecisionFcn : function(v){
- return Math.floor(v);
+ onLoadException : function()
+ {
+ this.collapse();
+ Roo.log(this.store.reader.jsonData);
+ if (this.store && typeof(this.store.reader.jsonData.errorMsg) != 'undefined') {
+ Roo.MessageBox.alert("Error loading",this.store.reader.jsonData.errorMsg);
+ }
+
+
},
+ // no cleaning of leading spaces on blur here.
+ cleanLeadingSpace : function(e) { },
+
- beforeBlur : function(){
- var v = this.parseValue(this.getRawValue());
- if(v){
- this.setValue(v);
+ onSelectChange : function (view, sels, opts )
+ {
+ var ix = view.getSelectedIndexes();
+
+ if (opts.list > this.maxColumns - 2) {
+ if (view.store.getCount()< 1) {
+ this.views[opts.list ].getEl().setStyle({ display : 'none' });
+
+ } else {
+ if (ix.length) {
+ // used to clear ?? but if we are loading unselected
+ this.setFromData(view.store.getAt(ix[0]).data);
+ }
+
+ }
+
+ return;
+ }
+
+ if (!ix.length) {
+ // this get's fired when trigger opens..
+ // this.setFromData({});
+ var str = this.stores[opts.list+1];
+ str.data.clear(); // removeall wihtout the fire events..
+ return;
+ }
+
+ var rec = view.store.getAt(ix[0]);
+
+ this.setFromData(rec.data);
+ this.fireEvent('select', this, rec, ix[0]);
+
+ var lw = Math.floor(
+ (
+ (this.listWidth * this.maxColumns || Math.max(this.wrap.getWidth(), this.minListWidth)) - this.list.getFrameWidth('lr')
+ ) / this.maxColumns
+ );
+ this.loadingChildren = true;
+ this.stores[opts.list+1].loadDataFromChildren( rec );
+ this.loadingChildren = false;
+ var dl = this.stores[opts.list+1]. getTotalCount();
+
+ this.views[opts.list+1].getEl().setHeight( this.innerLists[0].getHeight());
+
+ this.views[opts.list+1].getEl().setStyle({ display : dl ? 'block' : 'none' });
+ for (var i = opts.list+2; i < this.views.length;i++) {
+ this.views[i].getEl().setStyle({ display : 'none' });
+ }
+
+ this.innerLists[opts.list+1].setHeight( this.innerLists[0].getHeight());
+ this.list.setWidth(lw * (opts.list + (dl ? 2 : 1)));
+
+ if (this.isLoading) {
+ // this.selectActive(opts.list);
+ }
+
+ },
+
+
+
+
+ onDoubleClick : function()
+ {
+ this.collapse(); //??
+ },
+
+
+
+
+
+ // private
+ recordToStack : function(store, prop, value, stack)
+ {
+ var cstore = new Roo.data.SimpleStore({
+ //fields : this.store.reader.meta.fields, // we need array reader.. for
+ reader : this.store.reader,
+ data : [ ]
+ });
+ var _this = this;
+ var record = false;
+ var srec = false;
+ if(store.getCount() < 1){
+ return false;
+ }
+ store.each(function(r){
+ if(r.data[prop] == value){
+ record = r;
+ srec = r;
+ return false;
+ }
+ if (r.data.cn && r.data.cn.length) {
+ cstore.loadDataFromChildren( r);
+ var cret = _this.recordToStack(cstore, prop, value, stack);
+ if (cret !== false) {
+ record = cret;
+ srec = r;
+ return false;
+ }
+ }
+
+ return true;
+ });
+ if (record == false) {
+ return false
+ }
+ stack.unshift(srec);
+ return record;
+ },
+
+ /*
+ * find the stack of stores that match our value.
+ *
+ *
+ */
+
+ selectActive : function ()
+ {
+ // if store is not loaded, then we will need to wait for that to happen first.
+ var stack = [];
+ this.recordToStack(this.store, this.valueField, this.getValue(), stack);
+ for (var i = 0; i < stack.length; i++ ) {
+ this.views[i].select(stack[i].store.indexOf(stack[i]), false, false );
}
+
}
+
+
+
+
+
+
});/*
* Based on:
* Ext JS Library 1.1.1
* 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
+ * @class Roo.form.Checkbox
+ * @extends Roo.form.Field
+ * Single checkbox field. Can be used as a direct replacement for traditional checkbox fields.
+ * @constructor
+ * Creates a new Checkbox
+ * @param {Object} config Configuration options
*/
-Roo.form.DateField = function(config){
- Roo.form.DateField.superclass.constructor.call(this, config);
-
- this.addEvents({
-
+Roo.form.Checkbox = function(config){
+ Roo.form.Checkbox.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
+ * @event check
+ * Fires when the checkbox is checked or unchecked.
+ * @param {Roo.form.Checkbox} this This checkbox
+ * @param {Boolean} checked The new checked value
*/
- 'select' : true
-
+ check : 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,
+Roo.extend(Roo.form.Checkbox, Roo.form.Field, {
/**
- * @cfg {String} disabledDatesText
- * The tooltip text to display when the date falls on a disabled date (defaults to 'Disabled')
+ * @cfg {String} focusClass The CSS class to use when the checkbox receives focus (defaults to undefined)
*/
- disabledDatesText : "Disabled",
+ focusClass : undefined,
/**
- * @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).
+ * @cfg {String} fieldClass The default CSS class for the checkbox (defaults to "x-form-field")
*/
- minValue : null,
+ fieldClass: "x-form-field",
/**
- * @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).
+ * @cfg {Boolean} checked True if the the checkbox should render already checked (defaults to false)
*/
- maxValue : null,
+ checked: false,
/**
- * @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}').
+ * @cfg {String/Object} autoCreate A DomHelper element spec, or true for a default element spec (defaults to
+ * {tag: "input", type: "checkbox", autocomplete: "off"})
*/
- minText : "The date in this field must be equal to or after {0}",
+ defaultAutoCreate : { tag: "input", type: 'hidden', autocomplete: "off"},
/**
- * @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}').
+ * @cfg {String} boxLabel The text that appears beside the checkbox
*/
- maxText : "The date in this field must be equal to or before {0}",
+ boxLabel : "",
/**
- * @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} inputValue The value that should go into the generated input element's value attribute
+ */
+ inputValue : '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).
+ * @cfg {String} valueOff The value that should go into the generated input element's value when unchecked.
*/
- triggerClass : 'x-form-date-trigger',
-
+ valueOff: '0', // value when not checked..
- /**
- * @cfg {Boolean} 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"})
- */
+ actionMode : 'viewEl',
+ //
// private
- defaultAutoCreate : {tag: "input", type: "text", size: "10", autocomplete: "off"},
+ itemCls : 'x-menu-check-item x-form-item',
+ groupClass : 'x-menu-group-item',
+ inputType : 'hidden',
- // private
- hiddenField: false,
- onRender : function(ct, position)
- {
- Roo.form.DateField.superclass.onRender.call(this, ct, position);
- if (this.useIso) {
- //this.el.dom.removeAttribute('name');
- Roo.log("Changing name?");
- this.el.dom.setAttribute('name', this.name + '____hidden___' );
- this.hiddenField = this.el.insertSibling({ tag:'input', type:'hidden', name: this.name },
- 'before', true);
- this.hiddenField.value = this.value ? this.formatDate(this.value, 'Y-m-d') : '';
- // prevent input submission
- this.hiddenName = this.name;
+ inSetChecked: false, // check that we are not calling self...
+
+ inputElement: false, // real input element?
+ basedOn: false, // ????
+
+ isFormField: true, // not sure where this is needed!!!!
+
+ onResize : function(){
+ Roo.form.Checkbox.superclass.onResize.apply(this, arguments);
+ if(!this.boxLabel){
+ this.el.alignTo(this.wrap, 'c-c');
}
-
-
},
-
+
+ initEvents : function(){
+ Roo.form.Checkbox.superclass.initEvents.call(this);
+ this.el.on("click", this.onClick, this);
+ this.el.on("change", this.onClick, this);
+ },
+
+
+ getResizeEl : function(){
+ return this.wrap;
+ },
+
+ getPositionEl : function(){
+ return this.wrap;
+ },
+
// private
- validateValue : function(value)
- {
- value = this.formatDate(value);
- if(!Roo.form.DateField.superclass.validateValue.call(this, value)){
- Roo.log('super failed');
- 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){
- Roo.log('parse date failed' + svalue);
- 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;
- }
- }
+ onRender : function(ct, position){
+ Roo.form.Checkbox.superclass.onRender.call(this, ct, position);
+ /*
+ if(this.inputValue !== undefined){
+ this.el.dom.value = this.inputValue;
}
- var fvalue = this.formatDate(value);
- if(this.ddMatch && this.ddMatch.test(fvalue)){
- this.markInvalid(String.format(this.disabledDatesText, fvalue));
- return false;
+ */
+ //this.wrap = this.el.wrap({cls: "x-form-check-wrap"});
+ this.wrap = this.el.wrap({cls: 'x-menu-check-item '});
+ var viewEl = this.wrap.createChild({
+ tag: 'img', cls: 'x-menu-item-icon', style: 'margin: 0px;' ,src : Roo.BLANK_IMAGE_URL });
+ this.viewEl = viewEl;
+ this.wrap.on('click', this.onClick, this);
+
+ this.el.on('DOMAttrModified', this.setFromHidden, this); //ff
+ this.el.on('propertychange', this.setFromHidden, this); //ie
+
+
+
+ if(this.boxLabel){
+ this.wrap.createChild({tag: 'label', htmlFor: this.el.id, cls: 'x-form-cb-label', html: this.boxLabel});
+ // viewEl.on('click', this.onClick, this);
}
- return true;
+ //if(this.checked){
+ this.setChecked(this.checked);
+ //}else{
+ //this.checked = this.el.dom;
+ //}
+
},
// private
- // Provides logic to override the default TriggerField.validateBlur which just returns true
- validateBlur : function(){
- return !this.menu || !this.menu.isVisible();
- },
-
- getName: function()
- {
- // returns hidden if it's set..
- if (!this.rendered) {return ''};
- return !this.hiddenName && this.el.dom.name ? this.el.dom.name : (this.hiddenName || '');
-
- },
+ initValue : Roo.emptyFn,
/**
- * Returns the current date value of the date field.
- * @return {Date} The date value
+ * Returns the checked state of the checkbox.
+ * @return {Boolean} True if checked, else false
*/
getValue : function(){
+ if(this.el){
+ return String(this.el.dom.value) == String(this.inputValue ) ? this.inputValue : this.valueOff;
+ }
+ return this.valueOff;
- 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);
+ // private
+ onClick : function(){
+ if (this.disabled) {
+ return;
+ }
+ this.setChecked(!this.checked);
-//Pass a date string (default format):
-dateField.setValue('5/4/06');
+ //if(this.el.dom.checked != this.checked){
+ // this.setValue(this.el.dom.checked);
+ // }
+ },
-//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
+ /**
+ * Sets the checked state of the checkbox.
+ * On is always based on a string comparison between inputValue and the param.
+ * @param {Boolean/String} value - the value to set
+ * @param {Boolean/String} suppressEvent - whether to suppress the checkchange event.
*/
- 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)));
- // make sure the value field is always stored as a date..
- this.value = this.parseDate(date);
+ setValue : function(v,suppressEvent){
+ //this.checked = (v === true || v === 'true' || v == '1' || String(v).toLowerCase() == 'on');
+ //if(this.el && this.el.dom){
+ // this.el.dom.checked = this.checked;
+ // this.el.dom.defaultChecked = this.checked;
+ //}
+ this.setChecked(String(v) === String(this.inputValue), suppressEvent);
+ //this.fireEvent("check", this, this.checked);
},
-
- // private
- parseDate : function(value){
- if(!value || value instanceof Date){
- return value;
- }
- var v = Date.parseDate(value, this.format);
- if (!v && this.useIso) {
- v = Date.parseDate(value, 'Y-m-d');
+ // private..
+ setChecked : function(state,suppressEvent)
+ {
+ if (this.inSetChecked) {
+ this.checked = state;
+ return;
}
- 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]);
- }
+
+
+ if(this.wrap){
+ this.wrap[state ? 'addClass' : 'removeClass']('x-menu-item-checked');
}
- 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);
+ this.checked = state;
+ if(suppressEvent !== true){
+ this.fireEvent('check', this, state);
}
+ this.inSetChecked = true;
+ this.el.dom.value = state ? this.inputValue : this.valueOff;
+ this.inSetChecked = false;
+
},
-
- // private
- // Implements the default empty TriggerField.onTriggerClick function to display the DatePicker
- onTriggerClick : function(){
- if(this.disabled){
+ // handle setting of hidden value by some other method!!?!?
+ setFromHidden: function()
+ {
+ if(!this.el){
return;
}
- if(this.menu == null){
- this.menu = new Roo.menu.DateMenu();
+ //console.log("SET FROM HIDDEN");
+ //alert('setFrom hidden');
+ this.setValue(this.el.dom.value);
+ },
+
+ onDestroy : function()
+ {
+ if(this.viewEl){
+ Roo.get(this.viewEl).remove();
}
- 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.useIso ? 'Y-m-d' : 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?");
+
+ Roo.form.Checkbox.superclass.onDestroy.call(this);
},
+
+ setBoxLabel : function(str)
+ {
+ this.wrap.select('.x-form-cb-label', true).first().dom.innerHTML = str;
+ }
- beforeBlur : function(){
- var v = this.parseDate(this.getRawValue());
- if(v){
- this.setValue(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.Radio
+ * @extends Roo.form.Checkbox
+ * Single radio field. Same as Checkbox, but provided as a convenience for automatically setting the input type.
+ * Radio grouping is handled automatically by the browser if you give each radio in a group the same name.
+ * @constructor
+ * Creates a new Radio
+ * @param {Object} config Configuration options
+ */
+Roo.form.Radio = function(){
+ Roo.form.Radio.superclass.constructor.apply(this, arguments);
+};
+Roo.extend(Roo.form.Radio, Roo.form.Checkbox, {
+ inputType: 'radio',
+
+ /**
+ * If this radio is part of a group, it will return the selected value
+ * @return {String}
+ */
+ getGroupValue : function(){
+ return this.el.up('form').child('input[name='+this.el.dom.name+']:checked', true).value;
+ },
+
+
+ onRender : function(ct, position){
+ Roo.form.Checkbox.superclass.onRender.call(this, ct, position);
+
+ if(this.inputValue !== undefined){
+ this.el.dom.value = this.inputValue;
+ }
+
+ this.wrap = this.el.wrap({cls: "x-form-check-wrap"});
+ //this.wrap = this.el.wrap({cls: 'x-menu-check-item '});
+ //var viewEl = this.wrap.createChild({
+ // tag: 'img', cls: 'x-menu-item-icon', style: 'margin: 0px;' ,src : Roo.BLANK_IMAGE_URL });
+ //this.viewEl = viewEl;
+ //this.wrap.on('click', this.onClick, this);
+
+ //this.el.on('DOMAttrModified', this.setFromHidden, this); //ff
+ //this.el.on('propertychange', this.setFromHidden, this); //ie
+
+
+
+ if(this.boxLabel){
+ this.wrap.createChild({tag: 'label', htmlFor: this.el.id, cls: 'x-form-cb-label', html: this.boxLabel});
+ // viewEl.on('click', this.onClick, this);
}
- },
+ if(this.checked){
+ this.el.dom.checked = 'checked' ;
+ }
+
+ }
+
+
+});Roo.rtf = {}; // namespace
+Roo.rtf.Hex = function(hex)
+{
+ this.hexstr = hex;
+};
+Roo.rtf.Paragraph = function(opts)
+{
+ this.content = []; ///??? is that used?
+};Roo.rtf.Span = function(opts)
+{
+ this.value = opts.value;
+};
- /*@
- * overide
- *
- */
- isDirty : function() {
- if(this.disabled) {
- return false;
+Roo.rtf.Group = function(parent)
+{
+ // we dont want to acutally store parent - it will make debug a nightmare..
+ this.content = [];
+ this.cn = [];
+
+
+
+};
+
+Roo.rtf.Group.prototype = {
+ ignorable : false,
+ content: false,
+ cn: false,
+ addContent : function(node) {
+ // could set styles...
+ this.content.push(node);
+ },
+ addChild : function(cn)
+ {
+ this.cn.push(cn);
+ },
+ // only for images really...
+ toDataURL : function()
+ {
+ var mimetype = false;
+ switch(true) {
+ case this.content.filter(function(a) { return a.value == 'pngblip' } ).length > 0:
+ mimetype = "image/png";
+ break;
+ case this.content.filter(function(a) { return a.value == 'jpegblip' } ).length > 0:
+ mimetype = "image/jpeg";
+ break;
+ default :
+ return 'about:blank'; // ?? error?
}
- if(typeof(this.startValue) === 'undefined'){
- return false;
- }
- return String(this.getValue()) !== String(this.startValue);
+ var hexstring = this.content[this.content.length-1].value;
+ return 'data:' + mimetype + ';base64,' + btoa(hexstring.match(/\w{2}/g).map(function(a) {
+ return String.fromCharCode(parseInt(a, 16));
+ }).join(""));
}
-});/*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
+
+};
+// this looks like it's normally the {rtf{ .... }}
+Roo.rtf.Document = function()
+{
+ // we dont want to acutally store parent - it will make debug a nightmare..
+ this.rtlch = [];
+ this.content = [];
+ this.cn = [];
+
+};
+Roo.extend(Roo.rtf.Document, Roo.rtf.Group, {
+ addChild : function(cn)
+ {
+ this.cn.push(cn);
+ switch(cn.type) {
+ case 'rtlch': // most content seems to be inside this??
+ case 'listtext':
+ case 'shpinst':
+ this.rtlch.push(cn);
+ return;
+ default:
+ this[cn.type] = cn;
+ }
+
+ },
+
+ getElementsByType : function(type)
+ {
+ var ret = [];
+ this._getElementsByType(type, ret, this.cn, 'rtf');
+ return ret;
+ },
+ _getElementsByType : function (type, ret, search_array, path)
+ {
+ search_array.forEach(function(n,i) {
+ if (n.type == type) {
+ n.path = path + '/' + n.type + ':' + i;
+ ret.push(n);
+ }
+ if (n.cn.length > 0) {
+ this._getElementsByType(type, ret, n.cn, path + '/' + n.type+':'+i);
+ }
+ },this);
+ }
+
+});
+
+Roo.rtf.Ctrl = function(opts)
+{
+ this.value = opts.value;
+ this.param = opts.param;
+};
+/**
*
- * Originally Released Under LGPL - original licence link has changed is not relivant.
*
- * Fork - LGPL
- * <script type="text/javascript">
+ * based on this https://github.com/iarna/rtf-parser
+ * it's really only designed to extract pict from pasted RTF
+ *
+ * usage:
+ *
+ * var images = new Roo.rtf.Parser().parse(a_string).filter(function(g) { return g.type == 'pict'; });
+ *
+ *
*/
+
-/**
- * @class Roo.form.MonthField
- * @extends Roo.form.TriggerField
- * Provides a date input field with a {@link Roo.DatePicker} dropdown and automatic date validation.
-* @constructor
-* Create a new MonthField
-* @param {Object} config
- */
-Roo.form.MonthField = function(config){
-
- Roo.form.MonthField.superclass.constructor.call(this, config);
+
+
+
+Roo.rtf.Parser = function(text) {
+ //super({objectMode: true})
+ this.text = '';
+ this.parserState = this.parseText;
- this.addEvents({
-
- /**
- * @event select
- * Fires when a date is selected
- * @param {Roo.form.MonthFieeld} combo This combo box
- * @param {Date} date The date selected
- */
- 'select' : true
-
- });
+ // these are for interpeter...
+ this.doc = {};
+ ///this.parserState = this.parseTop
+ this.groupStack = [];
+ this.hexStore = [];
+ this.doc = false;
+ this.groups = []; // where we put the return.
- 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 += "|";
- }
+ for (var ii = 0; ii < text.length; ++ii) {
+ ++this.cpos;
+
+ if (text[ii] === '\n') {
+ ++this.row;
+ this.col = 1;
+ } else {
+ ++this.col;
}
- this.ddMatch = new RegExp(re + ")");
+ this.parserState(text[ii]);
}
-};
-
-Roo.extend(Roo.form.MonthField, 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 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 Y|m/Y|m-y|m-Y|my|mY",
- /**
- * @cfg {Array} disabledDays
- * An array of days to disable, 0 based. For example, [0, 6] disables Sunday and Saturday (defaults to null).
- */
- disabledDays : [0,1,2,3,4,5,6],
- /**
- * @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} maxTextf
- * 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 {Boolean} useIso
- * if enabled, then the date field will use a hidden field to store the
- * real value as iso formated date. default (true)
- */
- useIso : true,
- /**
- * @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: "new-password"},
- // private
- hiddenField: false,
- hideMonthPicker : false,
+};
+Roo.rtf.Parser.prototype = {
+ text : '', // string being parsed..
+ controlWord : '',
+ controlWordParam : '',
+ hexChar : '',
+ doc : false,
+ group: false,
+ groupStack : false,
+ hexStore : false,
- onRender : function(ct, position)
+
+ cpos : 0,
+ row : 1, // reportin?
+ col : 1, //
+
+
+ push : function (el)
{
- Roo.form.MonthField.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.value ? this.formatDate(this.value, 'Y-m-d') : '';
- // prevent input submission
- this.hiddenName = this.name;
+ var m = 'cmd'+ el.type;
+ if (typeof(this[m]) == 'undefined') {
+ Roo.log('invalid cmd:' + el.type);
+ return;
}
+ this[m](el);
+ //Roo.log(el);
+ },
+ flushHexStore : function()
+ {
+ if (this.hexStore.length < 1) {
+ return;
+ }
+ var hexstr = this.hexStore.map(
+ function(cmd) {
+ return cmd.value;
+ }).join('');
+
+ this.group.addContent( new Roo.rtf.Hex( hexstr ));
+
-
+ this.hexStore.splice(0)
+
},
- // private
- validateValue : function(value)
+ cmdgroupstart : function()
{
- value = this.formatDate(value);
- if(!Roo.form.MonthField.superclass.validateValue.call(this, value)){
- return false;
+ this.flushHexStore();
+ if (this.group) {
+ this.groupStack.push(this.group);
}
- if(value.length < 1){ // if it's blank and textfield didn't flag it then it's valid
- return true;
+ // parent..
+ if (this.doc === false) {
+ this.group = this.doc = new Roo.rtf.Document();
+ return;
+
}
- var svalue = value;
- value = this.parseDate(value);
- if(!value){
- this.markInvalid(String.format(this.invalidText, svalue, this.format));
- return false;
+ this.group = new Roo.rtf.Group(this.group);
+ },
+ cmdignorable : function()
+ {
+ this.flushHexStore();
+ this.group.ignorable = true;
+ },
+ cmdendparagraph : function()
+ {
+ this.flushHexStore();
+ this.group.addContent(new Roo.rtf.Paragraph());
+ },
+ cmdgroupend : function ()
+ {
+ this.flushHexStore();
+ var endingGroup = this.group;
+
+
+ this.group = this.groupStack.pop();
+ if (this.group) {
+ this.group.addChild(endingGroup);
}
- var time = value.getTime();
- if(this.minValue && time < this.minValue.getTime()){
- this.markInvalid(String.format(this.minText, this.formatDate(this.minValue)));
- return false;
+
+
+
+ var doc = this.group || this.doc;
+ //if (endingGroup instanceof FontTable) {
+ // doc.fonts = endingGroup.table
+ //} else if (endingGroup instanceof ColorTable) {
+ // doc.colors = endingGroup.table
+ //} else if (endingGroup !== this.doc && !endingGroup.get('ignorable')) {
+ if (endingGroup.ignorable === false) {
+ //code
+ this.groups.push(endingGroup);
+ // Roo.log( endingGroup );
}
- if(this.maxValue && time > this.maxValue.getTime()){
- this.markInvalid(String.format(this.maxText, this.formatDate(this.maxValue)));
- return false;
+ //Roo.each(endingGroup.content, function(item)) {
+ // doc.addContent(item);
+ //}
+ //process.emit('debug', 'GROUP END', endingGroup.type, endingGroup.get('ignorable'))
+ //}
+ },
+ cmdtext : function (cmd)
+ {
+ this.flushHexStore();
+ if (!this.group) { // an RTF fragment, missing the {\rtf1 header
+ //this.group = this.doc
+ return; // we really don't care about stray text...
}
- /*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;
- }
- }
+ this.group.addContent(new Roo.rtf.Span(cmd));
+ },
+ cmdcontrolword : function (cmd)
+ {
+ this.flushHexStore();
+ if (!this.group.type) {
+ this.group.type = cmd.value;
+ return;
}
- */
- var fvalue = this.formatDate(value);
- /*if(this.ddMatch && this.ddMatch.test(fvalue)){
- this.markInvalid(String.format(this.disabledDatesText, fvalue));
- return false;
+ this.group.addContent(new Roo.rtf.Ctrl(cmd));
+ // we actually don't care about ctrl words...
+ return ;
+ /*
+ var method = 'ctrl$' + cmd.value.replace(/-(.)/g, (_, char) => char.toUpperCase())
+ if (this[method]) {
+ this[method](cmd.param)
+ } else {
+ if (!this.group.get('ignorable')) process.emit('debug', method, cmd.param)
}
*/
- return true;
},
-
- // private
- // Provides logic to override the default TriggerField.validateBlur which just returns true
- validateBlur : function(){
- return !this.menu || !this.menu.isVisible();
+ cmdhexchar : function(cmd) {
+ this.hexStore.push(cmd);
},
-
- /**
- * Returns the current date value of the date field.
- * @return {Date} The date value
- */
- getValue : function(){
-
-
+ cmderror : function(cmd) {
+ throw cmd.value;
+ },
+
+ /*
+ _flush (done) {
+ if (this.text !== '\u0000') this.emitText()
+ done()
+ }
+ */
+
+
+ parseText : function(c)
+ {
+ if (c === '\\') {
+ this.parserState = this.parseEscapes;
+ } else if (c === '{') {
+ this.emitStartGroup();
+ } else if (c === '}') {
+ this.emitEndGroup();
+ } else if (c === '\x0A' || c === '\x0D') {
+ // cr/lf are noise chars
+ } else {
+ this.text += c;
+ }
+ },
+
+ parseEscapes: function (c)
+ {
+ if (c === '\\' || c === '{' || c === '}') {
+ this.text += c;
+ this.parserState = this.parseText;
+ } else {
+ this.parserState = this.parseControlSymbol;
+ this.parseControlSymbol(c);
+ }
+ },
+ parseControlSymbol: function(c)
+ {
+ if (c === '~') {
+ this.text += '\u00a0'; // nbsp
+ this.parserState = this.parseText
+ } else if (c === '-') {
+ this.text += '\u00ad'; // soft hyphen
+ } else if (c === '_') {
+ this.text += '\u2011'; // non-breaking hyphen
+ } else if (c === '*') {
+ this.emitIgnorable();
+ this.parserState = this.parseText;
+ } else if (c === "'") {
+ this.parserState = this.parseHexChar;
+ } else if (c === '|') { // formula cacter
+ this.emitFormula();
+ this.parserState = this.parseText;
+ } else if (c === ':') { // subentry in an index entry
+ this.emitIndexSubEntry();
+ this.parserState = this.parseText;
+ } else if (c === '\x0a') {
+ this.emitEndParagraph();
+ this.parserState = this.parseText;
+ } else if (c === '\x0d') {
+ this.emitEndParagraph();
+ this.parserState = this.parseText;
+ } else {
+ this.parserState = this.parseControlWord;
+ this.parseControlWord(c);
+ }
+ },
+ parseHexChar: function (c)
+ {
+ if (/^[A-Fa-f0-9]$/.test(c)) {
+ this.hexChar += c;
+ if (this.hexChar.length >= 2) {
+ this.emitHexChar();
+ this.parserState = this.parseText;
+ }
+ return;
+ }
+ this.emitError("Invalid character \"" + c + "\" in hex literal.");
+ this.parserState = this.parseText;
- return this.hiddenField ?
- this.hiddenField.value :
- this.parseDate(Roo.form.MonthField.superclass.getValue.call(this)) || "";
},
+ parseControlWord : function(c)
+ {
+ if (c === ' ') {
+ this.emitControlWord();
+ this.parserState = this.parseText;
+ } else if (/^[-\d]$/.test(c)) {
+ this.parserState = this.parseControlWordParam;
+ this.controlWordParam += c;
+ } else if (/^[A-Za-z]$/.test(c)) {
+ this.controlWord += c;
+ } else {
+ this.emitControlWord();
+ this.parserState = this.parseText;
+ this.parseText(c);
+ }
+ },
+ parseControlWordParam : function (c) {
+ if (/^\d$/.test(c)) {
+ this.controlWordParam += c;
+ } else if (c === ' ') {
+ this.emitControlWord();
+ this.parserState = this.parseText;
+ } else {
+ this.emitControlWord();
+ this.parserState = this.parseText;
+ this.parseText(c);
+ }
+ },
+
+
+
+
+ emitText : function () {
+ if (this.text === '') {
+ return;
+ }
+ this.push({
+ type: 'text',
+ value: this.text,
+ pos: this.cpos,
+ row: this.row,
+ col: this.col
+ });
+ this.text = ''
+ },
+ emitControlWord : function ()
+ {
+ this.emitText();
+ if (this.controlWord === '') {
+ // do we want to track this - it seems just to cause problems.
+ //this.emitError('empty control word');
+ } else {
+ this.push({
+ type: 'controlword',
+ value: this.controlWord,
+ param: this.controlWordParam !== '' && Number(this.controlWordParam),
+ pos: this.cpos,
+ row: this.row,
+ col: this.col
+ });
+ }
+ this.controlWord = '';
+ this.controlWordParam = '';
+ },
+ emitStartGroup : function ()
+ {
+ this.emitText();
+ this.push({
+ type: 'groupstart',
+ pos: this.cpos,
+ row: this.row,
+ col: this.col
+ });
+ },
+ emitEndGroup : function ()
+ {
+ this.emitText();
+ this.push({
+ type: 'groupend',
+ pos: this.cpos,
+ row: this.row,
+ col: this.col
+ });
+ },
+ emitIgnorable : function ()
+ {
+ this.emitText();
+ this.push({
+ type: 'ignorable',
+ pos: this.cpos,
+ row: this.row,
+ col: this.col
+ });
+ },
+ emitHexChar : function ()
+ {
+ this.emitText();
+ this.push({
+ type: 'hexchar',
+ value: this.hexChar,
+ pos: this.cpos,
+ row: this.row,
+ col: this.col
+ });
+ this.hexChar = ''
+ },
+ emitError : function (message)
+ {
+ this.emitText();
+ this.push({
+ type: 'error',
+ value: message,
+ row: this.row,
+ col: this.col,
+ char: this.cpos //,
+ //stack: new Error().stack
+ });
+ },
+ emitEndParagraph : function () {
+ this.emitText();
+ this.push({
+ type: 'endparagraph',
+ pos: this.cpos,
+ row: this.row,
+ col: this.col
+ });
+ }
+
+} ;
+Roo.htmleditor = {};
+
+/**
+ * @class Roo.htmleditor.Filter
+ * Base Class for filtering htmleditor stuff. - do not use this directly - extend it.
+ * @cfg {DomElement} node The node to iterate and filter
+ * @cfg {boolean|String|Array} tag Tags to replace
+ * @constructor
+ * Create a new Filter.
+ * @param {Object} config Configuration options
+ */
- /**
- * 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 MonthField.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');
-monthField.setValue(dt);
-//Pass a date string (default format):
-monthField.setValue('5/4/06');
+Roo.htmleditor.Filter = function(cfg) {
+ Roo.apply(this.cfg);
+ // this does not actually call walk as it's really just a abstract class
+}
-//Pass a date string (custom format):
-monthField.format = 'Y-m-d';
-monthField.setValue('2006-5-4');
-</code></pre>
- * @param {String/Date} date The date or valid date string
- */
- setValue : function(date){
- Roo.log('month setValue' + date);
- // can only be first of month..
-
- var val = this.parseDate(date);
+
+Roo.htmleditor.Filter.prototype = {
+
+ node: false,
+
+ tag: false,
+
+ // overrride to do replace comments.
+ replaceComment : false,
+
+ // overrride to do replace or do stuff with tags..
+ replaceTag : false,
+
+ walk : function(dom)
+ {
+ Roo.each( Array.from(dom.childNodes), function( e ) {
+ switch(true) {
+
+ case e.nodeType == 8 && this.replaceComment !== false: // comment
+ this.replaceComment(e);
+ return;
+
+ case e.nodeType != 1: //not a node.
+ return;
+
+ case this.tag === true: // everything
+ case e.tagName.indexOf(":") > -1 && typeof(this.tag) == 'object' && this.tag.indexOf(":") > -1:
+ case e.tagName.indexOf(":") > -1 && typeof(this.tag) == 'string' && this.tag == ":":
+ case typeof(this.tag) == 'object' && this.tag.indexOf(e.tagName) > -1: // array and it matches.
+ case typeof(this.tag) == 'string' && this.tag == e.tagName: // array and it matches.
+ if (this.replaceTag && false === this.replaceTag(e)) {
+ return;
+ }
+ if (e.hasChildNodes()) {
+ this.walk(e);
+ }
+ return;
+
+ default: // tags .. that do not match.
+ if (e.hasChildNodes()) {
+ this.walk(e);
+ }
+ }
+
+ }, this);
- if (this.hiddenField) {
- this.hiddenField.value = this.formatDate(this.parseDate(date), 'Y-m-d');
- }
- Roo.form.MonthField.superclass.setValue.call(this, this.formatDate(this.parseDate(date)));
- this.value = this.parseDate(date);
- },
+ }
+};
- // private
- parseDate : function(value){
- if(!value || value instanceof Date){
- value = value ? Date.parseDate(value.format('Y-m') + '-01', 'Y-m-d') : null;
- return value;
- }
- var v = Date.parseDate(value, this.format);
- if (!v && this.useIso) {
- v = Date.parseDate(value, 'Y-m-d');
- }
- if (v) {
- //
- v = Date.parseDate(v.format('Y-m') +'-01', 'Y-m-d');
+/**
+ * @class Roo.htmleditor.FilterAttributes
+ * clean attributes and styles including http:// etc.. in attribute
+ * @constructor
+* Run a new Attribute Filter
+* @param {Object} config Configuration options
+ */
+Roo.htmleditor.FilterAttributes = function(cfg)
+{
+ Roo.apply(this, cfg);
+ this.attrib_black = this.attrib_black || [];
+ this.attrib_white = this.attrib_white || [];
+
+ this.attrib_clean = this.attrib_clean || [];
+ this.style_white = this.style_white || [];
+ this.style_black = this.style_black || [];
+ this.walk(cfg.node);
+}
+
+Roo.extend(Roo.htmleditor.FilterAttributes, Roo.htmleditor.Filter,
+{
+ tag: true, // all tags
+
+ attrib_black : false, // array
+ attrib_clean : false,
+ attrib_white : false,
+
+ style_white : false,
+ style_black : false,
+
+
+ replaceTag : function(node)
+ {
+ if (!node.attributes || !node.attributes.length) {
+ return true;
}
-
- if(!v && this.altFormats){
- if(!this.altFormatsArray){
- this.altFormatsArray = this.altFormats.split("|");
+ for (var i = node.attributes.length-1; i > -1 ; i--) {
+ var a = node.attributes[i];
+ //console.log(a);
+ if (this.attrib_white.length && this.attrib_white.indexOf(a.name.toLowerCase()) < 0) {
+ node.removeAttribute(a.name);
+ continue;
}
- for(var i = 0, len = this.altFormatsArray.length; i < len && !v; i++){
- v = Date.parseDate(value, this.altFormatsArray[i]);
+
+
+
+ if (a.name.toLowerCase().substr(0,2)=='on') {
+ node.removeAttribute(a.name);
+ continue;
}
+
+
+ if (this.attrib_black.indexOf(a.name.toLowerCase()) > -1) {
+ node.removeAttribute(a.name);
+ continue;
+ }
+ if (this.attrib_clean.indexOf(a.name.toLowerCase()) > -1) {
+ this.cleanAttr(node,a.name,a.value); // fixme..
+ continue;
+ }
+ if (a.name == 'style') {
+ this.cleanStyle(node,a.name,a.value);
+ continue;
+ }
+ /// clean up MS crap..
+ // tecnically this should be a list of valid class'es..
+
+
+ if (a.name == 'class') {
+ if (a.value.match(/^Mso/)) {
+ node.removeAttribute('class');
+ }
+
+ if (a.value.match(/^body$/)) {
+ node.removeAttribute('class');
+ }
+ continue;
+ }
+
+
+ // style cleanup!?
+ // class cleanup?
+
}
- 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);
- }
+ return true; // clean children
},
- // private
- // Implements the default empty TriggerField.onTriggerClick function to display the DatePicker
- onTriggerClick : function(){
- if(this.disabled){
+
+ cleanAttr: function(node, n,v)
+ {
+
+ if (v.match(/^\./) || v.match(/^\//)) {
return;
}
- if(this.menu == null){
- this.menu = new Roo.menu.DateMenu();
-
+ if (v.match(/^(http|https):\/\//)
+ || v.match(/^mailto:/)
+ || v.match(/^ftp:/)
+ || v.match(/^data:/)
+ ) {
+ return;
+ }
+ if (v.match(/^#/)) {
+ return;
+ }
+ if (v.match(/^\{/)) { // allow template editing.
+ return;
+ }
+// Roo.log("(REMOVE TAG)"+ node.tagName +'.' + n + '=' + v);
+ node.removeAttribute(n);
+
+ },
+ cleanStyle : function(node, n,v)
+ {
+ if (v.match(/expression/)) { //XSS?? should we even bother..
+ node.removeAttribute(n);
+ return;
}
- Roo.apply(this.menu.picker, {
+ var parts = v.split(/;/);
+ var clean = [];
+
+ Roo.each(parts, function(p) {
+ p = p.replace(/^\s+/g,'').replace(/\s+$/g,'');
+ if (!p.length) {
+ return true;
+ }
+ var l = p.split(':').shift().replace(/\s+/g,'');
+ l = l.replace(/^\s+/g,'').replace(/\s+$/g,'');
- showClear: this.allowBlank,
- minDate : this.minValue,
- maxDate : this.maxValue,
- disabledDatesRE : this.ddMatch,
- disabledDatesText : this.disabledDatesText,
+ if ( this.style_black.length && (this.style_black.indexOf(l) > -1 || this.style_black.indexOf(l.toLowerCase()) > -1)) {
+ return true;
+ }
+ //Roo.log()
+ // only allow 'c whitelisted system attributes'
+ if ( this.style_white.length && style_white.indexOf(l) < 0 && style_white.indexOf(l.toLowerCase()) < 0 ) {
+ return true;
+ }
- format : this.useIso ? 'Y-m-d' : 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
- }));
-
+ clean.push(p);
+ return true;
+ },this);
+ if (clean.length) {
+ node.setAttribute(n, clean.join(';'));
+ } else {
+ node.removeAttribute(n);
+ }
- var m = this.menu;
- var p = m.picker;
+ }
- // hide month picker get's called when we called by 'before hide';
- var ignorehide = true;
- p.hideMonthPicker = function(disableAnim){
- if (ignorehide) {
- return;
- }
- if(this.monthPicker){
- Roo.log("hideMonthPicker called");
- if(disableAnim === true){
- this.monthPicker.hide();
- }else{
- this.monthPicker.slideOut('t', {duration:.2});
- p.setValue(new Date(m.picker.mpSelYear, m.picker.mpSelMonth, 1));
- p.fireEvent("select", this, this.value);
- m.hide();
+
+
+});/**
+ * @class Roo.htmleditor.FilterBlack
+ * remove blacklisted elements.
+ * @constructor
+ * Run a new Blacklisted Filter
+ * @param {Object} config Configuration options
+ */
+
+Roo.htmleditor.FilterBlack = function(cfg)
+{
+ Roo.apply(this, cfg);
+ this.walk(cfg.node);
+}
+
+Roo.extend(Roo.htmleditor.FilterBlack, Roo.htmleditor.Filter,
+{
+ tag : true, // all elements.
+
+ replaceTag : function(n)
+ {
+ n.parentNode.removeChild(n);
+ }
+});
+/**
+ * @class Roo.htmleditor.FilterComment
+ * remove comments.
+ * @constructor
+* Run a new Comments Filter
+* @param {Object} config Configuration options
+ */
+Roo.htmleditor.FilterComment = function(cfg)
+{
+ this.walk(cfg.node);
+}
+
+Roo.extend(Roo.htmleditor.FilterComment, Roo.htmleditor.Filter,
+{
+
+ replaceComment : function(n)
+ {
+ n.parentNode.removeChild(n);
+ }
+});/**
+ * @class Roo.htmleditor.FilterKeepChildren
+ * remove tags but keep children
+ * @constructor
+ * Run a new Keep Children Filter
+ * @param {Object} config Configuration options
+ */
+
+Roo.htmleditor.FilterKeepChildren = function(cfg)
+{
+ Roo.apply(this, cfg);
+ if (this.tag === false) {
+ return; // dont walk.. (you can use this to use this just to do a child removal on a single tag )
+ }
+ this.walk(cfg.node);
+}
+
+Roo.extend(Roo.htmleditor.FilterKeepChildren, Roo.htmleditor.FilterBlack,
+{
+
+
+ replaceTag : function(node)
+ {
+ // walk children...
+ //Roo.log(node);
+ var ar = Array.from(node.childNodes);
+ //remove first..
+ for (var i = 0; i < ar.length; i++) {
+ if (ar[i].nodeType == 1) {
+ if (
+ (typeof(this.tag) == 'object' && this.tag.indexOf(ar[i].tagName) > -1)
+ || // array and it matches
+ (typeof(this.tag) == 'string' && this.tag == ar[i].tagName)
+ ) {
+ this.replaceTag(ar[i]); // child is blacklisted as well...
+ continue;
}
}
+ }
+ ar = Array.from(node.childNodes);
+ for (var i = 0; i < ar.length; i++) {
+
+ node.removeChild(ar[i]);
+ // what if we need to walk these???
+ node.parentNode.insertBefore(ar[i], node);
+ if (this.tag !== false) {
+ this.walk(ar[i]);
+
+ }
}
+ node.parentNode.removeChild(node);
+ return false; // don't walk children
- Roo.log('picker set value');
- Roo.log(this.getValue());
- p.setValue(this.getValue() ? this.parseDate(this.getValue()) : new Date());
- m.show(this.el, 'tl-bl?');
- ignorehide = false;
- // this will trigger hideMonthPicker..
-
-
- // hidden the day picker
- Roo.select('.x-date-picker table', true).first().dom.style.visibility = "hidden";
+ }
+});/**
+ * @class Roo.htmleditor.FilterParagraph
+ * paragraphs cause a nightmare for shared content - this filter is designed to be called ? at various points when editing
+ * like on 'push' to remove the <p> tags and replace them with line breaks.
+ * @constructor
+ * Run a new Paragraph Filter
+ * @param {Object} config Configuration options
+ */
+
+Roo.htmleditor.FilterParagraph = function(cfg)
+{
+ // no need to apply config.
+ this.walk(cfg.node);
+}
+
+Roo.extend(Roo.htmleditor.FilterParagraph, Roo.htmleditor.Filter,
+{
+
+
+ tag : 'P',
+
+
+ replaceTag : function(node)
+ {
+ if (node.childNodes.length == 1 &&
+ node.childNodes[0].nodeType == 3 &&
+ node.childNodes[0].textContent.trim().length < 1
+ ) {
+ // remove and replace with '<BR>';
+ node.parentNode.replaceChild(node.ownerDocument.createElement('BR'),node);
+ return false; // no need to walk..
+ }
+ var ar = Array.from(node.childNodes);
+ for (var i = 0; i < ar.length; i++) {
+ node.removeChild(ar[i]);
+ // what if we need to walk these???
+ node.parentNode.insertBefore(ar[i], node);
+ }
+ // now what about this?
+ // <p> </p>
-
+ // double BR.
+ node.parentNode.insertBefore(node.ownerDocument.createElement('BR'), node);
+ node.parentNode.insertBefore(node.ownerDocument.createElement('BR'), node);
+ node.parentNode.removeChild(node);
- p.showMonthPicker.defer(100, p);
+ return false;
+
+ }
-
-
- },
+});/**
+ * @class Roo.htmleditor.FilterSpan
+ * filter span's with no attributes out..
+ * @constructor
+ * Run a new Span Filter
+ * @param {Object} config Configuration options
+ */
- beforeBlur : function(){
- var v = this.parseDate(this.getRawValue());
- if(v){
- this.setValue(v);
+Roo.htmleditor.FilterSpan = function(cfg)
+{
+ // no need to apply config.
+ this.walk(cfg.node);
+}
+
+Roo.extend(Roo.htmleditor.FilterSpan, Roo.htmleditor.FilterKeepChildren,
+{
+
+ tag : 'SPAN',
+
+
+ replaceTag : function(node)
+ {
+ if (node.attributes && node.attributes.length > 0) {
+ return true; // walk if there are any.
}
+ Roo.htmleditor.FilterKeepChildren.prototype.replaceTag.call(this, node);
+ return false;
+
}
-
- /** @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.
+
+});/**
+ * @class Roo.htmleditor.FilterTableWidth
+ try and remove table width data - as that frequently messes up other stuff.
+ *
+ * was cleanTableWidths.
*
- * Originally Released Under LGPL - original licence link has changed is not relivant.
+ * Quite often pasting from word etc.. results in tables with column and widths.
+ * This does not work well on fluid HTML layouts - like emails. - so this code should hunt an destroy them..
*
- * 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.
+ * Run a new Table Filter
* @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
+
+Roo.htmleditor.FilterTableWidth = function(cfg)
+{
+ // no need to apply config.
+ this.tag = ['TABLE', 'TD', 'TR', 'TH', 'THEAD', 'TBODY' ];
+ this.walk(cfg.node);
+}
+
+Roo.extend(Roo.htmleditor.FilterTableWidth, Roo.htmleditor.Filter,
+{
+
+
+
+ replaceTag: function(node) {
- });
- if(this.transform){
- this.allowDomMove = false;
- var s = Roo.getDom(this.transform);
- if(!this.hiddenName){
- this.hiddenName = s.name;
+
+ if (node.hasAttribute('width')) {
+ node.removeAttribute('width');
}
- 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;
+
+
+ if (node.hasAttribute("style")) {
+ // pretty basic...
+
+ var styles = node.getAttribute("style").split(";");
+ var nstyle = [];
+ Roo.each(styles, function(s) {
+ if (!s.match(/:/)) {
+ return;
}
- d.push([value, o.text]);
- }
- this.store = new Roo.data.SimpleStore({
- 'id': 0,
- fields: ['value', 'text'],
- data : d
+ var kv = s.split(":");
+ if (kv[0].match(/^\s*(width|min-width)\s*$/)) {
+ return;
+ }
+ // what ever is left... we allow.
+ nstyle.push(s);
});
- 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;
+ node.setAttribute("style", nstyle.length ? nstyle.join(';') : '');
+ if (!nstyle.length) {
+ node.removeAttribute('style');
+ }
}
+
+ return true; // continue doing children..
}
-};
-
-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)
- */
+});/**
+ * @class Roo.htmleditor.FilterWord
+ * try and clean up all the mess that Word generates.
+ *
+ * This is the 'nice version' - see 'Heavy' that white lists a very short list of elements, and multi-filters
+
+ * @constructor
+ * Run a new Span Filter
+ * @param {Object} config Configuration options
+ */
- /**
- * @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,
+Roo.htmleditor.FilterWord = function(cfg)
+{
+ // no need to apply config.
+ this.replaceDocBullets(cfg.node);
+ // this is disabled as the removal is done by other filters;
+ // this.walk(cfg.node);
- /**
- * @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,
+
+}
+
+Roo.extend(Roo.htmleditor.FilterWord, Roo.htmleditor.Filter,
+{
+ tag: true,
+
/**
- * @cfg {Boolean} disableClear Disable showing of clear button.
- */
- disableClear : false,
- /**
- * @cfg {Boolean} alwaysQuery Disable caching of results, and always send query
+ * Clean up MS wordisms...
*/
- alwaysQuery : false,
+ replaceTag : function(node)
+ {
+
+ // no idea what this does - span with text, replaceds with just text.
+ if(
+ node.nodeName == 'SPAN' &&
+ !node.hasAttributes() &&
+ node.childNodes.length == 1 &&
+ node.firstChild.nodeName == "#text"
+ ) {
+ var textNode = node.firstChild;
+ node.removeChild(textNode);
+ if (node.getAttribute('lang') != 'zh-CN') { // do not space pad on chinese characters..
+ node.parentNode.insertBefore(node.ownerDocument.createTextNode(" "), node);
+ }
+ node.parentNode.insertBefore(textNode, node);
+ if (node.getAttribute('lang') != 'zh-CN') { // do not space pad on chinese characters..
+ node.parentNode.insertBefore(node.ownerDocument.createTextNode(" ") , node);
+ }
+
+ node.parentNode.removeChild(node);
+ return false; // dont do chidren - we have remove our node - so no need to do chdhilren?
+ }
+
+
+
+ if (node.tagName.toLowerCase().match(/^(style|script|applet|embed|noframes|noscript)$/)) {
+ node.parentNode.removeChild(node);
+ return false; // dont do chidlren
+ }
+ //Roo.log(node.tagName);
+ // remove - but keep children..
+ if (node.tagName.toLowerCase().match(/^(meta|link|\\?xml:|st1:|o:|v:|font)/)) {
+ //Roo.log('-- removed');
+ while (node.childNodes.length) {
+ var cn = node.childNodes[0];
+ node.removeChild(cn);
+ node.parentNode.insertBefore(cn, node);
+ // move node to parent - and clean it..
+ if (cn.nodeType == 1) {
+ this.replaceTag(cn);
+ }
+
+ }
+ node.parentNode.removeChild(node);
+ /// no need to iterate chidlren = it's got none..
+ //this.iterateChildren(node, this.cleanWord);
+ return false; // no need to iterate children.
+ }
+ // clean styles
+ if (node.className.length) {
+
+ var cn = node.className.split(/\W+/);
+ var cna = [];
+ Roo.each(cn, function(cls) {
+ if (cls.match(/Mso[a-zA-Z]+/)) {
+ return;
+ }
+ cna.push(cls);
+ });
+ node.className = cna.length ? cna.join(' ') : '';
+ if (!cna.length) {
+ node.removeAttribute("class");
+ }
+ }
+
+ if (node.hasAttribute("lang")) {
+ node.removeAttribute("lang");
+ }
+
+ if (node.hasAttribute("style")) {
+
+ var styles = node.getAttribute("style").split(";");
+ var nstyle = [];
+ Roo.each(styles, function(s) {
+ if (!s.match(/:/)) {
+ return;
+ }
+ var kv = s.split(":");
+ if (kv[0].match(/^(mso-|line|font|background|margin|padding|color)/)) {
+ return;
+ }
+ // what ever is left... we allow.
+ nstyle.push(s);
+ });
+ node.setAttribute("style", nstyle.length ? nstyle.join(';') : '');
+ if (!nstyle.length) {
+ node.removeAttribute('style');
+ }
+ }
+ return true; // do children
+
+
+
+ },
- //private
- addicon : false,
- editicon: false,
+ styleToObject: function(node)
+ {
+ var styles = (node.getAttribute("style") || '').split(";");
+ var ret = {};
+ Roo.each(styles, function(s) {
+ if (!s.match(/:/)) {
+ return;
+ }
+ var kv = s.split(":");
+
+ // what ever is left... we allow.
+ ret[kv[0].trim()] = kv[1];
+ });
+ return ret;
+ },
+
+ replaceDocBullets : function(doc)
+ {
+ // this is a bit odd - but it appears some indents use ql-indent-1
+ //Roo.log(doc.innerHTML);
+
+ var listpara = doc.getElementsByClassName('MsoListParagraphCxSpFirst');
+ for( var i = 0; i < listpara.length; i ++) {
+ listpara.item(i).className = "MsoListParagraph";
+ }
+ // this is a bit hacky - we had one word document where h2 had a miso-list attribute.
+ var htwo = doc.getElementsByTagName('h2');
+ for( var i = 0; i < htwo.length; i ++) {
+ if (htwo.item(i).hasAttribute('style') && htwo.item(i).getAttribute('style').match(/mso-list:/)) {
+ htwo.item(i).className = "MsoListParagraph";
+ }
+ }
+ listpara = doc.getElementsByClassName('MsoNormal');
+ while(listpara.length) {
+ if (listpara.item(0).hasAttribute('style') && listpara.item(0).getAttribute('style').match(/mso-list:/)) {
+ listpara.item(0).className = "MsoListParagraph";
+ } else {
+ listpara.item(0).className = "MsoNormalx";
+ }
+ }
+ listpara = doc.getElementsByClassName('ql-indent-1');
+ while(listpara.length) {
+ this.replaceDocBullet(listpara.item(0));
+ }
+ listpara = doc.getElementsByClassName('MsoListParagraph');
+ while(listpara.length) {
+
+ this.replaceDocBullet(listpara.item(0));
+ }
+
+ },
- // element that contains real text value.. (when hidden is used..)
- // 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');
-
-
+
+ replaceDocBullet : function(p)
+ {
+ // gather all the siblings.
+ var ns = p,
+ parent = p.parentNode,
+ doc = parent.ownerDocument,
+ items = [];
+
+
+ while (ns) {
+ if (ns.nodeType != 1) {
+ ns = ns.nextSibling;
+ continue;
+ }
+ if (!ns.className.match(/(MsoListParagraph|ql-indent-1)/i)) {
+ break;
+ }
+ if (ns.getAttribute('style').match(/mso-list/)) {
+ items.push(ns);
+ ns = ns.nextSibling;
+ has_list = true;
+ continue;
+ }
+ var spans = ns.getElementsByTagName('span');
+ if (!spans.length) {
+ break;
+ }
+ var has_list = false;
+ for(var i = 0; i < spans.length; i++) {
+ if (spans[i].getAttribute('style').match(/mso-list/)) {
+ has_list = true;
+ break;
+ }
+ }
+ if (!has_list) {
+ break;
+ }
+ items.push(ns);
+ ns = ns.nextSibling;
+
+
}
- if(Roo.isGecko){
- this.el.dom.setAttribute('autocomplete', 'off');
+ if (!items.length) {
+ ns.className = "";
+ return;
}
+
+ var ul = parent.ownerDocument.createElement('ul'); // what about number lists...
+ parent.insertBefore(ul, p);
+ var lvl = 0;
+ var stack = [ ul ];
+ var last_li = false;
+
+ var margin_to_depth = {};
+ max_margins = -1;
+
+ items.forEach(function(n, ipos) {
+ //Roo.log("got innertHMLT=" + n.innerHTML);
+
+ var spans = n.getElementsByTagName('span');
+ if (!spans.length) {
+ //Roo.log("No spans found");
+
+ parent.removeChild(n);
+
+
+ return; // skip it...
+ }
+
+
+
+ var style = {};
+ for(var i = 0; i < spans.length; i++) {
+
+ style = this.styleToObject(spans[i]);
+ if (typeof(style['mso-list']) == 'undefined') {
+ continue;
+ }
+
+ spans[i].parentNode.removeChild(spans[i]); // remove the fake bullet.
+ break;
+ }
+ //Roo.log("NOW GOT innertHMLT=" + n.innerHTML);
+ style = this.styleToObject(n); // mo-list is from the parent node.
+ if (typeof(style['mso-list']) == 'undefined') {
+ //Roo.log("parent is missing level");
+
+ parent.removeChild(n);
+
+ return;
+ }
+
+ var margin = style['margin-left'];
+ if (typeof(margin_to_depth[margin]) == 'undefined') {
+ max_margins++;
+ margin_to_depth[margin] = max_margins;
+ }
+ nlvl = margin_to_depth[margin] ;
+
+ if (nlvl > lvl) {
+ //new indent
+ var nul = doc.createElement('ul'); // what about number lists...
+ if (!last_li) {
+ last_li = doc.createElement('li');
+ stack[lvl].appendChild(last_li);
+ }
+ last_li.appendChild(nul);
+ stack[nlvl] = nul;
+
+ }
+ lvl = nlvl;
+
+ var nli = stack[nlvl].appendChild(doc.createElement('li'));
+ last_li = nli;
+ nli.innerHTML = n.innerHTML;
+ //Roo.log("innerHTML = " + n.innerHTML);
+ parent.removeChild(n);
+
+
+
+
+ },this);
+
+
+
+
+ }
+
+
+
+});
+/**
+ * @class Roo.htmleditor.FilterStyleToTag
+ * part of the word stuff... - certain 'styles' should be converted to tags.
+ * eg.
+ * font-weight: bold -> bold
+ * ?? super / subscrit etc..
+ *
+ * @constructor
+* Run a new style to tag filter.
+* @param {Object} config Configuration options
+ */
+Roo.htmleditor.FilterStyleToTag = function(cfg)
+{
+
+ this.tags = {
+ B : [ 'fontWeight' , 'bold'],
+ I : [ 'fontStyle' , 'italic'],
+ //pre : [ 'font-style' , 'italic'],
+ // h1.. h6 ?? font-size?
+ SUP : [ 'verticalAlign' , 'super' ],
+ SUB : [ 'verticalAlign' , 'sub' ]
+
+
+ };
+
+ Roo.apply(this, cfg);
+
+
+ this.walk(cfg.node);
+
+
+
+}
- var cls = 'x-combo-list';
- this.list = new Roo.Layer({
- shadow: this.shadow, cls: [cls, this.listClass].join(' '), constrain:false
+Roo.extend(Roo.htmleditor.FilterStyleToTag, Roo.htmleditor.Filter,
+{
+ tag: true, // all tags
+
+ tags : false,
+
+
+ replaceTag : function(node)
+ {
+
+
+ if (node.getAttribute("style") === null) {
+ return true;
+ }
+ var inject = [];
+ for (var k in this.tags) {
+ if (node.style[this.tags[k][0]] == this.tags[k][1]) {
+ inject.push(k);
+ node.style.removeProperty(this.tags[k][0]);
+ }
+ }
+ if (!inject.length) {
+ return true;
+ }
+ var cn = Array.from(node.childNodes);
+ var nn = node;
+ Roo.each(inject, function(t) {
+ var nc = node.ownerDocument.createElement(t);
+ nn.appendChild(nc);
+ nn = nc;
});
+ for(var i = 0;i < cn.length;cn++) {
+ node.removeChild(cn[i]);
+ nn.appendChild(cn[i]);
+ }
+ return true /// iterate thru
+ }
+
+})/**
+ * @class Roo.htmleditor.FilterLongBr
+ * BR/BR/BR - keep a maximum of 2...
+ * @constructor
+ * Run a new Long BR Filter
+ * @param {Object} config Configuration options
+ */
- var lw = this.listWidth || Math.max(this.wrap.getWidth(), this.minListWidth);
- this.list.setWidth(lw);
- this.list.swallowEvent('mousewheel');
- this.assetHeight = 0;
+Roo.htmleditor.FilterLongBr = function(cfg)
+{
+ // no need to apply config.
+ this.walk(cfg.node);
+}
- if(this.title){
- this.header = this.list.createChild({cls:cls+'-hd', html: this.title});
- this.assetHeight += this.header.getHeight();
+Roo.extend(Roo.htmleditor.FilterLongBr, Roo.htmleditor.Filter,
+{
+
+
+ tag : 'BR',
+
+
+ replaceTag : function(node)
+ {
+
+ var ps = node.nextSibling;
+ while (ps && ps.nodeType == 3 && ps.nodeValue.trim().length < 1) {
+ ps = ps.nextSibling;
}
-
- 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 (!ps && [ 'TD', 'TH', 'LI', 'H1', 'H2', 'H3', 'H4', 'H5', 'H6' ].indexOf(node.parentNode.tagName) > -1) {
+ node.parentNode.removeChild(node); // remove last BR inside one fo these tags
+ return false;
}
- if(this.pageSize){
- this.footer = this.list.createChild({cls:cls+'-ft'});
- this.pageTb = new Roo.PagingToolbar(this.footer, this.store,
- {pageSize: this.pageSize});
-
+
+ if (!ps || ps.nodeType != 1) {
+ return false;
}
- 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 (!ps || ps.tagName != 'BR') {
+
+ return false;
}
- if (this.footer) {
- this.assetHeight += this.footer.getHeight();
+
+
+
+
+
+ if (!node.previousSibling) {
+ return false;
}
+ var ps = node.previousSibling;
-
- if(!this.tpl){
- this.tpl = '<div class="'+cls+'-item">{' + this.displayField + '}</div>';
+ while (ps && ps.nodeType == 3 && ps.nodeValue.trim().length < 1) {
+ ps = ps.previousSibling;
}
-
- 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.onLoadException, 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 (!ps || ps.nodeType != 1) {
+ return false;
+ }
+ // if header or BR before.. then it's a candidate for removal.. - as we only want '2' of these..
+ if (!ps || [ 'BR', 'H1', 'H2', 'H3', 'H4', 'H5', 'H6' ].indexOf(ps.tagName) < 0) {
+ return false;
}
- if(!this.editable){
- this.editable = true;
- this.setEditable(false);
- }
+ node.parentNode.removeChild(node); // remove me...
- 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);
+ return false; // no need to do children
+
+ }
+
+});
+
+/**
+ * @class Roo.htmleditor.FilterBlock
+ * removes id / data-block and contenteditable that are associated with blocks
+ * usage should be done on a cloned copy of the dom
+ * @constructor
+* Run a new Attribute Filter { node : xxxx }}
+* @param {Object} config Configuration options
+ */
+Roo.htmleditor.FilterBlock = function(cfg)
+{
+ Roo.apply(this, cfg);
+ var qa = cfg.node.querySelectorAll;
+ this.removeAttributes('data-block');
+ this.removeAttributes('contenteditable');
+ this.removeAttributes('id');
+
+}
+
+Roo.apply(Roo.htmleditor.FilterBlock.prototype,
+{
+ node: true, // all tags
+
+
+ removeAttributes : function(attr)
+ {
+ var ar = this.node.querySelectorAll('*[' + attr + ']');
+ for (var i =0;i<ar.length;i++) {
+ ar[i].removeAttribute(attr);
}
+ }
- },
+
+});
+/***
+ * This is based loosely on tinymce
+ * @class Roo.htmleditor.TidySerializer
+ * https://github.com/thorn0/tinymce.html/blob/master/tinymce.html.js
+ * @constructor
+ * @method Serializer
+ * @param {Object} settings Name/value settings object.
+ */
- // 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();
- },
+Roo.htmleditor.TidySerializer = function(settings)
+{
+ Roo.apply(this, settings);
+
+ this.writer = new Roo.htmleditor.TidyWriter(settings);
+
+
- "down" : function(e){
- if(!this.isExpanded()){
- this.onTriggerClick();
- }else{
- this.inKeyMode = true;
- this.selectNext();
- }
+};
+Roo.htmleditor.TidySerializer.prototype = {
+
+ /**
+ * @param {boolean} inner do the inner of the node.
+ */
+ inner : false,
+
+ writer : false,
+
+ /**
+ * Serializes the specified node into a string.
+ *
+ * @example
+ * new tinymce.html.Serializer().serialize(new tinymce.html.DomParser().parse('<p>text</p>'));
+ * @method serialize
+ * @param {DomElement} node Node instance to serialize.
+ * @return {String} String with HTML based on DOM tree.
+ */
+ serialize : function(node) {
+
+ // = settings.validate;
+ var writer = this.writer;
+ var self = this;
+ this.handlers = {
+ // #text
+ 3: function(node) {
+
+ writer.text(node.nodeValue, node);
},
-
- "enter" : function(e){
- this.onViewClick();
- //return true;
+ // #comment
+ 8: function(node) {
+ writer.comment(node.nodeValue);
},
-
- "esc" : function(e){
- this.collapse();
+ // Processing instruction
+ 7: function(node) {
+ writer.pi(node.name, node.nodeValue);
},
-
- "tab" : function(e){
- this.onViewClick(false);
- this.fireEvent("specialkey", this, e);
- return true;
+ // Doctype
+ 10: function(node) {
+ writer.doctype(node.nodeValue);
},
-
- scope : this,
-
- doRelay : function(foo, bar, hname){
- if(hname == 'down' || this.scope.isExpanded()){
- return Roo.KeyNav.prototype.doRelay.apply(this, arguments);
- }
- return true;
+ // CDATA
+ 4: function(node) {
+ writer.cdata(node.nodeValue);
},
-
- 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);
- }
+ // Document fragment
+ 11: function(node) {
+ node = node.firstChild;
+ if (!node) {
+ return;
+ }
+ while(node) {
+ self.walk(node);
+ node = node.nextSibling
+ }
+ }
+ };
+ writer.reset();
+ 1 != node.nodeType || this.inner ? this.handlers[11](node) : this.walk(node);
+ return writer.getContent();
},
- onDestroy : function(){
- if(this.view){
- this.view.setStore(null);
- this.view.el.removeAllListeners();
- this.view.el.remove();
- this.view.purgeListeners();
+ walk: function(node)
+ {
+ var attrName, attrValue, sortedAttrs, i, l, elementRule,
+ handler = this.handlers[node.nodeType];
+
+ if (handler) {
+ handler(node);
+ return;
}
- if(this.list){
- this.list.destroy();
+
+ var name = node.nodeName;
+ var isEmpty = node.childNodes.length < 1;
+
+ var writer = this.writer;
+ var attrs = node.attributes;
+ // Sort attributes
+
+ writer.start(node.nodeName, attrs, isEmpty, node);
+ if (isEmpty) {
+ return;
}
- if(this.store){
- this.store.un('beforeload', this.onBeforeLoad, this);
- this.store.un('load', this.onLoad, this);
- this.store.un('loadexception', this.onLoadException, this);
+ node = node.firstChild;
+ if (!node) {
+ writer.end(name);
+ return;
}
- Roo.form.ComboBox.superclass.onDestroy.call(this);
- },
+ while (node) {
+ this.walk(node);
+ node = node.nextSibling;
+ }
+ writer.end(name);
+
+
+ }
+ // Serialize element and treat all non elements as fragments
+
+};
- // private
- fireKey : function(e){
- if(e.isNavKeyPress() && !this.list.isVisible()){
- this.fireEvent("specialkey", this, e);
+/***
+ * This is based loosely on tinymce
+ * @class Roo.htmleditor.TidyWriter
+ * https://github.com/thorn0/tinymce.html/blob/master/tinymce.html.js
+ *
+ * Known issues?
+ * - not tested much with 'PRE' formated elements.
+ *
+ *
+ *
+ */
+
+Roo.htmleditor.TidyWriter = function(settings)
+{
+
+ // indent, indentBefore, indentAfter, encode, htmlOutput, html = [];
+ Roo.apply(this, settings);
+ this.html = [];
+ this.state = [];
+
+ this.encode = Roo.htmleditor.TidyEntities.getEncodeFunc(settings.entity_encoding || 'raw', settings.entities);
+
+}
+Roo.htmleditor.TidyWriter.prototype = {
+
+
+ state : false,
+
+ indent : ' ',
+
+ // part of state...
+ indentstr : '',
+ in_pre: false,
+ in_inline : false,
+ last_inline : false,
+ encode : false,
+
+
+ /**
+ * Writes the a start element such as <p id="a">.
+ *
+ * @method start
+ * @param {String} name Name of the element.
+ * @param {Array} attrs Optional attribute array or undefined if it hasn't any.
+ * @param {Boolean} empty Optional empty state if the tag should end like <br />.
+ */
+ start: function(name, attrs, empty, node)
+ {
+ var i, l, attr, value;
+
+ // there are some situations where adding line break && indentation will not work. will not work.
+ // <span / b / i ... formating?
+
+ var in_inline = this.in_inline || Roo.htmleditor.TidyWriter.inline_elements.indexOf(name) > -1;
+ var in_pre = this.in_pre || Roo.htmleditor.TidyWriter.whitespace_elements.indexOf(name) > -1;
+
+ var is_short = empty ? Roo.htmleditor.TidyWriter.shortend_elements.indexOf(name) > -1 : false;
+
+ var add_lb = name == 'BR' ? false : in_inline;
+
+ if (!add_lb && !this.in_pre && this.lastElementEndsWS()) {
+ i_inline = false;
}
- },
- // private
- onResize: function(w, h){
- Roo.form.ComboBox.superclass.onResize.apply(this, arguments);
+ var indentstr = this.indentstr;
- if(typeof w != 'number'){
- // we do not handle it!?!?
- return;
+ // e_inline = elements that can be inline, but still allow \n before and after?
+ // only 'BR' ??? any others?
+
+ // ADD LINE BEFORE tage
+ if (!this.in_pre) {
+ if (in_inline) {
+ //code
+ if (name == 'BR') {
+ this.addLine();
+ } else if (this.lastElementEndsWS()) {
+ this.addLine();
+ } else{
+ // otherwise - no new line. (and dont indent.)
+ indentstr = '';
+ }
+
+ } else {
+ this.addLine();
+ }
+ } else {
+ indentstr = '';
}
- 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.html.push(indentstr + '<', name.toLowerCase());
+
+ if (attrs) {
+ for (i = 0, l = attrs.length; i < l; i++) {
+ attr = attrs[i];
+ this.html.push(' ', attr.name, '="', this.encode(attr.value, true), '"');
+ }
+ }
+
+ if (empty) {
+ if (is_short) {
+ this.html[this.html.length] = '/>';
+ } else {
+ this.html[this.html.length] = '></' + name.toLowerCase() + '>';
+ }
+ var e_inline = name == 'BR' ? false : this.in_inline;
- this.trigger.setStyle('left', x+'px');
+ if (!e_inline && !this.in_pre) {
+ this.addLine();
+ }
+ return;
- 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'));
}
+ // not empty..
+ this.html[this.html.length] = '>';
+
+ // there is a special situation, where we need to turn on in_inline - if any of the imediate chidlren are one of these.
+ /*
+ if (!in_inline && !in_pre) {
+ var cn = node.firstChild;
+ while(cn) {
+ if (Roo.htmleditor.TidyWriter.inline_elements.indexOf(cn.nodeName) > -1) {
+ in_inline = true
+ break;
+ }
+ cn = cn.nextSibling;
+ }
+
+ }
+ */
+
+
+ this.pushState({
+ indentstr : in_pre ? '' : (this.indentstr + this.indent),
+ in_pre : in_pre,
+ in_inline : in_inline
+ });
+ // add a line after if we are not in a
+
+ if (!in_inline && !in_pre) {
+ this.addLine();
+ }
+
+
+
+ },
+ lastElementEndsWS : function()
+ {
+ var value = this.html.length > 0 ? this.html[this.html.length-1] : false;
+ if (value === false) {
+ return true;
+ }
+ return value.match(/\s+$/);
},
-
+
/**
- * 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
+ * Writes the a end element such as </p>.
+ *
+ * @method end
+ * @param {String} name Name of the element.
*/
- 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');
+ end: function(name) {
+ var value;
+ this.popState();
+ var indentstr = '';
+ var in_inline = this.in_inline || Roo.htmleditor.TidyWriter.inline_elements.indexOf(name) > -1;
+
+ if (!this.in_pre && !in_inline) {
+ this.addLine();
+ indentstr = this.indentstr;
}
+ this.html.push(indentstr + '</', name.toLowerCase(), '>');
+ this.last_inline = in_inline;
+
+ // pop the indent state..
},
-
- // private
- onBeforeLoad : function(){
- if(!this.hasFocus){
+ /**
+ * Writes a text node.
+ *
+ * In pre - we should not mess with the contents.
+ *
+ *
+ * @method text
+ * @param {String} text String to write out.
+ * @param {Boolean} raw Optional raw state if true the contents wont get encoded.
+ */
+ text: function(in_text, node)
+ {
+ // if not in whitespace critical
+ if (in_text.length < 1) {
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;
+ var text = new XMLSerializer().serializeToString(document.createTextNode(in_text)); // escape it properly?
+
+ if (this.in_pre) {
+ this.html[this.html.length] = text;
+ return;
}
- if(this.store.getCount() > 0){
- this.expand();
- this.restrictHeight();
- if(this.lastQuery == this.allQuery){
- if(this.editable){
- this.el.dom.select();
+
+ if (this.in_inline) {
+ text = text.replace(/\s+/g,' '); // all white space inc line breaks to a slingle' '
+ if (text != ' ') {
+ text = text.replace(/\s+/,' '); // all white space to single white space
+
+
+ // if next tag is '<BR>', then we can trim right..
+ if (node.nextSibling &&
+ node.nextSibling.nodeType == 1 &&
+ node.nextSibling.nodeName == 'BR' )
+ {
+ text = text.replace(/\s+$/g,'');
}
- if(!this.selectByValue(this.value, true)){
- this.select(0, true);
+ // if previous tag was a BR, we can also trim..
+ if (node.previousSibling &&
+ node.previousSibling.nodeType == 1 &&
+ node.previousSibling.nodeName == 'BR' )
+ {
+ text = this.indentstr + text.replace(/^\s+/g,'');
}
- }else{
- this.selectNext();
- if(this.typeAhead && this.lastKey != Roo.EventObject.BACKSPACE && this.lastKey != Roo.EventObject.DELETE){
- this.taTask.delay(this.typeAheadDelay);
+ if (text.match(/\n/)) {
+ text = text.replace(
+ /(?![^\n]{1,64}$)([^\n]{1,64})\s/g, '$1\n' + this.indentstr
+ );
+ // remoeve the last whitespace / line break.
+ text = text.replace(/\n\s+$/,'');
}
+ // repace long lines
+
}
- }else{
- this.onEmptyResults();
+
+ this.html[this.html.length] = text;
+ return;
}
- //this.el.focus();
- },
- // private
- onLoadException : function()
- {
- this.collapse();
- Roo.log(this.store.reader.jsonData);
- if (this.store && typeof(this.store.reader.jsonData.errorMsg) != 'undefined') {
- Roo.MessageBox.alert("Error loading",this.store.reader.jsonData.errorMsg);
+ // see if previous element was a inline element.
+ var indentstr = this.indentstr;
+
+ text = text.replace(/\s+/g," "); // all whitespace into single white space.
+
+ // should trim left?
+ if (node.previousSibling &&
+ node.previousSibling.nodeType == 1 &&
+ Roo.htmleditor.TidyWriter.inline_elements.indexOf(node.previousSibling.nodeName) > -1)
+ {
+ indentstr = '';
+
+ } else {
+ this.addLine();
+ text = text.replace(/^\s+/,''); // trim left
+
+ }
+ // should trim right?
+ if (node.nextSibling &&
+ node.nextSibling.nodeType == 1 &&
+ Roo.htmleditor.TidyWriter.inline_elements.indexOf(node.nextSibling.nodeName) > -1)
+ {
+ // noop
+
+ } else {
+ text = text.replace(/\s+$/,''); // trim right
}
+
+
- },
- // 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);
- }
+
+ if (text.length < 1) {
+ return;
}
- },
-
- // 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);
+ if (!text.match(/\n/)) {
+ this.html.push(indentstr + text);
+ return;
}
+
+ text = this.indentstr + text.replace(
+ /(?![^\n]{1,64}$)([^\n]{1,64})\s/g, '$1\n' + this.indentstr
+ );
+ // remoeve the last whitespace / line break.
+ text = text.replace(/\s+$/,'');
+
+ this.html.push(text);
+
+ // split and indent..
+
+
},
-
/**
- * Returns the currently selected field value or empty string if no value is set.
- * @return {String} value The selected value
+ * Writes a cdata node such as <![CDATA[data]]>.
+ *
+ * @method cdata
+ * @param {String} text String to write out inside the cdata.
*/
- getValue : function(){
- if(this.valueField){
- return typeof this.value != 'undefined' ? this.value : '';
- }
- return Roo.form.ComboBox.superclass.getValue.call(this);
+ cdata: function(text) {
+ this.html.push('<![CDATA[', text, ']]>');
},
-
/**
- * Clears any text/value currently set in the field
+ * Writes a comment node such as <!-- Comment -->.
+ *
+ * @method cdata
+ * @param {String} text String to write out inside the comment.
+ */
+ comment: function(text) {
+ this.html.push('<!--', text, '-->');
+ },
+ /**
+ * Writes a PI node such as <?xml attr="value" ?>.
+ *
+ * @method pi
+ * @param {String} name Name of the pi.
+ * @param {String} text String to write out inside the pi.
*/
- clearValue : function(){
- if(this.hiddenField){
- this.hiddenField.value = '';
- }
- this.value = '';
- this.setRawValue('');
- this.lastSelectionText = '';
-
+ pi: function(name, text) {
+ text ? this.html.push('<?', name, ' ', this.encode(text), '?>') : this.html.push('<?', name, '?>');
+ this.indent != '' && this.html.push('\n');
},
-
/**
- * 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
+ * Writes a doctype node such as <!DOCTYPE data>.
+ *
+ * @method doctype
+ * @param {String} text String to write out inside the doctype.
*/
- 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;
+ doctype: function(text) {
+ this.html.push('<!DOCTYPE', text, '>', this.indent != '' ? '\n' : '');
},
/**
- * @property {Object} the last set data for the element
- */
-
- lastData : false,
+ * Resets the internal buffer if one wants to reuse the writer.
+ *
+ * @method reset
+ */
+ reset: function() {
+ this.html.length = 0;
+ this.state = [];
+ this.pushState({
+ indentstr : '',
+ in_pre : false,
+ in_inline : 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?
+ * Returns the contents that got serialized.
+ *
+ * @method getContent
+ * @return {String} HTML contents that got written down.
*/
- 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.resetValue);
- this.clearInvalid();
- this.lastData = false;
- if (this.view) {
- this.view.clearSelections();
- }
- },
- // 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 true;
- });
- }
- return record;
+ getContent: function() {
+ return this.html.join('').replace(/\n$/, '');
},
- getName: function()
+ pushState : function(cfg)
{
- // returns hidden if it's set..
- if (!this.rendered) {return ''};
- return !this.hiddenName && this.el.dom.name ? this.el.dom.name : (this.hiddenName || '');
-
- },
- // private
- onViewMove : function(e, t){
- this.inKeyMode = false;
+ this.state.push(cfg);
+ Roo.apply(this, cfg);
},
-
- // private
- onViewOver : function(e, t){
- if(this.inKeyMode){ // prevent key nav and mouse over conflicts
- return;
+
+ popState : function()
+ {
+ if (this.state.length < 1) {
+ return; // nothing to push
}
- var item = this.view.findItemFromChild(t);
- if(item){
- var index = this.view.indexOf(item);
- this.select(index, false);
+ var cfg = {
+ in_pre: false,
+ indentstr : ''
+ };
+ this.state.pop();
+ if (this.state.length > 0) {
+ cfg = this.state[this.state.length-1];
}
+ Roo.apply(this, cfg);
},
-
- // private
- onViewClick : function(doFocus)
+
+ addLine: function()
{
- var index = this.view.getSelectedIndexes()[0];
- var r = this.store.getAt(index);
- if(r){
- this.onSelect(r, index);
+ if (this.html.length < 1) {
+ return;
}
- if(doFocus !== false && !this.blockFocus){
- this.el.focus();
+
+
+ var value = this.html[this.html.length - 1];
+ if (value.length > 0 && '\n' !== value) {
+ this.html.push('\n');
}
- },
+ }
+
+
+//'pre script noscript style textarea video audio iframe object code'
+// shortended... 'area base basefont br col frame hr img input isindex link meta param embed source wbr track');
+// inline
+};
- // 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();
- },
+Roo.htmleditor.TidyWriter.inline_elements = [
+ 'SPAN','STRONG','B','EM','I','FONT','STRIKE','U','VAR',
+ 'CITE','DFN','CODE','MARK','Q','SUP','SUB','SAMP', 'A'
+];
+Roo.htmleditor.TidyWriter.shortend_elements = [
+ 'AREA','BASE','BASEFONT','BR','COL','FRAME','HR','IMG','INPUT',
+ 'ISINDEX','LINK','','META','PARAM','EMBED','SOURCE','WBR','TRACK'
+];
- // private
- onEmptyResults : function(){
- this.collapse();
- },
+Roo.htmleditor.TidyWriter.whitespace_elements = [
+ 'PRE','SCRIPT','NOSCRIPT','STYLE','TEXTAREA','VIDEO','AUDIO','IFRAME','OBJECT','CODE'
+];/***
+ * This is based loosely on tinymce
+ * @class Roo.htmleditor.TidyEntities
+ * @static
+ * https://github.com/thorn0/tinymce.html/blob/master/tinymce.html.js
+ *
+ * Not 100% sure this is actually used or needed.
+ */
+Roo.htmleditor.TidyEntities = {
+
/**
- * Returns true if the dropdown list is expanded, else false.
+ * initialize data..
*/
- isExpanded : function(){
- return this.list.isVisible();
+ init : function (){
+
+ this.namedEntities = this.buildEntitiesLookup(this.namedEntitiesData, 32);
+
},
+
+ buildEntitiesLookup: function(items, radix) {
+ var i, chr, entity, lookup = {};
+ if (!items) {
+ return {};
+ }
+ items = typeof(items) == 'string' ? items.split(',') : items;
+ radix = radix || 10;
+ // Build entities lookup table
+ for (i = 0; i < items.length; i += 2) {
+ chr = String.fromCharCode(parseInt(items[i], radix));
+ // Only add non base entities
+ if (!this.baseEntities[chr]) {
+ entity = '&' + items[i + 1] + ';';
+ lookup[chr] = entity;
+ lookup[entity] = chr;
+ }
+ }
+ return lookup;
+
+ },
+
+ asciiMap : {
+ 128: '€',
+ 130: '‚',
+ 131: 'ƒ',
+ 132: '„',
+ 133: '…',
+ 134: '†',
+ 135: '‡',
+ 136: 'ˆ',
+ 137: '‰',
+ 138: 'Š',
+ 139: '‹',
+ 140: 'Œ',
+ 142: 'Ž',
+ 145: '‘',
+ 146: '’',
+ 147: '“',
+ 148: '”',
+ 149: '•',
+ 150: '–',
+ 151: '—',
+ 152: '˜',
+ 153: '™',
+ 154: 'š',
+ 155: '›',
+ 156: 'œ',
+ 158: 'ž',
+ 159: 'Ÿ'
+ },
+ // Raw entities
+ baseEntities : {
+ '"': '"',
+ // Needs to be escaped since the YUI compressor would otherwise break the code
+ '\'': ''',
+ '<': '<',
+ '>': '>',
+ '&': '&',
+ '`': '`'
+ },
+ // Reverse lookup table for raw entities
+ reverseEntities : {
+ '<': '<',
+ '>': '>',
+ '&': '&',
+ '"': '"',
+ ''': '\''
+ },
+
+ attrsCharsRegExp : /[&<>\"\u0060\u007E-\uD7FF\uE000-\uFFEF]|[\uD800-\uDBFF][\uDC00-\uDFFF]/g,
+ textCharsRegExp : /[<>&\u007E-\uD7FF\uE000-\uFFEF]|[\uD800-\uDBFF][\uDC00-\uDFFF]/g,
+ rawCharsRegExp : /[<>&\"\']/g,
+ entityRegExp : /&#([a-z0-9]+);?|&([a-z0-9]+);/gi,
+ namedEntities : false,
+ namedEntitiesData : [
+ '50',
+ 'nbsp',
+ '51',
+ 'iexcl',
+ '52',
+ 'cent',
+ '53',
+ 'pound',
+ '54',
+ 'curren',
+ '55',
+ 'yen',
+ '56',
+ 'brvbar',
+ '57',
+ 'sect',
+ '58',
+ 'uml',
+ '59',
+ 'copy',
+ '5a',
+ 'ordf',
+ '5b',
+ 'laquo',
+ '5c',
+ 'not',
+ '5d',
+ 'shy',
+ '5e',
+ 'reg',
+ '5f',
+ 'macr',
+ '5g',
+ 'deg',
+ '5h',
+ 'plusmn',
+ '5i',
+ 'sup2',
+ '5j',
+ 'sup3',
+ '5k',
+ 'acute',
+ '5l',
+ 'micro',
+ '5m',
+ 'para',
+ '5n',
+ 'middot',
+ '5o',
+ 'cedil',
+ '5p',
+ 'sup1',
+ '5q',
+ 'ordm',
+ '5r',
+ 'raquo',
+ '5s',
+ 'frac14',
+ '5t',
+ 'frac12',
+ '5u',
+ 'frac34',
+ '5v',
+ 'iquest',
+ '60',
+ 'Agrave',
+ '61',
+ 'Aacute',
+ '62',
+ 'Acirc',
+ '63',
+ 'Atilde',
+ '64',
+ 'Auml',
+ '65',
+ 'Aring',
+ '66',
+ 'AElig',
+ '67',
+ 'Ccedil',
+ '68',
+ 'Egrave',
+ '69',
+ 'Eacute',
+ '6a',
+ 'Ecirc',
+ '6b',
+ 'Euml',
+ '6c',
+ 'Igrave',
+ '6d',
+ 'Iacute',
+ '6e',
+ 'Icirc',
+ '6f',
+ 'Iuml',
+ '6g',
+ 'ETH',
+ '6h',
+ 'Ntilde',
+ '6i',
+ 'Ograve',
+ '6j',
+ 'Oacute',
+ '6k',
+ 'Ocirc',
+ '6l',
+ 'Otilde',
+ '6m',
+ 'Ouml',
+ '6n',
+ 'times',
+ '6o',
+ 'Oslash',
+ '6p',
+ 'Ugrave',
+ '6q',
+ 'Uacute',
+ '6r',
+ 'Ucirc',
+ '6s',
+ 'Uuml',
+ '6t',
+ 'Yacute',
+ '6u',
+ 'THORN',
+ '6v',
+ 'szlig',
+ '70',
+ 'agrave',
+ '71',
+ 'aacute',
+ '72',
+ 'acirc',
+ '73',
+ 'atilde',
+ '74',
+ 'auml',
+ '75',
+ 'aring',
+ '76',
+ 'aelig',
+ '77',
+ 'ccedil',
+ '78',
+ 'egrave',
+ '79',
+ 'eacute',
+ '7a',
+ 'ecirc',
+ '7b',
+ 'euml',
+ '7c',
+ 'igrave',
+ '7d',
+ 'iacute',
+ '7e',
+ 'icirc',
+ '7f',
+ 'iuml',
+ '7g',
+ 'eth',
+ '7h',
+ 'ntilde',
+ '7i',
+ 'ograve',
+ '7j',
+ 'oacute',
+ '7k',
+ 'ocirc',
+ '7l',
+ 'otilde',
+ '7m',
+ 'ouml',
+ '7n',
+ 'divide',
+ '7o',
+ 'oslash',
+ '7p',
+ 'ugrave',
+ '7q',
+ 'uacute',
+ '7r',
+ 'ucirc',
+ '7s',
+ 'uuml',
+ '7t',
+ 'yacute',
+ '7u',
+ 'thorn',
+ '7v',
+ 'yuml',
+ 'ci',
+ 'fnof',
+ 'sh',
+ 'Alpha',
+ 'si',
+ 'Beta',
+ 'sj',
+ 'Gamma',
+ 'sk',
+ 'Delta',
+ 'sl',
+ 'Epsilon',
+ 'sm',
+ 'Zeta',
+ 'sn',
+ 'Eta',
+ 'so',
+ 'Theta',
+ 'sp',
+ 'Iota',
+ 'sq',
+ 'Kappa',
+ 'sr',
+ 'Lambda',
+ 'ss',
+ 'Mu',
+ 'st',
+ 'Nu',
+ 'su',
+ 'Xi',
+ 'sv',
+ 'Omicron',
+ 't0',
+ 'Pi',
+ 't1',
+ 'Rho',
+ 't3',
+ 'Sigma',
+ 't4',
+ 'Tau',
+ 't5',
+ 'Upsilon',
+ 't6',
+ 'Phi',
+ 't7',
+ 'Chi',
+ 't8',
+ 'Psi',
+ 't9',
+ 'Omega',
+ 'th',
+ 'alpha',
+ 'ti',
+ 'beta',
+ 'tj',
+ 'gamma',
+ 'tk',
+ 'delta',
+ 'tl',
+ 'epsilon',
+ 'tm',
+ 'zeta',
+ 'tn',
+ 'eta',
+ 'to',
+ 'theta',
+ 'tp',
+ 'iota',
+ 'tq',
+ 'kappa',
+ 'tr',
+ 'lambda',
+ 'ts',
+ 'mu',
+ 'tt',
+ 'nu',
+ 'tu',
+ 'xi',
+ 'tv',
+ 'omicron',
+ 'u0',
+ 'pi',
+ 'u1',
+ 'rho',
+ 'u2',
+ 'sigmaf',
+ 'u3',
+ 'sigma',
+ 'u4',
+ 'tau',
+ 'u5',
+ 'upsilon',
+ 'u6',
+ 'phi',
+ 'u7',
+ 'chi',
+ 'u8',
+ 'psi',
+ 'u9',
+ 'omega',
+ 'uh',
+ 'thetasym',
+ 'ui',
+ 'upsih',
+ 'um',
+ 'piv',
+ '812',
+ 'bull',
+ '816',
+ 'hellip',
+ '81i',
+ 'prime',
+ '81j',
+ 'Prime',
+ '81u',
+ 'oline',
+ '824',
+ 'frasl',
+ '88o',
+ 'weierp',
+ '88h',
+ 'image',
+ '88s',
+ 'real',
+ '892',
+ 'trade',
+ '89l',
+ 'alefsym',
+ '8cg',
+ 'larr',
+ '8ch',
+ 'uarr',
+ '8ci',
+ 'rarr',
+ '8cj',
+ 'darr',
+ '8ck',
+ 'harr',
+ '8dl',
+ 'crarr',
+ '8eg',
+ 'lArr',
+ '8eh',
+ 'uArr',
+ '8ei',
+ 'rArr',
+ '8ej',
+ 'dArr',
+ '8ek',
+ 'hArr',
+ '8g0',
+ 'forall',
+ '8g2',
+ 'part',
+ '8g3',
+ 'exist',
+ '8g5',
+ 'empty',
+ '8g7',
+ 'nabla',
+ '8g8',
+ 'isin',
+ '8g9',
+ 'notin',
+ '8gb',
+ 'ni',
+ '8gf',
+ 'prod',
+ '8gh',
+ 'sum',
+ '8gi',
+ 'minus',
+ '8gn',
+ 'lowast',
+ '8gq',
+ 'radic',
+ '8gt',
+ 'prop',
+ '8gu',
+ 'infin',
+ '8h0',
+ 'ang',
+ '8h7',
+ 'and',
+ '8h8',
+ 'or',
+ '8h9',
+ 'cap',
+ '8ha',
+ 'cup',
+ '8hb',
+ 'int',
+ '8hk',
+ 'there4',
+ '8hs',
+ 'sim',
+ '8i5',
+ 'cong',
+ '8i8',
+ 'asymp',
+ '8j0',
+ 'ne',
+ '8j1',
+ 'equiv',
+ '8j4',
+ 'le',
+ '8j5',
+ 'ge',
+ '8k2',
+ 'sub',
+ '8k3',
+ 'sup',
+ '8k4',
+ 'nsub',
+ '8k6',
+ 'sube',
+ '8k7',
+ 'supe',
+ '8kl',
+ 'oplus',
+ '8kn',
+ 'otimes',
+ '8l5',
+ 'perp',
+ '8m5',
+ 'sdot',
+ '8o8',
+ 'lceil',
+ '8o9',
+ 'rceil',
+ '8oa',
+ 'lfloor',
+ '8ob',
+ 'rfloor',
+ '8p9',
+ 'lang',
+ '8pa',
+ 'rang',
+ '9ea',
+ 'loz',
+ '9j0',
+ 'spades',
+ '9j3',
+ 'clubs',
+ '9j5',
+ 'hearts',
+ '9j6',
+ 'diams',
+ 'ai',
+ 'OElig',
+ 'aj',
+ 'oelig',
+ 'b0',
+ 'Scaron',
+ 'b1',
+ 'scaron',
+ 'bo',
+ 'Yuml',
+ 'm6',
+ 'circ',
+ 'ms',
+ 'tilde',
+ '802',
+ 'ensp',
+ '803',
+ 'emsp',
+ '809',
+ 'thinsp',
+ '80c',
+ 'zwnj',
+ '80d',
+ 'zwj',
+ '80e',
+ 'lrm',
+ '80f',
+ 'rlm',
+ '80j',
+ 'ndash',
+ '80k',
+ 'mdash',
+ '80o',
+ 'lsquo',
+ '80p',
+ 'rsquo',
+ '80q',
+ 'sbquo',
+ '80s',
+ 'ldquo',
+ '80t',
+ 'rdquo',
+ '80u',
+ 'bdquo',
+ '810',
+ 'dagger',
+ '811',
+ 'Dagger',
+ '81g',
+ 'permil',
+ '81p',
+ 'lsaquo',
+ '81q',
+ 'rsaquo',
+ '85c',
+ 'euro'
+ ],
+
+
/**
- * 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
+ * Encodes the specified string using raw entities. This means only the required XML base entities will be encoded.
+ *
+ * @method encodeRaw
+ * @param {String} text Text to encode.
+ * @param {Boolean} attr Optional flag to specify if the text is attribute contents.
+ * @return {String} Entity encoded text.
*/
- 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;
+ encodeRaw: function(text, attr)
+ {
+ var t = this;
+ return text.replace(attr ? this.attrsCharsRegExp : this.textCharsRegExp, function(chr) {
+ return t.baseEntities[chr] || chr;
+ });
},
-
/**
- * 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)
+ * Encoded the specified text with both the attributes and text entities. This function will produce larger text contents
+ * since it doesn't know if the context is within a attribute or text node. This was added for compatibility
+ * and is exposed as the DOMUtils.encode function.
+ *
+ * @method encodeAllRaw
+ * @param {String} text Text to encode.
+ * @return {String} Entity encoded text.
*/
- 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;
-
- }
+ encodeAllRaw: function(text) {
+ var t = this;
+ return ('' + text).replace(this.rawCharsRegExp, function(chr) {
+ return t.baseEntities[chr] || chr;
+ });
},
-
/**
- * 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)
+ * Encodes the specified string using numeric entities. The core entities will be
+ * encoded as named ones but all non lower ascii characters will be encoded into numeric entities.
+ *
+ * @method encodeNumeric
+ * @param {String} text Text to encode.
+ * @param {Boolean} attr Optional flag to specify if the text is attribute contents.
+ * @return {String} Entity encoded text.
*/
- 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();
+ encodeNumeric: function(text, attr) {
+ var t = this;
+ return text.replace(attr ? this.attrsCharsRegExp : this.textCharsRegExp, function(chr) {
+ // Multi byte sequence convert it to a single entity
+ if (chr.length > 1) {
+ return '&#' + (1024 * (chr.charCodeAt(0) - 55296) + (chr.charCodeAt(1) - 56320) + 65536) + ';';
}
- }
- },
-
- // private
- getParams : function(q){
- var p = {};
- //p[this.queryParam] = q;
- if(this.pageSize){
- p.start = 0;
- p.limit = this.pageSize;
- }
- return p;
+ return t.baseEntities[chr] || '&#' + chr.charCodeAt(0) + ';';
+ });
},
-
/**
- * Hides the dropdown list if it is currently expanded. Fires the 'collapse' event on completion.
+ * Encodes the specified string using named entities. The core entities will be encoded
+ * as named ones but all non lower ascii characters will be encoded into named entities.
+ *
+ * @method encodeNamed
+ * @param {String} text Text to encode.
+ * @param {Boolean} attr Optional flag to specify if the text is attribute contents.
+ * @param {Object} entities Optional parameter with entities to use.
+ * @return {String} Entity encoded text.
*/
- 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();
- }
+ encodeNamed: function(text, attr, entities) {
+ var t = this;
+ entities = entities || this.namedEntities;
+ return text.replace(attr ? this.attrsCharsRegExp : this.textCharsRegExp, function(chr) {
+ return t.baseEntities[chr] || entities[chr] || chr;
+ });
},
-
/**
- * Expands the dropdown list if it is currently hidden. Fires the 'expand' event on completion.
+ * Returns an encode function based on the name(s) and it's optional entities.
+ *
+ * @method getEncodeFunc
+ * @param {String} name Comma separated list of encoders for example named,numeric.
+ * @param {String} entities Optional parameter with entities to use instead of the built in set.
+ * @return {function} Encode function to be used.
*/
- 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();
- }
+ getEncodeFunc: function(name, entities) {
+ entities = this.buildEntitiesLookup(entities) || this.namedEntities;
+ var t = this;
+ function encodeNamedAndNumeric(text, attr) {
+ return text.replace(attr ? t.attrsCharsRegExp : t.textCharsRegExp, function(chr) {
+ return t.baseEntities[chr] || entities[chr] || '&#' + chr.charCodeAt(0) + ';' || chr;
+ });
}
- },
- listKeyPress : function(e)
- {
- //Roo.log('listkeypress');
- // scroll to first matching element based on key pres..
- if (e.isSpecialKey()) {
- return false;
+
+ function encodeCustomNamed(text, attr) {
+ return t.encodeNamed(text, attr, entities);
}
- 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;
- }
-
+ // Replace + with , to be compatible with previous TinyMCE versions
+ name = this.makeMap(name.replace(/\+/g, ','));
+ // Named and numeric encoder
+ if (name.named && name.numeric) {
+ return this.encodeNamedAndNumeric;
}
-
- 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;
+ // Named encoder
+ if (name.named) {
+ // Custom names
+ if (entities) {
+ return encodeCustomNamed;
}
- }, this);
-
- if (match === false) {
- return true; // no more action?
+ return this.encodeNamed;
}
- // 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
- */
+ // Numeric
+ if (name.numeric) {
+ return this.encodeNumeric;
+ }
+ // Raw encoder
+ return this.encodeRaw;
+ },
/**
- * @hide
- * @method autoSize
+ * Decodes the specified string, this will replace entities with raw UTF characters.
+ *
+ * @method decode
+ * @param {String} text Text to entity decode.
+ * @return {String} Entity decoded string.
*/
-});/*
- * Copyright(c) 2010-2012, Roo J Solutions Limited
- *
- * Licence LGPL
- *
- */
-
+ decode: function(text)
+ {
+ var t = this;
+ return text.replace(this.entityRegExp, function(all, numeric) {
+ if (numeric) {
+ numeric = 'x' === numeric.charAt(0).toLowerCase() ? parseInt(numeric.substr(1), 16) : parseInt(numeric, 10);
+ // Support upper UTF
+ if (numeric > 65535) {
+ numeric -= 65536;
+ return String.fromCharCode(55296 + (numeric >> 10), 56320 + (1023 & numeric));
+ }
+ return t.asciiMap[numeric] || String.fromCharCode(numeric);
+ }
+ return t.reverseEntities[all] || t.namedEntities[all] || t.nativeDecode(all);
+ });
+ },
+ nativeDecode : function (text) {
+ return text;
+ },
+ makeMap : function (items, delim, map) {
+ var i;
+ items = items || [];
+ delim = delim || ',';
+ if (typeof items == "string") {
+ items = items.split(delim);
+ }
+ map = map || {};
+ i = items.length;
+ while (i--) {
+ map[items[i]] = {};
+ }
+ return map;
+ }
+};
+
+
+
+Roo.htmleditor.TidyEntities.init();
/**
- * @class Roo.form.ComboBoxArray
- * @extends Roo.form.TextField
- * A facebook style adder... for lists of email / people / countries etc...
- * pick multiple items from a combo box, and shows each one.
- *
- * Fred [x] Brian [x] [Pick another |v]
- *
- *
- * For this to work: it needs various extra information
- * - normal combo problay has
- * name, hiddenName
- * + displayField, valueField
- *
- * For our purpose...
- *
- *
- * If we change from 'extends' to wrapping...
- *
- *
- *
-
-
+ * @class Roo.htmleditor.KeyEnter
+ * Handle Enter press..
+ * @cfg {Roo.HtmlEditorCore} core the editor.
* @constructor
- * Create a new ComboBoxArray.
+ * Create a new Filter.
* @param {Object} config Configuration options
*/
+
+
+
+
+
+Roo.htmleditor.KeyEnter = function(cfg) {
+ Roo.apply(this, cfg);
+ // this does not actually call walk as it's really just a abstract class
+ Roo.get(this.core.doc.body).on('keypress', this.keypress, this);
+}
-Roo.form.ComboBoxArray = function(config)
-{
- this.addEvents({
- /**
- * @event beforeremove
- * Fires before remove the value from the list
- * @param {Roo.form.ComboBoxArray} _self This combo box array
- * @param {Roo.form.ComboBoxArray.Item} item removed item
- */
- 'beforeremove' : true,
- /**
- * @event remove
- * Fires when remove the value from the list
- * @param {Roo.form.ComboBoxArray} _self This combo box array
- * @param {Roo.form.ComboBoxArray.Item} item removed item
- */
- 'remove' : true
-
-
- });
-
- Roo.form.ComboBoxArray.superclass.constructor.call(this, config);
-
- this.items = new Roo.util.MixedCollection(false);
-
- // construct the child combo...
+//Roo.htmleditor.KeyEnter.i = 0;
+
+
+Roo.htmleditor.KeyEnter.prototype = {
+ core : false,
+ keypress : function(e)
+ {
+ if (e.charCode != 13 && e.charCode != 10) {
+ Roo.log([e.charCode,e]);
+ return true;
+ }
+ e.preventDefault();
+ // https://stackoverflow.com/questions/18552336/prevent-contenteditable-adding-div-on-enter-chrome
+ var doc = this.core.doc;
+ //add a new line
+
+ var sel = this.core.getSelection();
+ var range = sel.getRangeAt(0);
+ var n = range.commonAncestorContainer;
+ var pc = range.closest([ 'ol', 'ul']);
+ var pli = range.closest('li');
+ if (!pc || e.ctrlKey) {
+ // on it list, or ctrl pressed.
+ if (!e.ctrlKey) {
+ sel.insertNode('br', 'after');
+ } else {
+ // only do this if we have ctrl key..
+ var br = doc.createElement('br');
+ br.className = 'clear';
+ br.setAttribute('style', 'clear: both');
+ sel.insertNode(br, 'after');
+ }
+
+
+ this.core.undoManager.addEvent();
+ this.core.fireEditorEvent(e);
+ return false;
+ }
+
+ // deal with <li> insetion
+ if (pli.innerText.trim() == '' &&
+ pli.previousSibling &&
+ pli.previousSibling.nodeName == 'LI' &&
+ pli.previousSibling.innerText.trim() == '') {
+ pli.parentNode.removeChild(pli.previousSibling);
+ sel.cursorAfter(pc);
+ this.core.undoManager.addEvent();
+ this.core.fireEditorEvent(e);
+ return false;
+ }
-
+ var li = doc.createElement('LI');
+ li.innerHTML = ' ';
+ if (!pli || !pli.firstSibling) {
+ pc.appendChild(li);
+ } else {
+ pli.parentNode.insertBefore(li, pli.firstSibling);
+ }
+ sel.cursorText (li.firstChild);
+
+ this.core.undoManager.addEvent();
+ this.core.fireEditorEvent(e);
+
+ return false;
+
+
+
+
+ }
+};
+
+/**
+ * @class Roo.htmleditor.Block
+ * Base class for html editor blocks - do not use it directly .. extend it..
+ * @cfg {DomElement} node The node to apply stuff to.
+ * @cfg {String} friendly_name the name that appears in the context bar about this block
+ * @cfg {Object} Context menu - see Roo.form.HtmlEditor.ToolbarContext
+
+ * @constructor
+ * Create a new Filter.
+ * @param {Object} config Configuration options
+ */
+
+Roo.htmleditor.Block = function(cfg)
+{
+ // do nothing .. should not be called really.
}
+/**
+ * factory method to get the block from an element (using cache if necessary)
+ * @static
+ * @param {HtmlElement} the dom element
+ */
+Roo.htmleditor.Block.factory = function(node)
+{
+ var cc = Roo.htmleditor.Block.cache;
+ var id = Roo.get(node).id;
+ if (typeof(cc[id]) != 'undefined' && (!cc[id].node || cc[id].node.closest('body'))) {
+ Roo.htmleditor.Block.cache[id].readElement(node);
+ return Roo.htmleditor.Block.cache[id];
+ }
+ var db = node.getAttribute('data-block');
+ if (!db) {
+ db = node.nodeName.toLowerCase().toUpperCaseFirst();
+ }
+ var cls = Roo.htmleditor['Block' + db];
+ if (typeof(cls) == 'undefined') {
+ //Roo.log(node.getAttribute('data-block'));
+ Roo.log("OOps missing block : " + 'Block' + db);
+ return false;
+ }
+ Roo.htmleditor.Block.cache[id] = new cls({ node: node });
+ return Roo.htmleditor.Block.cache[id]; /// should trigger update element
+};
-
-Roo.extend(Roo.form.ComboBoxArray, Roo.form.TextField,
-{
- /**
- * @cfg {Roo.form.Combo} combo The combo box that is wrapped
- */
+/**
+ * initalize all Elements from content that are 'blockable'
+ * @static
+ * @param the body element
+ */
+Roo.htmleditor.Block.initAll = function(body, type)
+{
+ if (typeof(type) == 'undefined') {
+ var ia = Roo.htmleditor.Block.initAll;
+ ia(body,'table');
+ ia(body,'td');
+ ia(body,'figure');
+ return;
+ }
+ Roo.each(Roo.get(body).query(type), function(e) {
+ Roo.htmleditor.Block.factory(e);
+ },this);
+};
+// question goes here... do we need to clear out this cache sometimes?
+// or show we make it relivant to the htmleditor.
+Roo.htmleditor.Block.cache = {};
+
+Roo.htmleditor.Block.prototype = {
- lastData : false,
+ node : false,
- // behavies liek a hiddne field
- inputType: 'hidden',
- /**
- * @cfg {Number} width The width of the box that displays the selected element
- */
- width: 300,
-
+ // used by context menu
+ friendly_name : 'Based Block',
+ // text for button to delete this element
+ deleteTitle : false,
+ context : false,
/**
- * @cfg {String} name The name of the visable items on this form (eg. titles not ids)
+ * Update a node with values from this object
+ * @param {DomElement} node
*/
- name : false,
+ updateElement : function(node)
+ {
+ Roo.DomHelper.update(node === undefined ? this.node : node, this.toObject());
+ },
+ /**
+ * convert to plain HTML for calling insertAtCursor..
+ */
+ toHTML : function()
+ {
+ return Roo.DomHelper.markup(this.toObject());
+ },
/**
- * @cfg {String} hiddenName The hidden name of the field, often contains an comma seperated list of names
+ * used by readEleemnt to extract data from a node
+ * may need improving as it's pretty basic
+
+ * @param {DomElement} node
+ * @param {String} tag - tag to find, eg. IMG ?? might be better to use DomQuery ?
+ * @param {String} attribute (use html - for contents, style for using next param as style, or false to return the node)
+ * @param {String} style the style property - eg. text-align
*/
- hiddenName : false,
+ getVal : function(node, tag, attr, style)
+ {
+ var n = node;
+ if (tag !== true && n.tagName != tag.toUpperCase()) {
+ // in theory we could do figure[3] << 3rd figure? or some more complex search..?
+ // but kiss for now.
+ n = node.getElementsByTagName(tag).item(0);
+ }
+ if (!n) {
+ return '';
+ }
+ if (attr === false) {
+ return n;
+ }
+ if (attr == 'html') {
+ return n.innerHTML;
+ }
+ if (attr == 'style') {
+ return n.style[style];
+ }
+
+ return n.hasAttribute(attr) ? n.getAttribute(attr) : '';
+
+ },
+ /**
+ * create a DomHelper friendly object - for use with
+ * Roo.DomHelper.markup / overwrite / etc..
+ * (override this)
+ */
+ toObject : function()
+ {
+ return {};
+ },
+ /**
+ * Read a node that has a 'data-block' property - and extract the values from it.
+ * @param {DomElement} node - the node
+ */
+ readElement : function(node)
+ {
+
+ }
- // private the array of items that are displayed..
- items : false,
- // private - the hidden field el.
- hiddenEl : false,
- // private - the filed el..
- el : false,
+};
+
+
+
+/**
+ * @class Roo.htmleditor.BlockFigure
+ * Block that has an image and a figcaption
+ * @cfg {String} image_src the url for the image
+ * @cfg {String} align (left|right) alignment for the block default left
+ * @cfg {String} caption the text to appear below (and in the alt tag)
+ * @cfg {String} caption_display (block|none) display or not the caption
+ * @cfg {String|number} image_width the width of the image number or %?
+ * @cfg {String|number} image_height the height of the image number or %?
+ *
+ * @constructor
+ * Create a new Filter.
+ * @param {Object} config Configuration options
+ */
+
+Roo.htmleditor.BlockFigure = function(cfg)
+{
+ if (cfg.node) {
+ this.readElement(cfg.node);
+ this.updateElement(cfg.node);
+ }
+ Roo.apply(this, cfg);
+}
+Roo.extend(Roo.htmleditor.BlockFigure, Roo.htmleditor.Block, {
+
- //validateValue : function() { return true; }, // all values are ok!
- //onAddClick: function() { },
+ // setable values.
+ image_src: '',
+ align: 'center',
+ caption : '',
+ caption_display : 'block',
+ width : '100%',
+ cls : '',
+ href: '',
+ video_url : '',
- onRender : function(ct, position)
+ // margin: '2%', not used
+
+ text_align: 'left', // (left|right) alignment for the text caption default left. - not used at present
+
+
+ // used by context menu
+ friendly_name : 'Image with caption',
+ deleteTitle : "Delete Image and Caption",
+
+ contextMenu : function(toolbar)
{
- // create the standard hidden element
- //Roo.form.ComboBoxArray.superclass.onRender.call(this, ct, position);
+ var block = function() {
+ return Roo.htmleditor.Block.factory(toolbar.tb.selectedNode);
+ };
- // give fake names to child combo;
- this.combo.hiddenName = this.hiddenName ? (this.hiddenName+'-subcombo') : this.hiddenName;
- this.combo.name = this.name? (this.name+'-subcombo') : this.name;
+ var rooui = typeof(Roo.bootstrap) == 'undefined' ? Roo : Roo.bootstrap;
- this.combo = Roo.factory(this.combo, Roo.form);
- this.combo.onRender(ct, position);
- if (typeof(this.combo.width) != 'undefined') {
- this.combo.onResize(this.combo.width,0);
- }
+ var syncValue = toolbar.editorcore.syncValue;
- this.combo.initEvents();
+ var fields = {};
- // assigned so form know we need to do this..
- this.store = this.combo.store;
- this.valueField = this.combo.valueField;
- this.displayField = this.combo.displayField ;
+ return [
+ {
+ xtype : 'TextItem',
+ text : "Source: ",
+ xns : rooui.Toolbar //Boostrap?
+ },
+ {
+ xtype : 'Button',
+ text: 'Change Image URL',
+
+ listeners : {
+ click: function (btn, state)
+ {
+ var b = block();
+
+ Roo.MessageBox.show({
+ title : "Image Source URL",
+ msg : "Enter the url for the image",
+ buttons: Roo.MessageBox.OKCANCEL,
+ fn: function(btn, val){
+ if (btn != 'ok') {
+ return;
+ }
+ b.image_src = val;
+ b.updateElement();
+ syncValue();
+ toolbar.editorcore.onEditorEvent();
+ },
+ minWidth:250,
+ prompt:true,
+ //multiline: multiline,
+ modal : true,
+ value : b.image_src
+ });
+ }
+ },
+ xns : rooui.Toolbar
+ },
+
+ {
+ xtype : 'Button',
+ text: 'Change Link URL',
+
+ listeners : {
+ click: function (btn, state)
+ {
+ var b = block();
+
+ Roo.MessageBox.show({
+ title : "Link URL",
+ msg : "Enter the url for the link - leave blank to have no link",
+ buttons: Roo.MessageBox.OKCANCEL,
+ fn: function(btn, val){
+ if (btn != 'ok') {
+ return;
+ }
+ b.href = val;
+ b.updateElement();
+ syncValue();
+ toolbar.editorcore.onEditorEvent();
+ },
+ minWidth:250,
+ prompt:true,
+ //multiline: multiline,
+ modal : true,
+ value : b.href
+ });
+ }
+ },
+ xns : rooui.Toolbar
+ },
+ {
+ xtype : 'Button',
+ text: 'Show Video URL',
+
+ listeners : {
+ click: function (btn, state)
+ {
+ Roo.MessageBox.alert("Video URL",
+ block().video_url == '' ? 'This image is not linked ot a video' :
+ 'The image is linked to: <a target="_new" href="' + block().video_url + '">' + block().video_url + '</a>');
+ }
+ },
+ xns : rooui.Toolbar
+ },
+
+
+ {
+ xtype : 'TextItem',
+ text : "Width: ",
+ xns : rooui.Toolbar //Boostrap?
+ },
+ {
+ xtype : 'ComboBox',
+ allowBlank : false,
+ displayField : 'val',
+ editable : true,
+ listWidth : 100,
+ triggerAction : 'all',
+ typeAhead : true,
+ valueField : 'val',
+ width : 70,
+ name : 'width',
+ listeners : {
+ select : function (combo, r, index)
+ {
+ toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
+ var b = block();
+ b.width = r.get('val');
+ b.updateElement();
+ syncValue();
+ toolbar.editorcore.onEditorEvent();
+ }
+ },
+ xns : rooui.form,
+ store : {
+ xtype : 'SimpleStore',
+ data : [
+ ['100%'],
+ ['80%'],
+ ['50%'],
+ ['20%'],
+ ['10%']
+ ],
+ fields : [ 'val'],
+ xns : Roo.data
+ }
+ },
+ {
+ xtype : 'TextItem',
+ text : "Align: ",
+ xns : rooui.Toolbar //Boostrap?
+ },
+ {
+ xtype : 'ComboBox',
+ allowBlank : false,
+ displayField : 'val',
+ editable : true,
+ listWidth : 100,
+ triggerAction : 'all',
+ typeAhead : true,
+ valueField : 'val',
+ width : 70,
+ name : 'align',
+ listeners : {
+ select : function (combo, r, index)
+ {
+ toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
+ var b = block();
+ b.align = r.get('val');
+ b.updateElement();
+ syncValue();
+ toolbar.editorcore.onEditorEvent();
+ }
+ },
+ xns : rooui.form,
+ store : {
+ xtype : 'SimpleStore',
+ data : [
+ ['left'],
+ ['right'],
+ ['center']
+ ],
+ fields : [ 'val'],
+ xns : Roo.data
+ }
+ },
+
+
+ {
+ xtype : 'Button',
+ text: 'Hide Caption',
+ name : 'caption_display',
+ pressed : false,
+ enableToggle : true,
+ setValue : function(v) {
+ // this trigger toggle.
+
+ this.setText(v ? "Hide Caption" : "Show Caption");
+ this.setPressed(v != 'block');
+ },
+ listeners : {
+ toggle: function (btn, state)
+ {
+ var b = block();
+ b.caption_display = b.caption_display == 'block' ? 'none' : 'block';
+ this.setText(b.caption_display == 'block' ? "Hide Caption" : "Show Caption");
+ b.updateElement();
+ syncValue();
+ toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
+ toolbar.editorcore.onEditorEvent();
+ }
+ },
+ xns : rooui.Toolbar
+ }
+ ];
+ },
+ /**
+ * create a DomHelper friendly object - for use with
+ * Roo.DomHelper.markup / overwrite / etc..
+ */
+ toObject : function()
+ {
+ var d = document.createElement('div');
+ d.innerHTML = this.caption;
+
+ var m = this.width != '100%' && this.align == 'center' ? '0 auto' : 0;
+
+ var iw = this.align == 'center' ? this.width : '100%';
+ var img = {
+ tag : 'img',
+ contenteditable : 'false',
+ src : this.image_src,
+ alt : d.innerText.replace(/\n/g, " ").replace(/\s+/g, ' ').trim(), // removeHTML and reduce spaces..
+ style: {
+ width : iw,
+ maxWidth : iw + ' !important', // this is not getting rendered?
+ margin : m
+
+ }
+ };
+ /*
+ '<div class="{0}" width="420" height="315" src="{1}" frameborder="0" allowfullscreen>' +
+ '<a href="{2}">' +
+ '<img class="{0}-thumbnail" src="{3}/Images/{4}/{5}#image-{4}" />' +
+ '</a>' +
+ '</div>',
+ */
+
+ if (this.href.length > 0) {
+ img = {
+ tag : 'a',
+ href: this.href,
+ contenteditable : 'true',
+ cn : [
+ img
+ ]
+ };
+ }
- this.combo.wrap.addClass('x-cbarray-grp');
- var cbwrap = this.combo.wrap.createChild(
- {tag: 'div', cls: 'x-cbarray-cb'},
- this.combo.el.dom
- );
+ if (this.video_url.length > 0) {
+ img = {
+ tag : 'div',
+ cls : this.cls,
+ frameborder : 0,
+ allowfullscreen : true,
+ width : 420, // these are for video tricks - that we replace the outer
+ height : 315,
+ src : this.video_url,
+ cn : [
+ img
+ ]
+ };
+ }
+ // we remove caption totally if its hidden... - will delete data.. but otherwise we end up with fake caption
+ var captionhtml = this.caption_display == 'none' ? '' : (this.caption.length ? this.caption : "Caption");
-
- this.hiddenEl = this.combo.wrap.createChild({
- tag: 'input', type:'hidden' , name: this.hiddenName, value : ''
- });
- this.el = this.combo.wrap.createChild({
- tag: 'input', type:'hidden' , name: this.name, value : ''
- });
- // this.el.dom.removeAttribute("name");
+
+ var ret = {
+ tag: 'figure',
+ 'data-block' : 'Figure',
+ 'data-width' : this.width,
+ contenteditable : 'false',
+
+ style : {
+ display: 'block',
+ float : this.align ,
+ maxWidth : this.align == 'center' ? '100% !important' : (this.width + ' !important'),
+ width : this.align == 'center' ? '100%' : this.width,
+ margin: '0px',
+ padding: this.align == 'center' ? '0' : '0 10px' ,
+ textAlign : this.align // seems to work for email..
+
+ },
+
+
+ align : this.align,
+ cn : [
+ img,
+
+ {
+ tag: 'figcaption',
+ 'data-display' : this.caption_display,
+ style : {
+ textAlign : 'left',
+ fontSize : '16px',
+ lineHeight : '24px',
+ display : this.caption_display,
+ maxWidth : (this.align == 'center' ? this.width : '100%' ) + ' !important',
+ margin: m,
+ width: this.align == 'center' ? this.width : '100%'
+
+
+ },
+ cls : this.cls.length > 0 ? (this.cls + '-thumbnail' ) : '',
+ cn : [
+ {
+ tag: 'div',
+ style : {
+ marginTop : '16px',
+ textAlign : 'left'
+ },
+ align: 'left',
+ cn : [
+ {
+ // we can not rely on yahoo syndication to use CSS elements - so have to use '<i>' to encase stuff.
+ tag : 'i',
+ contenteditable : true,
+ html : captionhtml
+ }
+
+ ]
+ }
+
+ ]
+
+ }
+ ]
+ };
+ return ret;
+
+ },
+
+ readElement : function(node)
+ {
+ // this should not really come from the link...
+ this.video_url = this.getVal(node, 'div', 'src');
+ this.cls = this.getVal(node, 'div', 'class');
+ this.href = this.getVal(node, 'a', 'href');
- this.outerWrap = this.combo.wrap;
- this.wrap = cbwrap;
+ this.image_src = this.getVal(node, 'img', 'src');
+
+ this.align = this.getVal(node, 'figure', 'align');
+ var figcaption = this.getVal(node, 'figcaption', false);
+ if (figcaption !== '') {
+ this.caption = this.getVal(figcaption, 'i', 'html');
+ }
- this.outerWrap.setWidth(this.width);
- this.outerWrap.dom.removeChild(this.el.dom);
+
+ this.caption_display = this.getVal(node, 'figcaption', 'data-display');
+ //this.text_align = this.getVal(node, 'figcaption', 'style','text-align');
+ this.width = this.getVal(node, true, 'data-width');
+ //this.margin = this.getVal(node, 'figure', 'style', 'margin');
- this.wrap.dom.appendChild(this.el.dom);
- this.outerWrap.dom.removeChild(this.combo.trigger.dom);
- this.combo.wrap.dom.appendChild(this.combo.trigger.dom);
+ },
+ removeNode : function()
+ {
+ return this.node;
+ }
+
+
+
+
+
+
+
+
+})
+
+
+
+/**
+ * @class Roo.htmleditor.BlockTable
+ * Block that manages a table
+ *
+ * @constructor
+ * Create a new Filter.
+ * @param {Object} config Configuration options
+ */
+
+Roo.htmleditor.BlockTable = function(cfg)
+{
+ if (cfg.node) {
+ this.readElement(cfg.node);
+ this.updateElement(cfg.node);
+ }
+ Roo.apply(this, cfg);
+ if (!cfg.node) {
+ this.rows = [];
+ for(var r = 0; r < this.no_row; r++) {
+ this.rows[r] = [];
+ for(var c = 0; c < this.no_col; c++) {
+ this.rows[r][c] = this.emptyCell();
+ }
+ }
+ }
+
+
+}
+Roo.extend(Roo.htmleditor.BlockTable, Roo.htmleditor.Block, {
+
+ rows : false,
+ no_col : 1,
+ no_row : 1,
+
+
+ width: '100%',
+
+ // used by context menu
+ friendly_name : 'Table',
+ deleteTitle : 'Delete Table',
+ // context menu is drawn once..
+
+ contextMenu : function(toolbar)
+ {
- this.combo.trigger.setStyle('position','relative');
- this.combo.trigger.setStyle('left', '0px');
- this.combo.trigger.setStyle('top', '2px');
+ var block = function() {
+ return Roo.htmleditor.Block.factory(toolbar.tb.selectedNode);
+ };
- this.combo.el.setStyle('vertical-align', 'text-bottom');
- //this.trigger.setStyle('vertical-align', 'top');
+ var rooui = typeof(Roo.bootstrap) == 'undefined' ? Roo : Roo.bootstrap;
- // this should use the code from combo really... on('add' ....)
- if (this.adder) {
+ var syncValue = toolbar.editorcore.syncValue;
+
+ var fields = {};
+
+ return [
+ {
+ xtype : 'TextItem',
+ text : "Width: ",
+ xns : rooui.Toolbar //Boostrap?
+ },
+ {
+ xtype : 'ComboBox',
+ allowBlank : false,
+ displayField : 'val',
+ editable : true,
+ listWidth : 100,
+ triggerAction : 'all',
+ typeAhead : true,
+ valueField : 'val',
+ width : 100,
+ name : 'width',
+ listeners : {
+ select : function (combo, r, index)
+ {
+ toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
+ var b = block();
+ b.width = r.get('val');
+ b.updateElement();
+ syncValue();
+ toolbar.editorcore.onEditorEvent();
+ }
+ },
+ xns : rooui.form,
+ store : {
+ xtype : 'SimpleStore',
+ data : [
+ ['100%'],
+ ['auto']
+ ],
+ fields : [ 'val'],
+ xns : Roo.data
+ }
+ },
+ // -------- Cols
+
+ {
+ xtype : 'TextItem',
+ text : "Columns: ",
+ xns : rooui.Toolbar //Boostrap?
+ },
+
+ {
+ xtype : 'Button',
+ text: '-',
+ listeners : {
+ click : function (_self, e)
+ {
+ toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
+ block().removeColumn();
+ syncValue();
+ toolbar.editorcore.onEditorEvent();
+ }
+ },
+ xns : rooui.Toolbar
+ },
+ {
+ xtype : 'Button',
+ text: '+',
+ listeners : {
+ click : function (_self, e)
+ {
+ toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
+ block().addColumn();
+ syncValue();
+ toolbar.editorcore.onEditorEvent();
+ }
+ },
+ xns : rooui.Toolbar
+ },
+ // -------- ROWS
+ {
+ xtype : 'TextItem',
+ text : "Rows: ",
+ xns : rooui.Toolbar //Boostrap?
+ },
+
+ {
+ xtype : 'Button',
+ text: '-',
+ listeners : {
+ click : function (_self, e)
+ {
+ toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
+ block().removeRow();
+ syncValue();
+ toolbar.editorcore.onEditorEvent();
+ }
+ },
+ xns : rooui.Toolbar
+ },
+ {
+ xtype : 'Button',
+ text: '+',
+ listeners : {
+ click : function (_self, e)
+ {
+ block().addRow();
+ syncValue();
+ toolbar.editorcore.onEditorEvent();
+ }
+ },
+ xns : rooui.Toolbar
+ },
+ // -------- ROWS
+ {
+ xtype : 'Button',
+ text: 'Reset Column Widths',
+ listeners : {
+
+ click : function (_self, e)
+ {
+ block().resetWidths();
+ syncValue();
+ toolbar.editorcore.onEditorEvent();
+ }
+ },
+ xns : rooui.Toolbar
+ }
+
+
+ ];
- this.adder = this.outerWrap.createChild(
- {tag: 'img', src: Roo.BLANK_IMAGE_URL, cls: 'x-form-adder', style: 'margin-left:2px'});
- var _t = this;
- this.adder.on('click', function(e) {
- _t.fireEvent('adderclick', this, e);
- }, _t);
- }
- //var _t = this;
- //this.adder.on('click', this.onAddClick, _t);
+ },
+
+
+ /**
+ * create a DomHelper friendly object - for use with
+ * Roo.DomHelper.markup / overwrite / etc..
+ * ?? should it be called with option to hide all editing features?
+ */
+ toObject : function()
+ {
+ var ret = {
+ tag : 'table',
+ contenteditable : 'false', // this stops cell selection from picking the table.
+ 'data-block' : 'Table',
+ style : {
+ width: this.width,
+ border : 'solid 1px #000', // ??? hard coded?
+ 'border-collapse' : 'collapse'
+ },
+ cn : [
+ { tag : 'tbody' , cn : [] }
+ ]
+ };
- this.combo.on('select', function(cb, rec, ix) {
- this.addItem(rec.data);
+ // do we have a head = not really
+ var ncols = 0;
+ Roo.each(this.rows, function( row ) {
+ var tr = {
+ tag: 'tr',
+ style : {
+ margin: '6px',
+ border : 'solid 1px #000',
+ textAlign : 'left'
+ },
+ cn : [ ]
+ };
+
+ ret.cn[0].cn.push(tr);
+ // does the row have any properties? ?? height?
+ var nc = 0;
+ Roo.each(row, function( cell ) {
+
+ var td = {
+ tag : 'td',
+ contenteditable : 'true',
+ 'data-block' : 'Td',
+ html : cell.html,
+ style : cell.style
+ };
+ if (cell.colspan > 1) {
+ td.colspan = cell.colspan ;
+ nc += cell.colspan;
+ } else {
+ nc++;
+ }
+ if (cell.rowspan > 1) {
+ td.rowspan = cell.rowspan ;
+ }
+
+
+ // widths ?
+ tr.cn.push(td);
+
+
+ }, this);
+ ncols = Math.max(nc, ncols);
- cb.setValue('');
- cb.el.dom.value = '';
- //cb.lastData = rec.data;
- // add to list
}, this);
+ // add the header row..
+ ncols++;
+
+ return ret;
+
},
-
- getName: function()
+ readElement : function(node)
{
- // returns hidden if it's set..
- if (!this.rendered) {return ''};
- return this.hiddenName ? this.hiddenName : this.name;
+ node = node ? node : this.node ;
+ this.width = this.getVal(node, true, 'style', 'width') || '100%';
+
+ this.rows = [];
+ this.no_row = 0;
+ var trs = Array.from(node.rows);
+ trs.forEach(function(tr) {
+ var row = [];
+ this.rows.push(row);
+
+ this.no_row++;
+ var no_column = 0;
+ Array.from(tr.cells).forEach(function(td) {
+
+ var add = {
+ colspan : td.hasAttribute('colspan') ? td.getAttribute('colspan')*1 : 1,
+ rowspan : td.hasAttribute('rowspan') ? td.getAttribute('rowspan')*1 : 1,
+ style : td.hasAttribute('style') ? td.getAttribute('style') : '',
+ html : td.innerHTML
+ };
+ no_column += add.colspan;
+
+
+ row.push(add);
+
+
+ },this);
+ this.no_col = Math.max(this.no_col, no_column);
+
+
+ },this);
+
},
+ normalizeRows: function()
+ {
+ var ret= [];
+ var rid = -1;
+ this.rows.forEach(function(row) {
+ rid++;
+ ret[rid] = [];
+ row = this.normalizeRow(row);
+ var cid = 0;
+ row.forEach(function(c) {
+ while (typeof(ret[rid][cid]) != 'undefined') {
+ cid++;
+ }
+ if (typeof(ret[rid]) == 'undefined') {
+ ret[rid] = [];
+ }
+ ret[rid][cid] = c;
+ c.row = rid;
+ c.col = cid;
+ if (c.rowspan < 2) {
+ return;
+ }
+
+ for(var i = 1 ;i < c.rowspan; i++) {
+ if (typeof(ret[rid+i]) == 'undefined') {
+ ret[rid+i] = [];
+ }
+ ret[rid+i][cid] = c;
+ }
+ });
+ }, this);
+ return ret;
+ },
- onResize: function(w, h){
-
- return;
- // not sure if this is needed..
- //this.combo.onResize(w,h);
-
- if(typeof w != 'number'){
- // we do not handle it!?!?
- return;
- }
- var tw = this.combo.trigger.getWidth();
- tw += this.addicon ? this.addicon.getWidth() : 0;
- tw += this.editicon ? this.editicon.getWidth() : 0;
- var x = w - tw;
- this.combo.el.setWidth( this.combo.adjustWidth('input', x));
-
- this.combo.trigger.setStyle('left', '0px');
-
- if(this.list && this.listWidth === undefined){
- var lw = Math.max(x + this.combo.trigger.getWidth(), this.combo.minListWidth);
- this.list.setWidth(lw);
- this.innerList.setWidth(lw - this.list.getFrameWidth('lr'));
- }
-
+ normalizeRow: function(row)
+ {
+ var ret= [];
+ row.forEach(function(c) {
+ if (c.colspan < 2) {
+ ret.push(c);
+ return;
+ }
+ for(var i =0 ;i < c.colspan; i++) {
+ ret.push(c);
+ }
+ });
+ return ret;
-
},
- addItem: function(rec)
+ deleteColumn : function(sel)
{
- var valueField = this.combo.valueField;
- var displayField = this.combo.displayField;
- if (this.items.indexOfKey(rec[valueField]) > -1) {
- //console.log("GOT " + rec.data.id);
+ if (!sel || sel.type != 'col') {
+ return;
+ }
+ if (this.no_col < 2) {
return;
}
- var x = new Roo.form.ComboBoxArray.Item({
- //id : rec[this.idField],
- data : rec,
- displayField : displayField ,
- tipField : displayField ,
- cb : this
+ this.rows.forEach(function(row) {
+ var cols = this.normalizeRow(row);
+ var col = cols[sel.col];
+ if (col.colspan > 1) {
+ col.colspan --;
+ } else {
+ row.remove(col);
+ }
+
+ }, this);
+ this.no_col--;
+
+ },
+ removeColumn : function()
+ {
+ this.deleteColumn({
+ type: 'col',
+ col : this.no_col-1
});
- // use the
- this.items.add(rec[valueField],x);
- // add it before the element..
- this.updateHiddenEl();
- x.render(this.outerWrap, this.wrap.dom);
- // add the image handler..
+ this.updateElement();
},
- updateHiddenEl : function()
+
+ addColumn : function()
{
- this.validate();
- if (!this.hiddenEl) {
- return;
- }
- var ar = [];
- var idField = this.combo.valueField;
- this.items.each(function(f) {
- ar.push(f.data[idField]);
+ this.rows.forEach(function(row) {
+ row.push(this.emptyCell());
- });
- this.hiddenEl.dom.value = ar.join(',');
- this.validate();
+ }, this);
+ this.updateElement();
},
- reset : function()
+ deleteRow : function(sel)
{
- this.items.clear();
-
- Roo.each(this.outerWrap.select('.x-cbarray-item', true).elements, function(el){
- el.remove();
- });
-
- this.el.dom.value = '';
- if (this.hiddenEl) {
- this.hiddenEl.dom.value = '';
+ if (!sel || sel.type != 'row') {
+ return;
}
- },
- getValue: function()
- {
- return this.hiddenEl ? this.hiddenEl.dom.value : '';
- },
- setValue: function(v) // not a valid action - must use addItems..
- {
-
- this.reset();
+ if (this.no_row < 2) {
+ return;
+ }
+ var rows = this.normalizeRows();
- if (this.store.isLocal && (typeof(v) == 'string')) {
- // then we can use the store to find the values..
- // comma seperated at present.. this needs to allow JSON based encoding..
- this.hiddenEl.value = v;
- var v_ar = [];
- Roo.each(v.split(','), function(k) {
- Roo.log("CHECK " + this.valueField + ',' + k);
- var li = this.store.query(this.valueField, k);
- if (!li.length) {
- return;
+ rows[sel.row].forEach(function(col) {
+ if (col.rowspan > 1) {
+ col.rowspan--;
+ } else {
+ col.remove = 1; // flage it as removed.
+ }
+
+ }, this);
+ var newrows = [];
+ this.rows.forEach(function(row) {
+ newrow = [];
+ row.forEach(function(c) {
+ if (typeof(c.remove) == 'undefined') {
+ newrow.push(c);
}
- var add = {};
- add[this.valueField] = k;
- add[this.displayField] = li.item(0).data[this.displayField];
- this.addItem(add);
- }, this)
-
- }
- if (typeof(v) == 'object' ) {
- // then let's assume it's an array of objects..
- Roo.each(v, function(l) {
- this.addItem(l);
- }, this);
-
- }
+ });
+ if (newrow.length > 0) {
+ newrows.push(row);
+ }
+ });
+ this.rows = newrows;
+
+ this.no_row--;
+ this.updateElement();
+
},
- setFromData: function(v)
+ removeRow : function()
{
- // this recieves an object, if setValues is called.
- this.reset();
- this.el.dom.value = v[this.displayField];
- this.hiddenEl.dom.value = v[this.valueField];
- if (typeof(v[this.valueField]) != 'string' || !v[this.valueField].length) {
- return;
- }
- var kv = v[this.valueField];
- var dv = v[this.displayField];
- kv = typeof(kv) != 'string' ? '' : kv;
- dv = typeof(dv) != 'string' ? '' : dv;
+ this.deleteRow({
+ type: 'row',
+ row : this.no_row-1
+ });
+ },
+
+
+ addRow : function()
+ {
- var keys = kv.split(',');
- var display = dv.split(',');
- for (var i = 0 ; i < keys.length; i++) {
+ var row = [];
+ for (var i = 0; i < this.no_col; i++ ) {
- add = {};
- add[this.valueField] = keys[i];
- add[this.displayField] = display[i];
- this.addItem(add);
+ row.push(this.emptyCell());
+
}
-
+ this.rows.push(row);
+ this.updateElement();
},
-
- /**
- * Validates the combox array value
- * @return {Boolean} True if the value is valid, else false
- */
- validate : function(){
- if(this.disabled || this.validateValue(this.processValue(this.getValue()))){
- this.clearInvalid();
- return true;
- }
- return false;
+
+ // the default cell object... at present...
+ emptyCell : function() {
+ return (new Roo.htmleditor.BlockTd({})).toObject();
+
+
},
- validateValue : function(value){
- return Roo.form.ComboBoxArray.superclass.validateValue.call(this, this.getValue());
-
+ removeNode : function()
+ {
+ return this.node;
},
- /*@
- * overide
- *
- */
- isDirty : function() {
- if(this.disabled) {
- return false;
- }
-
- try {
- var d = Roo.decode(String(this.originalValue));
- } catch (e) {
- return String(this.getValue()) !== String(this.originalValue);
- }
-
- var originalValue = [];
-
- for (var i = 0; i < d.length; i++){
- originalValue.push(d[i][this.valueField]);
- }
-
- return String(this.getValue()) !== String(originalValue.join(','));
-
+
+
+ resetWidths : function()
+ {
+ Array.from(this.node.getElementsByTagName('td')).forEach(function(n) {
+ var nn = Roo.htmleditor.Block.factory(n);
+ nn.width = '';
+ nn.updateElement(n);
+ });
}
-});
+
+
+
+})
+
+/**
+ *
+ * editing a TD?
+ *
+ * since selections really work on the table cell, then editing really should work from there
+ *
+ * The original plan was to support merging etc... - but that may not be needed yet..
+ *
+ * So this simple version will support:
+ * add/remove cols
+ * adjust the width +/-
+ * reset the width...
+ *
+ *
+ */
+
/**
- * @class Roo.form.ComboBoxArray.Item
- * @extends Roo.BoxComponent
- * A selected item in the list
- * Fred [x] Brian [x] [Pick another |v]
+ * @class Roo.htmleditor.BlockTable
+ * Block that manages a table
*
* @constructor
- * Create a new item.
+ * Create a new Filter.
* @param {Object} config Configuration options
*/
-
-Roo.form.ComboBoxArray.Item = function(config) {
- config.id = Roo.id();
- Roo.form.ComboBoxArray.Item.superclass.constructor.call(this, config);
-}
-Roo.extend(Roo.form.ComboBoxArray.Item, Roo.BoxComponent, {
- data : {},
- cb: false,
- displayField : false,
- tipField : false,
-
+Roo.htmleditor.BlockTd = function(cfg)
+{
+ if (cfg.node) {
+ this.readElement(cfg.node);
+ this.updateElement(cfg.node);
+ }
+ Roo.apply(this, cfg);
+
- defaultAutoCreate : {
- tag: 'div',
- cls: 'x-cbarray-item',
- cn : [
- { tag: 'div' },
- {
- tag: 'img',
- width:16,
- height : 16,
- src : Roo.BLANK_IMAGE_URL ,
- align: 'center'
- }
- ]
-
- },
+}
+Roo.extend(Roo.htmleditor.BlockTd, Roo.htmleditor.Block, {
- onRender : function(ct, position)
+ node : false,
+
+ width: '',
+ textAlign : 'left',
+ valign : 'top',
+
+ colspan : 1,
+ rowspan : 1,
+
+
+ // used by context menu
+ friendly_name : 'Table Cell',
+ deleteTitle : false, // use our customer delete
+
+ // context menu is drawn once..
+
+ contextMenu : function(toolbar)
{
- Roo.form.Field.superclass.onRender.call(this, ct, position);
- if(!this.el){
- var cfg = this.getAutoCreate();
- this.el = ct.createChild(cfg, position);
- }
+ var cell = function() {
+ return Roo.htmleditor.Block.factory(toolbar.tb.selectedNode);
+ };
- this.el.child('img').dom.setAttribute('src', Roo.BLANK_IMAGE_URL);
+ var table = function() {
+ return Roo.htmleditor.Block.factory(toolbar.tb.selectedNode.closest('table'));
+ };
- this.el.child('div').dom.innerHTML = this.cb.renderer ?
- this.cb.renderer(this.data) :
- String.format('{0}',this.data[this.displayField]);
+ var lr = false;
+ var saveSel = function()
+ {
+ lr = toolbar.editorcore.getSelection().getRangeAt(0);
+ }
+ var restoreSel = function()
+ {
+ if (lr) {
+ (function() {
+ toolbar.editorcore.focus();
+ var cr = toolbar.editorcore.getSelection();
+ cr.removeAllRanges();
+ cr.addRange(lr);
+ toolbar.editorcore.onEditorEvent();
+ }).defer(10, this);
+
+
+ }
+ }
-
- this.el.child('div').dom.setAttribute('qtip',
- String.format('{0}',this.data[this.tipField])
- );
+ var rooui = typeof(Roo.bootstrap) == 'undefined' ? Roo : Roo.bootstrap;
- this.el.child('img').on('click', this.remove, this);
+ var syncValue = toolbar.editorcore.syncValue;
- },
-
- remove : function()
- {
- if(this.cb.disabled){
- return;
- }
+ var fields = {};
- if(false !== this.cb.fireEvent('beforeremove', this.cb, this)){
- this.cb.items.remove(this);
- this.el.child('img').un('click', this.remove, this);
- this.el.remove();
- this.cb.updateHiddenEl();
-
- this.cb.fireEvent('remove', this.cb, this);
- }
+ return [
+ {
+ xtype : 'Button',
+ text : 'Edit Table',
+ listeners : {
+ click : function() {
+ var t = toolbar.tb.selectedNode.closest('table');
+ toolbar.editorcore.selectNode(t);
+ toolbar.editorcore.onEditorEvent();
+ }
+ }
+
+ },
+
+
+
+ {
+ xtype : 'TextItem',
+ text : "Column Width: ",
+ xns : rooui.Toolbar
+
+ },
+ {
+ xtype : 'Button',
+ text: '-',
+ listeners : {
+ click : function (_self, e)
+ {
+ toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
+ cell().shrinkColumn();
+ syncValue();
+ toolbar.editorcore.onEditorEvent();
+ }
+ },
+ xns : rooui.Toolbar
+ },
+ {
+ xtype : 'Button',
+ text: '+',
+ listeners : {
+ click : function (_self, e)
+ {
+ toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
+ cell().growColumn();
+ syncValue();
+ toolbar.editorcore.onEditorEvent();
+ }
+ },
+ xns : rooui.Toolbar
+ },
+
+ {
+ xtype : 'TextItem',
+ text : "Vertical Align: ",
+ xns : rooui.Toolbar //Boostrap?
+ },
+ {
+ xtype : 'ComboBox',
+ allowBlank : false,
+ displayField : 'val',
+ editable : true,
+ listWidth : 100,
+ triggerAction : 'all',
+ typeAhead : true,
+ valueField : 'val',
+ width : 100,
+ name : 'valign',
+ listeners : {
+ select : function (combo, r, index)
+ {
+ toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
+ var b = cell();
+ b.valign = r.get('val');
+ b.updateElement();
+ syncValue();
+ toolbar.editorcore.onEditorEvent();
+ }
+ },
+ xns : rooui.form,
+ store : {
+ xtype : 'SimpleStore',
+ data : [
+ ['top'],
+ ['middle'],
+ ['bottom'] // there are afew more...
+ ],
+ fields : [ 'val'],
+ xns : Roo.data
+ }
+ },
+
+ {
+ xtype : 'TextItem',
+ text : "Merge Cells: ",
+ xns : rooui.Toolbar
+
+ },
+
+
+ {
+ xtype : 'Button',
+ text: 'Right',
+ listeners : {
+ click : function (_self, e)
+ {
+ toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
+ cell().mergeRight();
+ //block().growColumn();
+ syncValue();
+ toolbar.editorcore.onEditorEvent();
+ }
+ },
+ xns : rooui.Toolbar
+ },
+
+ {
+ xtype : 'Button',
+ text: 'Below',
+ listeners : {
+ click : function (_self, e)
+ {
+ toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
+ cell().mergeBelow();
+ //block().growColumn();
+ syncValue();
+ toolbar.editorcore.onEditorEvent();
+ }
+ },
+ xns : rooui.Toolbar
+ },
+ {
+ xtype : 'TextItem',
+ text : "| ",
+ xns : rooui.Toolbar
+
+ },
+
+ {
+ xtype : 'Button',
+ text: 'Split',
+ listeners : {
+ click : function (_self, e)
+ {
+ //toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
+ cell().split();
+ syncValue();
+ toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
+ toolbar.editorcore.onEditorEvent();
+
+ }
+ },
+ xns : rooui.Toolbar
+ },
+ {
+ xtype : 'Fill',
+ xns : rooui.Toolbar
+
+ },
- }
-});/*
- * 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.Checkbox
- * @extends Roo.form.Field
- * Single checkbox field. Can be used as a direct replacement for traditional checkbox fields.
- * @constructor
- * Creates a new Checkbox
- * @param {Object} config Configuration options
- */
-Roo.form.Checkbox = function(config){
- Roo.form.Checkbox.superclass.constructor.call(this, config);
- this.addEvents({
- /**
- * @event check
- * Fires when the checkbox is checked or unchecked.
- * @param {Roo.form.Checkbox} this This checkbox
- * @param {Boolean} checked The new checked value
- */
- check : true
- });
-};
-
-Roo.extend(Roo.form.Checkbox, Roo.form.Field, {
- /**
- * @cfg {String} focusClass The CSS class to use when the checkbox receives focus (defaults to undefined)
- */
- focusClass : undefined,
- /**
- * @cfg {String} fieldClass The default CSS class for the checkbox (defaults to "x-form-field")
- */
- fieldClass: "x-form-field",
- /**
- * @cfg {Boolean} checked True if the the checkbox should render already checked (defaults to false)
- */
- checked: false,
- /**
- * @cfg {String/Object} autoCreate A DomHelper element spec, or true for a default element spec (defaults to
- * {tag: "input", type: "checkbox", autocomplete: "off"})
- */
- defaultAutoCreate : { tag: "input", type: 'hidden', autocomplete: "off"},
- /**
- * @cfg {String} boxLabel The text that appears beside the checkbox
- */
- boxLabel : "",
- /**
- * @cfg {String} inputValue The value that should go into the generated input element's value attribute
- */
- inputValue : '1',
- /**
- * @cfg {String} valueOff The value that should go into the generated input element's value when unchecked.
- */
- valueOff: '0', // value when not checked..
-
- actionMode : 'viewEl',
- //
- // private
- itemCls : 'x-menu-check-item x-form-item',
- groupClass : 'x-menu-group-item',
- inputType : 'hidden',
-
-
- inSetChecked: false, // check that we are not calling self...
+
+ {
+ xtype : 'Button',
+ text: 'Delete',
+
+ xns : rooui.Toolbar,
+ menu : {
+ xtype : 'Menu',
+ xns : rooui.menu,
+ items : [
+ {
+ xtype : 'Item',
+ html: 'Column',
+ listeners : {
+ click : function (_self, e)
+ {
+ var t = table();
+
+ cell().deleteColumn();
+ syncValue();
+ toolbar.editorcore.selectNode(t.node);
+ toolbar.editorcore.onEditorEvent();
+ }
+ },
+ xns : rooui.menu
+ },
+ {
+ xtype : 'Item',
+ html: 'Row',
+ listeners : {
+ click : function (_self, e)
+ {
+ var t = table();
+ cell().deleteRow();
+ syncValue();
+
+ toolbar.editorcore.selectNode(t.node);
+ toolbar.editorcore.onEditorEvent();
+
+ }
+ },
+ xns : rooui.menu
+ },
+ {
+ xtype : 'Separator',
+ xns : rooui.menu
+ },
+ {
+ xtype : 'Item',
+ html: 'Table',
+ listeners : {
+ click : function (_self, e)
+ {
+ var t = table();
+ var nn = t.node.nextSibling || t.node.previousSibling;
+ t.node.parentNode.removeChild(t.node);
+ if (nn) {
+ toolbar.editorcore.selectNode(nn, true);
+ }
+ toolbar.editorcore.onEditorEvent();
+
+ }
+ },
+ xns : rooui.menu
+ }
+ ]
+ }
+ }
+
+ // align... << fixme
+
+ ];
+
+ },
- inputElement: false, // real input element?
- basedOn: false, // ????
- isFormField: true, // not sure where this is needed!!!!
-
- onResize : function(){
- Roo.form.Checkbox.superclass.onResize.apply(this, arguments);
- if(!this.boxLabel){
- this.el.alignTo(this.wrap, 'c-c');
+ /**
+ * create a DomHelper friendly object - for use with
+ * Roo.DomHelper.markup / overwrite / etc..
+ * ?? should it be called with option to hide all editing features?
+ */
+ /**
+ * create a DomHelper friendly object - for use with
+ * Roo.DomHelper.markup / overwrite / etc..
+ * ?? should it be called with option to hide all editing features?
+ */
+ toObject : function()
+ {
+ var ret = {
+ tag : 'td',
+ contenteditable : 'true', // this stops cell selection from picking the table.
+ 'data-block' : 'Td',
+ valign : this.valign,
+ style : {
+ 'text-align' : this.textAlign,
+ border : 'solid 1px rgb(0, 0, 0)', // ??? hard coded?
+ 'border-collapse' : 'collapse',
+ padding : '6px', // 8 for desktop / 4 for mobile
+ 'vertical-align': this.valign
+ },
+ html : this.html
+ };
+ if (this.width != '') {
+ ret.width = this.width;
+ ret.style.width = this.width;
+ }
+
+
+ if (this.colspan > 1) {
+ ret.colspan = this.colspan ;
+ }
+ if (this.rowspan > 1) {
+ ret.rowspan = this.rowspan ;
}
+
+
+
+ return ret;
+
},
-
- initEvents : function(){
- Roo.form.Checkbox.superclass.initEvents.call(this);
- this.el.on("click", this.onClick, this);
- this.el.on("change", this.onClick, this);
+
+ readElement : function(node)
+ {
+ node = node ? node : this.node ;
+ this.width = node.style.width;
+ this.colspan = Math.max(1,1*node.getAttribute('colspan'));
+ this.rowspan = Math.max(1,1*node.getAttribute('rowspan'));
+ this.html = node.innerHTML;
+
+
},
-
-
- getResizeEl : function(){
- return this.wrap;
+
+ // the default cell object... at present...
+ emptyCell : function() {
+ return {
+ colspan : 1,
+ rowspan : 1,
+ textAlign : 'left',
+ html : " " // is this going to be editable now?
+ };
+
},
-
- getPositionEl : function(){
- return this.wrap;
+
+ removeNode : function()
+ {
+ return this.node.closest('table');
+
},
-
- // private
- onRender : function(ct, position){
- Roo.form.Checkbox.superclass.onRender.call(this, ct, position);
- /*
- if(this.inputValue !== undefined){
- this.el.dom.value = this.inputValue;
+
+ cellData : false,
+
+ colWidths : false,
+
+ toTableArray : function()
+ {
+ var ret = [];
+ var tab = this.node.closest('tr').closest('table');
+ Array.from(tab.rows).forEach(function(r, ri){
+ ret[ri] = [];
+ });
+ var rn = 0;
+ this.colWidths = [];
+ var all_auto = true;
+ Array.from(tab.rows).forEach(function(r, ri){
+
+ var cn = 0;
+ Array.from(r.cells).forEach(function(ce, ci){
+ var c = {
+ cell : ce,
+ row : rn,
+ col: cn,
+ colspan : ce.colSpan,
+ rowspan : ce.rowSpan
+ };
+ if (ce.isEqualNode(this.node)) {
+ this.cellData = c;
+ }
+ // if we have been filled up by a row?
+ if (typeof(ret[rn][cn]) != 'undefined') {
+ while(typeof(ret[rn][cn]) != 'undefined') {
+ cn++;
+ }
+ c.col = cn;
+ }
+
+ if (typeof(this.colWidths[cn]) == 'undefined' && c.colspan < 2) {
+ this.colWidths[cn] = ce.style.width;
+ if (this.colWidths[cn] != '') {
+ all_auto = false;
+ }
+ }
+
+
+ if (c.colspan < 2 && c.rowspan < 2 ) {
+ ret[rn][cn] = c;
+ cn++;
+ return;
+ }
+ for(var j = 0; j < c.rowspan; j++) {
+ if (typeof(ret[rn+j]) == 'undefined') {
+ continue; // we have a problem..
+ }
+ ret[rn+j][cn] = c;
+ for(var i = 0; i < c.colspan; i++) {
+ ret[rn+j][cn+i] = c;
+ }
+ }
+
+ cn += c.colspan;
+ }, this);
+ rn++;
+ }, this);
+
+ // initalize widths.?
+ // either all widths or no widths..
+ if (all_auto) {
+ this.colWidths[0] = false; // no widths flag.
}
- */
- //this.wrap = this.el.wrap({cls: "x-form-check-wrap"});
- this.wrap = this.el.wrap({cls: 'x-menu-check-item '});
- var viewEl = this.wrap.createChild({
- tag: 'img', cls: 'x-menu-item-icon', style: 'margin: 0px;' ,src : Roo.BLANK_IMAGE_URL });
- this.viewEl = viewEl;
- this.wrap.on('click', this.onClick, this);
- this.el.on('DOMAttrModified', this.setFromHidden, this); //ff
- this.el.on('propertychange', this.setFromHidden, this); //ie
+ return ret;
+ },
+
+
+
+
+ mergeRight: function()
+ {
+
+ // get the contents of the next cell along..
+ var tr = this.node.closest('tr');
+ var i = Array.prototype.indexOf.call(tr.childNodes, this.node);
+ if (i >= tr.childNodes.length - 1) {
+ return; // no cells on right to merge with.
+ }
+ var table = this.toTableArray();
- if(this.boxLabel){
- this.wrap.createChild({tag: 'label', htmlFor: this.el.id, cls: 'x-form-cb-label', html: this.boxLabel});
- // viewEl.on('click', this.onClick, this);
+ if (typeof(table[this.cellData.row][this.cellData.col+this.cellData.colspan]) == 'undefined') {
+ return; // nothing right?
}
- //if(this.checked){
- this.setChecked(this.checked);
- //}else{
- //this.checked = this.el.dom;
- //}
+ var rc = table[this.cellData.row][this.cellData.col+this.cellData.colspan];
+ // right cell - must be same rowspan and on the same row.
+ if (rc.rowspan != this.cellData.rowspan || rc.row != this.cellData.row) {
+ return; // right hand side is not same rowspan.
+ }
+
+
+
+ this.node.innerHTML += ' ' + rc.cell.innerHTML;
+ tr.removeChild(rc.cell);
+ this.colspan += rc.colspan;
+ this.node.setAttribute('colspan', this.colspan);
+ var table = this.toTableArray();
+ this.normalizeWidths(table);
+ this.updateWidths(table);
},
-
- // private
- initValue : Roo.emptyFn,
-
- /**
- * Returns the checked state of the checkbox.
- * @return {Boolean} True if checked, else false
- */
- getValue : function(){
- if(this.el){
- return String(this.el.dom.value) == String(this.inputValue ) ? this.inputValue : this.valueOff;
+
+
+ mergeBelow : function()
+ {
+ var table = this.toTableArray();
+ if (typeof(table[this.cellData.row+this.cellData.rowspan]) == 'undefined') {
+ return; // no row below
}
- return this.valueOff;
+ if (typeof(table[this.cellData.row+this.cellData.rowspan][this.cellData.col]) == 'undefined') {
+ return; // nothing right?
+ }
+ var rc = table[this.cellData.row+this.cellData.rowspan][this.cellData.col];
+ if (rc.colspan != this.cellData.colspan || rc.col != this.cellData.col) {
+ return; // right hand side is not same rowspan.
+ }
+ this.node.innerHTML = this.node.innerHTML + rc.cell.innerHTML ;
+ rc.cell.parentNode.removeChild(rc.cell);
+ this.rowspan += rc.rowspan;
+ this.node.setAttribute('rowspan', this.rowspan);
},
-
- // private
- onClick : function(){
- if (this.disabled) {
+
+ split: function()
+ {
+ if (this.node.rowSpan < 2 && this.node.colSpan < 2) {
return;
}
- this.setChecked(!this.checked);
-
- //if(this.el.dom.checked != this.checked){
- // this.setValue(this.el.dom.checked);
- // }
+ var table = this.toTableArray();
+ var cd = this.cellData;
+ this.rowspan = 1;
+ this.colspan = 1;
+
+ for(var r = cd.row; r < cd.row + cd.rowspan; r++) {
+
+
+ for(var c = cd.col; c < cd.col + cd.colspan; c++) {
+ if (r == cd.row && c == cd.col) {
+ this.node.removeAttribute('rowspan');
+ this.node.removeAttribute('colspan');
+ }
+
+ var ntd = this.node.cloneNode(); // which col/row should be 0..
+ ntd.removeAttribute('id');
+ ntd.style.width = this.colWidths[c];
+ ntd.innerHTML = '';
+ table[r][c] = { cell : ntd, col : c, row: r , colspan : 1 , rowspan : 1 };
+ }
+
+ }
+ this.redrawAllCells(table);
+
},
-
- /**
- * Sets the checked state of the checkbox.
- * On is always based on a string comparison between inputValue and the param.
- * @param {Boolean/String} value - the value to set
- * @param {Boolean/String} suppressEvent - whether to suppress the checkchange event.
- */
- setValue : function(v,suppressEvent){
+
+
+
+ redrawAllCells: function(table)
+ {
+
+ var tab = this.node.closest('tr').closest('table');
+ var ctr = tab.rows[0].parentNode;
+ Array.from(tab.rows).forEach(function(r, ri){
+
+ Array.from(r.cells).forEach(function(ce, ci){
+ ce.parentNode.removeChild(ce);
+ });
+ r.parentNode.removeChild(r);
+ });
+ for(var r = 0 ; r < table.length; r++) {
+ var re = tab.rows[r];
+
+ var re = tab.ownerDocument.createElement('tr');
+ ctr.appendChild(re);
+ for(var c = 0 ; c < table[r].length; c++) {
+ if (table[r][c].cell === false) {
+ continue;
+ }
+
+ re.appendChild(table[r][c].cell);
+
+ table[r][c].cell = false;
+ }
+ }
- //this.checked = (v === true || v === 'true' || v == '1' || String(v).toLowerCase() == 'on');
- //if(this.el && this.el.dom){
- // this.el.dom.checked = this.checked;
- // this.el.dom.defaultChecked = this.checked;
- //}
- this.setChecked(String(v) === String(this.inputValue), suppressEvent);
- //this.fireEvent("check", this, this.checked);
},
- // private..
- setChecked : function(state,suppressEvent)
+ updateWidths : function(table)
{
- if (this.inSetChecked) {
- this.checked = state;
+ for(var r = 0 ; r < table.length; r++) {
+
+ for(var c = 0 ; c < table[r].length; c++) {
+ if (table[r][c].cell === false) {
+ continue;
+ }
+
+ if (this.colWidths[0] != false && table[r][c].colspan < 2) {
+ var el = Roo.htmleditor.Block.factory(table[r][c].cell);
+ el.width = Math.floor(this.colWidths[c]) +'%';
+ el.updateElement(el.node);
+ }
+ if (this.colWidths[0] != false && table[r][c].colspan > 1) {
+ var el = Roo.htmleditor.Block.factory(table[r][c].cell);
+ var width = 0;
+ for(var i = 0; i < table[r][c].colspan; i ++) {
+ width += Math.floor(this.colWidths[c + i]);
+ }
+ el.width = width +'%';
+ el.updateElement(el.node);
+ }
+ table[r][c].cell = false; // done
+ }
+ }
+ },
+ normalizeWidths : function(table)
+ {
+ if (this.colWidths[0] === false) {
+ var nw = 100.0 / this.colWidths.length;
+ this.colWidths.forEach(function(w,i) {
+ this.colWidths[i] = nw;
+ },this);
return;
}
-
- if(this.wrap){
- this.wrap[state ? 'addClass' : 'removeClass']('x-menu-item-checked');
- }
- this.checked = state;
- if(suppressEvent !== true){
- this.fireEvent('check', this, state);
+ var t = 0, missing = [];
+
+ this.colWidths.forEach(function(w,i) {
+ //if you mix % and
+ this.colWidths[i] = this.colWidths[i] == '' ? 0 : (this.colWidths[i]+'').replace(/[^0-9]+/g,'')*1;
+ var add = this.colWidths[i];
+ if (add > 0) {
+ t+=add;
+ return;
+ }
+ missing.push(i);
+
+
+ },this);
+ var nc = this.colWidths.length;
+ if (missing.length) {
+ var mult = (nc - missing.length) / (1.0 * nc);
+ var t = mult * t;
+ var ew = (100 -t) / (1.0 * missing.length);
+ this.colWidths.forEach(function(w,i) {
+ if (w > 0) {
+ this.colWidths[i] = w * mult;
+ return;
+ }
+
+ this.colWidths[i] = ew;
+ }, this);
+ // have to make up numbers..
+
}
- this.inSetChecked = true;
- this.el.dom.value = state ? this.inputValue : this.valueOff;
- this.inSetChecked = false;
+ // now we should have all the widths..
+
},
- // handle setting of hidden value by some other method!!?!?
- setFromHidden: function()
+
+ shrinkColumn : function()
{
- if(!this.el){
+ var table = this.toTableArray();
+ this.normalizeWidths(table);
+ var col = this.cellData.col;
+ var nw = this.colWidths[col] * 0.8;
+ if (nw < 5) {
return;
}
- //console.log("SET FROM HIDDEN");
- //alert('setFrom hidden');
- this.setValue(this.el.dom.value);
+ var otherAdd = (this.colWidths[col] * 0.2) / (this.colWidths.length -1);
+ this.colWidths.forEach(function(w,i) {
+ if (i == col) {
+ this.colWidths[i] = nw;
+ return;
+ }
+ this.colWidths[i] += otherAdd
+ }, this);
+ this.updateWidths(table);
+
},
-
- onDestroy : function()
+ growColumn : function()
{
- if(this.viewEl){
- Roo.get(this.viewEl).remove();
+ var table = this.toTableArray();
+ this.normalizeWidths(table);
+ var col = this.cellData.col;
+ var nw = this.colWidths[col] * 1.2;
+ if (nw > 90) {
+ return;
}
+ var otherSub = (this.colWidths[col] * 0.2) / (this.colWidths.length -1);
+ this.colWidths.forEach(function(w,i) {
+ if (i == col) {
+ this.colWidths[i] = nw;
+ return;
+ }
+ this.colWidths[i] -= otherSub
+ }, this);
+ this.updateWidths(table);
- Roo.form.Checkbox.superclass.onDestroy.call(this);
},
-
- setBoxLabel : function(str)
+ deleteRow : function()
{
- this.wrap.select('.x-form-cb-label', true).first().dom.innerHTML = str;
- }
-
-});/*
- * 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.Radio
- * @extends Roo.form.Checkbox
- * Single radio field. Same as Checkbox, but provided as a convenience for automatically setting the input type.
- * Radio grouping is handled automatically by the browser if you give each radio in a group the same name.
- * @constructor
- * Creates a new Radio
- * @param {Object} config Configuration options
- */
-Roo.form.Radio = function(){
- Roo.form.Radio.superclass.constructor.apply(this, arguments);
-};
-Roo.extend(Roo.form.Radio, Roo.form.Checkbox, {
- inputType: 'radio',
-
- /**
- * If this radio is part of a group, it will return the selected value
- * @return {String}
- */
- getGroupValue : function(){
- return this.el.up('form').child('input[name='+this.el.dom.name+']:checked', true).value;
- },
-
-
- onRender : function(ct, position){
- Roo.form.Checkbox.superclass.onRender.call(this, ct, position);
-
- if(this.inputValue !== undefined){
- this.el.dom.value = this.inputValue;
+ // delete this rows 'tr'
+ // if any of the cells in this row have a rowspan > 1 && row!= this row..
+ // then reduce the rowspan.
+ var table = this.toTableArray();
+ // this.cellData.row;
+ for (var i =0;i< table[this.cellData.row].length ; i++) {
+ var c = table[this.cellData.row][i];
+ if (c.row != this.cellData.row) {
+
+ c.rowspan--;
+ c.cell.setAttribute('rowspan', c.rowspan);
+ continue;
+ }
+ if (c.rowspan > 1) {
+ c.rowspan--;
+ c.cell.setAttribute('rowspan', c.rowspan);
+ }
}
-
- this.wrap = this.el.wrap({cls: "x-form-check-wrap"});
- //this.wrap = this.el.wrap({cls: 'x-menu-check-item '});
- //var viewEl = this.wrap.createChild({
- // tag: 'img', cls: 'x-menu-item-icon', style: 'margin: 0px;' ,src : Roo.BLANK_IMAGE_URL });
- //this.viewEl = viewEl;
- //this.wrap.on('click', this.onClick, this);
-
- //this.el.on('DOMAttrModified', this.setFromHidden, this); //ff
- //this.el.on('propertychange', this.setFromHidden, this); //ie
-
+ table.splice(this.cellData.row,1);
+ this.redrawAllCells(table);
+ },
+ deleteColumn : function()
+ {
+ var table = this.toTableArray();
- if(this.boxLabel){
- this.wrap.createChild({tag: 'label', htmlFor: this.el.id, cls: 'x-form-cb-label', html: this.boxLabel});
- // viewEl.on('click', this.onClick, this);
- }
- if(this.checked){
- this.el.dom.checked = 'checked' ;
+ for (var i =0;i< table.length ; i++) {
+ var c = table[i][this.cellData.col];
+ if (c.col != this.cellData.col) {
+ table[i][this.cellData.col].colspan--;
+ } else if (c.colspan > 1) {
+ c.colspan--;
+ c.cell.setAttribute('colspan', c.colspan);
+ }
+ table[i].splice(this.cellData.col,1);
}
-
- }
+
+ this.redrawAllCells(table);
+ }
+
-});//<script type="text/javascript">
+
+})
+
+//<script type="text/javascript">
/*
* Based Ext JS Library 1.1.1
* Fires when on any editor (mouse up/down cursor movement etc.) - used for toolbar hooks.
* @param {Roo.HtmlEditorCore} this
*/
- editorevent: true
+ editorevent: true
+
});
* @cfg {Number} width (in pixels)
*/
width: 500,
+ /**
+ * @cfg {boolean} autoClean - default true - loading and saving will remove quite a bit of formating,
+ * if you are doing an email editor, this probably needs disabling, it's designed
+ */
+ autoClean: true,
+ /**
+ * @cfg {boolean} enableBlocks - default true - if the block editor (table and figure should be enabled)
+ */
+ enableBlocks : true,
/**
* @cfg {Array} stylesheets url of stylesheets. set to [] to disable stylesheets.
*
*/
stylesheets: false,
+ /**
+ * @cfg {String} language default en - language of text (usefull for rtl languages)
+ *
+ */
+ language: 'en',
+ /**
+ * @cfg {boolean} allowComments - default false - allow comments in HTML source
+ * - by default they are stripped - if you are editing email you may need this.
+ */
+ allowComments: false,
// id of frame..
frameId: false,
black: false,
white: false,
-
+ bodyCls : '',
+
+ undoManager : false,
/**
* Protected method that will not generally be called directly. It
* is called when the editor initializes the iframe with HTML contents. Override this method if you
st = '<style type="text/css">' +
'body{border:0;margin:0;padding:3px;height:98%;cursor:text;}' +
'</style>';
- } else {
+ } else {
+ for (var i in this.stylesheets) {
+ if (typeof(this.stylesheets[i]) != 'string') {
+ continue;
+ }
+ st += '<link rel="stylesheet" href="' + this.stylesheets[i] +'" type="text/css">';
+ }
}
st += '<style type="text/css">' +
'IMG { cursor: pointer } ' +
'</style>';
-
- return '<html><head>' + st +
+ st += '<meta name="google" content="notranslate">';
+
+ var cls = 'notranslate roo-htmleditor-body';
+
+ if(this.bodyCls.length){
+ cls += ' ' + this.bodyCls;
+ }
+
+ return '<html class="notranslate" translate="no"><head>' + st +
//<style type="text/css">' +
//'body{border:0;margin:0;padding:3px;height:98%;cursor:text;}' +
//'</style>' +
- ' </head><body class="roo-htmleditor-body"></body></html>';
+ ' </head><body contenteditable="true" data-enable-grammerly="true" class="' + cls + '"></body></html>';
},
// private
this.iframe = iframe.dom;
- this.assignDocWin();
+ this.assignDocWin();
this.doc.designMode = 'on';
if(this.doc.body || this.doc.readyState == 'complete'){
try {
this.doc.designMode="on";
+
} catch (e) {
return;
}
if(this.sourceEditMode){
- Roo.get(this.iframe).addClass(['x-hidden','hide']); //FIXME - what's the BS styles for these
+ Roo.get(this.iframe).addClass(['x-hidden','hide', 'd-none']); //FIXME - what's the BS styles for these
}else{
- Roo.get(this.iframe).removeClass(['x-hidden','hide']);
+ Roo.get(this.iframe).removeClass(['x-hidden','hide', 'd-none']);
//this.iframe.className = '';
this.deferFocus();
}
* @param {String} html The HTML to be cleaned
* return {String} The cleaned HTML
*/
- cleanHtml : function(html){
+ cleanHtml : function(html)
+ {
html = String(html);
if(html.length > 5){
if(Roo.isSafari){ // strip safari nonsense
* Protected method that will not generally be called directly. Syncs the contents
* of the editor iframe with the textarea.
*/
- syncValue : function(){
+ syncValue : function()
+ {
+ //Roo.log("HtmlEditorCore:syncValue (EDITOR->TEXT)");
if(this.initialized){
+
+ if (this.undoManager) {
+ this.undoManager.addEvent();
+ }
+
+
var bd = (this.doc.body || this.doc.documentElement);
- //this.cleanUpPaste(); -- this is done else where and causes havoc..
- var html = bd.innerHTML;
+
+
+ var sel = this.win.getSelection();
+
+ var div = document.createElement('div');
+ div.innerHTML = bd.innerHTML;
+ var gtx = div.getElementsByClassName('gtx-trans-icon'); // google translate - really annoying and difficult to get rid of.
+ if (gtx.length > 0) {
+ var rm = gtx.item(0).parentNode;
+ rm.parentNode.removeChild(rm);
+ }
+
+
+ if (this.enableBlocks) {
+ new Roo.htmleditor.FilterBlock({ node : div });
+ }
+ //?? tidy?
+ var tidy = new Roo.htmleditor.TidySerializer({
+ inner: true
+ });
+ var html = tidy.serialize(div);
+
+
if(Roo.isSafari){
var bs = bd.getAttribute('style'); // Safari puts text-align styles on the body element!
var m = bs ? bs.match(/text-align:(.*?);/i) : false;
html = this.cleanHtml(html);
// fix up the special chars.. normaly like back quotes in word...
// however we do not want to do this with chinese..
- html = html.replace(/([\x80-\uffff])/g, function (a, b) {
- var cc = b.charCodeAt();
- if (
+ html = html.replace(/[\uD800-\uDBFF][\uDC00-\uDFFF]|[\u0080-\uFFFF]/g, function(match) {
+
+ var cc = match.charCodeAt();
+
+ // Get the character value, handling surrogate pairs
+ if (match.length == 2) {
+ // It's a surrogate pair, calculate the Unicode code point
+ var high = match.charCodeAt(0) - 0xD800;
+ var low = match.charCodeAt(1) - 0xDC00;
+ cc = (high * 0x400) + low + 0x10000;
+ } else if (
(cc >= 0x4E00 && cc < 0xA000 ) ||
(cc >= 0x3400 && cc < 0x4E00 ) ||
(cc >= 0xf900 && cc < 0xfb00 )
) {
- return b;
- }
- return "&#"+cc+";"
+ return match;
+ }
+
+ // No, use a numeric entity. Here we brazenly (and possibly mistakenly)
+ return "&#" + cc + ";";
+
+
});
+
+
+
if(this.owner.fireEvent('beforesync', this, html) !== false){
this.el.dom.value = html;
this.owner.fireEvent('sync', this, html);
},
/**
+ * TEXTAREA -> EDITABLE
* Protected method that will not generally be called directly. Pushes the value of the textarea
* into the iframe editor.
*/
- pushValue : function(){
+ pushValue : function()
+ {
+ //Roo.log("HtmlEditorCore:pushValue (TEXT->EDITOR)");
if(this.initialized){
var v = this.el.dom.value.trim();
-// if(v.length < 1){
-// v = ' ';
-// }
if(this.owner.fireEvent('beforepush', this, v) !== false){
var d = (this.doc.body || this.doc.documentElement);
d.innerHTML = v;
- this.cleanUpPaste();
+
this.el.dom.value = d.innerHTML;
this.owner.fireEvent('push', this, v);
}
+ if (this.autoClean) {
+ new Roo.htmleditor.FilterParagraph({node : this.doc.body}); // paragraphs
+ new Roo.htmleditor.FilterSpan({node : this.doc.body}); // empty spans
+ }
+ if (this.enableBlocks) {
+ Roo.htmleditor.Block.initAll(this.doc.body);
+ }
+
+ this.updateLanguage();
+
+ var lc = this.doc.body.lastChild;
+ if (lc && lc.nodeType == 1 && lc.getAttribute("contenteditable") == "false") {
+ // add an extra line at the end.
+ this.doc.body.appendChild(this.doc.createElement('br'));
+ }
+
+
}
},
//var ss = this.el.getStyles( 'background-image', 'background-repeat');
//ss['background-attachment'] = 'fixed'; // w3c
dbody.bgProperties = 'fixed'; // ie
+ dbody.setAttribute("translate", "no");
+
//Roo.DomHelper.applyStyles(dbody, ss);
Roo.EventManager.on(this.doc, {
- //'mousedown': this.onEditorEvent,
+
'mouseup': this.onEditorEvent,
'dblclick': this.onEditorEvent,
'click': this.onEditorEvent,
'keyup': this.onEditorEvent,
+
buffer:100,
scope: this
});
+ Roo.EventManager.on(this.doc, {
+ 'paste': this.onPasteEvent,
+ scope : this
+ });
if(Roo.isGecko){
Roo.EventManager.on(this.doc, 'keypress', this.mozKeyPress, this);
}
+ //??? needed???
if(Roo.isIE || Roo.isSafari || Roo.isOpera){
Roo.EventManager.on(this.doc, 'keydown', this.fixKeys, this);
}
this.initialized = true;
+
+ // initialize special key events - enter
+ new Roo.htmleditor.KeyEnter({core : this});
+
+
+
this.owner.fireEvent('initialize', this);
this.pushValue();
},
-
+ // this is to prevent a href clicks resulting in a redirect?
+
+ onPasteEvent : function(e,v)
+ {
+ // I think we better assume paste is going to be a dirty load of rubish from word..
+
+ // even pasting into a 'email version' of this widget will have to clean up that mess.
+ var cd = (e.browserEvent.clipboardData || window.clipboardData);
+
+ // check what type of paste - if it's an image, then handle it differently.
+ if (cd.files && cd.files.length > 0) {
+ // pasting images?
+ var urlAPI = (window.createObjectURL && window) ||
+ (window.URL && URL.revokeObjectURL && URL) ||
+ (window.webkitURL && webkitURL);
+
+ var url = urlAPI.createObjectURL( cd.files[0]);
+ this.insertAtCursor('<img src=" + url + ">');
+ return false;
+ }
+ if (cd.types.indexOf('text/html') < 0 ) {
+ return false;
+ }
+ var images = [];
+ var html = cd.getData('text/html'); // clipboard event
+ if (cd.types.indexOf('text/rtf') > -1) {
+ var parser = new Roo.rtf.Parser(cd.getData('text/rtf'));
+ images = parser.doc ? parser.doc.getElementsByType('pict') : [];
+ }
+ //Roo.log(images);
+ //Roo.log(imgs);
+ // fixme..
+ images = images.filter(function(g) { return !g.path.match(/^rtf\/(head|pgdsctbl|listtable|footerf)/); }) // ignore headers/footers etc.
+ .map(function(g) { return g.toDataURL(); })
+ .filter(function(g) { return g != 'about:blank'; });
+
+
+ html = this.cleanWordChars(html);
+
+ var d = (new DOMParser().parseFromString(html, 'text/html')).body;
+
+
+ var sn = this.getParentElement();
+ // check if d contains a table, and prevent nesting??
+ //Roo.log(d.getElementsByTagName('table'));
+ //Roo.log(sn);
+ //Roo.log(sn.closest('table'));
+ if (d.getElementsByTagName('table').length && sn && sn.closest('table')) {
+ e.preventDefault();
+ this.insertAtCursor("You can not nest tables");
+ //Roo.log("prevent?"); // fixme -
+ return false;
+ }
+
+ if (images.length > 0) {
+ Roo.each(d.getElementsByTagName('img'), function(img, i) {
+ img.setAttribute('src', images[i]);
+ });
+ }
+ if (this.autoClean) {
+ new Roo.htmleditor.FilterWord({ node : d });
+
+ new Roo.htmleditor.FilterStyleToTag({ node : d });
+ new Roo.htmleditor.FilterAttributes({
+ node : d,
+ attrib_white : ['href', 'src', 'name', 'align', 'colspan', 'rowspan', 'data-display', 'data-width'],
+ attrib_clean : ['href', 'src' ]
+ });
+ new Roo.htmleditor.FilterBlack({ node : d, tag : this.black});
+ // should be fonts..
+ new Roo.htmleditor.FilterKeepChildren({node : d, tag : [ 'FONT', ':' ]} );
+ new Roo.htmleditor.FilterParagraph({ node : d });
+ new Roo.htmleditor.FilterSpan({ node : d });
+ new Roo.htmleditor.FilterLongBr({ node : d });
+ new Roo.htmleditor.FilterComment({ node : d });
+
+
+ }
+ if (this.enableBlocks) {
+
+ Array.from(d.getElementsByTagName('img')).forEach(function(img) {
+ if (img.closest('figure')) { // assume!! that it's aready
+ return;
+ }
+ var fig = new Roo.htmleditor.BlockFigure({
+ image_src : img.src
+ });
+ fig.updateElement(img); // replace it..
+
+ });
+ }
+
+
+ this.insertAtCursor(d.innerHTML.replace(/ /g,' '));
+ if (this.enableBlocks) {
+ Roo.htmleditor.Block.initAll(this.doc.body);
+ }
+
+
+ e.preventDefault();
+ return false;
+ // default behaveiour should be our local cleanup paste? (optional?)
+ // for simple editor - we want to hammer the paste and get rid of everything... - so over-rideable..
+ //this.owner.fireEvent('paste', e, v);
+ },
// private
onDestroy : function(){
onFirstFocus : function(){
this.assignDocWin();
-
+ this.undoManager = new Roo.lib.UndoManager(100,(this.doc.body || this.doc.documentElement));
this.activated = true;
onEditorEvent : function(e)
{
- this.owner.fireEvent('editorevent', this, e);
+
+
+ if (e && (e.ctrlKey || e.metaKey) && e.keyCode === 90) {
+ return; // we do not handle this.. (undo manager does..)
+ }
+ // in theory this detects if the last element is not a br, then we try and do that.
+ // its so clicking in space at bottom triggers adding a br and moving the cursor.
+ if (e &&
+ e.target.nodeName == 'BODY' &&
+ e.type == "mouseup" &&
+ this.doc.body.lastChild
+ ) {
+ var lc = this.doc.body.lastChild;
+ // gtx-trans is google translate plugin adding crap.
+ while ((lc.nodeType == 3 && lc.nodeValue == '') || lc.id == 'gtx-trans') {
+ lc = lc.previousSibling;
+ }
+ if (lc.nodeType == 1 && lc.nodeName != 'BR') {
+ // if last element is <BR> - then dont do anything.
+
+ var ns = this.doc.createElement('br');
+ this.doc.body.appendChild(ns);
+ range = this.doc.createRange();
+ range.setStartAfter(ns);
+ range.collapse(true);
+ var sel = this.win.getSelection();
+ sel.removeAllRanges();
+ sel.addRange(range);
+ }
+ }
+
+
+
+ this.fireEditorEvent(e);
// this.updateToolbar();
this.syncValue(); //we can not sync so often.. sync cleans, so this breaks stuff
},
+
+ fireEditorEvent: function(e)
+ {
+ this.owner.fireEvent('editorevent', this, e);
+ },
insertTag : function(tg)
{
// could be a bit smarter... -> wrap the current selected tRoo..
- if (tg.toLowerCase() == 'span' || tg.toLowerCase() == 'code') {
+ if (tg.toLowerCase() == 'span' ||
+ tg.toLowerCase() == 'code' ||
+ tg.toLowerCase() == 'sup' ||
+ tg.toLowerCase() == 'sub'
+ ) {
range = this.createRange(this.getSelection());
var wrappingNode = this.doc.createElement(tg.toLowerCase());
}
this.execCmd("formatblock", tg);
-
+ this.undoManager.addEvent();
},
insertText : function(txt)
//alert(Sender.getAttribute('label'));
range.insertNode(this.doc.createTextNode(txt));
+ this.undoManager.addEvent();
} ,
* @param {String} cmd The Midas command
* @param {String/Boolean} value (optional) The value to pass to the command (defaults to null)
*/
- relayCmd : function(cmd, value){
+ relayCmd : function(cmd, value)
+ {
+
+ switch (cmd) {
+ case 'justifyleft':
+ case 'justifyright':
+ case 'justifycenter':
+ // if we are in a cell, then we will adjust the
+ var n = this.getParentElement();
+ var td = n.closest('td');
+ if (td) {
+ var bl = Roo.htmleditor.Block.factory(td);
+ bl.textAlign = cmd.replace('justify','');
+ bl.updateElement();
+ this.owner.fireEvent('editorevent', this);
+ return;
+ }
+ this.execCmd('styleWithCSS', true); //
+ break;
+ case 'bold':
+ case 'italic':
+ // if there is no selection, then we insert, and set the curson inside it..
+ this.execCmd('styleWithCSS', false);
+ break;
+
+
+ default:
+ break;
+ }
+
+
this.win.focus();
this.execCmd(cmd, value);
this.owner.fireEvent('editorevent', this);
insertAtCursor : function(text)
{
-
-
if(!this.activated){
return;
}
- /*
- if(Roo.isIE){
- this.win.focus();
- var r = this.doc.selection.createRange();
- if(r){
- r.collapse(true);
- r.pasteHTML(text);
- this.syncValue();
- this.deferFocus();
-
- }
- return;
- }
- */
+
if(Roo.isGecko || Roo.isOpera || Roo.isSafari){
this.win.focus();
var win = this.win;
if (win.getSelection && win.getSelection().getRangeAt) {
+
+ // delete the existing?
+
+ this.createRange(this.getSelection()).deleteContents();
range = win.getSelection().getRangeAt(0);
node = typeof(text) == 'string' ? range.createContextualFragment(text) : text;
range.insertNode(node);
+ range = range.cloneRange();
+ range.collapse(false);
+
+ win.getSelection().removeAllRanges();
+ win.getSelection().addRange(range);
+
+
+
} else if (win.document.selection && win.document.selection.createRange) {
// no firefox support
var txt = typeof(text) == 'string' ? text : text.outerHTML;
win.document.selection.createRange().pasteHTML(txt);
+
} else {
// no firefox support
var txt = typeof(text) == 'string' ? text : text.outerHTML;
this.execCmd('InsertHTML', txt);
}
-
this.syncValue();
this.deferFocus();
cmd = 'underline';
break;
- case 'v':
- this.cleanUpPaste.defer(100, this);
- return;
+ //case 'v':
+ // this.cleanUpPaste.defer(100, this);
+ // return;
}
if(cmd){
- this.win.focus();
- this.execCmd(cmd);
- this.deferFocus();
+
+ this.relayCmd(cmd);
+ //this.win.focus();
+ //this.execCmd(cmd);
+ //this.deferFocus();
e.preventDefault();
}
// private
fixKeys : function(){ // load time branching for fastest keydown performance
+
+
if(Roo.isIE){
return function(e){
var k = e.getKey(), r;
}
return;
}
-
+ /// this is handled by Roo.htmleditor.KeyEnter
+ /*
if(k == e.ENTER){
r = this.doc.selection.createRange();
if(r){
var target = r.parentElement();
if(!target || target.tagName.toLowerCase() != 'li'){
e.stopEvent();
- r.pasteHTML('<br />');
+ r.pasteHTML('<br/>');
r.collapse(false);
r.select();
}
}
}
- if (String.fromCharCode(k).toLowerCase() == 'v') { // paste
- this.cleanUpPaste.defer(100, this);
- return;
- }
+ */
+ //if (String.fromCharCode(k).toLowerCase() == 'v') { // paste
+ // this.cleanUpPaste.defer(100, this);
+ // return;
+ //}
};
this.execCmd('InsertHTML','    ');
this.deferFocus();
}
- if (String.fromCharCode(k).toLowerCase() == 'v') { // paste
- this.cleanUpPaste.defer(100, this);
- return;
- }
+
+ //if (String.fromCharCode(k).toLowerCase() == 'v') { // paste
+ // this.cleanUpPaste.defer(100, this);
+ // return;
+ //}
};
}else if(Roo.isSafari){
this.deferFocus();
return;
}
- if (String.fromCharCode(k).toLowerCase() == 'v') { // paste
- this.cleanUpPaste.defer(100, this);
- return;
- }
+ this.mozKeyPress(e);
+
+ //if (String.fromCharCode(k).toLowerCase() == 'v') { // paste
+ // this.cleanUpPaste.defer(100, this);
+ // return;
+ // }
};
}
getSelection : function()
{
this.assignDocWin();
- return Roo.isIE ? this.doc.selection : this.win.getSelection();
+ return Roo.lib.Selection.wrap(Roo.isIE ? this.doc.selection : this.win.getSelection(), this.doc);
+ },
+ /**
+ * Select a dom node
+ * @param {DomElement} node the node to select
+ */
+ selectNode : function(node, collapse)
+ {
+ var nodeRange = node.ownerDocument.createRange();
+ try {
+ nodeRange.selectNode(node);
+ } catch (e) {
+ nodeRange.selectNodeContents(node);
+ }
+ if (collapse === true) {
+ nodeRange.collapse(true);
+ }
+ //
+ var s = this.win.getSelection();
+ s.removeAllRanges();
+ s.addRange(nodeRange);
},
getSelectedNode: function()
// should we cache this!!!!
-
-
+
var range = this.createRange(this.getSelection()).cloneRange();
return nodes[0];
},
+
+
createRange: function(sel)
{
// this has strange effects when using with
// fully contined.
return 3;
},
-
- // private? - in a new class?
- cleanUpPaste : function()
- {
- // cleans up the whole document..
- Roo.log('cleanuppaste');
-
- this.cleanUpChildren(this.doc.body);
- var clean = this.cleanWordChars(this.doc.body.innerHTML);
- if (clean != this.doc.body.innerHTML) {
- this.doc.body.innerHTML = clean;
- }
-
- },
-
+
cleanWordChars : function(input) {// change the chars to hex code
- var he = Roo.HtmlEditorCore;
+ var swapCodes = [
+ [ 8211, "–" ],
+ [ 8212, "—" ],
+ [ 8216, "'" ],
+ [ 8217, "'" ],
+ [ 8220, '"' ],
+ [ 8221, '"' ],
+ [ 8226, "*" ],
+ [ 8230, "..." ]
+ ];
var output = input;
- Roo.each(he.swapCodes, function(sw) {
+ Roo.each(swapCodes, function(sw) {
var swapper = new RegExp("\\u" + sw[0].toString(16), "g"); // hex codes
output = output.replace(swapper, sw[1]);
return output;
},
-
- cleanUpChildren : function (n)
- {
- if (!n.childNodes.length) {
- return;
- }
- for (var i = n.childNodes.length-1; i > -1 ; i--) {
- this.cleanUpChild(n.childNodes[i]);
- }
- },
-
+
cleanUpChild : function (node)
{
- var ed = this;
- //console.log(node);
- if (node.nodeName == "#text") {
- // clean up silly Windows -- stuff?
- return;
- }
- if (node.nodeName == "#comment") {
- node.parentNode.removeChild(node);
- // clean up silly Windows -- stuff?
- return;
- }
- var lcname = node.tagName.toLowerCase();
- // we ignore whitelists... ?? = not really the way to go, but we probably have not got a full
- // whitelist of tags..
-
- if (this.black.indexOf(lcname) > -1 && this.clearUp ) {
- // remove node.
- node.parentNode.removeChild(node);
- return;
-
- }
-
- var remove_keep_children= Roo.HtmlEditorCore.remove.indexOf(node.tagName.toLowerCase()) > -1;
-
- // remove <a name=....> as rendering on yahoo mailer is borked with this.
- // this will have to be flaged elsewhere - perhaps ablack=name... on the mailer..
-
- //if (node.tagName.toLowerCase() == 'a' && !node.hasAttribute('href')) {
- // remove_keep_children = true;
- //}
-
- if (remove_keep_children) {
- this.cleanUpChildren(node);
- // inserts everything just before this node...
- while (node.childNodes.length) {
- var cn = node.childNodes[0];
- node.removeChild(cn);
- node.parentNode.insertBefore(cn, node);
- }
- node.parentNode.removeChild(node);
- return;
- }
-
- if (!node.attributes || !node.attributes.length) {
- this.cleanUpChildren(node);
- return;
- }
-
- function cleanAttr(n,v)
- {
-
- if (v.match(/^\./) || v.match(/^\//)) {
- return;
- }
- if (v.match(/^(http|https):\/\//) || v.match(/^mailto:/)) {
- return;
- }
- if (v.match(/^#/)) {
- return;
- }
-// Roo.log("(REMOVE TAG)"+ node.tagName +'.' + n + '=' + v);
- node.removeAttribute(n);
-
- }
-
- var cwhite = this.cwhite;
- var cblack = this.cblack;
-
- function cleanStyle(n,v)
- {
- if (v.match(/expression/)) { //XSS?? should we even bother..
- node.removeAttribute(n);
- return;
- }
-
- var parts = v.split(/;/);
- var clean = [];
-
- Roo.each(parts, function(p) {
- p = p.replace(/^\s+/g,'').replace(/\s+$/g,'');
- if (!p.length) {
- return true;
- }
- var l = p.split(':').shift().replace(/\s+/g,'');
- l = l.replace(/^\s+/g,'').replace(/\s+$/g,'');
-
- if ( cwhite.length && cblack.indexOf(l) > -1) {
-// Roo.log('(REMOVE CSS)' + node.tagName +'.' + n + ':'+l + '=' + v);
- //node.removeAttribute(n);
- return true;
- }
- //Roo.log()
- // only allow 'c whitelisted system attributes'
- if ( cwhite.length && cwhite.indexOf(l) < 0) {
-// Roo.log('(REMOVE CSS)' + node.tagName +'.' + n + ':'+l + '=' + v);
- //node.removeAttribute(n);
- return true;
- }
-
-
-
-
- clean.push(p);
- return true;
- });
- if (clean.length) {
- node.setAttribute(n, clean.join(';'));
- } else {
- node.removeAttribute(n);
- }
-
- }
-
-
- for (var i = node.attributes.length-1; i > -1 ; i--) {
- var a = node.attributes[i];
- //console.log(a);
-
- if (a.name.toLowerCase().substr(0,2)=='on') {
- node.removeAttribute(a.name);
- continue;
- }
- if (Roo.HtmlEditorCore.ablack.indexOf(a.name.toLowerCase()) > -1) {
- node.removeAttribute(a.name);
- continue;
- }
- if (Roo.HtmlEditorCore.aclean.indexOf(a.name.toLowerCase()) > -1) {
- cleanAttr(a.name,a.value); // fixme..
- continue;
- }
- if (a.name == 'style') {
- cleanStyle(a.name,a.value);
- continue;
- }
- /// clean up MS crap..
- // tecnically this should be a list of valid class'es..
-
-
- if (a.name == 'class') {
- if (a.value.match(/^Mso/)) {
- node.className = '';
- }
-
- if (a.value.match(/body/)) {
- node.className = '';
- }
- continue;
- }
-
- // style cleanup!?
- // class cleanup?
-
- }
-
-
- this.cleanUpChildren(node);
+ new Roo.htmleditor.FilterComment({node : node});
+ new Roo.htmleditor.FilterAttributes({
+ node : node,
+ attrib_black : this.ablack,
+ attrib_clean : this.aclean,
+ style_white : this.cwhite,
+ style_black : this.cblack
+ });
+ new Roo.htmleditor.FilterBlack({ node : node, tag : this.black});
+ new Roo.htmleditor.FilterKeepChildren({node : node, tag : this.tag_remove} );
+
},
/**
* Clean up MS wordisms...
+ * @deprecated - use filter directly
*/
cleanWord : function(node)
{
-
-
- if (!node) {
- this.cleanWord(this.doc.body);
- return;
- }
- if (node.nodeName == "#text") {
- // clean up silly Windows -- stuff?
- return;
- }
- if (node.nodeName == "#comment") {
- node.parentNode.removeChild(node);
- // clean up silly Windows -- stuff?
- return;
- }
-
- if (node.tagName.toLowerCase().match(/^(style|script|applet|embed|noframes|noscript)$/)) {
- node.parentNode.removeChild(node);
- return;
- }
-
- // remove - but keep children..
- if (node.tagName.toLowerCase().match(/^(meta|link|\\?xml:|st1:|o:|font)/)) {
- while (node.childNodes.length) {
- var cn = node.childNodes[0];
- node.removeChild(cn);
- node.parentNode.insertBefore(cn, node);
- }
- node.parentNode.removeChild(node);
- this.iterateChildren(node, this.cleanWord);
- return;
- }
- // clean styles
- if (node.className.length) {
-
- var cn = node.className.split(/\W+/);
- var cna = [];
- Roo.each(cn, function(cls) {
- if (cls.match(/Mso[a-zA-Z]+/)) {
- return;
- }
- cna.push(cls);
- });
- node.className = cna.length ? cna.join(' ') : '';
- if (!cna.length) {
- node.removeAttribute("class");
- }
- }
-
- if (node.hasAttribute("lang")) {
- node.removeAttribute("lang");
- }
-
- if (node.hasAttribute("style")) {
-
- var styles = node.getAttribute("style").split(";");
- var nstyle = [];
- Roo.each(styles, function(s) {
- if (!s.match(/:/)) {
- return;
- }
- var kv = s.split(":");
- if (kv[0].match(/^(mso-|line|font|background|margin|padding|color)/)) {
- return;
- }
- // what ever is left... we allow.
- nstyle.push(s);
- });
- node.setAttribute("style", nstyle.length ? nstyle.join(';') : '');
- if (!nstyle.length) {
- node.removeAttribute('style');
- }
- }
- this.iterateChildren(node, this.cleanWord);
-
-
+ new Roo.htmleditor.FilterWord({ node : node ? node : this.doc.body });
+ new Roo.htmleditor.FilterKeepChildren({node : node ? node : this.doc.body, tag : [ 'FONT', ':' ]} );
},
- /**
- * iterateChildren of a Node, calling fn each time, using this as the scole..
- * @param {DomNode} node node to iterate children of.
- * @param {Function} fn method of this class to call on each item.
- */
- iterateChildren : function(node, fn)
- {
- if (!node.childNodes.length) {
- return;
- }
- for (var i = node.childNodes.length-1; i > -1 ; i--) {
- fn.call(this, node.childNodes[i])
- }
- },
-
+
/**
- * cleanTableWidths.
- *
- * Quite often pasting from word etc.. results in tables with column and widths.
- * This does not work well on fluid HTML layouts - like emails. - so this code should hunt an destroy them..
- *
+
+ * @deprecated - use filters
*/
cleanTableWidths : function(node)
{
-
-
- if (!node) {
- this.cleanTableWidths(this.doc.body);
- return;
- }
-
- // ignore list...
- if (node.nodeName == "#text" || node.nodeName == "#comment") {
- return;
- }
- Roo.log(node.tagName);
- if (!node.tagName.toLowerCase().match(/^(table|td|tr)$/)) {
- this.iterateChildren(node, this.cleanTableWidths);
- return;
- }
- if (node.hasAttribute('width')) {
- node.removeAttribute('width');
- }
-
-
- if (node.hasAttribute("style")) {
- // pretty basic...
-
- var styles = node.getAttribute("style").split(";");
- var nstyle = [];
- Roo.each(styles, function(s) {
- if (!s.match(/:/)) {
- return;
- }
- var kv = s.split(":");
- if (kv[0].match(/^\s*(width|min-width)\s*$/)) {
- return;
- }
- // what ever is left... we allow.
- nstyle.push(s);
- });
- node.setAttribute("style", nstyle.length ? nstyle.join(';') : '');
- if (!nstyle.length) {
- node.removeAttribute('style');
- }
- }
-
- this.iterateChildren(node, this.cleanTableWidths);
-
+ new Roo.htmleditor.FilterTableWidth({ node : node ? node : this.doc.body});
+
},
-
-
-
- domToHTML : function(currentElement, depth, nopadtext) {
-
- depth = depth || 0;
- nopadtext = nopadtext || false;
-
- if (!currentElement) {
- return this.domToHTML(this.doc.body);
- }
-
- //Roo.log(currentElement);
- var j;
- var allText = false;
- var nodeName = currentElement.nodeName;
- var tagName = Roo.util.Format.htmlEncode(currentElement.tagName);
-
- if (nodeName == '#text') {
-
- return nopadtext ? currentElement.nodeValue : currentElement.nodeValue.trim();
- }
-
-
- var ret = '';
- if (nodeName != 'BODY') {
-
- var i = 0;
- // Prints the node tagName, such as <A>, <IMG>, etc
- if (tagName) {
- var attr = [];
- for(i = 0; i < currentElement.attributes.length;i++) {
- // quoting?
- var aname = currentElement.attributes.item(i).name;
- if (!currentElement.attributes.item(i).value.length) {
- continue;
- }
- attr.push(aname + '="' + Roo.util.Format.htmlEncode(currentElement.attributes.item(i).value) + '"' );
- }
-
- ret = "<"+currentElement.tagName+ ( attr.length ? (' ' + attr.join(' ') ) : '') + ">";
- }
- else {
-
- // eack
- }
- } else {
- tagName = false;
- }
- if (['IMG', 'BR', 'HR', 'INPUT'].indexOf(tagName) > -1) {
- return ret;
- }
- if (['PRE', 'TEXTAREA', 'TD', 'A', 'SPAN'].indexOf(tagName) > -1) { // or code?
- nopadtext = true;
- }
-
-
- // Traverse the tree
- i = 0;
- var currentElementChild = currentElement.childNodes.item(i);
- var allText = true;
- var innerHTML = '';
- lastnode = '';
- while (currentElementChild) {
- // Formatting code (indent the tree so it looks nice on the screen)
- var nopad = nopadtext;
- if (lastnode == 'SPAN') {
- nopad = true;
- }
- // text
- if (currentElementChild.nodeName == '#text') {
- var toadd = Roo.util.Format.htmlEncode(currentElementChild.nodeValue);
- toadd = nopadtext ? toadd : toadd.trim();
- if (!nopad && toadd.length > 80) {
- innerHTML += "\n" + (new Array( depth + 1 )).join( " " );
- }
- innerHTML += toadd;
-
- i++;
- currentElementChild = currentElement.childNodes.item(i);
- lastNode = '';
- continue;
- }
- allText = false;
-
- innerHTML += nopad ? '' : "\n" + (new Array( depth + 1 )).join( " " );
-
- // Recursively traverse the tree structure of the child node
- innerHTML += this.domToHTML(currentElementChild, depth+1, nopadtext);
- lastnode = currentElementChild.nodeName;
- i++;
- currentElementChild=currentElement.childNodes.item(i);
- }
-
- ret += innerHTML;
-
- if (!allText) {
- // The remaining code is mostly for formatting the tree
- ret+= nopadtext ? '' : "\n" + (new Array( depth )).join( " " );
- }
-
-
- if (tagName) {
- ret+= "</"+tagName+">";
- }
- return ret;
-
- },
+
applyBlacklists : function()
{
var w = typeof(this.owner.white) != 'undefined' && this.owner.white ? this.owner.white : [];
var b = typeof(this.owner.black) != 'undefined' && this.owner.black ? this.owner.black : [];
+ this.aclean = typeof(this.owner.aclean) != 'undefined' && this.owner.aclean ? this.owner.aclean : Roo.HtmlEditorCore.aclean;
+ this.ablack = typeof(this.owner.ablack) != 'undefined' && this.owner.ablack ? this.owner.ablack : Roo.HtmlEditorCore.ablack;
+ this.tag_remove = typeof(this.owner.tag_remove) != 'undefined' && this.owner.tag_remove ? this.owner.tag_remove : Roo.HtmlEditorCore.tag_remove;
+
this.white = [];
this.black = [];
Roo.each(Roo.HtmlEditorCore.white, function(tag) {
},
+
+ updateLanguage : function()
+ {
+ if (!this.iframe || !this.iframe.contentDocument) {
+ return;
+ }
+ Roo.get(this.iframe.contentDocument.body).attr("lang", this.language);
+ },
+
+
removeStylesheets : function()
{
var _this = this;
Roo.each(Roo.get(_this.iframe.contentDocument.head).select('link[rel=stylesheet]', true).elements, function(s){
s.remove();
});
+ },
+
+ setStyle : function(style)
+ {
+ Roo.get(this.iframe.contentDocument.head).createChild({
+ tag : 'style',
+ type : 'text/css',
+ html : style
+ });
+
+ return;
}
// hide stuff that is not compatible
});
Roo.HtmlEditorCore.white = [
- 'area', 'br', 'img', 'input', 'hr', 'wbr',
+ 'AREA', 'BR', 'IMG', 'INPUT', 'HR', 'WBR',
- 'address', 'blockquote', 'center', 'dd', 'dir', 'div',
- 'dl', 'dt', 'h1', 'h2', 'h3', 'h4',
- 'h5', 'h6', 'hr', 'isindex', 'listing', 'marquee',
- 'menu', 'multicol', 'ol', 'p', 'plaintext', 'pre',
- 'table', 'ul', 'xmp',
+ 'ADDRESS', 'BLOCKQUOTE', 'CENTER', 'DD', 'DIR', 'DIV',
+ 'DL', 'DT', 'H1', 'H2', 'H3', 'H4',
+ 'H5', 'H6', 'HR', 'ISINDEX', 'LISTING', 'MARQUEE',
+ 'MENU', 'MULTICOL', 'OL', 'P', 'PLAINTEXT', 'PRE',
+ 'TABLE', 'UL', 'XMP',
- 'caption', 'col', 'colgroup', 'tbody', 'td', 'tfoot', 'th',
- 'thead', 'tr',
+ 'CAPTION', 'COL', 'COLGROUP', 'TBODY', 'TD', 'TFOOT', 'TH',
+ 'THEAD', 'TR',
- 'dir', 'menu', 'ol', 'ul', 'dl',
+ 'DIR', 'MENU', 'OL', 'UL', 'DL',
- 'embed', 'object'
+ 'EMBED', 'OBJECT'
];
Roo.HtmlEditorCore.black = [
// 'embed', 'object', // enable - backend responsiblity to clean thiese
- 'applet', //
- 'base', 'basefont', 'bgsound', 'blink', 'body',
- 'frame', 'frameset', 'head', 'html', 'ilayer',
- 'iframe', 'layer', 'link', 'meta', 'object',
- 'script', 'style' ,'title', 'xml' // clean later..
+ 'APPLET', //
+ 'BASE', 'BASEFONT', 'BGSOUND', 'BLINK', 'BODY',
+ 'FRAME', 'FRAMESET', 'HEAD', 'HTML', 'ILAYER',
+ 'IFRAME', 'LAYER', 'LINK', 'META', 'OBJECT',
+ 'SCRIPT', 'STYLE' ,'TITLE', 'XML',
+ //'FONT' // CLEAN LATER..
+ 'COLGROUP', 'COL' // messy tables.
+
+
];
-Roo.HtmlEditorCore.clean = [
- 'script', 'style', 'title', 'xml'
+Roo.HtmlEditorCore.clean = [ // ?? needed???
+ 'SCRIPT', 'STYLE', 'TITLE', 'XML'
];
-Roo.HtmlEditorCore.remove = [
- 'font'
+Roo.HtmlEditorCore.tag_remove = [
+ 'FONT', 'TBODY'
];
// attributes..
];
-Roo.HtmlEditorCore.swapCodes =[
- [ 8211, "--" ],
- [ 8212, "--" ],
- [ 8216, "'" ],
- [ 8217, "'" ],
- [ 8220, '"' ],
- [ 8221, '"' ],
- [ 8226, "*" ],
- [ 8230, "..." ]
-];
+
//<script type="text/javascript">
width: 500,
/**
- * @cfg {Array} stylesheets url of stylesheets. set to [] to disable stylesheets.
+ * @cfg {Array} stylesheets url of stylesheets. set to [] to disable stylesheets - this is usally a good idea rootURL + '/roojs1/css/undoreset.css', .
*
*/
stylesheets: false,
*
*/
white: false,
+ /**
+ * @cfg {boolean} allowComments - default false - allow comments in HTML source - by default they are stripped - if you are editing email you may need this.
+ */
+ allowComments: false,
+ /**
+ * @cfg {boolean} enableBlocks - default true - if the block editor (table and figure should be enabled)
+ */
+ enableBlocks : true,
+ /**
+ * @cfg {boolean} autoClean - default true - loading and saving will remove quite a bit of formating,
+ * if you are doing an email editor, this probably needs disabling, it's designed
+ */
+ autoClean: true,
+ /**
+ * @cfg {string} bodyCls default '' default classes to add to body of editable area - usually undoreset is a good start..
+ */
+ bodyCls : '',
+ /**
+ * @cfg {String} language default en - language of text (usefull for rtl languages)
+ *
+ */
+ language: 'en',
+
+
// id of frame..
frameId: false,
* Fires when press the Sytlesheets button
* @param {Roo.HtmlEditorCore} this
*/
- stylesheetsclick: true
+ stylesheetsclick: true,
+ /**
+ * @event paste
+ * Fires when press user pastes into the editor
+ * @param {Roo.HtmlEditorCore} this
+ */
+ paste: true
});
this.defaultAutoCreate = {
tag: "textarea",
},
-
-
+ /**
+ * get the Context selected node
+ * @returns {DomElement|boolean} selected node if active or false if none
+ *
+ */
+ getSelectedNode : function()
+ {
+ if (this.toolbars.length < 2 || !this.toolbars[1].tb) {
+ return false;
+ }
+ return this.toolbars[1].tb.selectedNode;
+
+ },
// private
onRender : function(ct, position)
{
this.el.removeClass('x-hidden');
this.el.dom.removeAttribute('tabIndex');
this.el.focus();
+ this.el.dom.scrollTop = 0;
+
for (var i = 0; i < this.toolbars.length; i++) {
if(this.toolbars[i] instanceof Roo.form.HtmlEditor.ToolbarContext){
this.editorcore.pushValue();
},
+ /**
+ * update the language in the body - really done by core
+ * @param {String} language - eg. en / ar / zh-CN etc..
+ */
+ updateLanguage : function(lang)
+ {
+ this.language = lang;
+ this.editorcore.language = lang;
+ this.editorcore.updateLanguage();
+ },
// private
deferFocus : function(){
this.focus.defer(10, this);
*/
});
- // <script type="text/javascript">
-/*
+ /*
* Based on
* Ext JS Library 1.1.1
* Copyright(c) 2006-2007, Ext JS, LLC.
*/
/**
- * @class Roo.form.HtmlEditorToolbar1
+ * @class Roo.form.HtmlEditor.ToolbarStandard
* Basic Toolbar
- *
+
* Usage:
*
new Roo.form.HtmlEditor({
*
* @cfg {Object} disable List of elements to disable..
- * @cfg {Array} btns List of additional buttons.
+ * @cfg {Roo.Toolbar.Item|Roo.Toolbar.Button|Roo.Toolbar.SplitButton|Roo.form.Field} btns[] List of additional buttons.
*
*
* NEEDS Extra CSS?
// dont call parent... till later.
}
-Roo.apply(Roo.form.HtmlEditor.ToolbarStandard.prototype, {
+Roo.form.HtmlEditor.ToolbarStandard.prototype = {
tb: false,
["h1"],["h2"],["h3"],["h4"],["h5"],["h6"],
["pre"],[ "code"],
["abbr"],[ "acronym"],[ "address"],[ "cite"],[ "samp"],[ "var"],
- ['div'],['span']
+ ['div'],['span'],
+ ['sup'],['sub']
],
cleanStyles : [
tabIndex:-1
});
}
- cmenu.menu.items.push({
+ cmenu.menu.items.push({
actiontype : 'tablewidths',
html: 'Remove Table Widths',
handler: function(a,b) {
var c = Roo.get(editorcore.doc.body);
c.select('[class]').each(function(s) {
- s.dom.className = '';
+ s.dom.removeAttribute('class');
});
+ editorcore.cleanWord();
editorcore.syncValue();
},
tabIndex:-1
actiontype : 'tidy',
html: 'Tidy HTML Source',
handler: function(a,b) {
- editorcore.doc.body.innerHTML = editorcore.domToHTML();
+ new Roo.htmleditor.Tidy(editorcore.doc.body);
editorcore.syncValue();
},
tabIndex:-1
if (this.btns) {
for(var i =0; i< this.btns.length;i++) {
- var b = Roo.factory(this.btns[i],Roo.form);
+ var b = Roo.factory(this.btns[i],this.btns[i].xns || Roo.form);
b.cls = 'x-edit-none';
if(typeof(this.btns[i].cls) != 'undefined' && this.btns[i].cls.indexOf('x-init-enable') !== -1){
},
// private used internally
createLink : function(){
- Roo.log("create link?");
- var url = prompt(this.createLinkText, this.defaultLinkValue);
- if(url && url != 'http:/'+'/'){
- this.editorcore.relayCmd('createlink', url);
+ //Roo.log("create link?");
+ var ec = this.editorcore;
+ var ar = ec.getAllAncestors();
+ var n = false;
+ for(var i = 0;i< ar.length;i++) {
+ if (ar[i] && ar[i].nodeName == 'A') {
+ n = ar[i];
+ break;
+ }
}
+
+ (function() {
+
+ Roo.MessageBox.show({
+ title : "Add / Edit Link URL",
+ msg : "Enter the url for the link",
+ buttons: Roo.MessageBox.OKCANCEL,
+ fn: function(btn, url){
+ if (btn != 'ok') {
+ return;
+ }
+ if(url && url != 'http:/'+'/'){
+ if (n) {
+ n.setAttribute('href', url);
+ } else {
+ ec.relayCmd('createlink', url);
+ }
+ }
+ },
+ minWidth:250,
+ prompt:true,
+ //multiline: multiline,
+ modal : true,
+ value : n ? n.getAttribute('href') : ''
+ });
+
+
+ }).defer(100, this); // we have to defer this , otherwise the mouse click gives focus to the main window.
+
},
this.tb.items.each(function(item){
item.enable();
});
+ // initialize 'blocks'
+ Roo.each(Roo.get(this.editorcore.doc.body).query('*[data-block]'), function(e) {
+ Roo.htmleditor.Block.factory(e).updateElement(e);
+ },this);
+
}
}
item.enable();
});
}
-});
+};
Roo.form.HtmlEditor.ToolbarContext.types = {
- 'IMG' : {
- width : {
+ 'IMG' : [
+ {
+ name : 'width',
title: "Width",
width: 40
},
- height: {
+ {
+ name : 'height',
title: "Height",
width: 40
},
- align: {
+ {
+ name : 'align',
title: "Align",
opts : [ [""],[ "left"],[ "right"],[ "center"],[ "top"]],
width : 80
},
- border: {
+ {
+ name : 'border',
title: "Border",
width: 40
},
- alt: {
+ {
+ name : 'alt',
title: "Alt",
width: 120
},
- src : {
+ {
+ name : 'src',
title: "Src",
width: 220
}
- },
- 'A' : {
- name : {
+ ],
+
+ 'FIGURE' : [
+ {
+ name : 'align',
+ title: "Align",
+ opts : [ [""],[ "left"],[ "right"],[ "center"],[ "top"]],
+ width : 80
+ }
+ ],
+ 'A' : [
+ {
+ name : 'name',
title: "Name",
width: 50
},
- target: {
+ {
+ name : 'target',
title: "Target",
width: 120
},
- href: {
+ {
+ name : 'href',
title: "Href",
width: 220
} // border?
- },
- 'TABLE' : {
- rows : {
- title: "Rows",
- width: 20
- },
- cols : {
- title: "Cols",
- width: 20
- },
- width : {
- title: "Width",
- width: 40
- },
- height : {
- title: "Height",
- width: 40
- },
- border : {
- title: "Border",
- width: 20
- }
- },
- 'TD' : {
- width : {
- title: "Width",
- width: 40
- },
- height : {
- title: "Height",
- width: 40
- },
- align: {
- title: "Align",
- opts : [[""],[ "left"],[ "center"],[ "right"],[ "justify"],[ "char"]],
- width: 80
- },
- valign: {
- title: "Valign",
- opts : [[""],[ "top"],[ "middle"],[ "bottom"],[ "baseline"]],
- width: 80
- },
- colspan: {
- title: "Colspan",
- width: 20
-
- },
- 'font-family' : {
- title : "Font",
- style : 'fontFamily',
- displayField: 'display',
- optname : 'font-family',
- width: 140
- }
- },
- 'INPUT' : {
- name : {
+ ],
+
+ 'INPUT' : [
+ {
+ name : 'name',
title: "name",
width: 120
},
- value : {
+ {
+ name : 'value',
title: "Value",
width: 120
},
- width : {
+ {
+ name : 'width',
title: "Width",
width: 40
}
- },
- 'LABEL' : {
- 'for' : {
+ ],
+ 'LABEL' : [
+ {
+ name : 'for',
title: "For",
width: 120
}
- },
- 'TEXTAREA' : {
- name : {
+ ],
+ 'TEXTAREA' : [
+ {
+ name : 'name',
title: "name",
width: 120
},
- rows : {
+ {
+ name : 'rows',
title: "Rows",
width: 20
},
- cols : {
+ {
+ name : 'cols',
title: "Cols",
width: 20
}
- },
- 'SELECT' : {
- name : {
+ ],
+ 'SELECT' : [
+ {
+ name : 'name',
title: "name",
width: 120
},
- selectoptions : {
+ {
+ name : 'selectoptions',
title: "Options",
width: 200
}
- },
+ ],
// should we really allow this??
// should this just be
- 'BODY' : {
- title : {
+ 'BODY' : [
+
+ {
+ name : 'title',
title: "Title",
width: 200,
disabled : true
}
- },
- 'SPAN' : {
- 'font-family' : {
- title : "Font",
- style : 'fontFamily',
- displayField: 'display',
- optname : 'font-family',
- width: 140
- }
- },
- 'DIV' : {
- 'font-family' : {
- title : "Font",
- style : 'fontFamily',
- displayField: 'display',
- optname : 'font-family',
- width: 140
- }
- },
- 'P' : {
- 'font-family' : {
- title : "Font",
- style : 'fontFamily',
- displayField: 'display',
- optname : 'font-family',
- width: 140
- }
- },
-
- '*' : {
- // empty..
- }
+ ],
+
+ '*' : [
+ // empty.
+ ]
};
// disable everything...
var ty= Roo.form.HtmlEditor.ToolbarContext.types;
this.toolbars = {};
-
+ // block toolbars are built in updateToolbar when needed.
for (var i in ty) {
-
+
this.toolbars[i] = this.buildToolbar(ty[i],i);
}
this.tb = this.toolbars.BODY;
*
* Note you can force an update by calling on('editorevent', scope, false)
*/
- updateToolbar: function(editor,ev,sel){
-
+ updateToolbar: function(editor ,ev, sel)
+ {
+
+ if (ev) {
+ ev.stopEvent(); // se if we can stop this looping with mutiple events.
+ }
+
//Roo.log(ev);
// capture mouse up - this is handy for selecting images..
// perhaps should go somewhere else...
this.editor.onFirstFocus();
return;
}
-
+ //Roo.log(ev ? ev.target : 'NOTARGET');
// http://developer.yahoo.com/yui/docs/simple-editor.js.html
// selectNode - might want to handle IE?
+
+
+
if (ev &&
(ev.type == 'mouseup' || ev.type == 'click' ) &&
- ev.target && ev.target.tagName == 'IMG') {
+ ev.target && ev.target.tagName != 'BODY' ) { // && ev.target.tagName == 'IMG') {
// they have click on an image...
// let's see if we can change the selection...
sel = ev.target;
-
- var nodeRange = sel.ownerDocument.createRange();
- try {
- nodeRange.selectNode(sel);
- } catch (e) {
- nodeRange.selectNodeContents(sel);
- }
- //nodeRange.collapse(true);
- var s = this.editorcore.win.getSelection();
- s.removeAllRanges();
- s.addRange(nodeRange);
- }
+
+ // this triggers looping?
+ //this.editorcore.selectNode(sel);
+
+ }
+ // this forces an id..
+ Array.from(this.editorcore.doc.body.querySelectorAll('.roo-ed-selection')).forEach(function(e) {
+ e.classList.remove('roo-ed-selection');
+ });
+ //Roo.select('.roo-ed-selection', false, this.editorcore.doc).removeClass('roo-ed-selection');
+ //Roo.get(node).addClass('roo-ed-selection');
- var updateFooter = sel ? false : true;
+ //var updateFooter = sel ? false : true;
var ans = this.editorcore.getAllAncestors();
// pick
- var ty= Roo.form.HtmlEditor.ToolbarContext.types;
+ var ty = Roo.form.HtmlEditor.ToolbarContext.types;
if (!sel) {
sel = ans.length ? (ans[0] ? ans[0] : ans[1]) : this.editorcore.doc.body;
sel = sel.tagName.length ? sel : this.editorcore.doc.body;
}
- // pick a menu that exists..
- var tn = sel.tagName.toUpperCase();
- //sel = typeof(ty[tn]) != 'undefined' ? sel : this.editor.doc.body;
-
- tn = sel.tagName.toUpperCase();
+ var tn = sel.tagName.toUpperCase();
var lastSel = this.tb.selectedNode;
-
this.tb.selectedNode = sel;
+ var left_label = tn;
- // if current menu does not match..
+ // ok see if we are editing a block?
- if ((this.tb.name != tn) || (lastSel != this.tb.selectedNode) || ev === false) {
-
- this.tb.el.hide();
- ///console.log("show: " + tn);
- this.tb = typeof(ty[tn]) != 'undefined' ? this.toolbars[tn] : this.toolbars['*'];
- this.tb.el.show();
- // update name
- this.tb.items.first().el.innerHTML = tn + ': ';
-
-
- // update attributes
- if (this.tb.fields) {
- this.tb.fields.each(function(e) {
- if (e.stylename) {
- e.setValue(sel.style[e.stylename]);
- return;
- }
- e.setValue(sel.getAttribute(e.attrname));
- });
- }
+ var db = false;
+ // you are not actually selecting the block.
+ if (sel && sel.hasAttribute('data-block')) {
+ db = sel;
+ } else if (sel && sel.closest('[data-block]')) {
- var hasStyles = false;
- for(var i in this.styles) {
- hasStyles = true;
- break;
- }
+ db = sel.closest('[data-block]');
+ //var cepar = sel.closest('[contenteditable=true]');
+ //if (db && cepar && cepar.tagName != 'BODY') {
+ // db = false; // we are inside an editable block.. = not sure how we are going to handle nested blocks!?
+ //}
+ }
+
+
+ var block = false;
+ //if (db && !sel.hasAttribute('contenteditable') && sel.getAttribute('contenteditable') != 'true' ) {
+ if (db && this.editorcore.enableBlocks) {
+ block = Roo.htmleditor.Block.factory(db);
- // update styles
- if (hasStyles) {
- var st = this.tb.fields.item(0);
-
- st.store.removeAll();
-
-
- var cn = sel.className.split(/\s+/);
+
+ if (block) {
+ db.className = (
+ db.classList.length > 0 ? db.className + ' ' : ''
+ ) + 'roo-ed-selection';
+
+ // since we removed it earlier... its not there..
+ tn = 'BLOCK.' + db.getAttribute('data-block');
- var avs = [];
- if (this.styles['*']) {
-
- Roo.each(this.styles['*'], function(v) {
- avs.push( [ v , cn.indexOf(v) > -1 ? 1 : 0 ] );
- });
- }
- if (this.styles[tn]) {
- Roo.each(this.styles[tn], function(v) {
- avs.push( [ v , cn.indexOf(v) > -1 ? 1 : 0 ] );
- });
+ //this.editorcore.selectNode(db);
+ if (typeof(this.toolbars[tn]) == 'undefined') {
+ this.toolbars[tn] = this.buildToolbar( false ,tn ,block.friendly_name, block);
}
-
- st.store.loadData(avs);
- st.collapse();
- st.setValue(cn);
+ this.toolbars[tn].selectedNode = db;
+ left_label = block.friendly_name;
+ ans = this.editorcore.getAllAncestors();
}
- // flag our selected Node.
- this.tb.selectedNode = sel;
-
-
- Roo.menu.MenuMgr.hideAll();
-
+
+
+
}
- if (!updateFooter) {
- //this.footDisp.dom.innerHTML = '';
- return;
+
+ if (this.tb.name == tn && lastSel == this.tb.selectedNode && ev !== false) {
+ return; // no change?
}
+
+
+
+ this.tb.el.hide();
+ ///console.log("show: " + tn);
+ this.tb = typeof(this.toolbars[tn]) != 'undefined' ? this.toolbars[tn] : this.toolbars['*'];
+
+ this.tb.el.show();
+ // update name
+ this.tb.items.first().el.innerHTML = left_label + ': ';
+
+
+ // update attributes
+ if (block && this.tb.fields) {
+
+ this.tb.fields.each(function(e) {
+ e.setValue(block[e.name]);
+ });
+
+
+ } else if (this.tb.fields && this.tb.selectedNode) {
+ this.tb.fields.each( function(e) {
+ if (e.stylename) {
+ e.setValue(this.tb.selectedNode.style[e.stylename]);
+ return;
+ }
+ e.setValue(this.tb.selectedNode.getAttribute(e.attrname));
+ }, this);
+ this.updateToolbarStyles(this.tb.selectedNode);
+ }
+
+
+
+ Roo.menu.MenuMgr.hideAll();
+
+
+
+
// update the footer
//
+ this.updateFooter(ans);
+
+ },
+
+ updateToolbarStyles : function(sel)
+ {
+ var hasStyles = false;
+ for(var i in this.styles) {
+ hasStyles = true;
+ break;
+ }
+
+ // update styles
+ if (hasStyles && this.tb.hasStyles) {
+ var st = this.tb.fields.item(0);
+
+ st.store.removeAll();
+ var cn = sel.className.split(/\s+/);
+
+ var avs = [];
+ if (this.styles['*']) {
+
+ Roo.each(this.styles['*'], function(v) {
+ avs.push( [ v , cn.indexOf(v) > -1 ? 1 : 0 ] );
+ });
+ }
+ if (this.styles[tn]) {
+ Roo.each(this.styles[tn], function(v) {
+ avs.push( [ v , cn.indexOf(v) > -1 ? 1 : 0 ] );
+ });
+ }
+
+ st.store.loadData(avs);
+ st.collapse();
+ st.setValue(cn);
+ }
+ },
+
+
+ updateFooter : function(ans)
+ {
var html = '';
+ if (ans === false) {
+ this.footDisp.dom.innerHTML = '';
+ return;
+ }
this.footerEls = ans.reverse();
Roo.each(this.footerEls, function(a,i) {
this.footDisp.dom.innerHTML = html;
- //this.editorsyncValue();
+
},
-
-
// private
item.enable();
});
},
- buildToolbar: function(tlist, nm)
+ buildToolbar: function(tlist, nm, friendly_name, block)
{
var editor = this.editor;
var editorcore = this.editorcore;
var tb = new Roo.Toolbar(wdiv);
- // add the name..
+ ///this.tb = tb; // << this sets the active toolbar..
+ if (tlist === false && block) {
+ tlist = block.contextMenu(this);
+ }
- tb.add(nm+ ": ");
+ tb.hasStyles = false;
+ tb.name = nm;
+
+ tb.add((typeof(friendly_name) == 'undefined' ? nm : friendly_name) + ": ");
+
+ var styles = Array.from(this.styles);
- var styles = [];
- for(var i in this.styles) {
- styles.push(i);
- }
// styles...
if (styles && styles.length) {
-
+ tb.hasStyles = true;
// this needs a multi-select checkbox...
tb.addField( new Roo.form.ComboBox({
store: new Roo.data.SimpleStore({
}
var tbc = Roo.form.HtmlEditor.ToolbarContext;
- var tbops = tbc.options;
- for (var i in tlist) {
+
+ for (var i = 0; i < tlist.length; i++) {
+
+ // newer versions will use xtype cfg to create menus.
+ if (typeof(tlist[i].xtype) != 'undefined') {
+
+ tb[typeof(tlist[i].name)== 'undefined' ? 'add' : 'addField'](Roo.factory(tlist[i]));
+
+
+ continue;
+ }
var item = tlist[i];
tb.add(item.title + ": ");
//optname == used so you can configure the options available..
var opts = item.opts ? item.opts : false;
- if (item.optname) {
- opts = tbops[item.optname];
+ if (item.optname) { // use the b
+ opts = Roo.form.HtmlEditor.ToolbarContext.options[item.optname];
}
fields: ['val', 'display'],
data : opts
}),
- name : '-roo-edit-' + i,
- attrname : i,
+ name : '-roo-edit-' + tlist[i].name,
+
+ attrname : tlist[i].name,
stylename : item.style ? item.style : false,
+
displayField: item.displayField ? item.displayField : 'val',
valueField : 'val',
typeAhead: false,
- mode: typeof(tbc.stores[i]) != 'undefined' ? 'remote' : 'local',
+ mode: typeof(tbc.stores[tlist[i].name]) != 'undefined' ? 'remote' : 'local',
editable : false,
triggerAction: 'all',
emptyText:'Select',
width: item.width ? item.width : 130,
listeners : {
'select': function(c, r, i) {
+
+
if (c.stylename) {
tb.selectedNode.style[c.stylename] = r.get('val');
+ editorcore.syncValue();
+ return;
+ }
+ if (r === false) {
+ tb.selectedNode.removeAttribute(c.attrname);
+ editorcore.syncValue();
return;
}
tb.selectedNode.setAttribute(c.attrname, r.get('val'));
+ editorcore.syncValue();
}
}
continue;
-
+ /*
tb.addField( new Roo.form.TextField({
name: i,
width: 100,
value: ''
}));
continue;
+ */
}
tb.addField( new Roo.form.TextField({
- name: '-roo-edit-' + i,
- attrname : i,
+ name: '-roo-edit-' + tlist[i].name,
+ attrname : tlist[i].name,
width: item.width,
//allowBlank:true,
value: '',
listeners: {
'change' : function(f, nv, ov) {
+
+
tb.selectedNode.setAttribute(f.attrname, nv);
+ editorcore.syncValue();
}
}
}));
}
var _this = this;
-
+ var show_delete = !block || block.deleteTitle !== false;
if(nm == 'BODY'){
+ show_delete = false;
tb.addSeparator();
tb.addButton( {
}
tb.addFill();
- tb.addButton( {
- text: 'Remove Tag',
-
- listeners : {
- click : function ()
- {
- // remove
- // undo does not work.
-
- var sn = tb.selectedNode;
-
- var pn = sn.parentNode;
-
- var stn = sn.childNodes[0];
- var en = sn.childNodes[sn.childNodes.length - 1 ];
- while (sn.childNodes.length) {
- var node = sn.childNodes[0];
- sn.removeChild(node);
- //Roo.log(node);
- pn.insertBefore(node, sn);
+ if (show_delete) {
+ tb.addButton({
+ text: block && block.deleteTitle ? block.deleteTitle : 'Remove Block or Formating', // remove the tag, and puts the children outside...
+
+ listeners : {
+ click : function ()
+ {
+ var sn = tb.selectedNode;
+ if (block) {
+ sn = Roo.htmleditor.Block.factory(tb.selectedNode).removeNode();
+
+ }
+ if (!sn) {
+ return;
+ }
+ var stn = sn.childNodes[0] || sn.nextSibling || sn.previousSibling || sn.parentNode;
+ if (sn.hasAttribute('data-block')) {
+ stn = sn.nextSibling || sn.previousSibling || sn.parentNode;
+ sn.parentNode.removeChild(sn);
+
+ } else if (sn && sn.tagName != 'BODY') {
+ // remove and keep parents.
+ a = new Roo.htmleditor.FilterKeepChildren({tag : false});
+ a.replaceTag(sn);
+ }
+
+
+ var range = editorcore.createRange();
+
+ range.setStart(stn,0);
+ range.setEnd(stn,0);
+ var selection = editorcore.getSelection();
+ selection.removeAllRanges();
+ selection.addRange(range);
+
+
+ //_this.updateToolbar(null, null, pn);
+ _this.updateToolbar(null, null, null);
+ _this.updateFooter(false);
}
- pn.removeChild(sn);
- var range = editorcore.createRange();
-
- range.setStart(stn,0);
- range.setEnd(en,0); //????
- //range.selectNode(sel);
-
-
- var selection = editorcore.getSelection();
- selection.removeAllRanges();
- selection.addRange(range);
-
-
-
- //_this.updateToolbar(null, null, pn);
- _this.updateToolbar(null, null, null);
- _this.footDisp.dom.innerHTML = '';
}
- }
-
+
+
-
- });
-
+ });
+ }
tb.el.on('click', function(e){
e.preventDefault(); // what does this do?
});
tb.el.setVisibilityMode( Roo.Element.DISPLAY);
tb.el.hide();
- tb.name = nm;
+
// dont need to disable them... as they will get hidden
return tb;
},
+ // when the footer contect changes
onContextClick : function (ev,dom)
{
ev.preventDefault();
var ans = this.footerEls;
var sel = ans[n];
- // pick
- var range = this.editorcore.createRange();
-
- range.selectNodeContents(sel);
- //range.selectNode(sel);
-
-
- var selection = this.editorcore.getSelection();
- selection.removeAllRanges();
- selection.addRange(range);
-
+ this.editorcore.selectNode(sel);
this.updateToolbar(null, null, sel);
this.initEl(el);
}
Roo.form.BasicForm.superclass.constructor.call(this);
+
+ Roo.form.BasicForm.popover.apply();
};
Roo.extend(Roo.form.BasicForm, Roo.util.Observable, {
* @type Mixed
*/
waitMsgTarget : false,
+
+ /**
+ * @type Boolean
+ */
+ disableMask : false,
+
+ /**
+ * @cfg {Boolean} errorMask (true|false) default false
+ */
+ errorMask : false,
+
+ /**
+ * @cfg {Number} maskOffset Default 100
+ */
+ maskOffset : 100,
// private
initEl : function(el){
*/
isValid : function(){
var valid = true;
+ var target = false;
this.items.each(function(f){
- if(!f.validate()){
- valid = false;
- }
+ if(f.validate()){
+ return;
+ }
+
+ valid = false;
+
+ if(!target && f.el.isVisible(true)){
+ target = f;
+ }
});
+
+ if(this.errorMask && !valid){
+ Roo.form.BasicForm.popover.mask(this, target);
+ }
+
return valid;
},
-
+ /**
+ * Returns array of invalid form fields.
+ * @return Array
+ */
+
+ invalidFields : function()
+ {
+ var ret = [];
+ this.items.each(function(f){
+ if(f.validate()){
+ return;
+ }
+ ret.push(f);
+
+ });
+
+ return ret;
+ },
+
+
/**
* DEPRICATED Returns true if any fields in this form have changed since their original load.
* @return Boolean
beforeAction : function(action){
var o = action.options;
-
- if(this.waitMsgTarget === true){
- this.el.mask(o.waitMsg || "Sending", 'x-mask-loading');
- }else if(this.waitMsgTarget){
- this.waitMsgTarget = Roo.get(this.waitMsgTarget);
- this.waitMsgTarget.mask(o.waitMsg || "Sending", 'x-mask-loading');
- }else {
- Roo.MessageBox.wait(o.waitMsg || "Sending", o.waitTitle || this.waitTitle || 'Please Wait...');
+ if(!this.disableMask) {
+ if(this.waitMsgTarget === true){
+ this.el.mask(o.waitMsg || "Sending", 'x-mask-loading');
+ }else if(this.waitMsgTarget){
+ this.waitMsgTarget = Roo.get(this.waitMsgTarget);
+ this.waitMsgTarget.mask(o.waitMsg || "Sending", 'x-mask-loading');
+ }else {
+ Roo.MessageBox.wait(o.waitMsg || "Sending", o.waitTitle || this.waitTitle || 'Please Wait...');
+ }
}
+
},
this.activeAction = null;
var o = action.options;
- if(this.waitMsgTarget === true){
- this.el.unmask();
- }else if(this.waitMsgTarget){
- this.waitMsgTarget.unmask();
- }else{
- Roo.MessageBox.updateProgress(1);
- Roo.MessageBox.hide();
+ if(!this.disableMask) {
+ if(this.waitMsgTarget === true){
+ this.el.unmask();
+ }else if(this.waitMsgTarget){
+ this.waitMsgTarget.unmask();
+ }else{
+ Roo.MessageBox.updateProgress(1);
+ Roo.MessageBox.hide();
+ }
}
-
+
if(success){
if(o.reset){
this.reset();
return this;
},
-
+
/**
* Returns the fields in this form as an object with key/value pairs. If multiple fields exist with the same name
* they are returned as an array.
* @param {Boolean} asString
* @return {Object}
*/
- getValues : function(asString){
+ getValues : function(asString)
+ {
if (this.childForms) {
// copy values from the child forms
Roo.each(this.childForms, function (f) {
- this.setValues(f.getValues());
+ this.setValues(f.getFieldValues()); // get the full set of data, as we might be copying comboboxes from external into this one.
}, this);
}
+ // use formdata
+ if (typeof(FormData) != 'undefined' && asString !== true) {
+ // this relies on a 'recent' version of chrome apparently...
+ try {
+ var fd = (new FormData(this.el.dom)).entries();
+ var ret = {};
+ var ent = fd.next();
+ while (!ent.done) {
+ ret[ent.value[0]] = ent.value[1]; // not sure how this will handle duplicates..
+ ent = fd.next();
+ };
+ return ret;
+ } catch(e) {
+
+ }
+
+ }
var fs = Roo.lib.Ajax.serializeForm(this.el.dom);
/**
* Returns the fields in this form as an object with key/value pairs.
* This differs from getValues as it calls getValue on each child item, rather than using dom data.
+ * Normally this will not return readOnly data
+ * @param {Boolean} with_readonly return readonly field data.
* @return {Object}
*/
- getFieldValues : function(with_hidden)
+ getFieldValues : function(with_readonly)
{
if (this.childForms) {
// copy values from the child forms
// should this call getFieldValues - probably not as we do not currently copy
// hidden fields when we generate..
Roo.each(this.childForms, function (f) {
- this.setValues(f.getValues());
+ this.setValues(f.getFieldValues());
}, this);
}
var ret = {};
this.items.each(function(f){
+
+ if (f.readOnly && with_readonly !== true) {
+ return; // skip read only values. - this is in theory to stop 'old' values being copied over new ones
+ // if a subform contains a copy of them.
+ // if you have subforms with the same editable data, you will need to copy the data back
+ // and forth.
+ }
+
if (!f.getName()) {
return;
}
});
// back compat
-Roo.BasicForm = Roo.form.BasicForm;/*
+Roo.BasicForm = Roo.form.BasicForm;
+
+Roo.apply(Roo.form.BasicForm, {
+
+ popover : {
+
+ padding : 5,
+
+ isApplied : false,
+
+ isMasked : false,
+
+ form : false,
+
+ target : false,
+
+ intervalID : false,
+
+ maskEl : false,
+
+ apply : function()
+ {
+ if(this.isApplied){
+ return;
+ }
+
+ this.maskEl = {
+ top : Roo.DomHelper.append(Roo.get(document.body), { tag: "div", cls:"x-dlg-mask roo-form-top-mask" }, true),
+ left : Roo.DomHelper.append(Roo.get(document.body), { tag: "div", cls:"x-dlg-mask roo-form-left-mask" }, true),
+ bottom : Roo.DomHelper.append(Roo.get(document.body), { tag: "div", cls:"x-dlg-mask roo-form-bottom-mask" }, true),
+ right : Roo.DomHelper.append(Roo.get(document.body), { tag: "div", cls:"x-dlg-mask roo-form-right-mask" }, true)
+ };
+
+ this.maskEl.top.enableDisplayMode("block");
+ this.maskEl.left.enableDisplayMode("block");
+ this.maskEl.bottom.enableDisplayMode("block");
+ this.maskEl.right.enableDisplayMode("block");
+
+ Roo.get(document.body).on('click', function(){
+ this.unmask();
+ }, this);
+
+ Roo.get(document.body).on('touchstart', function(){
+ this.unmask();
+ }, this);
+
+ this.isApplied = true
+ },
+
+ mask : function(form, target)
+ {
+ this.form = form;
+
+ this.target = target;
+
+ if(!this.form.errorMask || !target.el){
+ return;
+ }
+
+ var scrollable = this.target.el.findScrollableParent() || this.target.el.findParent('div.x-layout-active-content', 100, true) || Roo.get(document.body);
+
+ var ot = this.target.el.calcOffsetsTo(scrollable);
+
+ var scrollTo = ot[1] - this.form.maskOffset;
+
+ scrollTo = Math.min(scrollTo, scrollable.dom.scrollHeight);
+
+ scrollable.scrollTo('top', scrollTo);
+
+ var el = this.target.wrap || this.target.el;
+
+ var box = el.getBox();
+
+ this.maskEl.top.setStyle('position', 'absolute');
+ this.maskEl.top.setStyle('z-index', 10000);
+ this.maskEl.top.setSize(Roo.lib.Dom.getDocumentWidth(), box.y - this.padding);
+ this.maskEl.top.setLeft(0);
+ this.maskEl.top.setTop(0);
+ this.maskEl.top.show();
+
+ this.maskEl.left.setStyle('position', 'absolute');
+ this.maskEl.left.setStyle('z-index', 10000);
+ this.maskEl.left.setSize(box.x - this.padding, box.height + this.padding * 2);
+ this.maskEl.left.setLeft(0);
+ this.maskEl.left.setTop(box.y - this.padding);
+ this.maskEl.left.show();
+
+ this.maskEl.bottom.setStyle('position', 'absolute');
+ this.maskEl.bottom.setStyle('z-index', 10000);
+ this.maskEl.bottom.setSize(Roo.lib.Dom.getDocumentWidth(), Roo.lib.Dom.getDocumentHeight() - box.bottom - this.padding);
+ this.maskEl.bottom.setLeft(0);
+ this.maskEl.bottom.setTop(box.bottom + this.padding);
+ this.maskEl.bottom.show();
+
+ this.maskEl.right.setStyle('position', 'absolute');
+ this.maskEl.right.setStyle('z-index', 10000);
+ this.maskEl.right.setSize(Roo.lib.Dom.getDocumentWidth() - box.right - this.padding, box.height + this.padding * 2);
+ this.maskEl.right.setLeft(box.right + this.padding);
+ this.maskEl.right.setTop(box.y - this.padding);
+ this.maskEl.right.show();
+
+ this.intervalID = window.setInterval(function() {
+ Roo.form.BasicForm.popover.unmask();
+ }, 10000);
+
+ window.onwheel = function(){ return false;};
+
+ (function(){ this.isMasked = true; }).defer(500, this);
+
+ },
+
+ unmask : function()
+ {
+ if(!this.isApplied || !this.isMasked || !this.form || !this.target || !this.form.errorMask){
+ return;
+ }
+
+ this.maskEl.top.setStyle('position', 'absolute');
+ this.maskEl.top.setSize(0, 0).setXY([0, 0]);
+ this.maskEl.top.hide();
+
+ this.maskEl.left.setStyle('position', 'absolute');
+ this.maskEl.left.setSize(0, 0).setXY([0, 0]);
+ this.maskEl.left.hide();
+
+ this.maskEl.bottom.setStyle('position', 'absolute');
+ this.maskEl.bottom.setSize(0, 0).setXY([0, 0]);
+ this.maskEl.bottom.hide();
+
+ this.maskEl.right.setStyle('position', 'absolute');
+ this.maskEl.right.setSize(0, 0).setXY([0, 0]);
+ this.maskEl.right.hide();
+
+ window.onwheel = function(){ return true;};
+
+ if(this.intervalID){
+ window.clearInterval(this.intervalID);
+ this.intervalID = false;
+ }
+
+ this.isMasked = false;
+
+ }
+
+ }
+
+});/*
* Based on:
* Ext JS Library 1.1.1
* Copyright(c) 2006-2007, Ext JS, LLC.
/**
* @class Roo.form.Form
* @extends Roo.form.BasicForm
+ * @children Roo.form.Column Roo.form.FieldSet Roo.form.Row Roo.form.Field Roo.Button Roo.form.TextItem
* Adds the ability to dynamically render forms with JavaScript to {@link Roo.form.BasicForm}.
* @constructor
* @param {Object} config Configuration options
Roo.each(xitems, this.addxtype, this);
-
-
};
Roo.extend(Roo.form.Form, Roo.form.BasicForm, {
+ /**
+ * @cfg {Roo.Button} buttons[] buttons at bottom of form
+ */
+
/**
* @cfg {Number} labelWidth The width of labels. This property cascades to child containers.
*/
* @cfg {String} itemCls A css class to apply to the x-form-item of fields. This property cascades to child containers.
*/
/**
- * @cfg {String} buttonAlign Valid values are "left," "center" and "right" (defaults to "center")
+ * @cfg {String} (left|center|right) buttonAlign Valid values are "left," "center" and "right" (defaults to "center")
*/
buttonAlign:'center',
minButtonWidth:75,
/**
- * @cfg {String} labelAlign Valid values are "left," "top" and "right" (defaults to "left").
+ * @cfg {String} labelAlign (left|top|right) Valid values are "left," "top" and "right" (defaults to "left").
* This property cascades to child containers if not set.
*/
labelAlign:'left',
*/
progressUrl : false,
-
+ /**
+ * @cfg {boolean|FormData} formData - true to use new 'FormData' post, or set to a new FormData({dom form}) Object, if
+ * sending a formdata with extra parameters - eg uploaded elements.
+ */
+
+ formData : false,
+
/**
* Opens a new {@link Roo.form.Column} container in the layout stack. If fields are passed after the config, the
* fields are added and the column is closed. If no fields are passed the column remains open
url:this.getUrl(!isPost),
method: method,
params:isPost ? this.getParams() : null,
- isUpload: this.form.fileUpload
+ isUpload: this.form.fileUpload,
+ formData : this.form.formData
}));
this.uploadProgress();
/**
* @class Roo.form.Layout
* @extends Roo.Component
+ * @children Roo.form.Column Roo.form.Row Roo.form.Field Roo.Button Roo.form.TextItem Roo.form.FieldSet
* Creates a container for layout and rendering of fields in an {@link Roo.form.Form}.
* @constructor
* @param {Object} config Configuration options
* a function which returns such a specification.
*/
/**
- * @cfg {String} labelAlign
+ * @cfg {String} labelAlign (left|top|right)
* Valid values are "left," "top" and "right" (defaults to "left")
*/
/**
}
});
+
/**
* @class Roo.form.Column
* @extends Roo.form.Layout
+ * @children Roo.form.Row Roo.form.Field Roo.Button Roo.form.TextItem Roo.form.FieldSet
* Creates a column container for layout and rendering of fields in an {@link Roo.form.Form}.
* @constructor
* @param {Object} config Configuration options
}
});
-
/**
* @class Roo.form.Row
* @extends Roo.form.Layout
+ * @children Roo.form.Column Roo.form.Row Roo.form.Field Roo.Button Roo.form.TextItem Roo.form.FieldSet
* Creates a row container for layout and rendering of fields in an {@link Roo.form.Form}.
* @constructor
* @param {Object} config Configuration options
/**
* @class Roo.form.FieldSet
* @extends Roo.form.Layout
+ * @children Roo.form.Column Roo.form.Row Roo.form.Field Roo.Button Roo.form.TextItem
* Creates a fieldset container for layout and rendering of fields in an {@link Roo.form.Form}.
* @constructor
* @param {Object} config Configuration options
/**
* @class Roo.form.VTypes
* Overridable validation definitions. The validations provided are basic and intended to be easily customizable and extended.
- * @singleton
+ * @static
*/
Roo.form.VTypes = function(){
// closure these in so they are only created once.
this.getEl().setStyle("outline", "0px none");
this.getEl().unselectable();
if (this.dragGroup) {
- this.setDraggable(this.dragGroup.split(","));
+ this.setDraggable(this.dragGroup.split(","));
}
if (this.dropGroup) {
- this.setDroppable(this.dropGroup.split(","));
+ this.setDroppable(this.dropGroup.split(","));
}
if (this.deletable) {
this.setDeletable();
/**
* @class Roo.BorderLayout
* @extends Roo.LayoutManager
+ * @children Roo.ContentPanel
* This class represents a common layout manager used in desktop applications. For screenshots and more details,
* please see: <br><br>
* <a href="http://www.jackslocum.com/yui/2006/10/19/cross-browser-web-20-layouts-with-yahoo-ui/">Cross Browser Layouts - Part 1</a><br>
};
Roo.extend(Roo.BorderLayout, Roo.LayoutManager, {
+
+ /**
+ * @cfg {Roo.LayoutRegion} east
+ */
+ /**
+ * @cfg {Roo.LayoutRegion} west
+ */
+ /**
+ * @cfg {Roo.LayoutRegion} north
+ */
+ /**
+ * @cfg {Roo.LayoutRegion} south
+ */
+ /**
+ * @cfg {Roo.LayoutRegion} center
+ */
/**
* Creates and adds a new region if it doesn't already exist.
* @param {String} target The target region key (north, south, east, west or center).
* @param {Roo.ContentPanel} panel The panel
*/
"panelremoved" : true,
+ /**
+ * @event beforecollapse
+ * Fires when this region before collapse.
+ * @param {Roo.LayoutRegion} this
+ */
+ "beforecollapse" : true,
/**
* @event collapsed
* Fires when this region is collapsed.
* Collapses this region.
* @param {Boolean} skipAnim (optional) true to collapse the element without animation (if animate is true)
*/
- collapse : function(skipAnim){
+ collapse : function(skipAnim, skipCheck){
if(this.collapsed) {
return;
}
- this.collapsed = true;
- if(this.split){
- this.split.el.hide();
- }
- if(this.config.animate && skipAnim !== true){
- this.fireEvent("invalidated", this);
- this.animateCollapse();
- }else{
- this.el.setLocation(-20000,-20000);
- this.el.hide();
- this.collapsedEl.show();
- this.fireEvent("collapsed", this);
- this.fireEvent("invalidated", this);
+
+ if(skipCheck || this.fireEvent("beforecollapse", this) != false){
+
+ this.collapsed = true;
+ if(this.split){
+ this.split.el.hide();
+ }
+ if(this.config.animate && skipAnim !== true){
+ this.fireEvent("invalidated", this);
+ this.animateCollapse();
+ }else{
+ this.el.setLocation(-20000,-20000);
+ this.el.hide();
+ this.collapsedEl.show();
+ this.fireEvent("collapsed", this);
+ this.fireEvent("invalidated", this);
+ }
}
+
},
animateCollapse : function(){
/**
* @class Roo.ContentPanel
* @extends Roo.util.Observable
+ * @children Roo.form.Form Roo.JsonView Roo.View
+ * @parent Roo.BorderLayout Roo.LayoutDialog builder
* A basic ContentPanel element.
* @cfg {Boolean} fitToFrame True for this panel to adjust its size to fit when the region resizes (defaults to false)
* @cfg {Boolean} fitContainer When using {@link #fitToFrame} and {@link #resizeEl}, you can also fit the parent container (defaults to false)
- * @cfg {Boolean/Object} autoCreate True to auto generate the DOM element for this panel, or a {@link Roo.DomHelper} config of the element to create
+ * @cfg {Boolean|Object} autoCreate True to auto generate the DOM element for this panel, or a {@link Roo.DomHelper} config of the element to create
* @cfg {Boolean} closable True if the panel can be closed/removed
* @cfg {Boolean} background True if the panel should not be activated when it is added (defaults to false)
- * @cfg {String/HTMLElement/Element} resizeEl An element to resize if {@link #fitToFrame} is true (instead of this panel's element)
- * @cfg {Toolbar} toolbar A toolbar for this panel
+ * @cfg {String|HTMLElement|Element} resizeEl An element to resize if {@link #fitToFrame} is true (instead of this panel's element)
+ * @cfg {Roo.Toolbar} toolbar A toolbar for this panel
* @cfg {Boolean} autoScroll True to scroll overflow in this panel (use with {@link #fitToFrame})
* @cfg {String} title The title for this panel
* @cfg {Array} adjustments Values to <b>add</b> to the width/height when doing a {@link #fitToFrame} (default is [0, 0])
* @cfg {String} url Calls {@link #setUrl} with this value
- * @cfg {String} region (center|north|south|east|west) which region to put this panel on (when used with xtype constructors)
- * @cfg {String/Object} params When used with {@link #url}, calls {@link #setUrl} with this value
+ * @cfg {String} region (center|north|south|east|west) [required] which region to put this panel on (when used with xtype constructors)
+ * @cfg {String|Object} params When used with {@link #url}, calls {@link #setUrl} with this value
* @cfg {Boolean} loadOnce When used with {@link #url}, calls {@link #setUrl} with this value
* @cfg {String} content Raw content to fill content panel with (uses setContent on construction.)
+ * @cfg {String} style Extra style to add to the content panel
+ * @cfg {Roo.menu.Menu} menu popup menu
* @constructor
* Create a new ContentPanel.
{tag: "div", cls: "x-layout-inactive-content", id: config.id||el}, true);
}
}
+
+
this.closable = false;
this.loaded = false;
this.active = false;
* @param {Roo.ContentPanel} this
*/
"render" : true
-
-
+
});
}
if(this.footer){
var te = this.footer.getEl();
- Roo.log("footer:" + te.getHeight());
+ //Roo.log("footer:" + te.getHeight());
height -= te.getHeight();
te.setWidth(width);
}
});
+
+
+
+
+
+
+
+
+
+
+
/**
* @class Roo.GridPanel
* @extends Roo.ContentPanel
+ * @parent Roo.BorderLayout Roo.LayoutDialog builder
* @constructor
* Create a new GridPanel.
- * @param {Roo.grid.Grid} grid The grid for this panel
- * @param {String/Object} config A string to set only the panel's title, or a config object
+ * @cfg {Roo.grid.Grid} grid The grid for this panel
*/
Roo.GridPanel = function(grid, config){
-
+ // universal ctor...
+ if (typeof(grid.grid) != 'undefined') {
+ config = grid;
+ grid = config.grid;
+ }
this.wrapper = Roo.DomHelper.append(document.body, // wrapper for IE7 strict & safari scroll issue
{tag: "div", cls: "x-layout-grid-wrapper x-layout-inactive-content"}, true);
/**
* @class Roo.NestedLayoutPanel
* @extends Roo.ContentPanel
+ * @parent Roo.BorderLayout Roo.LayoutDialog builder
+ * @cfg {Roo.BorderLayout} layout [required] The layout for this panel
+ *
+ *
* @constructor
* Create a new NestedLayoutPanel.
*
*
- * @param {Roo.BorderLayout} layout The layout for this panel
+ * @param {Roo.BorderLayout} layout [required] The layout for this panel
* @param {String/Object} config A string to set only the title or a config object
*/
Roo.NestedLayoutPanel = function(layout, config)
Roo.extend(Roo.NestedLayoutPanel, Roo.ContentPanel, {
+ layout : false,
+
setSize : function(width, height){
if(!this.ignoreResize(width, height)){
var size = this.adjustForComponents(width, height);
/**
* Returns the nested BorderLayout for this panel
- * @return {Roo.BorderLayout}
+ * @return {Roo.BorderLayout}
*/
getLayout : function(){
return this.layout;
-
-
-
-
-
-
/**
* @class Roo.TreePanel
* @extends Roo.ContentPanel
+ * @parent Roo.BorderLayout Roo.LayoutDialog builder
+ * Treepanel component
+ *
* @constructor
* Create a new TreePanel. - defaults to fit/scoll contents.
* @param {String/Object} config A string to set only the panel's title, or a config object
- * @cfg {Roo.tree.TreePanel} tree The tree TreePanel, with config etc.
*/
Roo.TreePanel = function(config){
var el = config.el;
Roo.extend(Roo.TreePanel, Roo.ContentPanel, {
fitToFrame : true,
- autoScroll : true
-});
-
-
-
-
-
-
-
-
-
-
+ autoScroll : true,
+ /*
+ * @cfg {Roo.tree.TreePanel} tree [required] The tree TreePanel, with config etc.
+ */
+ tree : false
+});
/*
* Based on:
* Ext JS Library 1.1.1
Roo.extend(Roo.grid.Grid, Roo.util.Observable, {
/**
+ * @cfg {Roo.grid.AbstractSelectionModel} sm The selection Model (default = Roo.grid.RowSelectionModel)
+ */
+ /**
+ * @cfg {Roo.grid.GridView} view The view that renders the grid (default = Roo.grid.GridView)
+ */
+ /**
+ * @cfg {Roo.grid.ColumnModel} cm[] The columns of the grid
+ */
+ /**
+ * @cfg {Roo.data.Store} ds The data store for the grid
+ */
+ /**
+ * @cfg {Roo.Toolbar} toolbar a toolbar for buttons etc.
+ */
+ /**
* @cfg {String} ddGroup - drag drop group.
*/
+ /**
+ * @cfg {String} dragGroup - drag group (?? not sure if needed.)
+ */
/**
* @cfg {Number} minColumnWidth The minimum width a column can be resized to. Default is 25.
/**
* @cfg {Boolean} enableDrag True to enable drag of rows. Default is false. (double check if this is needed?)
+ */
+ /**
+ * @cfg {Boolean} enableDrop True to enable drop of elements. Default is false. (double check if this is needed?)
*/
/**
* @cfg {Roo.dd.DropTarget} dropTarget An {@link Roo.dd.DropTarget} config
*/
dropTarget: false,
-
-
+ /**
+ * @cfg {boolean} sortColMenu Sort the column order menu when it shows (usefull for long lists..) default false
+ */
+ sortColMenu : false,
// private
rendered : false,
/**
* @cfg {Number} maxHeight Sets the maximum height of the grid - ignored if autoHeight is not on.
*/
+
+
+ /**
+ * @cfg {String} ddText Configures the text is the drag proxy (defaults to "%0 selected row(s)").
+ * %0 is replaced with the number of selected rows.
+ */
+ ddText : "{0} selected row{1}",
+
+
/**
* Called once after all setup has been completed and the grid is ready to be rendered.
* @return {Roo.grid.Grid} this
return this;
},
- /**
- * Reconfigures the grid to use a different Store and Column Model.
- * The View will be bound to the new objects and refreshed.
- * @param {Roo.data.Store} dataSource The new {@link Roo.data.Store} object
- * @param {Roo.grid.ColumnModel} The new {@link Roo.grid.ColumnModel} object
- */
+ /**
+ * Reconfigures the grid to use a different Store and Column Model.
+ * The View will be bound to the new objects and refreshed.
+ * @param {Roo.data.Store} dataSource The new {@link Roo.data.Store} object
+ * @param {Roo.grid.ColumnModel} The new {@link Roo.grid.ColumnModel} object
+ */
reconfigure : function(dataSource, colModel){
if(this.loadMask){
this.loadMask.destroy();
this.colModel = colModel;
this.view.refresh(true);
},
-
+ /**
+ * addColumns
+ * Add's a column, default at the end..
+
+ * @param {int} position to add (default end)
+ * @param {Array} of objects of column configuration see {@link Roo.grid.ColumnModel}
+ */
+ addColumns : function(pos, ar)
+ {
+
+ for (var i =0;i< ar.length;i++) {
+ var cfg = ar[i];
+ cfg.id = typeof(cfg.id) == 'undefined' ? Roo.id() : cfg.id; // don't normally use this..
+ this.cm.lookup[cfg.id] = cfg;
+ }
+
+
+ if (typeof(pos) == 'undefined' || pos >= this.cm.config.length) {
+ pos = this.cm.config.length; //this.cm.config.push(cfg);
+ }
+ pos = Math.max(0,pos);
+ ar.unshift(0);
+ ar.unshift(pos);
+ this.cm.config.splice.apply(this.cm.config, ar);
+
+
+
+ this.view.generateRules(this.cm);
+ this.view.refresh(true);
+
+ },
+
+
+
+
// private
onKeyDown : function(e){
this.fireEvent("keydown", e);
getView : function(){
if(!this.view){
this.view = new Roo.grid.GridView(this.viewConfig);
+ this.relayEvents(this.view, [
+ "beforerowremoved", "beforerowsinserted",
+ "beforerefresh", "rowremoved",
+ "rowsinserted", "rowupdated" ,"refresh"
+ ]);
}
return this.view;
},
/**
* Called to get grid's drag proxy text, by default returns this.ddText.
+ * Override this to put something different in the dragged text.
* @return {String}
*/
getDragDropText : function(){
return String.format(this.ddText, count, count == 1 ? '' : 's');
}
});
-/**
- * Configures the text is the drag proxy (defaults to "%0 selected row(s)").
- * %0 is replaced with the number of selected rows.
- * @type String
- */
-Roo.grid.Grid.prototype.ddText = "{0} selected row{1}";/*
+/*
* Based on:
* Ext JS Library 1.1.1
* Copyright(c) 2006-2007, Ext JS, LLC.
* Fork - LGPL
* <script type="text/javascript">
*/
-
+ /**
+ * @class Roo.grid.AbstractGridView
+ * @extends Roo.util.Observable
+ * @abstract
+ * Abstract base class for grid Views
+ * @constructor
+ */
Roo.grid.AbstractGridView = function(){
this.grid = null;
p.cellId = "x-grid-hd-0-" + i;
p.splitId = "x-grid-csplit-0-" + i;
p.id = cm.getColumnId(i);
- p.title = cm.getColumnTooltip(i) || cm.getColumnHeader(i).match(/\</) ? '' : cm.getColumnHeader(i) || "";
p.value = cm.getColumnHeader(i) || "";
+ p.title = cm.getColumnTooltip(i) || (''+p.value).match(/\</) ? '' : p.value || "";
p.style = (this.grid.enableColumnResize === false || !cm.isResizable(i) || cm.isFixed(i)) ? 'cursor:default' : '';
if(!cm.isLocked(i)){
cb[cb.length] = ct.apply(p);
);
*/
if(ctop < stop){
- c.scrollTop = ctop;
+ c.scrollTop = ctop;
//Roo.log("set scrolltop to ctop DISABLE?");
}else if(cbot > sbot){
//Roo.log("set scrolltop to cbot-ch");
beforeColMenuShow : function(){
var cm = this.cm, colCount = cm.getColumnCount();
this.colMenu.removeAll();
+
+ var items = [];
for(var i = 0; i < colCount; i++){
- this.colMenu.add(new Roo.menu.CheckItem({
+ items.push({
id: "col-"+cm.getColumnId(i),
text: cm.getColumnHeader(i),
checked: !cm.isHidden(i),
hideOnClick:false
- }));
+ });
+ }
+
+ if (this.grid.sortColMenu) {
+ items.sort(function(a,b) {
+ if (a.text == b.text) {
+ return 0;
+ }
+ return a.text.toUpperCase() > b.text.toUpperCase() ? 1 : -1;
+ });
+ }
+
+ for(var i = 0; i < colCount; i++){
+ this.colMenu.add(new Roo.menu.CheckItem(items[i]));
}
},
}
},
- layout : function(initialRender, is2ndPass){
+ layout : function(initialRender, is2ndPass)
+ {
var g = this.grid;
var auto = g.autoHeight;
var scrollOffset = 16;
* Fork - LGPL
* <script type="text/javascript">
*/
-
+ /**
+ * @extends Roo.dd.DDProxy
+ * @class Roo.grid.SplitDragZone
+ * Support for Column Header resizing
+ * @constructor
+ * @param {Object} config
+ */
// private
// This is a support class used internally by the Grid components
Roo.grid.SplitDragZone = function(grid, hd, hd2){
this.grid = grid;
this.view = grid.getView();
this.proxy = this.view.resizeProxy;
- Roo.grid.SplitDragZone.superclass.constructor.call(this, hd,
- "gridSplitters" + this.grid.getGridEl().id, {
- dragElId : Roo.id(this.proxy.dom), resizeFrame:false
- });
+ Roo.grid.SplitDragZone.superclass.constructor.call(
+ this,
+ hd, // ID
+ "gridSplitters" + this.grid.getGridEl().id, // SGROUP
+ { // CONFIG
+ dragElId : Roo.id(this.proxy.dom),
+ resizeFrame:false
+ }
+ );
+
this.setHandleElId(Roo.id(hd));
- this.setOuterHandleElId(Roo.id(hd2));
+ if (hd2 !== false) {
+ this.setOuterHandleElId(Roo.id(hd2));
+ }
+
this.scroll = false;
};
Roo.extend(Roo.grid.SplitDragZone, Roo.dd.DDProxy, {
b4StartDrag : function(x, y){
this.view.headersDisabled = true;
- this.proxy.setHeight(this.view.mainWrap.getHeight());
+ var h = this.view.mainWrap ? this.view.mainWrap.getHeight() : (
+ this.view.headEl.getHeight() + this.view.bodyEl.getHeight()
+ );
+ this.proxy.setHeight(h);
+
+ // for old system colWidth really stored the actual width?
+ // in bootstrap we tried using xs/ms/etc.. to do % sizing?
+ // which in reality did not work.. - it worked only for fixed sizes
+ // for resizable we need to use actual sizes.
var w = this.cm.getColumnWidth(this.cellIndex);
+ if (!this.view.mainWrap) {
+ // bootstrap.
+ w = this.view.getHeaderIndex(this.cellIndex).getWidth();
+ }
+
+
+
+ // this was w-this.grid.minColumnWidth;
+ // doesnt really make sense? - w = thie curren width or the rendered one?
var minw = Math.max(w-this.grid.minColumnWidth, 0);
this.resetConstraints();
this.setXConstraint(minw, 1000);
this.minX = x - minw;
this.maxX = x + 1000;
this.startPos = x;
+ if (!this.view.mainWrap) { // this is Bootstrap code..
+ this.getDragEl().style.display='block';
+ }
+
Roo.dd.DDProxy.prototype.b4StartDrag.call(this, x, y);
},
this.view.headersDisabled = false;
var endX = Math.max(this.minX, Roo.lib.Event.getPageX(e));
var diff = endX - this.startPos;
- this.view.onColumnSplitterMoved(this.cellIndex, this.cm.getColumnWidth(this.cellIndex)+diff);
+ //
+ var w = this.cm.getColumnWidth(this.cellIndex);
+ if (!this.view.mainWrap) {
+ w = 0;
+ }
+ this.view.onColumnSplitterMoved(this.cellIndex, w+diff);
},
autoOffset : function(){
}
}
+ if (sm.getSelections && sm.getSelections().length < 1) {
+ return false;
+ }
+
+ // before it used to all dragging of unseleted... - now we dont do that.
if(rowIndex !== false){
// if editorgrid..
grid: this.grid,
ddel: this.ddel,
rowIndex: rowIndex,
- selections:sm.getSelections ? sm.getSelections() : (
- sm.getSelectedCell() ? [ this.grid.ds.getAt(sm.getSelectedCell()[0]) ] : []
- )
+ selections: sm.getSelections ? sm.getSelections() : (
+ sm.getSelectedCell() ? [ this.grid.ds.getAt(sm.getSelectedCell()[0]) ] : [])
};
}
return false;
},
-
+
+
onInitDrag : function(e){
var data = this.dragData;
this.ddel.innerHTML = this.grid.getDragDropText();
/**
* The config passed into the constructor
*/
- this.config = config;
+ this.config = []; //config;
this.lookup = {};
// if no id, create one
// if the column does not have a dataIndex mapping,
// map it to the order it is in the config
for(var i = 0, len = config.length; i < len; i++){
- var c = config[i];
- if(typeof c.dataIndex == "undefined"){
- c.dataIndex = i;
- }
- if(typeof c.renderer == "string"){
- c.renderer = Roo.util.Format[c.renderer];
- }
- if(typeof c.id == "undefined"){
- c.id = Roo.id();
- }
- if(c.editor && c.editor.xtype){
- c.editor = Roo.factory(c.editor, Roo.grid);
- }
- if(c.editor && c.editor.isFormField){
- c.editor = new Roo.grid.GridEditor(c.editor);
- }
- this.lookup[c.id] = c;
+ this.addColumn(config[i]);
+
}
/**
};
Roo.extend(Roo.grid.ColumnModel, Roo.util.Observable, {
/**
- * @cfg {String} header The header text to display in the Grid view.
+ * @cfg {String} header [required] The header text to display in the Grid view.
+ */
+ /**
+ * @cfg {String} xsHeader Header at Bootsrap Extra Small width (default for all)
+ */
+ /**
+ * @cfg {String} smHeader Header at Bootsrap Small width
+ */
+ /**
+ * @cfg {String} mdHeader Header at Bootsrap Medium width
+ */
+ /**
+ * @cfg {String} lgHeader Header at Bootsrap Large width
+ */
+ /**
+ * @cfg {String} xlHeader Header at Bootsrap extra Large width
*/
/**
- * @cfg {String} dataIndex (Optional) The name of the field in the grid's {@link Roo.data.Store}'s
+ * @cfg {String} dataIndex The name of the field in the grid's {@link Roo.data.Store}'s
* {@link Roo.data.Record} definition from which to draw the column's value. If not
* specified, the column's index is used as an index into the Record's data Array.
*/
/**
- * @cfg {Number} width (Optional) The initial width in pixels of the column. Using this
+ * @cfg {Number} width The initial width in pixels of the column. Using this
* instead of {@link Roo.grid.Grid#autoSizeColumns} is more efficient.
*/
/**
- * @cfg {Boolean} sortable (Optional) True if sorting is to be allowed on this column.
+ * @cfg {Boolean} sortable True if sorting is to be allowed on this column.
* Defaults to the value of the {@link #defaultSortable} property.
* Whether local/remote sorting is used is specified in {@link Roo.data.Store#remoteSort}.
*/
/**
- * @cfg {Boolean} locked (Optional) True to lock the column in place while scrolling the Grid. Defaults to false.
+ * @cfg {Boolean} locked True to lock the column in place while scrolling the Grid. Defaults to false.
*/
/**
- * @cfg {Boolean} fixed (Optional) True if the column width cannot be changed. Defaults to false.
+ * @cfg {Boolean} fixed True if the column width cannot be changed. Defaults to false.
*/
/**
- * @cfg {Boolean} resizable (Optional) False to disable column resizing. Defaults to true.
+ * @cfg {Boolean} resizable False to disable column resizing. Defaults to true.
*/
/**
- * @cfg {Boolean} hidden (Optional) True to hide the column. Defaults to false.
+ * @cfg {Boolean} hidden True to hide the column. Defaults to false.
*/
/**
- * @cfg {Function} renderer (Optional) A function used to generate HTML markup for a cell
+ * @cfg {Function} renderer A function used to generate HTML markup for a cell
* given the cell's data value. See {@link #setRenderer}. If not specified, the
- * default renderer uses the raw data value. If an object is returned (bootstrap only)
+ * default renderer returns the escaped data value. If an object is returned (bootstrap only)
* then it is treated as a Roo Component object instance, and it is rendered after the initial row is rendered
*/
/**
- * @cfg {Roo.grid.GridEditor} editor (Optional) For grid editors - returns the grid editor
+ * @cfg {Roo.grid.GridEditor} editor For grid editors - returns the grid editor
+ */
+ /**
+ * @cfg {String} align (left|right) Set the CSS text-align property of the column. Defaults to undefined (left).
*/
/**
- * @cfg {String} align (Optional) Set the CSS text-align property of the column. Defaults to undefined.
+ * @cfg {String} valign (top|bottom|middle) Set the CSS vertical-align property of the column (eg. middle, top, bottom etc). Defaults to undefined (middle)
*/
/**
- * @cfg {String} cursor (Optional)
+ * @cfg {String} cursor ( auto|default|none|context-menu|help|pointer|progress|wait|cell|crosshair|text|vertical-text|alias|copy|move|no-drop|not-allowed|e-resize|n-resize|ne-resize|nw-resize|s-resize|se-resize|sw-resize|w-resize|ew-resize|ns-resize|nesw-resize|nwse-resize|col-resize|row-resize|all-scroll|zoom-in|zoom-out|grab|grabbing)
*/
/**
- * @cfg {String} tooltip (Optional)
+ * @cfg {String} tooltip mouse over tooltip text
*/
/**
- * @cfg {Number} xs (Optional)
+ * @cfg {Number} xs can be '0' for hidden at this size (number less than 12)
*/
/**
- * @cfg {Number} sm (Optional)
+ * @cfg {Number} sm can be '0' for hidden at this size (number less than 12)
*/
/**
- * @cfg {Number} md (Optional)
+ * @cfg {Number} md can be '0' for hidden at this size (number less than 12)
*/
/**
- * @cfg {Number} lg (Optional)
+ * @cfg {Number} lg can be '0' for hidden at this size (number less than 12)
+ */
+ /**
+ * @cfg {Number} xl can be '0' for hidden at this size (number less than 12)
*/
/**
* Returns the id of the column at the specified index.
/**
- * Returns the column for a specified dataIndex.
+ * Returns the column Object for a specified dataIndex.
* @param {String} dataIndex The column dataIndex
* @return {Object|Boolean} the column or false if not found
*/
/**
* Returns the width for the specified column.
* @param {Number} col The column index
+ * @param (optional) {String} gridSize bootstrap width size.
* @return {Number}
*/
- getColumnWidth : function(col){
- return this.config[col].width * 1 || this.defaultWidth;
+ getColumnWidth : function(col, gridSize)
+ {
+ var cfg = this.config[col];
+
+ if (typeof(gridSize) == 'undefined') {
+ return cfg.width * 1 || this.defaultWidth;
+ }
+ if (gridSize === false) { // if we set it..
+ return cfg.width || false;
+ }
+ var sizes = ['xl', 'lg', 'md', 'sm', 'xs'];
+
+ for(var i = sizes.indexOf(gridSize); i < sizes.length; i++) {
+ if (typeof(cfg[ sizes[i] ] ) == 'undefined') {
+ continue;
+ }
+ return cfg[ sizes[i] ];
+ }
+ return 1;
+
},
/**
*/
setEditor : function(col, editor){
this.config[col].editor = editor;
+ },
+ /**
+ * Add a column (experimental...) - defaults to adding to the end..
+ * @param {Object} config
+ */
+ addColumn : function(c)
+ {
+
+ var i = this.config.length;
+ this.config[i] = c;
+
+ if(typeof c.dataIndex == "undefined"){
+ c.dataIndex = i;
+ }
+ if(typeof c.renderer == "string"){
+ c.renderer = Roo.util.Format[c.renderer];
+ }
+ if(typeof c.id == "undefined"){
+ c.id = Roo.id();
+ }
+ if(c.editor && c.editor.xtype){
+ c.editor = Roo.factory(c.editor, Roo.grid);
+ }
+ if(c.editor && c.editor.isFormField){
+ c.editor = new Roo.grid.GridEditor(c.editor);
+ }
+ this.lookup[c.id] = c;
}
+
});
-Roo.grid.ColumnModel.defaultRenderer = function(value){
+Roo.grid.ColumnModel.defaultRenderer = function(value)
+{
+ if(typeof value == "object") {
+ return value;
+ }
if(typeof value == "string" && value.length < 1){
return " ";
}
- return value;
+
+ return String.format("{0}", value);
};
// Alias for backwards compatibility
/**
* @class Roo.grid.AbstractSelectionModel
* @extends Roo.util.Observable
+ * @abstract
* Abstract base class for grid SelectionModels. It provides the interface that should be
* implemented by descendant classes. This class should not be directly instantiated.
* @constructor
this.addEvents({
/**
- * @event selectionchange
- * Fires when the selection changes
- * @param {SelectionModel} this
- */
- "selectionchange" : true,
- /**
- * @event afterselectionchange
- * Fires after the selection changes (eg. by key press or clicking)
- * @param {SelectionModel} this
- */
- "afterselectionchange" : true,
- /**
- * @event beforerowselect
- * Fires when a row is selected being selected, return false to cancel.
- * @param {SelectionModel} this
- * @param {Number} rowIndex The selected index
- * @param {Boolean} keepExisting False if other selections will be cleared
- */
- "beforerowselect" : true,
- /**
- * @event rowselect
- * Fires when a row is selected.
- * @param {SelectionModel} this
- * @param {Number} rowIndex The selected index
- * @param {Roo.data.Record} r The record
- */
- "rowselect" : true,
- /**
- * @event rowdeselect
- * Fires when a row is deselected.
- * @param {SelectionModel} this
- * @param {Number} rowIndex The selected index
- */
+ * @event selectionchange
+ * Fires when the selection changes
+ * @param {SelectionModel} this
+ */
+ "selectionchange" : true,
+ /**
+ * @event afterselectionchange
+ * Fires after the selection changes (eg. by key press or clicking)
+ * @param {SelectionModel} this
+ */
+ "afterselectionchange" : true,
+ /**
+ * @event beforerowselect
+ * Fires when a row is selected being selected, return false to cancel.
+ * @param {SelectionModel} this
+ * @param {Number} rowIndex The selected index
+ * @param {Boolean} keepExisting False if other selections will be cleared
+ */
+ "beforerowselect" : true,
+ /**
+ * @event rowselect
+ * Fires when a row is selected.
+ * @param {SelectionModel} this
+ * @param {Number} rowIndex The selected index
+ * @param {Roo.data.Record} r The record
+ */
+ "rowselect" : true,
+ /**
+ * @event rowdeselect
+ * Fires when a row is deselected.
+ * @param {SelectionModel} this
+ * @param {Number} rowIndex The selected index
+ */
"rowdeselect" : true
});
Roo.grid.RowSelectionModel.superclass.constructor.call(this);
}else{ // allow click to work like normal
this.grid.on("rowclick", this.handleDragableRowClick, this);
}
-
+ // bootstrap does not have a view..
+ var view = this.grid.view ? this.grid.view : this.grid;
this.rowNav = new Roo.KeyNav(this.grid.getGridEl(), {
"up" : function(e){
if(!e.shiftKey){
}else if(this.last !== false && this.lastActive !== false){
var last = this.last;
this.selectRange(this.last, this.lastActive-1);
- this.grid.getView().focusRow(this.lastActive);
+ view.focusRow(this.lastActive);
if(last !== false){
this.last = last;
}
}else if(this.last !== false && this.lastActive !== false){
var last = this.last;
this.selectRange(this.last, this.lastActive+1);
- this.grid.getView().focusRow(this.lastActive);
+ view.focusRow(this.lastActive);
if(last !== false){
this.last = last;
}
scope: this
});
- var view = this.grid.view;
+
view.on("refresh", this.onRefresh, this);
view.on("rowupdated", this.onRowUpdated, this);
view.on("rowremoved", this.onRemove, this);
// private
onRefresh : function(){
- var ds = this.grid.dataSource, i, v = this.grid.view;
+ var ds = this.grid.ds, i, v = this.grid.view;
var s = this.selections;
s.each(function(r){
if((i = ds.indexOfId(r.id)) != -1){
if(!keepExisting){
this.clearSelections();
}
- var ds = this.grid.dataSource;
+ var ds = this.grid.ds;
for(var i = 0, len = records.length; i < len; i++){
this.selectRow(ds.indexOf(records[i]), true);
}
* @param {Boolean} keepExisting (optional) True to keep existing selections
*/
selectLastRow : function(keepExisting){
- this.selectRow(this.grid.dataSource.getCount() - 1, keepExisting);
+ this.selectRow(this.grid.ds.getCount() - 1, keepExisting);
},
/**
* @param {Boolean} keepExisting (optional) True to keep existing selections
*/
selectNext : function(keepExisting){
- if(this.last !== false && (this.last+1) < this.grid.dataSource.getCount()){
+ if(this.last !== false && (this.last+1) < this.grid.ds.getCount()){
this.selectRow(this.last+1, keepExisting);
- this.grid.getView().focusRow(this.last);
+ var view = this.grid.view ? this.grid.view : this.grid;
+ view.focusRow(this.last);
}
},
selectPrevious : function(keepExisting){
if(this.last){
this.selectRow(this.last-1, keepExisting);
- this.grid.getView().focusRow(this.last);
+ var view = this.grid.view ? this.grid.view : this.grid;
+ view.focusRow(this.last);
}
},
return;
}
if(fast !== true){
- var ds = this.grid.dataSource;
+ var ds = this.grid.ds;
var s = this.selections;
s.each(function(r){
this.deselectRow(ds.indexOfId(r.id));
return;
}
this.selections.clear();
- for(var i = 0, len = this.grid.dataSource.getCount(); i < len; i++){
+ for(var i = 0, len = this.grid.ds.getCount(); i < len; i++){
this.selectRow(i, true);
}
},
* @return {Boolean}
*/
isSelected : function(index){
- var r = typeof index == "number" ? this.grid.dataSource.getAt(index) : index;
+ var r = typeof index == "number" ? this.grid.ds.getAt(index) : index;
return (r && this.selections.key(r.id) ? true : false);
},
},
// private
- handleMouseDown : function(e, t){
- var view = this.grid.getView(), rowIndex;
+ handleMouseDown : function(e, t)
+ {
+ var view = this.grid.view ? this.grid.view : this.grid;
+ var rowIndex;
if(this.isLocked() || (rowIndex = view.findRowIndex(t)) === false){
return;
};
{
if(e.button === 0 && !e.shiftKey && !e.ctrlKey) {
this.selectRow(rowIndex, false);
- grid.view.focusRow(rowIndex);
+ var view = this.grid.view ? this.grid.view : this.grid;
+ view.focusRow(rowIndex);
this.fireEvent("afterselectionchange", this);
}
},
* @param {Boolean} keepExisting (optional) True to keep existing selections
*/
selectRow : function(index, keepExisting, preventViewNotify){
- if(this.locked || (index < 0 || index >= this.grid.dataSource.getCount())) {
+ if(this.locked || (index < 0 || index >= this.grid.ds.getCount())) {
return;
}
if(this.fireEvent("beforerowselect", this, index, keepExisting) !== false){
if(!keepExisting || this.singleSelect){
this.clearSelections();
}
- var r = this.grid.dataSource.getAt(index);
+ var r = this.grid.ds.getAt(index);
this.selections.add(r);
this.last = this.lastActive = index;
if(!preventViewNotify){
- this.grid.getView().onRowSelect(index);
+ var view = this.grid.view ? this.grid.view : this.grid;
+ view.onRowSelect(index);
}
this.fireEvent("rowselect", this, index, r);
this.fireEvent("selectionchange", this);
if(this.lastActive == index){
this.lastActive = false;
}
- var r = this.grid.dataSource.getAt(index);
+ var r = this.grid.ds.getAt(index);
this.selections.remove(r);
if(!preventViewNotify){
- this.grid.getView().onRowDeselect(index);
+ var view = this.grid.view ? this.grid.view : this.grid;
+ view.onRowDeselect(index);
}
this.fireEvent("rowdeselect", this, index);
this.fireEvent("selectionchange", this);
/**
* @class Roo.grid.Calendar
- * @extends Roo.util.Grid
+ * @extends Roo.grid.Grid
* This class extends the Grid to provide a calendar widget
* <br><br>Usage:<pre><code>
var grid = new Roo.grid.Calendar("my-container-id", {
* True to create a single-use mask that is automatically destroyed after loading (useful for page loads),
* False to persist the mask element reference for multiple uses (e.g., for paged data widgets). Defaults to false.
*/
+ removeMask : false,
/**
* @cfg {String} msg
* The text to display in a centered loading message box (defaults to 'Loading...')
}
*/
-
-
- this.el.unmask(this.removeMask);
+ (function() { this.el.unmask(this.removeMask); }).defer(50, this);
},
// private
onLoad : function()
{
- this.el.unmask(this.removeMask);
+ (function() { this.el.unmask(this.removeMask); }).defer(50, this);
},
// private
onBeforeLoad : function(){
if(!this.disabled){
- this.el.mask(this.msg, this.msgCls);
+ (function() { this.el.mask(this.msg, this.msgCls); }).defer(50, this);
}
},
projects / roojs1 / blobdiff