/**
* @class Roo
* Roo core utilities and functions.
- * @singleton
+ * @static
*/
var Roo = {};
/**
{
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'
+ }
+
+ }
});
}
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;
}
-
});
}
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:
* @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;
};
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]);
+ //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);
}
},
* 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);
- 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());
}
});
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
}
}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)
/**
* @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'));
var enctype = form.getAttribute("enctype");
if (o.formData) {
- return this.doFormDataUpload(o,p,url);
+ return this.doFormDataUpload(o, url);
}
if(o.isUpload || (enctype && enctype.toLowerCase() == 'multipart/form-data')){
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){
// this is a 'formdata version???'
- doFormDataUpload : function(o, ps, url)
+ doFormDataUpload : function(o, url)
{
- var form = Roo.getDom(o.form);
- form.enctype = form.encoding = 'multipart/form-data';
- var formData = o.formData === true ? new FormData(form) : o.formData;
+ 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,
//Roo.lib.Ajax.defaultPostHeader = null;
Roo.lib.Ajax.useDefaultHeader = false;
- this.transId = Roo.lib.Ajax.request( "POST", url, cb, o.formData, o);
+ this.transId = Roo.lib.Ajax.request( "POST", url, cb, formData, o);
Roo.lib.Ajax.useDefaultHeader = true;
* 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++){
* 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;
*/
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();
* @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.
- *
- * 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
+ * @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);
-
- var tree = this._tree ? this._tree() : this.tree();
-
- 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);
-
+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();
+};
- // 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 };
+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.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.shim){
+ return this.shim;
}
-
- if (!this.parent.el) {
- // probably an old style ctor, which has been disabled.
- return;
-
+ var shim = shims.shift();
+ if(!shim){
+ shim = this.createShim();
+ shim.enableDisplayMode('block');
+ shim.dom.style.display = 'none';
+ shim.dom.style.visibility = 'visible';
}
- // 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;
+ var pn = this.dom.parentNode;
+ if(shim.dom.parentNode != pn){
+ pn.insertBefore(shim.dom, this.dom);
}
-
- 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;
-
- }
-
-});
+ shim.setStyle('z-index', this.getZIndex()-2);
+ this.shim = shim;
+ return shim;
+ },
+
+ hideShim : function(){
+ if(this.shim){
+ this.shim.setDisplayed(false);
+ shims.push(this.shim);
+ delete this.shim;
+ }
+ },
+
+ 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);
+ }
+ }
+ },
+
+ // 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);
+ }
+ 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);
+ }
+
+ }
+ },
+
+ // private
+ destroy : function(){
+ this.hideShim();
+ if(this.shadow){
+ this.shadow.hide();
+ }
+ this.removeAllListeners();
+ var pn = this.dom.parentNode;
+ if(pn){
+ pn.removeChild(this.dom);
+ }
+ Roo.Element.uncache(this.id);
+ },
+
+ 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();
+ }
+ this.hideShim();
+ },
+
+ // 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
+ */
+ 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, {
+ /**
+ * @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);
+
+ var tree = this._tree ? this._tree() : this.tree();
+
+
+ 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);
+
+
+ // 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;
+
+ }
+ // 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, {
/**
* 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
+ * @static
*/
Roo.dd.DragDropMgr = function() {
* @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
+ * @static
*/
Roo.dd.ScrollManager = function(){
var ddm = Roo.dd.DragDropMgr;
* @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
+ * @static
*/
Roo.dd.Registry = function(){
var elements = {};
* 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
+ * 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
* 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
+ * 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
* 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
/**
* @class Roo.data.SortTypes
- * @singleton
+ * @static
* Defines the default sorting (casting?) comparison functions used when sorting data.
*/
Roo.data.SortTypes = {
*/
/**
- * @cfg {Roo.data.DataProxy} proxy The Proxy object which provides access to a data object.
+ * @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.Reader} reader The Reader object which processes the data object and returns
+ * @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.
*/
/**
// private
// Called as a callback by the Reader during a load operation.
loadRecords : function(o, options, success){
- if(!o || success === false){
+
+ if(!o){
if(success !== false){
this.fireEvent("load", this, [], options, o);
}
* @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
* @param {Object} config
*/
/**
* @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.
*/
/**
* @class Roo.data.DataProxy
- * @extends Roo.data.Observable
+ * @extends Roo.util.Observable
+ * @abstract
* This class is an abstract base class for implementations which provide retrieval of
* unformatted data objects.<br>
* <p>
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, null, o.request.arg, false);
+ o.request.callback.call(o.request.scope, o, o.request.arg, false);
return;
}
}
var records = [];
for(var i = 0; i < c; i++){
- var n = root[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 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;
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
- };
+ 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
+ };
},
// 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;
-
+ // expect rec just to be an array.. eg [a,b,c, [...] << cn ]
+ return typeof(rec.data.cn) == 'undefined' ? [] : rec.data.cn;
+
}
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}
- */
- isLeaf : function(){
- return this.leaf === true;
- },
-
- // private
- setFirstChild : function(node){
- this.firstChild = node;
- },
-
- //private
- setLastChild : function(node){
- this.lastChild = node;
- },
-
-
- /**
- * Returns true if this node is the last child of its parent
- * @return {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}
- */
- isFirst : function(){
- return (!this.parentNode ? true : this.parentNode.firstChild == this);
- },
-
- hasChildNodes : function(){
- return !this.isLeaf() && this.childNodes.length > 0;
- },
-
- /**
- * 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
- */
- 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;
- }
- },
-
- /**
- * 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;
- }
- 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;
- },
-
- /**
- * 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;
- }
-
- 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{
- 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;
- },
-
- /**
- * Returns the child node at the specified index.
- * @param {Number} index
- * @return {Node}
- */
- 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;
- }
- p = p.parentNode;
- }
- }
- return this.ownerTree;
- },
-
- /**
- * 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;
- },
-
- // 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);
- }
- }
- },
-
- /**
- * 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);
- },
-
- /**
- * 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;
- }
- },
-
- /**
- * 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);
- }
- }
- },
-
- /**
- * 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;
- }
- }
- },
-
- /**
- * 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;
- },
-
- /**
- * 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;
- },
-
- /**
- * 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);
- }
+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 an ancestor (at any point) of the passed node.
- * @param {Node} node
+ * Returns true if this node is a leaf
* @return {Boolean}
*/
- contains : function(node){
- return node.isAncestor(this);
+ isLeaf : function(){
+ return this.leaf === true;
},
- /**
- * 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;
+ // private
+ setFirstChild : function(node){
+ this.firstChild = node;
},
- toString : function(){
- return "[Node"+(this.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">
- */
- (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)
- * @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.
- */
-
-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 = [];
+ //private
+ setLastChild : function(node){
+ this.lastChild = node;
+ },
-Roo.extend(Roo.Layer, Roo.Element, {
- getZIndex : function(){
- return this.zindex || parseInt(this.getStyle("z-index"), 10) || 11000;
+ /**
+ * Returns true if this node is the last child of its parent
+ * @return {Boolean}
+ */
+ isLast : function(){
+ return (!this.parentNode ? true : this.parentNode.lastChild == this);
},
- 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';
- }
- 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;
+ /**
+ * Returns true if this node is the first child of its parent
+ * @return {Boolean}
+ */
+ isFirst : function(){
+ return (!this.parentNode ? true : this.parentNode.firstChild == this);
},
- hideShim : function(){
- if(this.shim){
- this.shim.setDisplayed(false);
- shims.push(this.shim);
- delete this.shim;
- }
+ hasChildNodes : function(){
+ return !this.isLeaf() && this.childNodes.length > 0;
},
- disableShadow : function(){
- if(this.shadow){
- this.shadowDisabled = true;
- this.shadow.hide();
- this.lastShadowOffset = this.shadowOffset;
- this.shadowOffset = 0;
+ /**
+ * 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
+ */
+ appendChild : function(node){
+ var multi = false;
+ if(node instanceof Array){
+ multi = node;
+ }else if(arguments.length > 1){
+ multi = arguments;
}
- },
-
- enableShadow : function(show){
- if(this.shadow){
- this.shadowDisabled = false;
- this.shadowOffset = this.lastShadowOffset;
- delete this.lastShadowOffset;
- if(show){
- this.sync(true);
+
+ // 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]);
}
- }
- },
-
- // 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);
- }
- 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();
+ }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;
}
- sh.setSize(w, h);
- sh.setLeftTop(l, t);
+ 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
- destroy : function(){
- this.hideShim();
- if(this.shadow){
- this.shadow.hide();
+ /**
+ * 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;
}
- this.removeAllListeners();
- var pn = this.dom.parentNode;
- if(pn){
- pn.removeChild(this.dom);
+ if(this.fireEvent("beforeremove", this.ownerTree, this, node) === false){
+ return 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);
- },
+ // remove it from childNodes collection
+ this.childNodes.splice(index, 1);
- // private
- hideUnders : function(negOffset){
- if(this.shadow){
- this.shadow.hide();
+ // update siblings
+ if(node.previousSibling){
+ node.previousSibling.nextSibling = node.nextSibling;
+ }
+ if(node.nextSibling){
+ node.nextSibling.previousSibling = node.previousSibling;
}
- this.hideShim();
- },
-
- // 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();
- }
+ // update child refs
+ if(this.firstChild == node){
+ this.setFirstChild(node.nextSibling);
+ }
+ if(this.lastChild == node){
+ this.setLastChild(node.previousSibling);
}
- },
- isVisible : function(){
- return this.visible;
+ 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;
},
- // 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]);
+ /**
+ * 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
- hideAction : function(){
- this.visible = false;
- if(this.useDisplay === true){
- this.setDisplayed(false);
- }else{
- this.setLeftTop(-10000,-10000);
+ 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;
- // overridden Element method
- setVisible : function(v, a, d, c, e){
- if(v){
- this.showAction();
+ // when moving internally, indexes will change after remove
+ if(oldParent == this && this.childNodes.indexOf(node) < index){
+ refIndex--;
}
- 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();
+
+ // 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;
},
- 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();
- }
+ /**
+ * Returns the child node at the specified index.
+ * @param {Number} index
+ * @return {Node}
+ */
+ item : function(index){
+ return this.childNodes[index];
},
- // overridden Element method
- setLeft : function(left){
- this.storeLeftTop(left, this.getTop(true));
- supr.setLeft.apply(this, arguments);
- this.sync();
+ /**
+ * 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;
},
- setTop : function(top){
- this.storeLeftTop(this.getLeft(true), top);
- supr.setTop.apply(this, arguments);
- this.sync();
+ /**
+ * 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);
},
- setLeftTop : function(left, top){
- this.storeLeftTop(left, top);
- supr.setLeftTop.apply(this, arguments);
- this.sync();
+ /**
+ * 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;
+ }
+ p = p.parentNode;
+ }
+ }
+ return this.ownerTree;
},
- 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();
+ /**
+ * 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;
},
// private
- createCB : function(c){
- var el = this;
- return function(){
- el.constrainXY();
- el.sync(true);
- if(c){
- c();
+ 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);
+ }
+ }
},
- // overridden Element method
- setX : function(x, a, d, c, e){
- this.setXY([x, this.getY()], a, d, c, e);
+ /**
+ * 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);
},
- // overridden Element method
- setY : function(y, a, d, c, e){
- this.setXY([this.getX(), y], a, d, c, e);
+ /**
+ * 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;
+ }
},
- // 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();
+ /**
+ * 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);
+ }
}
},
- // 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();
+ /**
+ * 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;
+ }
}
},
- // 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();
+ /**
+ * 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;
},
- // 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);
+ /**
+ * 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 this;
+ return null;
},
-
+
/**
- * 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
+ * Sorts this nodes children using the supplied sort function
+ * @param {Function} fn
+ * @param {Object} scope (optional)
*/
- setZIndex : function(zindex){
- this.zindex = zindex;
- this.setStyle("z-index", zindex + 2);
- if(this.shadow){
- this.shadow.setZIndex(zindex + 1);
+ 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);
+ }
+ }
}
- if(this.shim){
- this.shim.setStyle("z-index", zindex);
+ },
+
+ /**
+ * 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.
* frame: Shadow displays equally on all four sides<br />
* drop: Traditional bottom-right drop shadow (default)
*/
+ mode: false,
/**
* @cfg {String} offset
* The number of pixels to offset the shadow from the element (defaults to 4)
*/
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,
/**
* @class Roo.Toolbar
+ * @children Roo.Toolbar.Item 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 || "";
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.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)
/**
* @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
animEl: 'elId'
});
</code></pre>
- * @singleton
+ * @static
*/
Roo.MessageBox = function(){
var dlg, opt, mask, waitTimer;
/**
* @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;
/**
* @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>
* @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
+ * @cfg {Roo.form.TextField} field [required] The field configuration
*
*
*/
/**
* @class Roo.tree.ColumnTree
- * @extends Roo.data.TreePanel
+ * @extends Roo.tree.TreePanel
* @cfg {Object} columns Including width, header, renderer, cls, dataIndex
* @cfg {int} borderWidth compined right/left border allowance
* @constructor
/**
* @class Roo.menu.Menu
* @extends Roo.util.Observable
+ * @children Roo.menu.BaseItem
* 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
/**
* @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
+ * @static
*/
Roo.menu.MenuMgr = function(){
var menus, active, groups = {}, attached = false, lastShow = new Date();
/**
* @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
/**
* @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
Roo.extend(Roo.menu.TextItem, Roo.menu.BaseItem, {
/**
- * @cfg {Boolean} text Text to show on item.
+ * @cfg {String} text Text to show on item.
*/
text : '',
}
};
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.
}
this.el = ct.createChild(cfg, position);
}
+ },
+ /*
+ * setHTML
+ * @param {String} html update the Contents of the element.
+ */
+ setHTML : function(html)
+ {
+ this.fieldEl.dom.innerHTML = html;
}
});/*
Roo.extend(Roo.form.ComboBoxArray, Roo.form.TextField,
{
/**
- * @cfg {Roo.form.Combo} combo The combo box that is wrapped
+ * @cfg {Roo.form.ComboBox} combo [required] The combo box that is wrapped
*/
lastData : false,
*/
stylesheets: 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,
// id of frame..
frameId: false,
st = '<style type="text/css">' +
'body{border:0;margin:0;padding:3px;height:98%;cursor:text;}' +
'</style>';
- } else {
- st = '<style type="text/css">' +
- this.stylesheets +
- '</style>';
+ } else {
+ for (var i in this.stylesheets) {
+ st += '<link rel="stylesheet" href="' + this.stylesheets[i] +'" type="text/css">';
+ }
+
}
st += '<style type="text/css">' +
//<style type="text/css">' +
//'body{border:0;margin:0;padding:3px;height:98%;cursor:text;}' +
//'</style>' +
- ' </head><body class="' + cls + '"></body></html>';
+ ' </head><body contenteditable="true" data-enable-grammerly="true" class="' + cls + '"></body></html>';
},
// private
return;
}
if (node.nodeName == "#comment") {
- node.parentNode.removeChild(node);
+ if (!this.allowComments) {
+ node.parentNode.removeChild(node);
+ }
// clean up silly Windows -- stuff?
return;
}
if (v.match(/^#/)) {
return;
}
+ if (v.match(/^\{/)) { // allow template editing.
+ return;
+ }
// Roo.log("(REMOVE TAG)"+ node.tagName +'.' + n + '=' + v);
node.removeAttribute(n);
Roo.HtmlEditorCore.swapCodes =[
- [ 8211, "--" ],
- [ 8212, "--" ],
+ [ 8211, "–" ],
+ [ 8212, "—" ],
[ 8216, "'" ],
[ 8217, "'" ],
[ 8220, '"' ],
*
*/
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,
// id of frame..
frameId: false,
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
/**
* @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.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.
*/
/**
* @class Roo.form.Layout
* @extends Roo.Component
+ * @children Roo.form.Column Roo.form.Row Roo.form.Field Roo.Button Roo.form.TextItem
* Creates a 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
* 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).
/**
* @class Roo.ContentPanel
* @extends Roo.util.Observable
+ * @children Roo.form.Form Roo.JsonView Roo.View
+ * @parent Roo.BorderLayout Roo.LayoutDialog builder-top
* 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 [required] (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 {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;
* 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)
-
-
-
-
-
-
/**
* @class Roo.TreePanel
* @extends Roo.ContentPanel
+ * 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
+
});
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.grid.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 {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
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;
);
*/
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");
}
},
- 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} 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} tooltip (Optional)
*/
/**
- * @cfg {Number} xs (Optional)
+ * @cfg {Number} xs (Optional) can be '0' for hidden at this size (number less than 12)
*/
/**
- * @cfg {Number} sm (Optional)
+ * @cfg {Number} sm (Optional) can be '0' for hidden at this size (number less than 12)
*/
/**
- * @cfg {Number} md (Optional)
+ * @cfg {Number} md (Optional) can be '0' for hidden at this size (number less than 12)
*/
/**
- * @cfg {Number} lg (Optional)
+ * @cfg {Number} lg (Optional) can be '0' for hidden at this size (number less than 12)
+ */
+ /**
+ * @cfg {Number} xl (Optional) 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)
/**
* @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...')
projects / roojs1 / blobdiff