-
- *
- A Number specifying the new width in the {@link #getEl Element}'s {@link Ext.Element#defaultUnit}s (by default, pixels). + * @param {Mixed} width The new width to set. This may be one of:
- A Number specifying the new width in the {@link #getEl Element}'s {@link Ext.Element#defaultUnit defaultUnit}s (by default, pixels). *
- A String used to set the CSS width style. *
- A Number specifying the new height in the {@link #getEl Element}'s {@link Ext.Element#defaultUnit}s (by default, pixels). + * @param {Mixed} height The new height to set. This may be one of:
- A Number specifying the new height in the {@link #getEl Element}'s {@link Ext.Element#defaultUnit defaultUnit}s (by default, pixels). *
- A String used to set the CSS height style. *
- undefined to leave the height unchanged. *
-
+ *
-
- *
-
+ *
- * Usage: - *
-var split = new Ext.SplitBar("elementToDrag", "elementToSize",
- Ext.SplitBar.HORIZONTAL, Ext.SplitBar.LEFT);
-split.setAdapter(new Ext.SplitBar.AbsoluteLayoutAdapter("container"));
-split.minSize = 100;
-split.maxSize = 600;
-split.animate = true;
-split.on('moved', splitterMoved);
-Base class for any {@link Ext.BoxComponent} that may contain other Components. Containers handle the - * basic behavior of containing items, namely adding, inserting and removing items.
- * - *The most commonly used Container classes are {@link Ext.Panel}, {@link Ext.Window} and {@link Ext.TabPanel}.
- * If you do not need the capabilities offered by the aforementioned classes you can create a lightweight
- * Container to be encapsulated by an HTML element to your specifications by using the
- * {@link Ext.Component#autoEl autoEl} config option. This is a useful technique when creating
- * embedded {@link Ext.layout.ColumnLayout column} layouts inside {@link Ext.form.FormPanel FormPanels}
- * for example.
The code below illustrates both how to explicitly create a Container, and how to implicitly
- * create one using the 'container' xtype:
-// explicitly create a Container
-var embeddedColumns = new Ext.Container({
- autoEl: 'div', // This is the default
- layout: 'column',
+Ext.reg('spacer', Ext.Spacer);/**
+ * @class Ext.SplitBar
+ * @extends Ext.util.Observable
+ * Creates draggable splitter bar functionality from two elements (element to be dragged and element to be resized).
+ *
+ * Usage:
+ *
+var split = new Ext.SplitBar("elementToDrag", "elementToSize",
+ Ext.SplitBar.HORIZONTAL, Ext.SplitBar.LEFT);
+split.setAdapter(new Ext.SplitBar.AbsoluteLayoutAdapter("container"));
+split.minSize = 100;
+split.maxSize = 600;
+split.animate = true;
+split.on('moved', splitterMoved);
+
+ * @constructor
+ * Create a new SplitBar
+ * @param {Mixed} dragElement The element to be dragged and act as the SplitBar.
+ * @param {Mixed} resizingElement The element to be resized based on where the SplitBar element is dragged
+ * @param {Number} orientation (optional) Either Ext.SplitBar.HORIZONTAL or Ext.SplitBar.VERTICAL. (Defaults to HORIZONTAL)
+ * @param {Number} placement (optional) Either Ext.SplitBar.LEFT or Ext.SplitBar.RIGHT for horizontal or
+ Ext.SplitBar.TOP or Ext.SplitBar.BOTTOM for vertical. (By default, this is determined automatically by the initial
+ position of the SplitBar).
+ */
+Ext.SplitBar = function(dragElement, resizingElement, orientation, placement, existingProxy){
+
+ /** @private */
+ this.el = Ext.get(dragElement, true);
+ this.el.dom.unselectable = "on";
+ /** @private */
+ this.resizingEl = Ext.get(resizingElement, true);
+
+ /**
+ * @private
+ * The orientation of the split. Either Ext.SplitBar.HORIZONTAL or Ext.SplitBar.VERTICAL. (Defaults to HORIZONTAL)
+ * Note: If this is changed after creating the SplitBar, the placement property must be manually updated
+ * @type Number
+ */
+ this.orientation = orientation || Ext.SplitBar.HORIZONTAL;
+
+ /**
+ * The increment, in pixels by which to move this SplitBar. When undefined, the SplitBar moves smoothly.
+ * @type Number
+ * @property tickSize
+ */
+ /**
+ * The minimum size of the resizing element. (Defaults to 0)
+ * @type Number
+ */
+ this.minSize = 0;
+
+ /**
+ * The maximum size of the resizing element. (Defaults to 2000)
+ * @type Number
+ */
+ this.maxSize = 2000;
+
+ /**
+ * Whether to animate the transition to the new size
+ * @type Boolean
+ */
+ this.animate = false;
+
+ /**
+ * Whether to create a transparent shim that overlays the page when dragging, enables dragging across iframes.
+ * @type Boolean
+ */
+ this.useShim = false;
+
+ /** @private */
+ this.shim = null;
+
+ if(!existingProxy){
+ /** @private */
+ this.proxy = Ext.SplitBar.createProxy(this.orientation);
+ }else{
+ this.proxy = Ext.get(existingProxy).dom;
+ }
+ /** @private */
+ this.dd = new Ext.dd.DDProxy(this.el.dom.id, "XSplitBars", {dragElId : this.proxy.id});
+
+ /** @private */
+ this.dd.b4StartDrag = this.onStartProxyDrag.createDelegate(this);
+
+ /** @private */
+ this.dd.endDrag = this.onEndProxyDrag.createDelegate(this);
+
+ /** @private */
+ this.dragSpecs = {};
+
+ /**
+ * @private The adapter to use to positon and resize elements
+ */
+ this.adapter = new Ext.SplitBar.BasicLayoutAdapter();
+ this.adapter.init(this);
+
+ if(this.orientation == Ext.SplitBar.HORIZONTAL){
+ /** @private */
+ this.placement = placement || (this.el.getX() > this.resizingEl.getX() ? Ext.SplitBar.LEFT : Ext.SplitBar.RIGHT);
+ this.el.addClass("x-splitbar-h");
+ }else{
+ /** @private */
+ this.placement = placement || (this.el.getY() > this.resizingEl.getY() ? Ext.SplitBar.TOP : Ext.SplitBar.BOTTOM);
+ this.el.addClass("x-splitbar-v");
+ }
+
+ this.addEvents(
+ /**
+ * @event resize
+ * Fires when the splitter is moved (alias for {@link #moved})
+ * @param {Ext.SplitBar} this
+ * @param {Number} newSize the new width or height
+ */
+ "resize",
+ /**
+ * @event moved
+ * Fires when the splitter is moved
+ * @param {Ext.SplitBar} this
+ * @param {Number} newSize the new width or height
+ */
+ "moved",
+ /**
+ * @event beforeresize
+ * Fires before the splitter is dragged
+ * @param {Ext.SplitBar} this
+ */
+ "beforeresize",
+
+ "beforeapply"
+ );
+
+ Ext.SplitBar.superclass.constructor.call(this);
+};
+
+Ext.extend(Ext.SplitBar, Ext.util.Observable, {
+ onStartProxyDrag : function(x, y){
+ this.fireEvent("beforeresize", this);
+ this.overlay = Ext.DomHelper.append(document.body, {cls: "x-drag-overlay", html: " "}, true);
+ this.overlay.unselectable();
+ this.overlay.setSize(Ext.lib.Dom.getViewWidth(true), Ext.lib.Dom.getViewHeight(true));
+ this.overlay.show();
+ Ext.get(this.proxy).setDisplayed("block");
+ var size = this.adapter.getElementSize(this);
+ this.activeMinSize = this.getMinimumSize();
+ this.activeMaxSize = this.getMaximumSize();
+ var c1 = size - this.activeMinSize;
+ var c2 = Math.max(this.activeMaxSize - size, 0);
+ if(this.orientation == Ext.SplitBar.HORIZONTAL){
+ this.dd.resetConstraints();
+ this.dd.setXConstraint(
+ this.placement == Ext.SplitBar.LEFT ? c1 : c2,
+ this.placement == Ext.SplitBar.LEFT ? c2 : c1,
+ this.tickSize
+ );
+ this.dd.setYConstraint(0, 0);
+ }else{
+ this.dd.resetConstraints();
+ this.dd.setXConstraint(0, 0);
+ this.dd.setYConstraint(
+ this.placement == Ext.SplitBar.TOP ? c1 : c2,
+ this.placement == Ext.SplitBar.TOP ? c2 : c1,
+ this.tickSize
+ );
+ }
+ this.dragSpecs.startSize = size;
+ this.dragSpecs.startPoint = [x, y];
+ Ext.dd.DDProxy.prototype.b4StartDrag.call(this.dd, x, y);
+ },
+
+ /**
+ * @private Called after the drag operation by the DDProxy
+ */
+ onEndProxyDrag : function(e){
+ Ext.get(this.proxy).setDisplayed(false);
+ var endPoint = Ext.lib.Event.getXY(e);
+ if(this.overlay){
+ Ext.destroy(this.overlay);
+ delete this.overlay;
+ }
+ var newSize;
+ if(this.orientation == Ext.SplitBar.HORIZONTAL){
+ newSize = this.dragSpecs.startSize +
+ (this.placement == Ext.SplitBar.LEFT ?
+ endPoint[0] - this.dragSpecs.startPoint[0] :
+ this.dragSpecs.startPoint[0] - endPoint[0]
+ );
+ }else{
+ newSize = this.dragSpecs.startSize +
+ (this.placement == Ext.SplitBar.TOP ?
+ endPoint[1] - this.dragSpecs.startPoint[1] :
+ this.dragSpecs.startPoint[1] - endPoint[1]
+ );
+ }
+ newSize = Math.min(Math.max(newSize, this.activeMinSize), this.activeMaxSize);
+ if(newSize != this.dragSpecs.startSize){
+ if(this.fireEvent('beforeapply', this, newSize) !== false){
+ this.adapter.setElementSize(this, newSize);
+ this.fireEvent("moved", this, newSize);
+ this.fireEvent("resize", this, newSize);
+ }
+ }
+ },
+
+ /**
+ * Get the adapter this SplitBar uses
+ * @return The adapter object
+ */
+ getAdapter : function(){
+ return this.adapter;
+ },
+
+ /**
+ * Set the adapter this SplitBar uses
+ * @param {Object} adapter A SplitBar adapter object
+ */
+ setAdapter : function(adapter){
+ this.adapter = adapter;
+ this.adapter.init(this);
+ },
+
+ /**
+ * Gets the minimum size for the resizing element
+ * @return {Number} The minimum size
+ */
+ getMinimumSize : function(){
+ return this.minSize;
+ },
+
+ /**
+ * Sets the minimum size for the resizing element
+ * @param {Number} minSize The minimum size
+ */
+ setMinimumSize : function(minSize){
+ this.minSize = minSize;
+ },
+
+ /**
+ * Gets the maximum size for the resizing element
+ * @return {Number} The maximum size
+ */
+ getMaximumSize : function(){
+ return this.maxSize;
+ },
+
+ /**
+ * Sets the maximum size for the resizing element
+ * @param {Number} maxSize The maximum size
+ */
+ setMaximumSize : function(maxSize){
+ this.maxSize = maxSize;
+ },
+
+ /**
+ * Sets the initialize size for the resizing element
+ * @param {Number} size The initial size
+ */
+ setCurrentSize : function(size){
+ var oldAnimate = this.animate;
+ this.animate = false;
+ this.adapter.setElementSize(this, size);
+ this.animate = oldAnimate;
+ },
+
+ /**
+ * Destroy this splitbar.
+ * @param {Boolean} removeEl True to remove the element
+ */
+ destroy : function(removeEl){
+ Ext.destroy(this.shim, Ext.get(this.proxy));
+ this.dd.unreg();
+ if(removeEl){
+ this.el.remove();
+ }
+ this.purgeListeners();
+ }
+});
+
+/**
+ * @private static Create our own proxy element element. So it will be the same same size on all browsers, we won't use borders. Instead we use a background color.
+ */
+Ext.SplitBar.createProxy = function(dir){
+ var proxy = new Ext.Element(document.createElement("div"));
+ document.body.appendChild(proxy.dom);
+ proxy.unselectable();
+ var cls = 'x-splitbar-proxy';
+ proxy.addClass(cls + ' ' + (dir == Ext.SplitBar.HORIZONTAL ? cls +'-h' : cls + '-v'));
+ return proxy.dom;
+};
+
+/**
+ * @class Ext.SplitBar.BasicLayoutAdapter
+ * Default Adapter. It assumes the splitter and resizing element are not positioned
+ * elements and only gets/sets the width of the element. Generally used for table based layouts.
+ */
+Ext.SplitBar.BasicLayoutAdapter = function(){
+};
+
+Ext.SplitBar.BasicLayoutAdapter.prototype = {
+ // do nothing for now
+ init : function(s){
+
+ },
+ /**
+ * Called before drag operations to get the current size of the resizing element.
+ * @param {Ext.SplitBar} s The SplitBar using this adapter
+ */
+ getElementSize : function(s){
+ if(s.orientation == Ext.SplitBar.HORIZONTAL){
+ return s.resizingEl.getWidth();
+ }else{
+ return s.resizingEl.getHeight();
+ }
+ },
+
+ /**
+ * Called after drag operations to set the size of the resizing element.
+ * @param {Ext.SplitBar} s The SplitBar using this adapter
+ * @param {Number} newSize The new size to set
+ * @param {Function} onComplete A function to be invoked when resizing is complete
+ */
+ setElementSize : function(s, newSize, onComplete){
+ if(s.orientation == Ext.SplitBar.HORIZONTAL){
+ if(!s.animate){
+ s.resizingEl.setWidth(newSize);
+ if(onComplete){
+ onComplete(s, newSize);
+ }
+ }else{
+ s.resizingEl.setWidth(newSize, true, .1, onComplete, 'easeOut');
+ }
+ }else{
+
+ if(!s.animate){
+ s.resizingEl.setHeight(newSize);
+ if(onComplete){
+ onComplete(s, newSize);
+ }
+ }else{
+ s.resizingEl.setHeight(newSize, true, .1, onComplete, 'easeOut');
+ }
+ }
+ }
+};
+
+/**
+ *@class Ext.SplitBar.AbsoluteLayoutAdapter
+ * @extends Ext.SplitBar.BasicLayoutAdapter
+ * Adapter that moves the splitter element to align with the resized sizing element.
+ * Used with an absolute positioned SplitBar.
+ * @param {Mixed} container The container that wraps around the absolute positioned content. If it's
+ * document.body, make sure you assign an id to the body element.
+ */
+Ext.SplitBar.AbsoluteLayoutAdapter = function(container){
+ this.basic = new Ext.SplitBar.BasicLayoutAdapter();
+ this.container = Ext.get(container);
+};
+
+Ext.SplitBar.AbsoluteLayoutAdapter.prototype = {
+ init : function(s){
+ this.basic.init(s);
+ },
+
+ getElementSize : function(s){
+ return this.basic.getElementSize(s);
+ },
+
+ setElementSize : function(s, newSize, onComplete){
+ this.basic.setElementSize(s, newSize, this.moveSplitter.createDelegate(this, [s]));
+ },
+
+ moveSplitter : function(s){
+ var yes = Ext.SplitBar;
+ switch(s.placement){
+ case yes.LEFT:
+ s.el.setX(s.resizingEl.getRight());
+ break;
+ case yes.RIGHT:
+ s.el.setStyle("right", (this.container.getWidth() - s.resizingEl.getLeft()) + "px");
+ break;
+ case yes.TOP:
+ s.el.setY(s.resizingEl.getBottom());
+ break;
+ case yes.BOTTOM:
+ s.el.setY(s.resizingEl.getTop() - s.el.getHeight());
+ break;
+ }
+ }
+};
+
+/**
+ * Orientation constant - Create a vertical SplitBar
+ * @static
+ * @type Number
+ */
+Ext.SplitBar.VERTICAL = 1;
+
+/**
+ * Orientation constant - Create a horizontal SplitBar
+ * @static
+ * @type Number
+ */
+Ext.SplitBar.HORIZONTAL = 2;
+
+/**
+ * Placement constant - The resizing element is to the left of the splitter element
+ * @static
+ * @type Number
+ */
+Ext.SplitBar.LEFT = 1;
+
+/**
+ * Placement constant - The resizing element is to the right of the splitter element
+ * @static
+ * @type Number
+ */
+Ext.SplitBar.RIGHT = 2;
+
+/**
+ * Placement constant - The resizing element is positioned above the splitter element
+ * @static
+ * @type Number
+ */
+Ext.SplitBar.TOP = 3;
+
+/**
+ * Placement constant - The resizing element is positioned under splitter element
+ * @static
+ * @type Number
+ */
+Ext.SplitBar.BOTTOM = 4;
+/**
+ * @class Ext.Container
+ * @extends Ext.BoxComponent
+ * Base class for any {@link Ext.BoxComponent} that may contain other Components. Containers handle the
+ * basic behavior of containing items, namely adding, inserting and removing items.
+ *
+ * The most commonly used Container classes are {@link Ext.Panel}, {@link Ext.Window} and {@link Ext.TabPanel}.
+ * If you do not need the capabilities offered by the aforementioned classes you can create a lightweight
+ * Container to be encapsulated by an HTML element to your specifications by using the
+ * {@link Ext.Component#autoEl autoEl} config option. This is a useful technique when creating
+ * embedded {@link Ext.layout.ColumnLayout column} layouts inside {@link Ext.form.FormPanel FormPanels}
+ * for example.
+ *
+ * The code below illustrates both how to explicitly create a Container, and how to implicitly
+ * create one using the 'container' xtype:
+// explicitly create a Container
+var embeddedColumns = new Ext.Container({
+ autoEl: 'div', // This is the default
+ layout: 'column',
defaults: {
// implicitly create Container by specifying xtype
xtype: 'container',
@@ -4241,8 +4344,6 @@ items: [
'remove'
);
- this.enableBubble(this.bubbleEvents);
-
/**
* The collection of components in this container as a {@link Ext.util.MixedCollection}
* @type MixedCollection
@@ -4268,13 +4369,15 @@ items: [
if(this.layout && this.layout != layout){
this.layout.setContainer(null);
}
- this.initItems();
this.layout = layout;
+ this.initItems();
layout.setContainer(this);
},
afterRender: function(){
- this.layoutDone = false;
+ // Render this Container, this should be done before setLayout is called which
+ // will hook onResize
+ Ext.Container.superclass.afterRender.call(this);
if(!this.layout){
this.layout = 'auto';
}
@@ -4287,21 +4390,20 @@ items: [
}
this.setLayout(this.layout);
- // BoxComponent's afterRender will set the size.
- // This will will trigger a layout if the layout is configured to monitor resize
- Ext.Container.superclass.afterRender.call(this);
-
- if(Ext.isDefined(this.activeItem)){
+ // If a CardLayout, the active item set
+ if(this.activeItem !== undefined && this.layout.setActiveItem){
var item = this.activeItem;
delete this.activeItem;
this.layout.setActiveItem(item);
}
- // If we have no ownerCt and the BoxComponent's sizing did not trigger a layout, force a layout
- if(!this.ownerCt && !this.layoutDone){
+ // If we have no ownerCt, render and size all children
+ if(!this.ownerCt){
this.doLayout(false, true);
}
+ // This is a manually configured flag set by users in conjunction with renderTo.
+ // Not to be confused with the flag by the same name used in Layouts.
if(this.monitorResize === true){
Ext.EventManager.onWindowResize(this.doLayout, this, [false]);
}
@@ -4349,12 +4451,10 @@ tb.{@link #doLayout}(); // refresh the layout
* may not be removed or added. See the Notes for {@link Ext.layout.BorderLayout BorderLayout}
* for more details.
*
Either a single component or an Array of components to add. See + * @param {...Object/Array} component + *
Either one or more Components to add or an Array of Components to add. See
* {@link #items} for additional information.
The ContainerLayout class is the default layout manager delegated by {@link Ext.Container} to - * render any child Components when no {@link Ext.Container#layout layout} is configured into - * a {@link Ext.Container Container}. ContainerLayout provides the basic foundation for all other layout - * classes in Ext. It simply renders all child Components into the Container, performing no sizing or - * positioning services. To utilize a layout that provides sizing and positioning of child Components, - * specify an appropriate {@link Ext.Container#layout layout}.
*This class is intended to be extended or created via the {@link Ext.Container#layout layout} * configuration property. See {@link Ext.Container#layout} for additional details.
*/ @@ -4858,18 +4948,48 @@ Ext.layout.ContainerLayout = Ext.extend(Object, { activeItem : null, constructor : function(config){ + this.id = Ext.id(null, 'ext-layout-'); Ext.apply(this, config); }, - // private + type: 'container', + + /* Workaround for how IE measures autoWidth elements. It prefers bottom-up measurements + whereas other browser prefer top-down. We will hide all target child elements before we measure and + put them back to get an accurate measurement. + */ + IEMeasureHack : function(target, viewFlag) { + var tChildren = target.dom.childNodes, tLen = tChildren.length, c, d = [], e, i, ret; + for (i = 0 ; i < tLen ; i++) { + c = tChildren[i]; + e = Ext.get(c); + if (e) { + d[i] = e.getStyle('display'); + e.setStyle({display: 'none'}); + } + } + ret = target ? target.getViewSize(viewFlag) : {}; + for (i = 0 ; i < tLen ; i++) { + c = tChildren[i]; + e = Ext.get(c); + if (e) { + e.setStyle({display: d[i]}); + } + } + return ret; + }, + + // Placeholder for the derived layouts + getLayoutTargetSize : Ext.EmptyFn, + + // private layout : function(){ - var target = this.container.getLayoutTarget(); + var ct = this.container, target = ct.getLayoutTarget(); if(!(this.hasLayout || Ext.isEmpty(this.targetCls))){ - target.addClass(this.targetCls) + target.addClass(this.targetCls); } - this.onLayout(this.container, target); - this.container.fireEvent('afterlayout', this.container, this); - this.hasLayout = true; + this.onLayout(ct, target); + ct.fireEvent('afterlayout', ct, this); }, // private @@ -4884,39 +5004,65 @@ Ext.layout.ContainerLayout = Ext.extend(Object, { // private renderAll : function(ct, target){ - var items = ct.items.items; - for(var i = 0, len = items.length; i < len; i++) { - var c = items[i]; + var items = ct.items.items, i, c, len = items.length; + for(i = 0; i < len; i++) { + c = items[i]; if(c && (!c.rendered || !this.isValidParent(c, target))){ this.renderItem(c, i, target); } } }, - // private + /** + * @private + * Renders the given Component into the target Element. If the Component is already rendered, + * it is moved to the provided target instead. + * @param {Ext.Component} c The Component to render + * @param {Number} position The position within the target to render the item to + * @param {Ext.Element} target The target Element + */ renderItem : function(c, position, target){ - if(c && !c.rendered){ - c.render(target, position); - this.configureItem(c, position); - }else if(c && !this.isValidParent(c, target)){ - if(Ext.isNumber(position)){ - position = target.dom.childNodes[position]; + if (c) { + if (!c.rendered) { + c.render(target, position); + this.configureItem(c); + } else if (!this.isValidParent(c, target)) { + if (Ext.isNumber(position)) { + position = target.dom.childNodes[position]; + } + + target.dom.insertBefore(c.getPositionEl().dom, position || null); + c.container = target; + this.configureItem(c); } - target.dom.insertBefore(c.getPositionEl().dom, position || null); - c.container = target; - this.configureItem(c, position); } }, - // private - configureItem: function(c, position){ - if(this.extraCls){ + // private. + // Get all rendered items to lay out. + getRenderedItems: function(ct){ + var t = ct.getLayoutTarget(), cti = ct.items.items, len = cti.length, i, c, items = []; + for (i = 0; i < len; i++) { + if((c = cti[i]).rendered && this.isValidParent(c, t) && c.shouldLayout !== false){ + items.push(c); + } + }; + return items; + }, + + /** + * @private + * Applies extraCls and hides the item if renderHidden is true + */ + configureItem: function(c){ + if (this.extraCls) { var t = c.getPositionEl ? c.getPositionEl() : c; t.addClass(this.extraCls); } + // If we are forcing a layout, do so *before* we hide so elements have height/width - if(c.doLayout && this.forceLayout){ - c.doLayout(false, true); + if (c.doLayout && this.forceLayout) { + c.doLayout(); } if (this.renderHidden && c != this.activeItem) { c.hide(); @@ -4924,54 +5070,57 @@ Ext.layout.ContainerLayout = Ext.extend(Object, { }, onRemove: function(c){ - if(this.activeItem == c){ + if(this.activeItem == c){ delete this.activeItem; - } - if(c.rendered && this.extraCls){ + } + if(c.rendered && this.extraCls){ var t = c.getPositionEl ? c.getPositionEl() : c; t.removeClass(this.extraCls); } }, + afterRemove: function(c){ + if(c.removeRestore){ + c.removeMode = 'container'; + delete c.removeRestore; + } + }, + // private onResize: function(){ var ct = this.container, - b = ct.bufferResize; - - if (ct.collapsed){ + b; + if(ct.collapsed){ return; } - - // Not having an ownerCt negates the buffering: floating and top level - // Containers (Viewport, Window, ToolTip, Menu) need to lay out ASAP. - if (b && ct.ownerCt) { - // If we do NOT already have a layout pending from an ancestor, schedule one. - // If there is a layout pending, we do nothing here. - // buffering to be deprecated soon - if (!ct.hasLayoutPending()){ - if(!this.resizeTask){ - this.resizeTask = new Ext.util.DelayedTask(this.runLayout, this); - this.resizeBuffer = Ext.isNumber(b) ? b : 50; - } - ct.layoutPending = true; - this.resizeTask.delay(this.resizeBuffer); + if(b = ct.bufferResize && ct.shouldBufferLayout()){ + if(!this.resizeTask){ + this.resizeTask = new Ext.util.DelayedTask(this.runLayout, this); + this.resizeBuffer = Ext.isNumber(b) ? b : 50; } + ct.layoutPending = true; + this.resizeTask.delay(this.resizeBuffer); }else{ - ct.doLayout(false, this.forceLayout); + this.runLayout(); } }, - // private runLayout: function(){ var ct = this.container; - ct.doLayout(); + this.layout(); + ct.onLayout(); delete ct.layoutPending; }, // private setContainer : function(ct){ - // No longer use events to handle resize. Instead this will be handled through a direct function call. - /* + /** + * This monitorResize flag will be renamed soon as to avoid confusion + * with the Container version which hooks onWindowResize to doLayout + * + * monitorResize flag in this context attaches the resize event between + * a container and it's layout + */ if(this.monitorResize && ct != this.container){ var old = this.container; if(old){ @@ -4981,34 +5130,36 @@ Ext.layout.ContainerLayout = Ext.extend(Object, { ct.on(ct.resizeEvent, this.onResize, this); } } - */ this.container = ct; }, - // private + /** + * Parses a number or string representing margin sizes into an object. Supports CSS-style margin declarations + * (e.g. 10, "10", "10 10", "10 10 10" and "10 10 10 10" are all valid options and would return the same result) + * @param {Number|String} v The encoded margins + * @return {Object} An object with margin sizes for top, right, bottom and left + */ parseMargins : function(v){ - if(Ext.isNumber(v)){ + if (Ext.isNumber(v)) { v = v.toString(); } - var ms = v.split(' '); - var len = ms.length; - if(len == 1){ - ms[1] = ms[0]; - ms[2] = ms[0]; - ms[3] = ms[0]; - } - if(len == 2){ + var ms = v.split(' '), + len = ms.length; + + if (len == 1) { + ms[1] = ms[2] = ms[3] = ms[0]; + } else if(len == 2) { ms[2] = ms[0]; ms[3] = ms[1]; - } - if(len == 3){ + } else if(len == 3) { ms[3] = ms[1]; } + return { - top:parseInt(ms[0], 10) || 0, - right:parseInt(ms[1], 10) || 0, + top :parseInt(ms[0], 10) || 0, + right :parseInt(ms[1], 10) || 0, bottom:parseInt(ms[2], 10) || 0, - left:parseInt(ms[3], 10) || 0 + left :parseInt(ms[3], 10) || 0 }; }, @@ -5039,6 +5190,13 @@ Ext.layout.ContainerLayout = Ext.extend(Object, { * @protected */ destroy : function(){ + // Stop any buffered layout tasks + if(this.resizeTask && this.resizeTask.cancel){ + this.resizeTask.cancel(); + } + if(this.container) { + this.container.un(this.container.resizeEvent, this.onResize, this); + } if(!Ext.isEmpty(this.targetCls)){ var target = this.container.getLayoutTarget(); if(target){ @@ -5046,175 +5204,225 @@ Ext.layout.ContainerLayout = Ext.extend(Object, { } } } +});/** + * @class Ext.layout.AutoLayout + *The AutoLayout is the default layout manager delegated by {@link Ext.Container} to + * render any child Components when no {@link Ext.Container#layout layout} is configured into + * a {@link Ext.Container Container}.. AutoLayout provides only a passthrough of any layout calls + * to any child containers.
+ */ +Ext.layout.AutoLayout = Ext.extend(Ext.layout.ContainerLayout, { + type: 'auto', + + monitorResize: true, + + onLayout : function(ct, target){ + Ext.layout.AutoLayout.superclass.onLayout.call(this, ct, target); + var cs = this.getRenderedItems(ct), len = cs.length, i, c; + for(i = 0; i < len; i++){ + c = cs[i]; + if (c.doLayout){ + // Shallow layout children + c.doLayout(true); + } + } + } }); -Ext.Container.LAYOUTS['auto'] = Ext.layout.ContainerLayout; -/** - * @class Ext.layout.FitLayout - * @extends Ext.layout.ContainerLayout - *This is a base class for layouts that contain a single item that automatically expands to fill the layout's - * container. This class is intended to be extended or created via the layout:'fit' {@link Ext.Container#layout} - * config, and should generally not need to be created directly via the new keyword.
- *FitLayout does not have any direct config options (other than inherited ones). To fit a panel to a container - * using FitLayout, simply set layout:'fit' on the container and add a single panel to it. If the container has - * multiple panels, only the first one will be displayed. Example usage:
- *
-var p = new Ext.Panel({
- title: 'Fit Layout',
- layout:'fit',
- items: {
- title: 'Inner Panel',
- html: '<p>This is the inner panel content</p>',
- border: false
- }
-});
-This layout manages multiple child Components, each fitted to the Container, where only a single child Component can be - * visible at any given time. This layout style is most commonly used for wizards, tab implementations, etc. - * This class is intended to be extended or created via the layout:'card' {@link Ext.Container#layout} config, - * and should generally not need to be created directly via the new keyword.
- *The CardLayout's focal method is {@link #setActiveItem}. Since only one panel is displayed at a time, - * the only way to move from one Component to the next is by calling setActiveItem, passing the id or index of - * the next panel to display. The layout itself does not provide a user interface for handling this navigation, - * so that functionality must be provided by the developer.
- *In the following example, a simplistic wizard setup is demonstrated. A button bar is added - * to the footer of the containing panel to provide navigation buttons. The buttons will be handled by a - * common navigation routine -- for this example, the implementation of that routine has been ommitted since - * it can be any type of custom logic. Note that other uses of a CardLayout (like a tab control) would require a - * completely different implementation. For serious implementations, a better approach would be to extend - * CardLayout to provide the custom functionality needed. Example usage:
- *
-var navHandler = function(direction){
- // This routine could contain business logic required to manage the navigation steps.
- // It would call setActiveItem as needed, manage navigation button state, handle any
- // branching logic that might be required, handle alternate actions like cancellation
- // or finalization, etc. A complete wizard implementation could get pretty
- // sophisticated depending on the complexity required, and should probably be
- // done as a subclass of CardLayout in a real-world implementation.
-};
-
-var card = new Ext.Panel({
- title: 'Example Wizard',
- layout:'card',
- activeItem: 0, // make sure the active item is set on the container config!
- bodyStyle: 'padding:15px',
- defaults: {
- // applied to each contained panel
- border:false
- },
- // just an example of one possible navigation scheme, using buttons
- bbar: [
- {
- id: 'move-prev',
- text: 'Back',
- handler: navHandler.createDelegate(this, [-1]),
- disabled: true
- },
- '->', // greedy spacer so that the buttons are aligned to each side
- {
- id: 'move-next',
- text: 'Next',
- handler: navHandler.createDelegate(this, [1])
- }
- ],
- // the panels (or "cards") within the layout
- items: [{
- id: 'card-0',
- html: '<h1>Welcome to the Wizard!</h1><p>Step 1 of 3</p>'
- },{
- id: 'card-1',
- html: '<p>Step 2 of 3</p>'
- },{
- id: 'card-2',
- html: '<h1>Congratulations!</h1><p>Step 3 of 3 - Complete</p>'
- }]
-});
-This is a base class for layouts that contain a single item that automatically expands to fill the layout's + * container. This class is intended to be extended or created via the layout:'fit' {@link Ext.Container#layout} + * config, and should generally not need to be created directly via the new keyword.
+ *FitLayout does not have any direct config options (other than inherited ones). To fit a panel to a container + * using FitLayout, simply set layout:'fit' on the container and add a single panel to it. If the container has + * multiple panels, only the first one will be displayed. Example usage:
+ *
+var p = new Ext.Panel({
+ title: 'Fit Layout',
+ layout:'fit',
+ items: {
+ title: 'Inner Panel',
+ html: '<p>This is the inner panel content</p>',
+ border: false
+ }
+});
+This layout manages multiple child Components, each fitted to the Container, where only a single child Component can be + * visible at any given time. This layout style is most commonly used for wizards, tab implementations, etc. + * This class is intended to be extended or created via the layout:'card' {@link Ext.Container#layout} config, + * and should generally not need to be created directly via the new keyword.
+ *The CardLayout's focal method is {@link #setActiveItem}. Since only one panel is displayed at a time, + * the only way to move from one Component to the next is by calling setActiveItem, passing the id or index of + * the next panel to display. The layout itself does not provide a user interface for handling this navigation, + * so that functionality must be provided by the developer.
+ *In the following example, a simplistic wizard setup is demonstrated. A button bar is added + * to the footer of the containing panel to provide navigation buttons. The buttons will be handled by a + * common navigation routine -- for this example, the implementation of that routine has been ommitted since + * it can be any type of custom logic. Note that other uses of a CardLayout (like a tab control) would require a + * completely different implementation. For serious implementations, a better approach would be to extend + * CardLayout to provide the custom functionality needed. Example usage:
+ *
+var navHandler = function(direction){
+ // This routine could contain business logic required to manage the navigation steps.
+ // It would call setActiveItem as needed, manage navigation button state, handle any
+ // branching logic that might be required, handle alternate actions like cancellation
+ // or finalization, etc. A complete wizard implementation could get pretty
+ // sophisticated depending on the complexity required, and should probably be
+ // done as a subclass of CardLayout in a real-world implementation.
+};
+
+var card = new Ext.Panel({
+ title: 'Example Wizard',
+ layout:'card',
+ activeItem: 0, // make sure the active item is set on the container config!
+ bodyStyle: 'padding:15px',
+ defaults: {
+ // applied to each contained panel
+ border:false
+ },
+ // just an example of one possible navigation scheme, using buttons
+ bbar: [
+ {
+ id: 'move-prev',
+ text: 'Back',
+ handler: navHandler.createDelegate(this, [-1]),
+ disabled: true
+ },
+ '->', // greedy spacer so that the buttons are aligned to each side
+ {
+ id: 'move-next',
+ text: 'Next',
+ handler: navHandler.createDelegate(this, [1])
+ }
+ ],
+ // the panels (or "cards") within the layout
+ items: [{
+ id: 'card-0',
+ html: '<h1>Welcome to the Wizard!</h1><p>Step 1 of 3</p>'
+ },{
+ id: 'card-1',
+ html: '<p>Step 2 of 3</p>'
+ },{
+ id: 'card-2',
+ html: '<h1>Congratulations!</h1><p>Step 3 of 3 - Complete</p>'
+ }]
+});
+This is a layout that enables anchoring of contained elements relative to the container's dimensions. @@ -5301,93 +5509,157 @@ anchor: '-50 75%' */ // private - monitorResize:true, + monitorResize : true, - // private - // deprecate - getAnchorViewSize : function(ct, target){ - return target.dom == document.body ? - target.getViewSize(true) : target.getStyleSize(); + type : 'anchor', + + /** + * @cfg {String} defaultAnchor + * + * default anchor for all child container items applied if no anchor or specific width is set on the child item. Defaults to '100%'. + * + */ + defaultAnchor : '100%', + + parseAnchorRE : /^(r|right|b|bottom)$/i, + + + getLayoutTargetSize : function() { + var target = this.container.getLayoutTarget(), ret = {}; + if (target) { + ret = target.getViewSize(); + + // IE in strict mode will return a width of 0 on the 1st pass of getViewSize. + // Use getStyleSize to verify the 0 width, the adjustment pass will then work properly + // with getViewSize + if (Ext.isIE && Ext.isStrict && ret.width == 0){ + ret = target.getStyleSize(); + } + ret.width -= target.getPadding('lr'); + ret.height -= target.getPadding('tb'); + } + return ret; }, // private - onLayout : function(ct, target){ - Ext.layout.AnchorLayout.superclass.onLayout.call(this, ct, target); - - var size = target.getViewSize(true); + onLayout : function(container, target) { + Ext.layout.AnchorLayout.superclass.onLayout.call(this, container, target); - var w = size.width, h = size.height; + var size = this.getLayoutTargetSize(), + containerWidth = size.width, + containerHeight = size.height, + overflow = target.getStyle('overflow'), + components = this.getRenderedItems(container), + len = components.length, + boxes = [], + box, + anchorWidth, + anchorHeight, + component, + anchorSpec, + calcWidth, + calcHeight, + anchorsArray, + totalHeight = 0, + i, + el; - if(w < 20 && h < 20){ + if(containerWidth < 20 && containerHeight < 20){ return; } // find the container anchoring size - var aw, ah; - if(ct.anchorSize){ - if(typeof ct.anchorSize == 'number'){ - aw = ct.anchorSize; - }else{ - aw = ct.anchorSize.width; - ah = ct.anchorSize.height; + if(container.anchorSize) { + if(typeof container.anchorSize == 'number') { + anchorWidth = container.anchorSize; + } else { + anchorWidth = container.anchorSize.width; + anchorHeight = container.anchorSize.height; } - }else{ - aw = ct.initialConfig.width; - ah = ct.initialConfig.height; + } else { + anchorWidth = container.initialConfig.width; + anchorHeight = container.initialConfig.height; } - var cs = ct.items.items, len = cs.length, i, c, a, cw, ch, el, vs; - for(i = 0; i < len; i++){ - c = cs[i]; - el = c.getPositionEl(); - if(c.anchor){ - a = c.anchorSpec; - if(!a){ // cache all anchor values - vs = c.anchor.split(' '); - c.anchorSpec = a = { - right: this.parseAnchor(vs[0], c.initialConfig.width, aw), - bottom: this.parseAnchor(vs[1], c.initialConfig.height, ah) + for(i = 0; i < len; i++) { + component = components[i]; + el = component.getPositionEl(); + + // If a child container item has no anchor and no specific width, set the child to the default anchor size + if (!component.anchor && component.items && !Ext.isNumber(component.width) && !(Ext.isIE6 && Ext.isStrict)){ + component.anchor = this.defaultAnchor; + } + + if(component.anchor) { + anchorSpec = component.anchorSpec; + // cache all anchor values + if(!anchorSpec){ + anchorsArray = component.anchor.split(' '); + component.anchorSpec = anchorSpec = { + right: this.parseAnchor(anchorsArray[0], component.initialConfig.width, anchorWidth), + bottom: this.parseAnchor(anchorsArray[1], component.initialConfig.height, anchorHeight) }; } - cw = a.right ? this.adjustWidthAnchor(a.right(w) - el.getMargins('lr'), c) : undefined; - ch = a.bottom ? this.adjustHeightAnchor(a.bottom(h) - el.getMargins('tb'), c) : undefined; - - if(cw || ch){ - c.setSize(cw || undefined, ch || undefined); + calcWidth = anchorSpec.right ? this.adjustWidthAnchor(anchorSpec.right(containerWidth) - el.getMargins('lr'), component) : undefined; + calcHeight = anchorSpec.bottom ? this.adjustHeightAnchor(anchorSpec.bottom(containerHeight) - el.getMargins('tb'), component) : undefined; + + if(calcWidth || calcHeight) { + boxes.push({ + component: component, + width: calcWidth || undefined, + height: calcHeight || undefined + }); } } } + for (i = 0, len = boxes.length; i < len; i++) { + box = boxes[i]; + box.component.setSize(box.width, box.height); + } + + if (overflow && overflow != 'hidden' && !this.adjustmentPass) { + var newTargetSize = this.getLayoutTargetSize(); + if (newTargetSize.width != size.width || newTargetSize.height != size.height){ + this.adjustmentPass = true; + this.onLayout(container, target); + } + } + + delete this.adjustmentPass; }, // private - parseAnchor : function(a, start, cstart){ - if(a && a != 'none'){ + parseAnchor : function(a, start, cstart) { + if (a && a != 'none') { var last; - if(/^(r|right|b|bottom)$/i.test(a)){ // standard anchor + // standard anchor + if (this.parseAnchorRE.test(a)) { var diff = cstart - start; return function(v){ if(v !== last){ last = v; return v - diff; } - } - }else if(a.indexOf('%') != -1){ - var ratio = parseFloat(a.replace('%', ''))*.01; // percentage + }; + // percentage + } else if(a.indexOf('%') != -1) { + var ratio = parseFloat(a.replace('%', ''))*.01; return function(v){ if(v !== last){ last = v; return Math.floor(v*ratio); } - } - }else{ + }; + // simple offset adjustment + } else { a = parseInt(a, 10); - if(!isNaN(a)){ // simple offset adjustment - return function(v){ - if(v !== last){ + if (!isNaN(a)) { + return function(v) { + if (v !== last) { last = v; return v + a; } - } + }; } } } @@ -5410,196 +5682,242 @@ anchor: '-50 75%' */ }); Ext.Container.LAYOUTS['anchor'] = Ext.layout.AnchorLayout; -/** - * @class Ext.layout.ColumnLayout - * @extends Ext.layout.ContainerLayout - *
This is the layout style of choice for creating structural layouts in a multi-column format where the width of - * each column can be specified as a percentage or fixed width, but the height is allowed to vary based on the content. - * This class is intended to be extended or created via the layout:'column' {@link Ext.Container#layout} config, - * and should generally not need to be created directly via the new keyword.
- *ColumnLayout does not have any direct config options (other than inherited ones), but it does support a - * specific config property of columnWidth that can be included in the config of any panel added to it. The - * layout will use the columnWidth (if present) or width of each panel during layout to determine how to size each panel. - * If width or columnWidth is not specified for a given panel, its width will default to the panel's width (or auto).
- *The width property is always evaluated as pixels, and must be a number greater than or equal to 1. - * The columnWidth property is always evaluated as a percentage, and must be a decimal value greater than 0 and - * less than 1 (e.g., .25).
- *The basic rules for specifying column widths are pretty simple. The logic makes two passes through the - * set of contained panels. During the first layout pass, all panels that either have a fixed width or none - * specified (auto) are skipped, but their widths are subtracted from the overall container width. During the second - * pass, all panels with columnWidths are assigned pixel widths in proportion to their percentages based on - * the total remaining container width. In other words, percentage width panels are designed to fill the space - * left over by all the fixed-width and/or auto-width panels. Because of this, while you can specify any number of columns - * with different percentages, the columnWidths must always add up to 1 (or 100%) when added together, otherwise your - * layout may not render as expected. Example usage:
- *
-// All columns are percentages -- they must add up to 1
-var p = new Ext.Panel({
- title: 'Column Layout - Percentage Only',
- layout:'column',
- items: [{
- title: 'Column 1',
- columnWidth: .25
- },{
- title: 'Column 2',
- columnWidth: .6
- },{
- title: 'Column 3',
- columnWidth: .15
- }]
-});
-
-// Mix of width and columnWidth -- all columnWidth values must add up
-// to 1. The first column will take up exactly 120px, and the last two
-// columns will fill the remaining container width.
-var p = new Ext.Panel({
- title: 'Column Layout - Mixed',
- layout:'column',
- items: [{
- title: 'Column 1',
- width: 120
- },{
- title: 'Column 2',
- columnWidth: .8
- },{
- title: 'Column 3',
- columnWidth: .2
- }]
-});
-This is a multi-pane, application-oriented UI layout style that supports multiple - * nested panels, automatic {@link Ext.layout.BorderLayout.Region#split split} bars between - * {@link Ext.layout.BorderLayout.Region#BorderLayout.Region regions} and built-in - * {@link Ext.layout.BorderLayout.Region#collapsible expanding and collapsing} of regions.
- *This class is intended to be extended or created via the layout:'border' - * {@link Ext.Container#layout} config, and should generally not need to be created directly - * via the new keyword.
- *BorderLayout does not have any direct config options (other than inherited ones). - * All configuration options available for customizing the BorderLayout are at the - * {@link Ext.layout.BorderLayout.Region} and {@link Ext.layout.BorderLayout.SplitRegion} - * levels.
- *Example usage:
+ *This is the layout style of choice for creating structural layouts in a multi-column format where the width of + * each column can be specified as a percentage or fixed width, but the height is allowed to vary based on the content. + * This class is intended to be extended or created via the layout:'column' {@link Ext.Container#layout} config, + * and should generally not need to be created directly via the new keyword.
+ *ColumnLayout does not have any direct config options (other than inherited ones), but it does support a + * specific config property of columnWidth that can be included in the config of any panel added to it. The + * layout will use the columnWidth (if present) or width of each panel during layout to determine how to size each panel. + * If width or columnWidth is not specified for a given panel, its width will default to the panel's width (or auto).
+ *The width property is always evaluated as pixels, and must be a number greater than or equal to 1. + * The columnWidth property is always evaluated as a percentage, and must be a decimal value greater than 0 and + * less than 1 (e.g., .25).
+ *The basic rules for specifying column widths are pretty simple. The logic makes two passes through the + * set of contained panels. During the first layout pass, all panels that either have a fixed width or none + * specified (auto) are skipped, but their widths are subtracted from the overall container width. During the second + * pass, all panels with columnWidths are assigned pixel widths in proportion to their percentages based on + * the total remaining container width. In other words, percentage width panels are designed to fill the space + * left over by all the fixed-width and/or auto-width panels. Because of this, while you can specify any number of columns + * with different percentages, the columnWidths must always add up to 1 (or 100%) when added together, otherwise your + * layout may not render as expected. Example usage:
*
-var myBorderPanel = new Ext.Panel({
- {@link Ext.Component#renderTo renderTo}: document.body,
- {@link Ext.BoxComponent#width width}: 700,
- {@link Ext.BoxComponent#height height}: 500,
- {@link Ext.Panel#title title}: 'Border Layout',
- {@link Ext.Container#layout layout}: 'border',
- {@link Ext.Container#items items}: [{
- {@link Ext.Panel#title title}: 'South Region is resizable',
- {@link Ext.layout.BorderLayout.Region#BorderLayout.Region region}: 'south', // position for region
- {@link Ext.BoxComponent#height height}: 100,
- {@link Ext.layout.BorderLayout.Region#split split}: true, // enable resizing
- {@link Ext.SplitBar#minSize minSize}: 75, // defaults to {@link Ext.layout.BorderLayout.Region#minHeight 50}
- {@link Ext.SplitBar#maxSize maxSize}: 150,
- {@link Ext.layout.BorderLayout.Region#margins margins}: '0 5 5 5'
+// All columns are percentages -- they must add up to 1
+var p = new Ext.Panel({
+ title: 'Column Layout - Percentage Only',
+ layout:'column',
+ items: [{
+ title: 'Column 1',
+ columnWidth: .25
},{
- // xtype: 'panel' implied by default
- {@link Ext.Panel#title title}: 'West Region is collapsible',
- {@link Ext.layout.BorderLayout.Region#BorderLayout.Region region}:'west',
- {@link Ext.layout.BorderLayout.Region#margins margins}: '5 0 0 5',
- {@link Ext.BoxComponent#width width}: 200,
- {@link Ext.layout.BorderLayout.Region#collapsible collapsible}: true, // make collapsible
- {@link Ext.layout.BorderLayout.Region#cmargins cmargins}: '5 5 0 5', // adjust top margin when collapsed
- {@link Ext.Component#id id}: 'west-region-container',
- {@link Ext.Container#layout layout}: 'fit',
- {@link Ext.Panel#unstyled unstyled}: true
+ title: 'Column 2',
+ columnWidth: .6
},{
- {@link Ext.Panel#title title}: 'Center Region',
- {@link Ext.layout.BorderLayout.Region#BorderLayout.Region region}: 'center', // center region is required, no width/height specified
- {@link Ext.Component#xtype xtype}: 'container',
- {@link Ext.Container#layout layout}: 'fit',
- {@link Ext.layout.BorderLayout.Region#margins margins}: '5 5 0 0'
+ title: 'Column 3',
+ columnWidth: .15
+ }]
+});
+
+// Mix of width and columnWidth -- all columnWidth values must add up
+// to 1. The first column will take up exactly 120px, and the last two
+// columns will fill the remaining container width.
+var p = new Ext.Panel({
+ title: 'Column Layout - Mixed',
+ layout:'column',
+ items: [{
+ title: 'Column 1',
+ width: 120
+ },{
+ title: 'Column 2',
+ columnWidth: .8
+ },{
+ title: 'Column 3',
+ columnWidth: .2
}]
});
Notes:
-
- *
- Any container using the BorderLayout must have a child item with region:'center'. - * The child item in the center region will always be resized to fill the remaining space not used by - * the other regions in the layout. - *
- Any child items with a region of west or east must have width defined - * (an integer representing the number of pixels that the region should take up). - *
- Any child items with a region of north or south must have height defined. - *
- The regions of a BorderLayout are fixed at render time and thereafter, its child Components may not be removed or added. To add/remove
- * Components within a BorderLayout, have them wrapped by an additional Container which is directly
- * managed by the BorderLayout. If the region is to be collapsible, the Container used directly
- * by the BorderLayout manager should be a Panel. In the following example a Container (an Ext.Panel)
- * is added to the west region:
- *
-wrc = {@link Ext#getCmp Ext.getCmp}('west-region-container'); -wrc.{@link Ext.Panel#removeAll removeAll}(); -wrc.{@link Ext.Container#add add}({ + */ +Ext.layout.ColumnLayout = Ext.extend(Ext.layout.ContainerLayout, { + // private + monitorResize:true, + + type: 'column', + + extraCls: 'x-column', + + scrollOffset : 0, + + // private + + targetCls: 'x-column-layout-ct', + + isValidParent : function(c, target){ + return this.innerCt && c.getPositionEl().dom.parentNode == this.innerCt.dom; + }, + + getLayoutTargetSize : function() { + var target = this.container.getLayoutTarget(), ret; + if (target) { + ret = target.getViewSize(); + + // IE in strict mode will return a width of 0 on the 1st pass of getViewSize. + // Use getStyleSize to verify the 0 width, the adjustment pass will then work properly + // with getViewSize + if (Ext.isIE && Ext.isStrict && ret.width == 0){ + ret = target.getStyleSize(); + } + + ret.width -= target.getPadding('lr'); + ret.height -= target.getPadding('tb'); + } + return ret; + }, + + renderAll : function(ct, target) { + if(!this.innerCt){ + // the innerCt prevents wrapping and shuffling while + // the container is resizing + this.innerCt = target.createChild({cls:'x-column-inner'}); + this.innerCt.createChild({cls:'x-clear'}); + } + Ext.layout.ColumnLayout.superclass.renderAll.call(this, ct, this.innerCt); + }, + + // private + onLayout : function(ct, target){ + var cs = ct.items.items, + len = cs.length, + c, + i, + m, + margins = []; + + this.renderAll(ct, target); + + var size = this.getLayoutTargetSize(); + + if(size.width < 1 && size.height < 1){ // display none? + return; + } + + var w = size.width - this.scrollOffset, + h = size.height, + pw = w; + + this.innerCt.setWidth(w); + + // some columns can be percentages while others are fixed + // so we need to make 2 passes + + for(i = 0; i < len; i++){ + c = cs[i]; + m = c.getPositionEl().getMargins('lr'); + margins[i] = m; + if(!c.columnWidth){ + pw -= (c.getWidth() + m); + } + } + + pw = pw < 0 ? 0 : pw; + + for(i = 0; i < len; i++){ + c = cs[i]; + m = margins[i]; + if(c.columnWidth){ + c.setSize(Math.floor(c.columnWidth * pw) - m); + } + } + + // Browsers differ as to when they account for scrollbars. We need to re-measure to see if the scrollbar + // spaces were accounted for properly. If not, re-layout. + if (Ext.isIE) { + if (i = target.getStyle('overflow') && i != 'hidden' && !this.adjustmentPass) { + var ts = this.getLayoutTargetSize(); + if (ts.width != size.width){ + this.adjustmentPass = true; + this.onLayout(ct, target); + } + } + } + delete this.adjustmentPass; + } + + /** + * @property activeItem + * @hide + */ +}); + +Ext.Container.LAYOUTS['column'] = Ext.layout.ColumnLayout; +/** + * @class Ext.layout.BorderLayout + * @extends Ext.layout.ContainerLayout + *This is a multi-pane, application-oriented UI layout style that supports multiple + * nested panels, automatic {@link Ext.layout.BorderLayout.Region#split split} bars between + * {@link Ext.layout.BorderLayout.Region#BorderLayout.Region regions} and built-in + * {@link Ext.layout.BorderLayout.Region#collapsible expanding and collapsing} of regions.
+ *This class is intended to be extended or created via the layout:'border' + * {@link Ext.Container#layout} config, and should generally not need to be created directly + * via the new keyword.
+ *BorderLayout does not have any direct config options (other than inherited ones). + * All configuration options available for customizing the BorderLayout are at the + * {@link Ext.layout.BorderLayout.Region} and {@link Ext.layout.BorderLayout.SplitRegion} + * levels.
+ *Example usage:
+ *
+ *+var myBorderPanel = new Ext.Panel({ + {@link Ext.Component#renderTo renderTo}: document.body, + {@link Ext.BoxComponent#width width}: 700, + {@link Ext.BoxComponent#height height}: 500, + {@link Ext.Panel#title title}: 'Border Layout', + {@link Ext.Container#layout layout}: 'border', + {@link Ext.Container#items items}: [{ + {@link Ext.Panel#title title}: 'South Region is resizable', + {@link Ext.layout.BorderLayout.Region#BorderLayout.Region region}: 'south', // position for region + {@link Ext.BoxComponent#height height}: 100, + {@link Ext.layout.BorderLayout.Region#split split}: true, // enable resizing + {@link Ext.SplitBar#minSize minSize}: 75, // defaults to {@link Ext.layout.BorderLayout.Region#minHeight 50} + {@link Ext.SplitBar#maxSize maxSize}: 150, + {@link Ext.layout.BorderLayout.Region#margins margins}: '0 5 5 5' + },{ + // xtype: 'panel' implied by default + {@link Ext.Panel#title title}: 'West Region is collapsible', + {@link Ext.layout.BorderLayout.Region#BorderLayout.Region region}:'west', + {@link Ext.layout.BorderLayout.Region#margins margins}: '5 0 0 5', + {@link Ext.BoxComponent#width width}: 200, + {@link Ext.layout.BorderLayout.Region#collapsible collapsible}: true, // make collapsible + {@link Ext.layout.BorderLayout.Region#cmargins cmargins}: '5 5 0 5', // adjust top margin when collapsed + {@link Ext.Component#id id}: 'west-region-container', + {@link Ext.Container#layout layout}: 'fit', + {@link Ext.Panel#unstyled unstyled}: true + },{ + {@link Ext.Panel#title title}: 'Center Region', + {@link Ext.layout.BorderLayout.Region#BorderLayout.Region region}: 'center', // center region is required, no width/height specified + {@link Ext.Component#xtype xtype}: 'container', + {@link Ext.Container#layout layout}: 'fit', + {@link Ext.layout.BorderLayout.Region#margins margins}: '5 5 0 0' + }] +}); +Notes:
*-
+ *
- Any container using the BorderLayout must have a child item with region:'center'. + * The child item in the center region will always be resized to fill the remaining space not used by + * the other regions in the layout. + *
- Any child items with a region of west or east must have width defined + * (an integer representing the number of pixels that the region should take up). + *
- Any child items with a region of north or south must have height defined. + *
- The regions of a BorderLayout are fixed at render time and thereafter, its child Components may not be removed or added. To add/remove
+ * Components within a BorderLayout, have them wrapped by an additional Container which is directly
+ * managed by the BorderLayout. If the region is to be collapsible, the Container used directly
+ * by the BorderLayout manager should be a Panel. In the following example a Container (an Ext.Panel)
+ * is added to the west region:
+ *
+wrc = {@link Ext#getCmp Ext.getCmp}('west-region-container'); +wrc.{@link Ext.Panel#removeAll removeAll}(); +wrc.{@link Ext.Container#add add}({ title: 'Added Panel', html: 'Some content' }); @@ -5619,17 +5937,23 @@ Ext.layout.BorderLayout = Ext.extend(Ext.layout.ContainerLayout, { // private rendered : false, + type: 'border', + targetCls: 'x-border-layout-ct', + getLayoutTargetSize : function() { + var target = this.container.getLayoutTarget(); + return target ? target.getViewSize() : {}; + }, + // private onLayout : function(ct, target){ - var collapsed; + var collapsed, i, c, pos, items = ct.items.items, len = items.length; if(!this.rendered){ - var items = ct.items.items; collapsed = []; - for(var i = 0, len = items.length; i < len; i++) { - var c = items[i]; - var pos = c.region; + for(i = 0; i < len; i++) { + c = items[i]; + pos = c.region; if(c.collapsed){ collapsed.push(c); } @@ -5646,7 +5970,7 @@ Ext.layout.BorderLayout = Ext.extend(Ext.layout.ContainerLayout, { this.rendered = true; } - var size = target.getViewSize(false); + var size = this.getLayoutTargetSize(); if(size.width < 20 || size.height < 20){ // display none? if(collapsed){ this.restoreCollapsed = collapsed; @@ -5657,17 +5981,17 @@ Ext.layout.BorderLayout = Ext.extend(Ext.layout.ContainerLayout, { delete this.restoreCollapsed; } - var w = size.width, h = size.height; - var centerW = w, centerH = h, centerY = 0, centerX = 0; - - var n = this.north, s = this.south, west = this.west, e = this.east, c = this.center; + var w = size.width, h = size.height, + centerW = w, centerH = h, centerY = 0, centerX = 0, + n = this.north, s = this.south, west = this.west, e = this.east, c = this.center, + b, m, totalWidth, totalHeight; if(!c && Ext.layout.BorderLayout.WARN !== false){ throw 'No center region defined in BorderLayout ' + ct.id; } if(n && n.isVisible()){ - var b = n.getSize(); - var m = n.getMargins(); + b = n.getSize(); + m = n.getMargins(); b.width = w - (m.left+m.right); b.x = m.left; b.y = m.top; @@ -5676,38 +6000,38 @@ Ext.layout.BorderLayout = Ext.extend(Ext.layout.ContainerLayout, { n.applyLayout(b); } if(s && s.isVisible()){ - var b = s.getSize(); - var m = s.getMargins(); + b = s.getSize(); + m = s.getMargins(); b.width = w - (m.left+m.right); b.x = m.left; - var totalHeight = (b.height + m.top + m.bottom); + totalHeight = (b.height + m.top + m.bottom); b.y = h - totalHeight + m.top; centerH -= totalHeight; s.applyLayout(b); } if(west && west.isVisible()){ - var b = west.getSize(); - var m = west.getMargins(); + b = west.getSize(); + m = west.getMargins(); b.height = centerH - (m.top+m.bottom); b.x = m.left; b.y = centerY + m.top; - var totalWidth = (b.width + m.left + m.right); + totalWidth = (b.width + m.left + m.right); centerX += totalWidth; centerW -= totalWidth; west.applyLayout(b); } if(e && e.isVisible()){ - var b = e.getSize(); - var m = e.getMargins(); + b = e.getSize(); + m = e.getMargins(); b.height = centerH - (m.top+m.bottom); - var totalWidth = (b.width + m.left + m.right); + totalWidth = (b.width + m.left + m.right); b.x = w - totalWidth + m.left; b.y = centerY + m.top; centerW -= totalWidth; e.applyLayout(b); } if(c){ - var m = c.getMargins(); + m = c.getMargins(); var centerBox = { x: centerX + m.left, y: centerY + m.top, @@ -5717,19 +6041,28 @@ Ext.layout.BorderLayout = Ext.extend(Ext.layout.ContainerLayout, { c.applyLayout(centerBox); } if(collapsed){ - for(var i = 0, len = collapsed.length; i < len; i++){ + for(i = 0, len = collapsed.length; i < len; i++){ collapsed[i].collapse(false); } } if(Ext.isIE && Ext.isStrict){ // workaround IE strict repainting issue target.repaint(); } + // Putting a border layout into an overflowed container is NOT correct and will make a second layout pass necessary. + if (i = target.getStyle('overflow') && i != 'hidden' && !this.adjustmentPass) { + var ts = this.getLayoutTargetSize(); + if (ts.width != size.width || ts.height != size.height){ + this.adjustmentPass = true; + this.onLayout(ct, target); + } + } + delete this.adjustmentPass; }, destroy: function() { - var r = ['north', 'south', 'east', 'west']; - for (var i = 0; i < r.length; i++) { - var region = this[r[i]]; + var r = ['north', 'south', 'east', 'west'], i, region; + for (i = 0; i < r.length; i++) { + region = this[r[i]]; if(region){ if(region.destroy){ region.destroy(); @@ -6006,7 +6339,7 @@ Ext.layout.BorderLayout.Region.prototype = { this.collapsedEl.on('click', this.onExpandClick, this, {stopEvent:true}); }else { if(this.collapsible !== false && !this.hideCollapseTool) { - var t = this.toolTemplate.append( + var t = this.expandToolEl = this.toolTemplate.append( this.collapsedEl.dom, {id:'expand-'+this.position}, true); t.addClassOnOver('x-tool-expand-'+this.position+'-over'); @@ -6203,15 +6536,15 @@ Ext.layout.BorderLayout.Region.prototype = { initAutoHide : function(){ if(this.autoHide !== false){ if(!this.autoHideHd){ - var st = new Ext.util.DelayedTask(this.slideIn, this); + this.autoHideSlideTask = new Ext.util.DelayedTask(this.slideIn, this); this.autoHideHd = { "mouseout": function(e){ if(!e.within(this.el, true)){ - st.delay(500); + this.autoHideSlideTask.delay(500); } }, "mouseover" : function(e){ - st.cancel(); + this.autoHideSlideTask.cancel(); }, scope : this }; @@ -6246,16 +6579,32 @@ Ext.layout.BorderLayout.Region.prototype = { return; } this.isSlid = true; - var ts = this.panel.tools; + var ts = this.panel.tools, dh, pc; if(ts && ts.toggle){ ts.toggle.hide(); } this.el.show(); + + // Temporarily clear the collapsed flag so we can onResize the panel on the slide + pc = this.panel.collapsed; + this.panel.collapsed = false; + if(this.position == 'east' || this.position == 'west'){ + // Temporarily clear the deferHeight flag so we can size the height on the slide + dh = this.panel.deferHeight; + this.panel.deferHeight = false; + this.panel.setSize(undefined, this.collapsedEl.getHeight()); + + // Put the deferHeight flag back after setSize + this.panel.deferHeight = dh; }else{ this.panel.setSize(this.collapsedEl.getWidth(), undefined); } + + // Put the collapsed flag back after onResize + this.panel.collapsed = pc; + this.restoreLT = [this.el.dom.style.left, this.el.dom.style.top]; this.el.alignTo(this.collapsedEl, this.getCollapseAnchor()); this.el.setStyle("z-index", this.floatingZIndex+2); @@ -6406,7 +6755,10 @@ Ext.layout.BorderLayout.Region.prototype = { }, destroy : function(){ - Ext.destroy(this.miniCollapsedEl, this.collapsedEl); + if (this.autoHideSlideTask && this.autoHideSlideTask.cancel){ + this.autoHideSlideTask.cancel(); + } + Ext.destroyMembers(this, 'miniCollapsedEl', 'collapsedEl', 'expandToolEl'); } }; @@ -6644,7 +6996,8 @@ Ext.extend(Ext.layout.BorderLayout.SplitRegion, Ext.layout.BorderLayout.Region, } }); -Ext.Container.LAYOUTS['border'] = Ext.layout.BorderLayout;/** +Ext.Container.LAYOUTS['border'] = Ext.layout.BorderLayout; +/** * @class Ext.layout.FormLayout * @extends Ext.layout.AnchorLayout *This layout manager is specifically designed for rendering and managing child Components of @@ -6757,10 +7110,11 @@ Ext.layout.FormLayout = Ext.extend(Ext.layout.AnchorLayout, { /** * @cfg {Boolean} trackLabels - * True to show/hide the field label when the field is hidden. Defaults to false. + * True to show/hide the field label when the field is hidden. Defaults to true. */ - trackLabels: false, + trackLabels: true, + type: 'form', onRemove: function(c){ Ext.layout.FormLayout.superclass.onRemove.call(this, c); @@ -6770,14 +7124,14 @@ Ext.layout.FormLayout = Ext.extend(Ext.layout.AnchorLayout, { } // check for itemCt, since we may be removing a fieldset or something similar var el = c.getPositionEl(), - ct = c.getItemCt && c.getItemCt(); - if(c.rendered && ct){ + ct = c.getItemCt && c.getItemCt(); + if (c.rendered && ct) { if (el && el.dom) { el.insertAfter(ct); } Ext.destroy(ct); Ext.destroyMembers(c, 'label', 'itemCt'); - if(c.customItemCt){ + if (c.customItemCt) { Ext.destroyMembers(c, 'getItemCt', 'customItemCt'); } } @@ -6797,7 +7151,7 @@ Ext.layout.FormLayout = Ext.extend(Ext.layout.AnchorLayout, { labelAdjust: 0 }); }else{ - this.labelSeparator = ct.labelSeparator || this.labelSeparator; + this.labelSeparator = Ext.isDefined(ct.labelSeparator) ? ct.labelSeparator : this.labelSeparator; ct.labelWidth = ct.labelWidth || 100; if(Ext.isNumber(ct.labelWidth)){ var pad = Ext.isNumber(ct.labelPad) ? ct.labelPad : 5; @@ -6824,6 +7178,11 @@ Ext.layout.FormLayout = Ext.extend(Ext.layout.AnchorLayout, { onFieldShow: function(c){ c.getItemCt().removeClass('x-hide-' + c.hideMode); + + // Composite fields will need to layout after the container is made visible + if (c.isComposite) { + c.doLayout(); + } }, onFieldHide: function(c){ @@ -6837,7 +7196,7 @@ Ext.layout.FormLayout = Ext.extend(Ext.layout.AnchorLayout, { if (items[i]){ ls += items[i]; if (ls.substr(-1, 1) != ';'){ - ls += ';' + ls += ';'; } } } @@ -6878,7 +7237,10 @@ new Ext.Template( *
Also see {@link #getTemplateArgs}
*/ - // private + /** + * @private + * + */ renderItem : function(c, position, target){ if(c && (c.isFormField || c.fieldLabel) && c.inputType != 'hidden'){ var args = this.getTemplateArgs(c); @@ -6936,7 +7298,7 @@ new Ext.Template( * A CSS style specification string to add to the field label for this field (defaults to '' or the * {@link #labelStyle layout's value for labelStyle}).
* - label : StringThe text to display as the label for this - * field (defaults to '')
+ * field (defaults to the field's configured fieldLabel property)
- {@link #labelSeparator} : String
@@ -6945,18 +7307,19 @@ new Ext.Template( * rendered directly after each form field wrapper (defaults to 'x-form-clear-left')The separator to display after * the text of the label for this field (defaults to a colon ':' or the * {@link #labelSeparator layout's value for labelSeparator}). To hide the separator use empty string ''.
*
This is a layout that manages multiple Panels in an expandable accordion style such that only - * one Panel can be expanded at any given time. Each Panel has built-in support for expanding and collapsing.
- *Note: Only Ext.Panels and all subclasses of Ext.Panel may be used in an accordion layout Container.
- *This class is intended to be extended or created via the {@link Ext.Container#layout layout} - * configuration property. See {@link Ext.Container#layout} for additional details.
- *Example usage:
- *
-var accordion = new Ext.Panel({
- title: 'Accordion Layout',
- layout:'accordion',
- defaults: {
- // applied to each contained panel
- bodyStyle: 'padding:15px'
- },
- layoutConfig: {
- // layout-specific configs go here
- titleCollapse: false,
- animate: true,
- activeOnTop: true
- },
- items: [{
- title: 'Panel 1',
- html: '<p>Panel content!</p>'
- },{
- title: 'Panel 2',
- html: '<p>Panel content!</p>'
- },{
- title: 'Panel 3',
- html: '<p>Panel content!</p>'
- }]
-});
-This layout allows you to easily render content into an HTML table. The total number of columns can be - * specified, and rowspan and colspan can be used to create complex layouts within the table. - * This class is intended to be extended or created via the layout:'table' {@link Ext.Container#layout} config, - * and should generally not need to be created directly via the new keyword.
- *Note that when creating a layout via config, the layout-specific config properties must be passed in via - * the {@link Ext.Container#layoutConfig} object which will then be applied internally to the layout. In the - * case of TableLayout, the only valid layout config property is {@link #columns}. However, the items added to a - * TableLayout can supply the following table-specific config properties:
- *-
- *
- rowspan Applied to the table cell containing the item. - *
- colspan Applied to the table cell containing the item. - *
- cellId An id applied to the table cell containing the item. - *
- cellCls A CSS class name added to the table cell containing the item. - *
The basic concept of building up a TableLayout is conceptually very similar to building up a standard - * HTML table. You simply add each panel (or "cell") that you want to include along with any span attributes - * specified as the special config properties of rowspan and colspan which work exactly like their HTML counterparts. - * Rather than explicitly creating and nesting rows and columns as you would in HTML, you simply specify the - * total column count in the layoutConfig and start adding panels in their natural order from left to right, - * top to bottom. The layout will automatically figure out, based on the column count, rowspans and colspans, - * how to position each panel within the table. Just like with HTML tables, your rowspans and colspans must add - * up correctly in your overall layout or you'll end up with missing and/or extra cells! Example usage:
- *
-// This code will generate a layout table that is 3 columns by 2 rows
-// with some spanning included. The basic layout will be:
-// +--------+-----------------+
-// | A | B |
-// | |--------+--------|
-// | | C | D |
-// +--------+--------+--------+
-var table = new Ext.Panel({
- title: 'Table Layout',
- layout:'table',
- defaults: {
- // applied to each contained panel
- bodyStyle:'padding:20px'
- },
- layoutConfig: {
- // The total column count must be specified here
- columns: 3
- },
- items: [{
- html: '<p>Cell A content</p>',
- rowspan: 2
- },{
- html: '<p>Cell B content</p>',
- colspan: 2
- },{
- html: '<p>Cell C content</p>',
- cellCls: 'highlight'
- },{
- html: '<p>Cell D content</p>'
- }]
-});
-An object containing properties which are added to the {@link Ext.DomHelper DomHelper} specification - * used to create the layout's <table> element. Example:
-{
- xtype: 'panel',
- layout: 'table',
- layoutConfig: {
- tableAttrs: {
- style: {
- width: '100%'
- }
- },
- columns: 3
- }
-}This is a layout that inherits the anchoring of {@link Ext.layout.AnchorLayout} and adds the - * ability for x/y positioning using the standard x and y component config options.
- *This class is intended to be extended or created via the {@link Ext.Container#layout layout} - * configuration property. See {@link Ext.Container#layout} for additional details.
- *Example usage:
- *
-var form = new Ext.form.FormPanel({
- title: 'Absolute Layout',
- layout:'absolute',
- layoutConfig: {
- // layout-specific configs go here
- extraCls: 'x-abs-layout-item',
- },
- baseCls: 'x-plain',
- url:'save-form.php',
- defaultType: 'textfield',
- items: [{
- x: 0,
- y: 5,
- xtype:'label',
- text: 'Send To:'
- },{
- x: 60,
- y: 0,
- name: 'to',
- anchor:'100%' // anchor width by percentage
- },{
- x: 0,
- y: 35,
- xtype:'label',
- text: 'Subject:'
- },{
- x: 60,
- y: 30,
- name: 'subject',
- anchor: '100%' // anchor width by percentage
- },{
- x:0,
- y: 60,
- xtype: 'textarea',
- name: 'msg',
- anchor: '100% 100%' // anchor width and height
- }]
-});
-Base Class for HBoxLayout and VBoxLayout Classes. Generally it should not need to be used directly.
+ * @class Ext.layout.AccordionLayout + * @extends Ext.layout.FitLayout + *This is a layout that manages multiple Panels in an expandable accordion style such that only + * one Panel can be expanded at any given time. Each Panel has built-in support for expanding and collapsing.
+ *Note: Only Ext.Panels and all subclasses of Ext.Panel may be used in an accordion layout Container.
+ *This class is intended to be extended or created via the {@link Ext.Container#layout layout} + * configuration property. See {@link Ext.Container#layout} for additional details.
+ *Example usage:
+ *
+var accordion = new Ext.Panel({
+ title: 'Accordion Layout',
+ layout:'accordion',
+ defaults: {
+ // applied to each contained panel
+ bodyStyle: 'padding:15px'
+ },
+ layoutConfig: {
+ // layout-specific configs go here
+ titleCollapse: false,
+ animate: true,
+ activeOnTop: true
+ },
+ items: [{
+ title: 'Panel 1',
+ html: '<p>Panel content!</p>'
+ },{
+ title: 'Panel 2',
+ html: '<p>Panel content!</p>'
+ },{
+ title: 'Panel 3',
+ html: '<p>Panel content!</p>'
+ }]
+});
+If the individual contained items do not have a margins - * property specified, the default margins from this property will be - * applied to each item.
- *This property may be specified as an object containing margins - * to apply in the format:
-{
- top: (top margin),
- right: (right margin),
- bottom: (bottom margin),
- left: (left margin)
-}This property may also be specified as a string containing - * space-separated, numeric margin values. The order of the sides associated - * with each value matches the way CSS processes margin values:
- *-
- *
- If there is only one value, it applies to all sides. - *
- If there are two values, the top and bottom borders are set to the - * first value and the right and left are set to the second. - *
- If there are three values, the top is set to the first value, the left - * and right are set to the second, and the bottom is set to the third. - *
- If there are four values, they apply to the top, right, bottom, and - * left, respectively. - *
Defaults to:
- * {top:0, right:0, bottom:0, left:0}
- * Sets the padding to be applied to all child items managed by this layout.
- *This property must be specified as a string containing - * space-separated, numeric padding values. The order of the sides associated - * with each value matches the way CSS processes padding values:
- *-
- *
- If there is only one value, it applies to all sides. - *
- If there are two values, the top and bottom borders are set to the - * first value and the right and left are set to the second. - *
- If there are three values, the top is set to the first value, the left - * and right are set to the second, and the bottom is set to the third. - *
- If there are four values, they apply to the top, right, bottom, and - * left, respectively. - *
Defaults to: "0"
A layout that arranges items vertically down a Container. This layout optionally divides available vertical
- * space between child items containing a numeric flex configuration.
This layout allows you to easily render content into an HTML table. The total number of columns can be + * specified, and rowspan and colspan can be used to create complex layouts within the table. + * This class is intended to be extended or created via the layout:'table' {@link Ext.Container#layout} config, + * and should generally not need to be created directly via the new keyword.
+ *Note that when creating a layout via config, the layout-specific config properties must be passed in via + * the {@link Ext.Container#layoutConfig} object which will then be applied internally to the layout. In the + * case of TableLayout, the only valid layout config property is {@link #columns}. However, the items added to a + * TableLayout can supply the following table-specific config properties:
+ *-
+ *
- rowspan Applied to the table cell containing the item. + *
- colspan Applied to the table cell containing the item. + *
- cellId An id applied to the table cell containing the item. + *
- cellCls A CSS class name added to the table cell containing the item. + *
The basic concept of building up a TableLayout is conceptually very similar to building up a standard + * HTML table. You simply add each panel (or "cell") that you want to include along with any span attributes + * specified as the special config properties of rowspan and colspan which work exactly like their HTML counterparts. + * Rather than explicitly creating and nesting rows and columns as you would in HTML, you simply specify the + * total column count in the layoutConfig and start adding panels in their natural order from left to right, + * top to bottom. The layout will automatically figure out, based on the column count, rowspans and colspans, + * how to position each panel within the table. Just like with HTML tables, your rowspans and colspans must add + * up correctly in your overall layout or you'll end up with missing and/or extra cells! Example usage:
+ *
+// This code will generate a layout table that is 3 columns by 2 rows
+// with some spanning included. The basic layout will be:
+// +--------+-----------------+
+// | A | B |
+// | |--------+--------|
+// | | C | D |
+// +--------+--------+--------+
+var table = new Ext.Panel({
+ title: 'Table Layout',
+ layout:'table',
+ defaults: {
+ // applied to each contained panel
+ bodyStyle:'padding:20px'
+ },
+ layoutConfig: {
+ // The total column count must be specified here
+ columns: 3
+ },
+ items: [{
+ html: '<p>Cell A content</p>',
+ rowspan: 2
+ },{
+ html: '<p>Cell B content</p>',
+ colspan: 2
+ },{
+ html: '<p>Cell C content</p>',
+ cellCls: 'highlight'
+ },{
+ html: '<p>Cell D content</p>'
+ }]
+});
+-
- *
- left : Defaultchild items are aligned horizontally - * at the left side of the container
- *
- center : child items are aligned horizontally at the - * mid-width of the container
- *
- stretch : child items are stretched horizontally to fill - * the width of the container
- *
- stretchmax : child items are stretched horizontally to - * the size of the largest item.
- *
-
- *
- start : Defaultchild items are packed together at - * top side of container
- *
- center : child items are packed together at - * mid-height of container
- *
- end : child items are packed together at bottom - * side of container
- *
An object containing properties which are added to the {@link Ext.DomHelper DomHelper} specification + * used to create the layout's <table> element. Example:
+{
+ xtype: 'panel',
+ layout: 'table',
+ layoutConfig: {
+ tableAttrs: {
+ style: {
+ width: '100%'
+ }
+ },
+ columns: 3
+ }
+}A layout that arranges items horizontally across a Container. This layout optionally divides available horizontal
- * space between child items containing a numeric flex configuration.
-
- *
- top : Defaultchild items are aligned vertically - * at the top of the container
- *
- middle : child items are aligned vertically in the - * middle of the container
- *
- stretch : child items are stretched vertically to fill - * the height of the container
- *
- stretchmax : child items are stretched vertically to - * the height of the largest item.
- */
- align : 'top', // top, middle, stretch, strechmax
- /**
- * @cfg {String} pack
- * Controls how the child items of the container are packed together. Acceptable configuration values
- * for this property are:
- *
- start : Defaultchild items are packed together at - * left side of container
- *
- center : child items are packed together at - * mid-width of container
- *
- end : child items are packed together at right - * side of container
- *
-
- *
This is a layout that inherits the anchoring of {@link Ext.layout.AnchorLayout} and adds the + * ability for x/y positioning using the standard x and y component config options.
+ *This class is intended to be extended or created via the {@link Ext.Container#layout layout} + * configuration property. See {@link Ext.Container#layout} for additional details.
+ *Example usage:
+ *
+var form = new Ext.form.FormPanel({
+ title: 'Absolute Layout',
+ layout:'absolute',
+ layoutConfig: {
+ // layout-specific configs go here
+ extraCls: 'x-abs-layout-item',
+ },
+ baseCls: 'x-plain',
+ url:'save-form.php',
+ defaultType: 'textfield',
+ items: [{
+ x: 0,
+ y: 5,
+ xtype:'label',
+ text: 'Send To:'
+ },{
+ x: 60,
+ y: 0,
+ name: 'to',
+ anchor:'100%' // anchor width by percentage
+ },{
+ x: 0,
+ y: 35,
+ xtype:'label',
+ text: 'Subject:'
+ },{
+ x: 60,
+ y: 30,
+ name: 'subject',
+ anchor: '100%' // anchor width by percentage
+ },{
+ x:0,
+ y: 60,
+ xtype: 'textarea',
+ name: 'msg',
+ anchor: '100% 100%' // anchor width and height
+ }]
+});
+A specialized container representing the viewable application area (the browser viewport).
- *The Viewport renders itself to the document body, and automatically sizes itself to the size of - * the browser viewport and manages window resizing. There may only be one Viewport created - * in a page. Inner layouts are available by virtue of the fact that all {@link Ext.Panel Panel}s - * added to the Viewport, either through its {@link #items}, or through the items, or the {@link #add} - * method of any of its child Panels may themselves have a layout.
- *The Viewport does not provide scrolling, so child Panels within the Viewport should provide - * for scrolling if needed using the {@link #autoScroll} config.
- *An example showing a classic application border layout:
-new Ext.Viewport({
- layout: 'border',
- items: [{
- region: 'north',
- html: '<h1 class="x-panel-header">Page Title</h1>',
- autoHeight: true,
- border: false,
- margins: '0 0 5 0'
- }, {
- region: 'west',
- collapsible: true,
- title: 'Navigation',
- width: 200
- // the west region might typically utilize a {@link Ext.tree.TreePanel TreePanel} or a Panel with {@link Ext.layout.AccordionLayout Accordion layout}
- }, {
- region: 'south',
- title: 'Title for Panel',
- collapsible: true,
- html: 'Information goes here',
- split: true,
- height: 100,
- minHeight: 100
- }, {
- region: 'east',
- title: 'Title for the Grid Panel',
- collapsible: true,
- split: true,
- width: 200,
- xtype: 'grid',
- // remaining grid configuration not shown ...
- // notice that the GridPanel is added directly as the region
- // it is not "overnested" inside another Panel
- }, {
- region: 'center',
- xtype: 'tabpanel', // TabPanel itself has no title
- items: {
- title: 'Default Tab',
- html: 'The first tab\'s content. Others may be added dynamically'
- }
- }]
-});
-Panel is a container that has specific functionality and structural components that make - * it the perfect building block for application-oriented user interfaces.
- *Panels are, by virtue of their inheritance from {@link Ext.Container}, capable - * of being configured with a {@link Ext.Container#layout layout}, and containing child Components.
- *When either specifying child {@link Ext.Component#items items} of a Panel, or dynamically {@link Ext.Container#add adding} Components
- * to a Panel, remember to consider how you wish the Panel to arrange those child elements, and whether
- * those child elements need to be sized using one of Ext's built-in {@link Ext.Container#layout layout} schemes. By
- * default, Panels use the {@link Ext.layout.ContainerLayout ContainerLayout} scheme. This simply renders
- * child components, appending them one after the other inside the Container, and does not apply any sizing
- * at all.
A Panel may also contain {@link #bbar bottom} and {@link #tbar top} toolbars, along with separate - * {@link #header}, {@link #footer} and {@link #body} sections (see {@link #frame} for additional - * information).
- *Panel also provides built-in {@link #collapsible expandable and collapsible behavior}, along with - * a variety of {@link #tools prebuilt tool buttons} that can be wired up to provide other customized - * behavior. Panels can be easily dropped into any {@link Ext.Container Container} or layout, and the - * layout and rendering pipeline is {@link Ext.Container#add completely managed by the framework}.
- * @constructor - * @param {Object} config The config object - * @xtype panel + * @class Ext.layout.BoxLayout + * @extends Ext.layout.ContainerLayout + *Base Class for HBoxLayout and VBoxLayout Classes. Generally it should not need to be used directly.
*/ -Ext.Panel = Ext.extend(Ext.Container, { - /** - * The Panel's header {@link Ext.Element Element}. Read-only. - *This Element is used to house the {@link #title} and {@link #tools}
- *Note: see the Note for {@link Ext.Component#el el} also.
If this is used to load visible HTML elements in either way, then - * the Panel may not be used as a Layout for hosting nested Panels.
- *If this Panel is intended to be used as the host of a Layout (See {@link #layout}
- * then the body Element must not be loaded or changed - it is under the control
- * of the Panel's Layout.
- *
Note: see the Note for {@link Ext.Component#el el} also.
If the individual contained items do not have a margins + * property specified, the default margins from this property will be + * applied to each item.
+ *This property may be specified as an object containing margins + * to apply in the format:
+{
+ top: (top margin),
+ right: (right margin),
+ bottom: (bottom margin),
+ left: (left margin)
+}This property may also be specified as a string containing + * space-separated, numeric margin values. The order of the sides associated + * with each value matches the way CSS processes margin values:
+ *-
+ *
- If there is only one value, it applies to all sides. + *
- If there are two values, the top and bottom borders are set to the + * first value and the right and left are set to the second. + *
- If there are three values, the top is set to the first value, the left + * and right are set to the second, and the bottom is set to the third. + *
- If there are four values, they apply to the top, right, bottom, and + * left, respectively. + *
Defaults to:
+ * {top:0, right:0, bottom:0, left:0}
+ * Sets the padding to be applied to all child items managed by this layout.
+ *This property must be specified as a string containing + * space-separated, numeric padding values. The order of the sides associated + * with each value matches the way CSS processes padding values:
+ *-
+ *
- If there is only one value, it applies to all sides. + *
- If there are two values, the top and bottom borders are set to the + * first value and the right and left are set to the second. + *
- If there are three values, the top is set to the first value, the left + * and right are set to the second, and the bottom is set to the third. + *
- If there are four values, they apply to the top, right, bottom, and + * left, respectively. + *
Defaults to: "0"
A {@link Ext.DomHelper DomHelper} element specification object may be specified for any - * Panel Element.
- *By default, the Default element in the table below will be used for the html markup to
- * create a child element with the commensurate Default class name (baseCls will be
- * replaced by {@link #baseCls}):
- * Panel Default Default Custom Additional Additional
- * Element element class element class style
- * ======== ========================== ========= ============== ===========
- * {@link #header} div {@link #baseCls}+'-header' {@link #headerCfg} headerCssClass headerStyle
- * {@link #bwrap} div {@link #baseCls}+'-bwrap' {@link #bwrapCfg} bwrapCssClass bwrapStyle
- * + tbar div {@link #baseCls}+'-tbar' {@link #tbarCfg} tbarCssClass tbarStyle
- * + {@link #body} div {@link #baseCls}+'-body' {@link #bodyCfg} {@link #bodyCssClass} {@link #bodyStyle}
- * + bbar div {@link #baseCls}+'-bbar' {@link #bbarCfg} bbarCssClass bbarStyle
- * + {@link #footer} div {@link #baseCls}+'-footer' {@link #footerCfg} footerCssClass footerStyle
- *
- * Configuring a Custom element may be used, for example, to force the {@link #body} Element - * to use a different form of markup than is created by default. An example of this might be - * to {@link Ext.Element#createChild create a child} Panel containing a custom content, such as - * a header, or forcing centering of all Panel content by having the body be a <center> - * element:
- *
-new Ext.Panel({
- title: 'Message Title',
- renderTo: Ext.getBody(),
- width: 200, height: 130,
- bodyCfg: {
- tag: 'center',
- cls: 'x-panel-body', // Default class not applied if Custom element specified
- html: 'Message'
- },
- footerCfg: {
- tag: 'h2',
- cls: 'x-panel-footer' // same as the Default class
- html: 'footer html'
+ padding : '0',
+ // documented in subclasses
+ pack : 'start',
+
+ // private
+ monitorResize : true,
+ type: 'box',
+ scrollOffset : 0,
+ extraCls : 'x-box-item',
+ targetCls : 'x-box-layout-ct',
+ innerCls : 'x-box-inner',
+
+ constructor : function(config){
+ Ext.layout.BoxLayout.superclass.constructor.call(this, config);
+
+ if (Ext.isString(this.defaultMargins)) {
+ this.defaultMargins = this.parseMargins(this.defaultMargins);
+ }
+
+ var handler = this.overflowHandler;
+
+ if (typeof handler == 'string') {
+ handler = {
+ type: handler
+ };
+ }
+
+ var handlerType = 'none';
+ if (handler && handler.type != undefined) {
+ handlerType = handler.type;
+ }
+
+ var constructor = Ext.layout.boxOverflow[handlerType];
+ if (constructor[this.type]) {
+ constructor = constructor[this.type];
+ }
+
+ this.overflowHandler = new constructor(this, handler);
},
- footerCssClass: 'custom-footer', // additional css class, see {@link Ext.element#addClass addClass}
- footerStyle: 'background-color:red' // see {@link #bodyStyle}
-});
- * The example above also explicitly creates a {@link #footer} with custom markup and
- * styling applied.
A {@link Ext.DomHelper DomHelper} element specification object specifying the element structure
- * of this Panel's {@link #header} Element. See {@link #bodyCfg} also.
A {@link Ext.DomHelper DomHelper} element specification object specifying the element structure
- * of this Panel's {@link #bwrap} Element. See {@link #bodyCfg} also.
A {@link Ext.DomHelper DomHelper} element specification object specifying the element structure
- * of this Panel's {@link #tbar} Element. See {@link #bodyCfg} also.
A {@link Ext.DomHelper DomHelper} element specification object specifying the element structure
- * of this Panel's {@link #bbar} Element. See {@link #bodyCfg} also.
A {@link Ext.DomHelper DomHelper} element specification object specifying the element structure
- * of this Panel's {@link #footer} Element. See {@link #bodyCfg} also.
true
- * to enable closing in such situations. Defaults to false.
- */
- /**
- * The Panel's footer {@link Ext.Element Element}. Read-only.
- * This Element is used to house the Panel's {@link #buttons} or {@link #fbar}.
Note: see the Note for {@link Ext.Component#el el} also.
The id of the node, a DOM node or an existing Element corresponding to a DIV that is already present in
- * the document that specifies some panel-specific structural markup. When applyTo is used,
- * constituent parts of the panel can be specified by CSS class name within the main element, and the panel
- * will automatically create those components from that markup. Any required components not specified in the
- * markup will be autogenerated if necessary.
The following class names are supported (baseCls will be replaced by {@link #baseCls}):
- *- baseCls + '-header' - *
- baseCls + '-header-text' - *
- baseCls + '-bwrap' - *
- baseCls + '-tbar' - *
- baseCls + '-body' - *
- baseCls + '-bbar' - *
- baseCls + '-footer'
Using this config, a call to render() is not required. If applyTo is specified, any value passed for - * {@link #renderTo} will be ignored and the target element's parent node will automatically be used as the - * panel's container.
+ * @private */ + destroy: function() { + Ext.destroy(this.overflowHandler); + + Ext.layout.BoxLayout.superclass.destroy.apply(this, arguments); + } +}); + + + +Ext.ns('Ext.layout.boxOverflow'); + +/** + * @class Ext.layout.boxOverflow.None + * @extends Object + * Base class for Box Layout overflow handlers. These specialized classes are invoked when a Box Layout + * (either an HBox or a VBox) has child items that are either too wide (for HBox) or too tall (for VBox) + * for its container. + */ + +Ext.layout.boxOverflow.None = Ext.extend(Object, { + constructor: function(layout, config) { + this.layout = layout; + + Ext.apply(this, config || {}); + }, + + handleOverflow: Ext.emptyFn, + + clearOverflow: Ext.emptyFn +}); + + +Ext.layout.boxOverflow.none = Ext.layout.boxOverflow.None; +/** + * @class Ext.layout.boxOverflow.Menu + * @extends Ext.layout.boxOverflow.None + * Description + */ +Ext.layout.boxOverflow.Menu = Ext.extend(Ext.layout.boxOverflow.None, { /** - * @cfg {Object/Array} tbar - *The top toolbar of the panel. This can be a {@link Ext.Toolbar} object, a toolbar config, or an array of - * buttons/button configs to be added to the toolbar. Note that this is not available as a property after render. - * To access the top toolbar after render, use {@link #getTopToolbar}.
- *Note: Although a Toolbar may contain Field components, these will not be updated by a load - * of an ancestor FormPanel. A Panel's toolbars are not part of the standard Container->Component hierarchy, and - * so are not scanned to collect form items. However, the values will be submitted because form - * submission parameters are collected from the DOM tree.
+ * @cfg afterCls + * @type String + * CSS class added to the afterCt element. This is the element that holds any special items such as scrollers, + * which must always be present at the rightmost edge of the Container */ + afterCls: 'x-strip-right', + /** - * @cfg {Object/Array} bbar - *The bottom toolbar of the panel. This can be a {@link Ext.Toolbar} object, a toolbar config, or an array of - * buttons/button configs to be added to the toolbar. Note that this is not available as a property after render. - * To access the bottom toolbar after render, use {@link #getBottomToolbar}.
- *Note: Although a Toolbar may contain Field components, these will not be updated by a load - * of an ancestor FormPanel. A Panel's toolbars are not part of the standard Container->Component hierarchy, and - * so are not scanned to collect form items. However, the values will be submitted because form - * submission parameters are collected from the DOM tree.
- */ - /** @cfg {Object/Array} fbar - *A {@link Ext.Toolbar Toolbar} object, a Toolbar config, or an array of - * {@link Ext.Button Button}s/{@link Ext.Button Button} configs, describing a {@link Ext.Toolbar Toolbar} to be rendered into this Panel's footer element.
- *After render, the fbar property will be an {@link Ext.Toolbar Toolbar} instance.
If {@link #buttons} are specified, they will supersede the fbar configuration property.
{@link #buttonAlign} configuration affects the layout of these items, for example:
- *
-var w = new Ext.Window({
- height: 250,
- width: 500,
- bbar: new Ext.Toolbar({
- items: [{
- text: 'bbar Left'
- },'->',{
- text: 'bbar Right'
- }]
- }),
- {@link #buttonAlign}: 'left', // anything but 'center' or 'right' and you can use '-', and '->'
- // to control the alignment of fbar items
- fbar: [{
- text: 'fbar Left'
- },'->',{
- text: 'fbar Right'
- }]
-}).show();
- * Note: Although a Toolbar may contain Field components, these will not be updated by a load - * of an ancestor FormPanel. A Panel's toolbars are not part of the standard Container->Component hierarchy, and - * so are not scanned to collect form items. However, the values will be submitted because form - * submission parameters are collected from the DOM tree.
+ * @property noItemsMenuText + * @type String + * HTML fragment to render into the toolbar overflow menu if there are no items to display */ + noItemsMenuText : '', + + constructor: function(layout) { + Ext.layout.boxOverflow.Menu.superclass.constructor.apply(this, arguments); + + /** + * @property menuItems + * @type Array + * Array of all items that are currently hidden and should go into the dropdown menu + */ + this.menuItems = []; + }, + /** - * @cfg {Boolean} header - *true to create the Panel's header element explicitly, false to skip creating
- * it. If a {@link #title} is set the header will be created automatically, otherwise it will not.
- * If a {@link #title} is set but header is explicitly set to false, the header
- * will not be rendered.
+ * @private
+ * Creates the beforeCt, innerCt and afterCt elements if they have not already been created
+ * @param {Ext.Container} container The Container attached to this Layout instance
+ * @param {Ext.Element} target The target Element
*/
+ createInnerElements: function() {
+ if (!this.afterCt) {
+ this.afterCt = this.layout.innerCt.insertSibling({cls: this.afterCls}, 'before');
+ }
+ },
+
/**
- * @cfg {Boolean} footer
- * true to create the footer element explicitly, false to skip creating it. The footer
- * will be created automatically if {@link #buttons} or a {@link #fbar} have
- * been configured. See {@link #bodyCfg} for an example.
+ * @private
*/
+ clearOverflow: function(calculations, targetSize) {
+ var newWidth = targetSize.width + (this.afterCt ? this.afterCt.getWidth() : 0),
+ items = this.menuItems;
+
+ this.hideTrigger();
+
+ for (var index = 0, length = items.length; index < length; index++) {
+ items.pop().component.show();
+ }
+
+ return {
+ targetSize: {
+ height: targetSize.height,
+ width : newWidth
+ }
+ };
+ },
+
/**
- * @cfg {String} title
- * The title text to be used as innerHTML (html tags are accepted) to display in the panel
- * {@link #header} (defaults to ''). When a title is specified the
- * {@link #header} element will automatically be created and displayed unless
- * {@link #header} is explicitly set to false. If you do not want to specify a
- * title at config time, but you may want one later, you must either specify a non-empty
- * title (a blank space ' ' will do) or header:true so that the container
- * element will get created.
+ * @private
*/
+ showTrigger: function() {
+ this.createMenu();
+ this.menuTrigger.show();
+ },
+
/**
- * @cfg {Array} buttons
- * buttons will be used as {@link Ext.Container#items items} for the toolbar in
- * the footer ({@link #fbar}). Typically the value of this configuration property will be
- * an array of {@link Ext.Button}s or {@link Ext.Button} configuration objects.
- * If an item is configured with minWidth or the Panel is configured with minButtonWidth,
- * that width will be applied to the item.
+ * @private
*/
+ hideTrigger: function() {
+ if (this.menuTrigger != undefined) {
+ this.menuTrigger.hide();
+ }
+ },
+
/**
- * @cfg {Object/String/Function} autoLoad
- * A valid url spec according to the Updater {@link Ext.Updater#update} method.
- * If autoLoad is not null, the panel will attempt to load its contents
- * immediately upon render.- * The URL will become the default URL for this panel's {@link #body} element, - * so it may be {@link Ext.Element#refresh refresh}ed at any time.
+ * @private + * Called before the overflow menu is shown. This constructs the menu's items, caching them for as long as it can. */ - /** - * @cfg {Boolean} frame - *false by default to render with plain 1px square borders. true to render with
- * 9 elements, complete with custom rounded corners (also see {@link Ext.Element#boxWrap}).
- * The template generated for each condition is depicted below:
- *
-// frame = false
-<div id="developer-specified-id-goes-here" class="x-panel">
+ beforeMenuShow: function(menu) {
+ var items = this.menuItems,
+ len = items.length,
+ item,
+ prev;
- <div class="x-panel-header"><span class="x-panel-header-text">Title: (frame:false)</span></div>
+ var needsSep = function(group, item){
+ return group.isXType('buttongroup') && !(item instanceof Ext.Toolbar.Separator);
+ };
+
+ this.clearMenu();
+ menu.removeAll();
+
+ for (var i = 0; i < len; i++) {
+ item = items[i].component;
+
+ if (prev && (needsSep(item, prev) || needsSep(prev, item))) {
+ menu.add('-');
+ }
+
+ this.addComponentToMenu(menu, item);
+ prev = item;
+ }
- <div class="x-panel-bwrap">
- <div class="x-panel-body"><p>html value goes here</p></div>
- </div>
-</div>
+ // put something so the menu isn't empty if no compatible items found
+ if (menu.items.length < 1) {
+ menu.add(this.noItemsMenuText);
+ }
+ },
+
+ /**
+ * @private
+ * Returns a menu config for a given component. This config is used to create a menu item
+ * to be added to the expander menu
+ * @param {Ext.Component} component The component to create the config for
+ * @param {Boolean} hideOnClick Passed through to the menu item
+ */
+ createMenuConfig : function(component, hideOnClick){
+ var config = Ext.apply({}, component.initialConfig),
+ group = component.toggleGroup;
+
+ Ext.copyTo(config, component, [
+ 'iconCls', 'icon', 'itemId', 'disabled', 'handler', 'scope', 'menu'
+ ]);
+
+ Ext.apply(config, {
+ text : component.overflowText || component.text,
+ hideOnClick: hideOnClick
+ });
-// frame = true (create 9 elements)
-<div id="developer-specified-id-goes-here" class="x-panel">
- <div class="x-panel-tl"><div class="x-panel-tr"><div class="x-panel-tc">
- <div class="x-panel-header"><span class="x-panel-header-text">Title: (frame:true)</span></div>
- </div></div></div>
+ if (group || component.enableToggle) {
+ Ext.apply(config, {
+ group : group,
+ checked: component.pressed,
+ listeners: {
+ checkchange: function(item, checked){
+ component.toggle(checked);
+ }
+ }
+ });
+ }
- <div class="x-panel-bwrap">
- <div class="x-panel-ml"><div class="x-panel-mr"><div class="x-panel-mc">
- <div class="x-panel-body"><p>html value goes here</p></div>
- </div></div></div>
+ delete config.ownerCt;
+ delete config.xtype;
+ delete config.id;
+
+ return config;
+ },
- <div class="x-panel-bl"><div class="x-panel-br"><div class="x-panel-bc"/>
- </div></div></div>
-</div>
- * An example of specifying a custom icon class would be something like: - *
-// specify the property in the config for the class:
- ...
- iconCls: 'my-icon'
+ createMenu: function() {
+ if (!this.menuTrigger) {
+ this.createInnerElements();
+
+ /**
+ * @private
+ * @property menu
+ * @type Ext.menu.Menu
+ * The expand menu - holds items for every item that cannot be shown
+ * because the container is currently not large enough.
+ */
+ this.menu = new Ext.menu.Menu({
+ ownerCt : this.layout.container,
+ listeners: {
+ scope: this,
+ beforeshow: this.beforeMenuShow
+ }
+ });
-// css class that specifies background image to be used as the icon image:
-.my-icon { background-image: url(../images/my-icon.gif) 0 6px no-repeat !important; }
-tools.<tool-type>
- * Each tool config may contain the following properties: - *
-
- *
- id : StringRequired. The type - * of tool to create. By default, this assigns a CSS class of the form
x-tool-<tool-type>to the - * resulting tool Element. Ext provides CSS rules, and an icon sprite containing images for the tool types listed below. - * The developer may implement custom tools by supplying alternate CSS rules and background images: - *-
- *
- *toggle(Created by default when {@link #collapsible} istrue)- *close- *minimize- *maximize- *restore- *gear- *pin- *unpin- *right- *left- *up- *down- *refresh- *minus- *plus- *help- *search- *save- *print
- * - handler : FunctionRequired. The function to - * call when clicked. Arguments passed are:
-
- *
- event : Ext.EventObjectThe click event.
- *
- toolEl : Ext.ElementThe tool Element.
- *
- panel : Ext.PanelThe host Panel
- *
- tc : ObjectThe tool configuration object
- *
- * - event : Ext.EventObject
- stopEvent : BooleanDefaults to true. Specify as false to allow click event to propagate.
- *
- scope : ObjectThe scope in which to call the handler.
- *
- qtip : String/ObjectA tip string, or - * a config argument to {@link Ext.QuickTip#register}
- *
- hidden : BooleanTrue to initially render hidden.
- *
- on : ObjectA listener config object specifiying - * event listeners in the format of an argument to {@link #addListener}
- *
Note that, apart from the toggle tool which is provided when a panel is collapsible, these - * tools only provide the visual button. Any required functionality must be provided by adding - * handlers that implement the necessary behavior.
- *Example usage:
- *
-tools:[{
- id:'refresh',
- qtip: 'Refresh form Data',
- // hidden:true,
- handler: function(event, toolEl, panel){
- // refresh logic
+ destroy: function() {
+ Ext.destroy(this.menu, this.menuTrigger);
}
-},
-{
- id:'help',
- qtip: 'Get Help',
- handler: function(event, toolEl, panel){
- // whatever
+});
+
+Ext.layout.boxOverflow.menu = Ext.layout.boxOverflow.Menu;
+
+
+/**
+ * @class Ext.layout.boxOverflow.HorizontalMenu
+ * @extends Ext.layout.boxOverflow.Menu
+ * Description
+ */
+Ext.layout.boxOverflow.HorizontalMenu = Ext.extend(Ext.layout.boxOverflow.Menu, {
+
+ constructor: function() {
+ Ext.layout.boxOverflow.HorizontalMenu.superclass.constructor.apply(this, arguments);
+
+ var me = this,
+ layout = me.layout,
+ origFunction = layout.calculateChildBoxes;
+
+ layout.calculateChildBoxes = function(visibleItems, targetSize) {
+ var calcs = origFunction.apply(layout, arguments),
+ meta = calcs.meta,
+ items = me.menuItems;
+
+ //calculate the width of the items currently hidden solely because there is not enough space
+ //to display them
+ var hiddenWidth = 0;
+ for (var index = 0, length = items.length; index < length; index++) {
+ hiddenWidth += items[index].width;
+ }
+
+ meta.minimumWidth += hiddenWidth;
+ meta.tooNarrow = meta.minimumWidth > targetSize.width;
+
+ return calcs;
+ };
+ },
+
+ handleOverflow: function(calculations, targetSize) {
+ this.showTrigger();
+
+ var newWidth = targetSize.width - this.afterCt.getWidth(),
+ boxes = calculations.boxes,
+ usedWidth = 0,
+ recalculate = false;
+
+ //calculate the width of all visible items and any spare width
+ for (var index = 0, length = boxes.length; index < length; index++) {
+ usedWidth += boxes[index].width;
+ }
+
+ var spareWidth = newWidth - usedWidth,
+ showCount = 0;
+
+ //see if we can re-show any of the hidden components
+ for (var index = 0, length = this.menuItems.length; index < length; index++) {
+ var hidden = this.menuItems[index],
+ comp = hidden.component,
+ width = hidden.width;
+
+ if (width < spareWidth) {
+ comp.show();
+
+ spareWidth -= width;
+ showCount ++;
+ recalculate = true;
+ } else {
+ break;
+ }
+ }
+
+ if (recalculate) {
+ this.menuItems = this.menuItems.slice(showCount);
+ } else {
+ for (var i = boxes.length - 1; i >= 0; i--) {
+ var item = boxes[i].component,
+ right = boxes[i].left + boxes[i].width;
+
+ if (right >= newWidth) {
+ this.menuItems.unshift({
+ component: item,
+ width : boxes[i].width
+ });
+
+ item.hide();
+ } else {
+ break;
+ }
+ }
+ }
+
+ if (this.menuItems.length == 0) {
+ this.hideTrigger();
+ }
+
+ return {
+ targetSize: {
+ height: targetSize.height,
+ width : newWidth
+ },
+ recalculate: recalculate
+ };
}
-}]
-For the custom id of 'help' define two relevant css classes with a link to
- * a 15x15 image:
-.x-tool-help {background-image: url(images/help.png);}
-.x-tool-help-over {background-image: url(images/help_over.png);}
-// if using an image sprite:
-.x-tool-help {background-image: url(images/help.png) no-repeat 0 0;}
-.x-tool-help-over {background-position:-15px 0;}
-A Template used to create {@link #tools} in the {@link #header} Element. Defaults to:
-new Ext.Template('<div class="x-tool x-tool-{id}"> </div>')This may may be overridden to provide a custom DOM structure for tools based upon a more - * complex XTemplate. The template's data is a single tool configuration object (Not the entire Array) - * as specified in {@link #tools}. In the following example an <a> tag is used to provide a - * visual indication when hovering over the tool:
-var win = new Ext.Window({
- tools: [{
- id: 'download',
- href: '/MyPdfDoc.pdf'
- }],
- toolTemplate: new Ext.XTemplate(
- '<tpl if="id==\'download\'">',
- '<a class="x-tool x-tool-pdf" href="{href}"></a>',
- '</tpl>',
- '<tpl if="id!=\'download\'">',
- '<div class="x-tool x-tool-{id}"> </div>',
- '</tpl>'
- ),
- width:500,
- height:300,
- closeAction:'hide'
-});Note that the CSS class 'x-tool-pdf' should have an associated style rule which provides an - * appropriate background image, something like:
-
- a.x-tool-pdf {background-image: url(../shared/extjs/images/pdf.gif)!important;}
- true to hide the expand/collapse toggle button when {@link #collapsible} == true,
- * false to display it (defaults to false).
+ * @cfg wheelIncrement
+ * @type Number
+ * The number of pixels to increment on mouse wheel scrolling (defaults to 3).
*/
+ wheelIncrement: 3,
+
/**
- * @cfg {Boolean} titleCollapse
- * true to allow expanding and collapsing the panel (when {@link #collapsible} = true)
- * by clicking anywhere in the header bar, false) to allow it only by clicking to tool button
- * (defaults to false)). If this panel is a child item of a border layout also see the
- * {@link Ext.layout.BorderLayout.Region BorderLayout.Region}
- * {@link Ext.layout.BorderLayout.Region#floatable floatable} config option.
+ * @cfg scrollRepeatInterval
+ * @type Number
+ * Number of milliseconds between each scroll while a scroller button is held down (defaults to 400)
*/
-
+ scrollRepeatInterval: 400,
+
/**
- * @cfg {Mixed} floating
- * This property is used to configure the underlying {@link Ext.Layer}. Acceptable values for this - * configuration property are:
-
- *
false: Default.Display the panel inline where it is - * rendered.
- * true:Float the panel (absolute position it with automatic - * shimming and shadow).-
- *
Setting floating to true will create an Ext.Layer for this panel and display the - * panel at negative offsets so that it is hidden.- *Since the panel will be absolute positioned, the position must be set explicitly - * after render (e.g.,- *myPanel.setPosition(100,100);).Note: when floating a panel you should always assign a fixed width, - * otherwise it will be auto width and will expand to fill to the right edge of the viewport.- *
- * {@link Ext.Layer object}:The specified object will be used - * as the configuration object for the {@link Ext.Layer} that will be created.
- *
true (or a valid Ext.Shadow {@link Ext.Shadow#mode} value) to display a shadow behind the
- * panel, false to display no shadow (defaults to 'sides'). Note that this option
- * only applies when {@link #floating} = true.
+ * @cfg beforeCls
+ * @type String
+ * CSS class added to the beforeCt element. This is the element that holds any special items such as scrollers,
+ * which must always be present at the leftmost edge of the Container
*/
+ beforeCls: 'x-strip-left',
+
/**
- * @cfg {Number} shadowOffset
- * The number of pixels to offset the shadow if displayed (defaults to 4). Note that this
- * option only applies when {@link #floating} = true.
+ * @cfg afterCls
+ * @type String
+ * CSS class added to the afterCt element. This is the element that holds any special items such as scrollers,
+ * which must always be present at the rightmost edge of the Container
*/
+ afterCls: 'x-strip-right',
+
/**
- * @cfg {Boolean} shim
- * false to disable the iframe shim in browsers which need one (defaults to true).
- * Note that this option only applies when {@link #floating} = true.
+ * @cfg scrollerCls
+ * @type String
+ * CSS class added to both scroller elements if enableScroll is used
*/
+ scrollerCls: 'x-strip-scroller',
+
/**
- * @cfg {Object/Array} keys
- * A {@link Ext.KeyMap} config object (in the format expected by {@link Ext.KeyMap#addBinding}
- * used to assign custom key handling to this panel (defaults to null).
+ * @cfg beforeScrollerCls
+ * @type String
+ * CSS class added to the left scroller element if enableScroll is used
*/
+ beforeScrollerCls: 'x-strip-scroller-left',
+
/**
- * @cfg {Boolean/Object} draggable
- * true to enable dragging of this Panel (defaults to false).
For custom drag/drop implementations, an Ext.Panel.DD config could also be passed
- * in this config instead of true. Ext.Panel.DD is an internal, undocumented class which
- * moves a proxy Element around in place of the Panel's element, but provides no other behaviour
- * during dragging or on drop. It is a subclass of {@link Ext.dd.DragSource}, so behaviour may be
- * added by implementing the interface methods of {@link Ext.dd.DragDrop} e.g.:
- *
-new Ext.Panel({
- title: 'Drag me',
- x: 100,
- y: 100,
- renderTo: Ext.getBody(),
- floating: true,
- frame: true,
- width: 400,
- height: 200,
- draggable: {
-// Config option of Ext.Panel.DD class.
-// It's a floating Panel, so do not show a placeholder proxy in the original position.
- insertProxy: false,
-
-// Called for each mousemove event while dragging the DD object.
- onDrag : function(e){
-// Record the x,y position of the drag proxy so that we can
-// position the Panel at end of drag.
- var pel = this.proxy.getEl();
- this.x = pel.getLeft(true);
- this.y = pel.getTop(true);
+ * @cfg afterScrollerCls
+ * @type String
+ * CSS class added to the right scroller element if enableScroll is used
+ */
+ afterScrollerCls: 'x-strip-scroller-right',
+
+ /**
+ * @private
+ * Sets up an listener to scroll on the layout's innerCt mousewheel event
+ */
+ createWheelListener: function() {
+ this.layout.innerCt.on({
+ scope : this,
+ mousewheel: function(e) {
+ e.stopEvent();
-// Keep the Shadow aligned if there is one.
- var s = this.panel.getEl().shadow;
- if (s) {
- s.realign(this.x, this.y, pel.getWidth(), pel.getHeight());
+ this.scrollBy(e.getWheelDelta() * this.wheelIncrement * -1, false);
}
- },
-
-// Called on the mouseup event.
- endDrag : function(e){
- this.panel.setPosition(this.x, this.y);
- }
- }
-}).show();
-false). An important note when using the disabled
- * config on panels is that IE will often fail to initialize the disabled mask element correectly if
- * the panel's layout has not yet completed by the time the Panel is disabled during the render process.
- * If you experience this issue, you may need to instead use the {@link #afterlayout} event to initialize
- * the disabled state:
- *
-new Ext.Panel({
- ...
- listeners: {
- 'afterlayout': {
- fn: function(p){
- p.disable();
- },
- single: true // important, as many layouts can occur
- }
- }
-});
-true to use height:'auto', false to use fixed height (defaults to false).
- * Note: Setting autoHeight: true means that the browser will manage the panel's height
- * based on its contents, and that Ext will not manage it at all. If the panel is within a layout that
- * manages dimensions (fit, border, etc.) then setting autoHeight: true
- * can cause issues with scrolling and will not generally work as expected since the panel will take
- * on the height of its contents rather than the height required by the Ext layout.
+ * @private
+ * Shows the scroller elements in the beforeCt and afterCt. Creates the scrollers first if they are not already
+ * present.
*/
-
-
+ showScrollers: function() {
+ this.createScrollers();
+
+ this.beforeScroller.show();
+ this.afterScroller.show();
+
+ this.updateScrollButtons();
+ },
+
/**
- * @cfg {String} baseCls
- * The base CSS class to apply to this panel's element (defaults to 'x-panel').
- * Another option available by default is to specify 'x-plain' which strips all styling
- * except for required attributes for Ext layouts to function (e.g. overflow:hidden).
- * See {@link #unstyled} also.
'x-panel-collapsed').
+ * @private
+ * Creates the clickable scroller elements and places them into the beforeCt and afterCt
*/
- collapsedCls : 'x-panel-collapsed',
+ createScrollers: function() {
+ if (!this.beforeScroller && !this.afterScroller) {
+ var before = this.beforeCt.createChild({
+ cls: String.format("{0} {1} ", this.scrollerCls, this.beforeScrollerCls)
+ });
+
+ var after = this.afterCt.createChild({
+ cls: String.format("{0} {1}", this.scrollerCls, this.afterScrollerCls)
+ });
+
+ before.addClassOnOver(this.beforeScrollerCls + '-hover');
+ after.addClassOnOver(this.afterScrollerCls + '-hover');
+
+ before.setVisibilityMode(Ext.Element.DISPLAY);
+ after.setVisibilityMode(Ext.Element.DISPLAY);
+
+ this.beforeRepeater = new Ext.util.ClickRepeater(before, {
+ interval: this.scrollRepeatInterval,
+ handler : this.scrollLeft,
+ scope : this
+ });
+
+ this.afterRepeater = new Ext.util.ClickRepeater(after, {
+ interval: this.scrollRepeatInterval,
+ handler : this.scrollRight,
+ scope : this
+ });
+
+ /**
+ * @property beforeScroller
+ * @type Ext.Element
+ * The left scroller element. Only created when needed.
+ */
+ this.beforeScroller = before;
+
+ /**
+ * @property afterScroller
+ * @type Ext.Element
+ * The left scroller element. Only created when needed.
+ */
+ this.afterScroller = after;
+ }
+ },
+
/**
- * @cfg {Boolean} maskDisabled
- * true to mask the panel when it is {@link #disabled}, false to not mask it (defaults
- * to true). Either way, the panel will always tell its contained elements to disable themselves
- * when it is disabled, but masking the panel can provide an additional visual cue that the panel is
- * disabled.
+ * @private
*/
- maskDisabled : true,
+ destroy: function() {
+ Ext.destroy(this.beforeScroller, this.afterScroller, this.beforeRepeater, this.afterRepeater, this.beforeCt, this.afterCt);
+ },
+
/**
- * @cfg {Boolean} animCollapse
- * true to animate the transition when the panel is collapsed, false to skip the
- * animation (defaults to true if the {@link Ext.Fx} class is available, otherwise false).
+ * @private
+ * Scrolls left or right by the number of pixels specified
+ * @param {Number} delta Number of pixels to scroll to the right by. Use a negative number to scroll left
*/
- animCollapse : Ext.enableFx,
+ scrollBy: function(delta, animate) {
+ this.scrollTo(this.getScrollPosition() + delta, animate);
+ },
+
/**
- * @cfg {Boolean} headerAsText
- * true to display the panel {@link #title} in the {@link #header},
- * false to hide it (defaults to true).
+ * @private
+ * Normalizes an item reference, string id or numerical index into a reference to the item
+ * @param {Ext.Component|String|Number} item The item reference, id or index
+ * @return {Ext.Component} The item
*/
- headerAsText : true,
+ getItem: function(item) {
+ if (Ext.isString(item)) {
+ item = Ext.getCmp(item);
+ } else if (Ext.isNumber(item)) {
+ item = this.items[item];
+ }
+
+ return item;
+ },
+
/**
- * @cfg {String} buttonAlign
- * The alignment of any {@link #buttons} added to this panel. Valid values are 'right',
- * 'left' and 'center' (defaults to 'right').
+ * @private
+ * @return {Object} Object passed to scrollTo when scrolling
*/
- buttonAlign : 'right',
+ getScrollAnim: function() {
+ return {
+ duration: this.scrollDuration,
+ callback: this.updateScrollButtons,
+ scope : this
+ };
+ },
+
/**
- * @cfg {Boolean} collapsed
- * true to render the panel collapsed, false to render it expanded (defaults to
- * false).
+ * @private
+ * Enables or disables each scroller button based on the current scroll position
*/
- collapsed : false,
+ updateScrollButtons: function() {
+ if (this.beforeScroller == undefined || this.afterScroller == undefined) {
+ return;
+ }
+
+ var beforeMeth = this.atExtremeBefore() ? 'addClass' : 'removeClass',
+ afterMeth = this.atExtremeAfter() ? 'addClass' : 'removeClass',
+ beforeCls = this.beforeScrollerCls + '-disabled',
+ afterCls = this.afterScrollerCls + '-disabled';
+
+ this.beforeScroller[beforeMeth](beforeCls);
+ this.afterScroller[afterMeth](afterCls);
+ this.scrolling = false;
+ },
+
/**
- * @cfg {Boolean} collapseFirst
- * true to make sure the collapse/expand toggle button always renders first (to the left of)
- * any other tools in the panel's title bar, false to render it last (defaults to true).
+ * @private
+ * Returns true if the innerCt scroll is already at its left-most point
+ * @return {Boolean} True if already at furthest left point
*/
- collapseFirst : true,
+ atExtremeBefore: function() {
+ return this.getScrollPosition() === 0;
+ },
+
/**
- * @cfg {Number} minButtonWidth
- * Minimum width in pixels of all {@link #buttons} in this panel (defaults to 75)
+ * @private
+ * Scrolls to the left by the configured amount
*/
- minButtonWidth : 75,
+ scrollLeft: function(animate) {
+ this.scrollBy(-this.scrollIncrement, animate);
+ },
+
/**
- * @cfg {Boolean} unstyled
- * Overrides the {@link #baseCls} setting to {@link #baseCls} = 'x-plain' which renders
- * the panel unstyled except for required attributes for Ext layouts to function (e.g. overflow:hidden).
+ * @private
+ * Scrolls to the right by the configured amount
*/
+ scrollRight: function(animate) {
+ this.scrollBy(this.scrollIncrement, animate);
+ },
+
/**
- * @cfg {String} elements
- * A comma-delimited list of panel elements to initialize when the panel is rendered. Normally, this list will be
- * generated automatically based on the items added to the panel at config time, but sometimes it might be useful to
- * make sure a structural element is rendered even if not specified at config time (for example, you may want
- * to add a button or toolbar dynamically after the panel has been rendered). Adding those elements to this
- * list will allocate the required placeholders in the panel when it is rendered. Valid values are-
- *
header
- * tbar(top bar)
- * body
- * bbar(bottom bar)
- * footer
- *
body'.
+ * Scrolls to the given component.
+ * @param {String|Number|Ext.Component} item The item to scroll to. Can be a numerical index, component id
+ * or a reference to the component itself.
+ * @param {Boolean} animate True to animate the scrolling
*/
- elements : 'body',
+ scrollToItem: function(item, animate) {
+ item = this.getItem(item);
+
+ if (item != undefined) {
+ var visibility = this.getItemVisibility(item);
+
+ if (!visibility.fullyVisible) {
+ var box = item.getBox(true, true),
+ newX = box.x;
+
+ if (visibility.hiddenRight) {
+ newX -= (this.layout.innerCt.getWidth() - box.width);
+ }
+
+ this.scrollTo(newX, animate);
+ }
+ }
+ },
+
/**
- * @cfg {Boolean} preventBodyReset
- * Defaults to false. When set to true, an extra css class 'x-panel-normal'
- * will be added to the panel's element, effectively applying css styles suggested by the W3C
- * (see http://www.w3.org/TR/CSS21/sample.html) to the Panel's body element (not the header,
- * footer, etc.).
- */
- preventBodyReset : false,
+ * @private
+ * For a given item in the container, return an object with information on whether the item is visible
+ * with the current innerCt scroll value.
+ * @param {Ext.Component} item The item
+ * @return {Object} Values for fullyVisible, hiddenLeft and hiddenRight
+ */
+ getItemVisibility: function(item) {
+ var box = this.getItem(item).getBox(true, true),
+ itemLeft = box.x,
+ itemRight = box.x + box.width,
+ scrollLeft = this.getScrollPosition(),
+ scrollRight = this.layout.innerCt.getWidth() + scrollLeft;
+
+ return {
+ hiddenLeft : itemLeft < scrollLeft,
+ hiddenRight : itemRight > scrollRight,
+ fullyVisible: itemLeft > scrollLeft && itemRight < scrollRight
+ };
+ }
+});
+
+Ext.layout.boxOverflow.scroller = Ext.layout.boxOverflow.Scroller;
+
+/**
+ * @class Ext.layout.boxOverflow.VerticalScroller
+ * @extends Ext.layout.boxOverflow.Scroller
+ * Description
+ */
+Ext.layout.boxOverflow.VerticalScroller = Ext.extend(Ext.layout.boxOverflow.Scroller, {
+ scrollIncrement: 75,
+ wheelIncrement : 2,
+
+ handleOverflow: function(calculations, targetSize) {
+ Ext.layout.boxOverflow.VerticalScroller.superclass.handleOverflow.apply(this, arguments);
+
+ return {
+ targetSize: {
+ height: targetSize.height - (this.beforeCt.getHeight() + this.afterCt.getHeight()),
+ width : targetSize.width
+ }
+ };
+ },
+
/**
- * @cfg {Number/String} padding
- * A shortcut for setting a padding style on the body element. The value can either be
- * a number to be applied to all sides, or a normal css string describing padding.
- * Defaults to undefined.
- *
+ * @private
+ * Creates the beforeCt and afterCt elements if they have not already been created
*/
- padding: undefined,
+ createInnerElements: function() {
+ var target = this.layout.innerCt;
+
+ //normal items will be rendered to the innerCt. beforeCt and afterCt allow for fixed positioning of
+ //special items such as scrollers or dropdown menu triggers
+ if (!this.beforeCt) {
+ this.beforeCt = target.insertSibling({cls: this.beforeCls}, 'before');
+ this.afterCt = target.insertSibling({cls: this.afterCls}, 'after');
- /** @cfg {String} resizeEvent
- * The event to listen to for resizing in layouts. Defaults to 'bodyresize'.
+ this.createWheelListener();
+ }
+ },
+
+ /**
+ * @private
+ * Scrolls to the given position. Performs bounds checking.
+ * @param {Number} position The position to scroll to. This is constrained.
+ * @param {Boolean} animate True to animate. If undefined, falls back to value of this.animateScroll
*/
- resizeEvent: 'bodyresize',
-
- // protected - these could be used to customize the behavior of the window,
- // but changing them would not be useful without further mofifications and
- // could lead to unexpected or undesirable results.
- toolTarget : 'header',
- collapseEl : 'bwrap',
- slideAnchor : 't',
- disabledClass : '',
-
- // private, notify box this class will handle heights
- deferHeight : true,
- // private
- expandDefaults: {
- duration : 0.25
+ scrollTo: function(position, animate) {
+ var oldPosition = this.getScrollPosition(),
+ newPosition = position.constrain(0, this.getMaxScrollBottom());
+
+ if (newPosition != oldPosition && !this.scrolling) {
+ if (animate == undefined) {
+ animate = this.animateScroll;
+ }
+
+ this.layout.innerCt.scrollTo('top', newPosition, animate ? this.getScrollAnim() : false);
+
+ if (animate) {
+ this.scrolling = true;
+ } else {
+ this.scrolling = false;
+ this.updateScrollButtons();
+ }
+ }
},
- // private
- collapseDefaults : {
- duration : 0.25
+
+ /**
+ * Returns the current scroll position of the innerCt element
+ * @return {Number} The current scroll position
+ */
+ getScrollPosition: function(){
+ return parseInt(this.layout.innerCt.dom.scrollTop, 10) || 0;
+ },
+
+ /**
+ * @private
+ * Returns the maximum value we can scrollTo
+ * @return {Number} The max scroll value
+ */
+ getMaxScrollBottom: function() {
+ return this.layout.innerCt.dom.scrollHeight - this.layout.innerCt.getHeight();
},
+
+ /**
+ * @private
+ * Returns true if the innerCt scroll is already at its right-most point
+ * @return {Boolean} True if already at furthest right point
+ */
+ atExtremeAfter: function() {
+ return this.getScrollPosition() >= this.getMaxScrollBottom();
+ }
+});
- // private
- initComponent : function(){
- Ext.Panel.superclass.initComponent.call(this);
+Ext.layout.boxOverflow.scroller.vbox = Ext.layout.boxOverflow.VerticalScroller;
- this.addEvents(
- /**
- * @event bodyresize
- * Fires after the Panel has been resized.
- * @param {Ext.Panel} p the Panel which has been resized.
- * @param {Number} width The Panel's new width.
- * @param {Number} height The Panel's new height.
- */
- 'bodyresize',
- /**
- * @event titlechange
- * Fires after the Panel title has been {@link #title set} or {@link #setTitle changed}.
- * @param {Ext.Panel} p the Panel which has had its title changed.
- * @param {String} The new title.
- */
- 'titlechange',
- /**
- * @event iconchange
- * Fires after the Panel icon class has been {@link #iconCls set} or {@link #setIconClass changed}.
- * @param {Ext.Panel} p the Panel which has had its {@link #iconCls icon class} changed.
- * @param {String} The new icon class.
- * @param {String} The old icon class.
- */
- 'iconchange',
- /**
- * @event collapse
- * Fires after the Panel has been collapsed.
- * @param {Ext.Panel} p the Panel that has been collapsed.
- */
- 'collapse',
- /**
- * @event expand
- * Fires after the Panel has been expanded.
- * @param {Ext.Panel} p The Panel that has been expanded.
- */
- 'expand',
- /**
- * @event beforecollapse
- * Fires before the Panel is collapsed. A handler can return false to cancel the collapse.
- * @param {Ext.Panel} p the Panel being collapsed.
- * @param {Boolean} animate True if the collapse is animated, else false.
- */
- 'beforecollapse',
- /**
- * @event beforeexpand
- * Fires before the Panel is expanded. A handler can return false to cancel the expand.
- * @param {Ext.Panel} p The Panel being expanded.
- * @param {Boolean} animate True if the expand is animated, else false.
- */
- 'beforeexpand',
- /**
- * @event beforeclose
- * Fires before the Panel is closed. Note that Panels do not directly support being closed, but some
- * Panel subclasses do (like {@link Ext.Window}) or a Panel within a Ext.TabPanel. This event only
- * applies to such subclasses.
- * A handler can return false to cancel the close.
- * @param {Ext.Panel} p The Panel being closed.
- */
- 'beforeclose',
- /**
- * @event close
- * Fires after the Panel is closed. Note that Panels do not directly support being closed, but some
- * Panel subclasses do (like {@link Ext.Window}) or a Panel within a Ext.TabPanel.
- * @param {Ext.Panel} p The Panel that has been closed.
- */
- 'close',
- /**
- * @event activate
- * Fires after the Panel has been visually activated.
- * Note that Panels do not directly support being activated, but some Panel subclasses
- * do (like {@link Ext.Window}). Panels which are child Components of a TabPanel fire the
- * activate and deactivate events under the control of the TabPanel.
- * @param {Ext.Panel} p The Panel that has been activated.
- */
- 'activate',
- /**
- * @event deactivate
- * Fires after the Panel has been visually deactivated.
- * Note that Panels do not directly support being deactivated, but some Panel subclasses
- * do (like {@link Ext.Window}). Panels which are child Components of a TabPanel fire the
- * activate and deactivate events under the control of the TabPanel.
- * @param {Ext.Panel} p The Panel that has been deactivated.
- */
- 'deactivate'
- );
- if(this.unstyled){
- this.baseCls = 'x-plain';
+/**
+ * @class Ext.layout.boxOverflow.HorizontalScroller
+ * @extends Ext.layout.boxOverflow.Scroller
+ * Description
+ */
+Ext.layout.boxOverflow.HorizontalScroller = Ext.extend(Ext.layout.boxOverflow.Scroller, {
+ handleOverflow: function(calculations, targetSize) {
+ Ext.layout.boxOverflow.HorizontalScroller.superclass.handleOverflow.apply(this, arguments);
+
+ return {
+ targetSize: {
+ height: targetSize.height,
+ width : targetSize.width - (this.beforeCt.getWidth() + this.afterCt.getWidth())
+ }
+ };
+ },
+
+ /**
+ * @private
+ * Creates the beforeCt and afterCt elements if they have not already been created
+ */
+ createInnerElements: function() {
+ var target = this.layout.innerCt;
+
+ //normal items will be rendered to the innerCt. beforeCt and afterCt allow for fixed positioning of
+ //special items such as scrollers or dropdown menu triggers
+ if (!this.beforeCt) {
+ this.afterCt = target.insertSibling({cls: this.afterCls}, 'before');
+ this.beforeCt = target.insertSibling({cls: this.beforeCls}, 'before');
+
+ this.createWheelListener();
+ }
+ },
+
+ /**
+ * @private
+ * Scrolls to the given position. Performs bounds checking.
+ * @param {Number} position The position to scroll to. This is constrained.
+ * @param {Boolean} animate True to animate. If undefined, falls back to value of this.animateScroll
+ */
+ scrollTo: function(position, animate) {
+ var oldPosition = this.getScrollPosition(),
+ newPosition = position.constrain(0, this.getMaxScrollRight());
+
+ if (newPosition != oldPosition && !this.scrolling) {
+ if (animate == undefined) {
+ animate = this.animateScroll;
+ }
+
+ this.layout.innerCt.scrollTo('left', newPosition, animate ? this.getScrollAnim() : false);
+
+ if (animate) {
+ this.scrolling = true;
+ } else {
+ this.scrolling = false;
+ this.updateScrollButtons();
+ }
}
+ },
+
+ /**
+ * Returns the current scroll position of the innerCt element
+ * @return {Number} The current scroll position
+ */
+ getScrollPosition: function(){
+ return parseInt(this.layout.innerCt.dom.scrollLeft, 10) || 0;
+ },
+
+ /**
+ * @private
+ * Returns the maximum value we can scrollTo
+ * @return {Number} The max scroll value
+ */
+ getMaxScrollRight: function() {
+ return this.layout.innerCt.dom.scrollWidth - this.layout.innerCt.getWidth();
+ },
+
+ /**
+ * @private
+ * Returns true if the innerCt scroll is already at its right-most point
+ * @return {Boolean} True if already at furthest right point
+ */
+ atExtremeAfter: function() {
+ return this.getScrollPosition() >= this.getMaxScrollRight();
+ }
+});
+Ext.layout.boxOverflow.scroller.hbox = Ext.layout.boxOverflow.HorizontalScroller;/**
+ * @class Ext.layout.HBoxLayout
+ * @extends Ext.layout.BoxLayout
+ * A layout that arranges items horizontally across a Container. This layout optionally divides available horizontal
+ * space between child items containing a numeric flex configuration.
-
+ *
- top : Defaultchild items are aligned vertically + * at the top of the container
+ *
- middle : child items are aligned vertically in the + * middle of the container
+ *
- stretch : child items are stretched vertically to fill + * the height of the container
+ *
- stretchmax : child items are stretched vertically to + * the height of the largest item.
+ */
+ align: 'top', // top, middle, stretch, strechmax
- this.toolbars = [];
- // shortcuts
- if(this.tbar){
- this.elements += ',tbar';
- this.topToolbar = this.createToolbar(this.tbar);
- delete this.tbar;
+ type : 'hbox',
- }
- if(this.bbar){
- this.elements += ',bbar';
- this.bottomToolbar = this.createToolbar(this.bbar);
- delete this.bbar;
- }
+ /**
+ * @cfg {String} pack
+ * Controls how the child items of the container are packed together. Acceptable configuration values
+ * for this property are:
+ *
- start : Defaultchild items are packed together at + * left side of container
+ *
- center : child items are packed together at + * mid-width of container
+ *
- end : child items are packed together at right + * side of container
+ *
- left : Defaultchild items are aligned horizontally + * at the left side of the container
+ *
- center : child items are aligned horizontally at the + * mid-width of the container
+ *
- stretch : child items are stretched horizontally to fill + * the width of the container
+ *
- stretchmax : child items are stretched horizontally to + * the size of the largest item.
+ *
- start : Defaultchild items are packed together at + * top side of container
+ *
- center : child items are packed together at + * mid-height of container
+ *
- end : child items are packed together at bottom + * side of container
+ *
- ',
+ '
', + ' ', + '', + '
'
+ );
+ }
+
+ if(c && !c.rendered){
+ if(Ext.isNumber(position)){
+ position = target.dom.childNodes[position];
+ }
+ var a = this.getItemArgs(c);
+
+// The Component's positionEl is the - it is rendered into + c.render(c.positionEl = position ? + this.itemTpl.insertBefore(position, a, true) : + this.itemTpl.append(target, a, true)); + +// Link the containing
- to the item. + c.positionEl.menuItemId = c.getItemId(); + +// If rendering a regular Component, and it needs an icon, +// move the Component rightwards. + if (!a.isMenuItem && a.needsIcon) { + c.positionEl.addClass('x-menu-list-item-indent'); + } + this.configureItem(c); + }else if(c && !this.isValidParent(c, target)){ + if(Ext.isNumber(position)){ + position = target.dom.childNodes[position]; + } + target.dom.insertBefore(c.getActionEl().dom, position || null); + } + }, + + getItemArgs : function(c) { + var isMenuItem = c instanceof Ext.menu.Item, + canHaveIcon = !(isMenuItem || c instanceof Ext.menu.Separator); + + return { + isMenuItem: isMenuItem, + needsIcon: canHaveIcon && (c.icon || c.iconCls), + icon: c.icon || Ext.BLANK_IMAGE_URL, + iconCls: 'x-menu-item-icon ' + (c.iconCls || ''), + itemId: 'x-menu-el-' + c.id, + itemCls: 'x-menu-list-item ', + altText: c.altText || '' + }; + }, + + // Valid if the Component is in a
- which is part of our target
-
+ isValidParent : function(c, target) {
+ return c.el.up('li.x-menu-list-item', 5).dom.parentNode === (target.dom || target);
+ },
+
+ onLayout : function(ct, target){
+ Ext.layout.MenuLayout.superclass.onLayout.call(this, ct, target);
+ this.doAutoSize();
+ },
+
+ doAutoSize : function(){
+ var ct = this.container, w = ct.width;
+ if(ct.floating){
+ if(w){
+ ct.setWidth(w);
+ }else if(Ext.isIE){
+ ct.setWidth(Ext.isStrict && (Ext.isIE7 || Ext.isIE8) ? 'auto' : ct.minWidth);
+ var el = ct.getEl(), t = el.dom.offsetWidth; // force recalc
+ ct.setWidth(ct.getLayoutTarget().getWidth() + el.getFrameWidth('lr'));
+ }
+ }
+ }
+});
+Ext.Container.LAYOUTS['menu'] = Ext.layout.MenuLayout;
+/**
+ * @class Ext.Viewport
+ * @extends Ext.Container
+ *
A specialized container representing the viewable application area (the browser viewport).
+ *The Viewport renders itself to the document body, and automatically sizes itself to the size of + * the browser viewport and manages window resizing. There may only be one Viewport created + * in a page. Inner layouts are available by virtue of the fact that all {@link Ext.Panel Panel}s + * added to the Viewport, either through its {@link #items}, or through the items, or the {@link #add} + * method of any of its child Panels may themselves have a layout.
+ *The Viewport does not provide scrolling, so child Panels within the Viewport should provide + * for scrolling if needed using the {@link #autoScroll} config.
+ *An example showing a classic application border layout:
+ * @constructor + * Create a new Viewport + * @param {Object} config The config object + * @xtype viewport + */ +Ext.Viewport = Ext.extend(Ext.Container, { + /* + * Privatize config options which, if used, would interfere with the + * correct operation of the Viewport as the sole manager of the + * layout of the document body. + */ + /** + * @cfg {Mixed} applyTo @hide + */ + /** + * @cfg {Boolean} allowDomMove @hide + */ + /** + * @cfg {Boolean} hideParent @hide + */ + /** + * @cfg {Mixed} renderTo @hide + */ + /** + * @cfg {Boolean} hideParent @hide + */ + /** + * @cfg {Number} height @hide + */ + /** + * @cfg {Number} width @hide + */ + /** + * @cfg {Boolean} autoHeight @hide + */ + /** + * @cfg {Boolean} autoWidth @hide + */ + /** + * @cfg {Boolean} deferHeight @hide + */ + /** + * @cfg {Boolean} monitorResize @hide + */ + + initComponent : function() { + Ext.Viewport.superclass.initComponent.call(this); + document.getElementsByTagName('html')[0].className += ' x-viewport'; + this.el = Ext.getBody(); + this.el.setHeight = Ext.emptyFn; + this.el.setWidth = Ext.emptyFn; + this.el.setSize = Ext.emptyFn; + this.el.dom.scroll = 'no'; + this.allowDomMove = false; + this.autoWidth = true; + this.autoHeight = true; + Ext.EventManager.onWindowResize(this.fireResize, this); + this.renderTo = this.el; + }, + + fireResize : function(w, h){ + this.fireEvent('resize', this, w, h, w, h); + } +}); +Ext.reg('viewport', Ext.Viewport); +/** + * @class Ext.Panel + * @extends Ext.Container + *+new Ext.Viewport({ + layout: 'border', + items: [{ + region: 'north', + html: '<h1 class="x-panel-header">Page Title</h1>', + autoHeight: true, + border: false, + margins: '0 0 5 0' + }, { + region: 'west', + collapsible: true, + title: 'Navigation', + width: 200 + // the west region might typically utilize a {@link Ext.tree.TreePanel TreePanel} or a Panel with {@link Ext.layout.AccordionLayout Accordion layout} + }, { + region: 'south', + title: 'Title for Panel', + collapsible: true, + html: 'Information goes here', + split: true, + height: 100, + minHeight: 100 + }, { + region: 'east', + title: 'Title for the Grid Panel', + collapsible: true, + split: true, + width: 200, + xtype: 'grid', + // remaining grid configuration not shown ... + // notice that the GridPanel is added directly as the region + // it is not "overnested" inside another Panel + }, { + region: 'center', + xtype: 'tabpanel', // TabPanel itself has no title + items: { + title: 'Default Tab', + html: 'The first tab\'s content. Others may be added dynamically' + } + }] +}); +Panel is a container that has specific functionality and structural components that make + * it the perfect building block for application-oriented user interfaces.
+ *Panels are, by virtue of their inheritance from {@link Ext.Container}, capable + * of being configured with a {@link Ext.Container#layout layout}, and containing child Components.
+ *When either specifying child {@link Ext.Component#items items} of a Panel, or dynamically {@link Ext.Container#add adding} Components + * to a Panel, remember to consider how you wish the Panel to arrange those child elements, and whether + * those child elements need to be sized using one of Ext's built-in
+ *{@link Ext.Container#layout layout}schemes. By + * default, Panels use the {@link Ext.layout.ContainerLayout ContainerLayout} scheme. This simply renders + * child components, appending them one after the other inside the Container, and does not apply any sizing + * at all.A Panel may also contain {@link #bbar bottom} and {@link #tbar top} toolbars, along with separate + * {@link #header}, {@link #footer} and {@link #body} sections (see {@link #frame} for additional + * information).
+ *Panel also provides built-in {@link #collapsible expandable and collapsible behavior}, along with + * a variety of {@link #tools prebuilt tool buttons} that can be wired up to provide other customized + * behavior. Panels can be easily dropped into any {@link Ext.Container Container} or layout, and the + * layout and rendering pipeline is {@link Ext.Container#add completely managed by the framework}.
+ * @constructor + * @param {Object} config The config object + * @xtype panel + */ +Ext.Panel = Ext.extend(Ext.Container, { + /** + * The Panel's header {@link Ext.Element Element}. Read-only. + *This Element is used to house the {@link #title} and {@link #tools}
+ *Note: see the Note for
+ * @type Ext.Element + * @property header + */ + /** + * The Panel's body {@link Ext.Element Element} which may be used to contain HTML content. + * The content may be specified in the {@link #html} config, or it may be loaded using the + * {@link autoLoad} config, or through the Panel's {@link #getUpdater Updater}. Read-only. + *{@link Ext.Component#el el}also.If this is used to load visible HTML elements in either way, then + * the Panel may not be used as a Layout for hosting nested Panels.
+ *If this Panel is intended to be used as the host of a Layout (See {@link #layout} + * then the body Element must not be loaded or changed - it is under the control + * of the Panel's Layout. + *
Note: see the Note for
+ * @type Ext.Element + * @property body + */ + /** + * The Panel's bwrap {@link Ext.Element Element} used to contain other Panel elements + * (tbar, body, bbar, footer). See {@link #bodyCfg}. Read-only. + * @type Ext.Element + * @property bwrap + */ + /** + * True if this panel is collapsed. Read-only. + * @type Boolean + * @property collapsed + */ + /** + * @cfg {Object} bodyCfg + *{@link Ext.Component#el el}also.A {@link Ext.DomHelper DomHelper} element specification object may be specified for any + * Panel Element.
+ *By default, the Default element in the table below will be used for the html markup to + * create a child element with the commensurate Default class name (
+ *baseClswill be + * replaced by{@link #baseCls}):+ * Panel Default Default Custom Additional Additional + * Element element class element class style + * ======== ========================== ========= ============== =========== + * {@link #header} div {@link #baseCls}+'-header' {@link #headerCfg} headerCssClass headerStyle + * {@link #bwrap} div {@link #baseCls}+'-bwrap' {@link #bwrapCfg} bwrapCssClass bwrapStyle + * + tbar div {@link #baseCls}+'-tbar' {@link #tbarCfg} tbarCssClass tbarStyle + * + {@link #body} div {@link #baseCls}+'-body' {@link #bodyCfg} {@link #bodyCssClass} {@link #bodyStyle} + * + bbar div {@link #baseCls}+'-bbar' {@link #bbarCfg} bbarCssClass bbarStyle + * + {@link #footer} div {@link #baseCls}+'-footer' {@link #footerCfg} footerCssClass footerStyle + *+ *Configuring a Custom element may be used, for example, to force the {@link #body} Element + * to use a different form of markup than is created by default. An example of this might be + * to {@link Ext.Element#createChild create a child} Panel containing a custom content, such as + * a header, or forcing centering of all Panel content by having the body be a <center> + * element:
+ *
+ *+new Ext.Panel({ + title: 'Message Title', + renderTo: Ext.getBody(), + width: 200, height: 130, + bodyCfg: { + tag: 'center', + cls: 'x-panel-body', // Default class not applied if Custom element specified + html: 'Message' + }, + footerCfg: { + tag: 'h2', + cls: 'x-panel-footer', // same as the Default class + html: 'footer html' + }, + footerCssClass: 'custom-footer', // additional css class, see {@link Ext.element#addClass addClass} + footerStyle: 'background-color:red' // see {@link #bodyStyle} +}); + *The example above also explicitly creates a
+ */ + /** + * @cfg {Object} headerCfg + *{@link #footer}with custom markup and + * styling applied.A {@link Ext.DomHelper DomHelper} element specification object specifying the element structure + * of this Panel's {@link #header} Element. See
+ */ + /** + * @cfg {Object} bwrapCfg + *{@link #bodyCfg}also.A {@link Ext.DomHelper DomHelper} element specification object specifying the element structure + * of this Panel's {@link #bwrap} Element. See
+ */ + /** + * @cfg {Object} tbarCfg + *{@link #bodyCfg}also.A {@link Ext.DomHelper DomHelper} element specification object specifying the element structure + * of this Panel's {@link #tbar} Element. See
+ */ + /** + * @cfg {Object} bbarCfg + *{@link #bodyCfg}also.A {@link Ext.DomHelper DomHelper} element specification object specifying the element structure + * of this Panel's {@link #bbar} Element. See
+ */ + /** + * @cfg {Object} footerCfg + *{@link #bodyCfg}also.A {@link Ext.DomHelper DomHelper} element specification object specifying the element structure + * of this Panel's {@link #footer} Element. See
+ */ + /** + * @cfg {Boolean} closable + * Panels themselves do not directly support being closed, but some Panel subclasses do (like + * {@link Ext.Window}) or a Panel Class within an {@link Ext.TabPanel}. Specify{@link #bodyCfg}also.true+ * to enable closing in such situations. Defaults tofalse. + */ + /** + * The Panel's footer {@link Ext.Element Element}. Read-only. + *This Element is used to house the Panel's
+ *{@link #buttons}or{@link #fbar}.Note: see the Note for
+ * @type Ext.Element + * @property footer + */ + /** + * @cfg {Mixed} applyTo + *{@link Ext.Component#el el}also.The id of the node, a DOM node or an existing Element corresponding to a DIV that is already present in + * the document that specifies some panel-specific structural markup. When
+ *applyTois used, + * constituent parts of the panel can be specified by CSS class name within the main element, and the panel + * will automatically create those components from that markup. Any required components not specified in the + * markup will be autogenerated if necessary.The following class names are supported (baseCls will be replaced by {@link #baseCls}):
+ *- baseCls + '-header' + *
- baseCls + '-header-text' + *
- baseCls + '-bwrap' + *
- baseCls + '-tbar' + *
- baseCls + '-body' + *
- baseCls + '-bbar' + *
- baseCls + '-footer'
Using this config, a call to render() is not required. If applyTo is specified, any value passed for + * {@link #renderTo} will be ignored and the target element's parent node will automatically be used as the + * panel's container.
+ */ + /** + * @cfg {Object/Array} tbar + *The top toolbar of the panel. This can be a {@link Ext.Toolbar} object, a toolbar config, or an array of + * buttons/button configs to be added to the toolbar. Note that this is not available as a property after render. + * To access the top toolbar after render, use {@link #getTopToolbar}.
+ *Note: Although a Toolbar may contain Field components, these will not be updated by a load + * of an ancestor FormPanel. A Panel's toolbars are not part of the standard Container->Component hierarchy, and + * so are not scanned to collect form items. However, the values will be submitted because form + * submission parameters are collected from the DOM tree.
+ */ + /** + * @cfg {Object/Array} bbar + *The bottom toolbar of the panel. This can be a {@link Ext.Toolbar} object, a toolbar config, or an array of + * buttons/button configs to be added to the toolbar. Note that this is not available as a property after render. + * To access the bottom toolbar after render, use {@link #getBottomToolbar}.
+ *Note: Although a Toolbar may contain Field components, these will not be updated by a load + * of an ancestor FormPanel. A Panel's toolbars are not part of the standard Container->Component hierarchy, and + * so are not scanned to collect form items. However, the values will be submitted because form + * submission parameters are collected from the DOM tree.
+ */ + /** @cfg {Object/Array} fbar + *A {@link Ext.Toolbar Toolbar} object, a Toolbar config, or an array of + * {@link Ext.Button Button}s/{@link Ext.Button Button} configs, describing a {@link Ext.Toolbar Toolbar} to be rendered into this Panel's footer element.
+ *After render, the
+ *fbarproperty will be an {@link Ext.Toolbar Toolbar} instance.If
+ * The Panel's{@link #buttons}are specified, they will supersede thefbarconfiguration property.{@link #buttonAlign}configuration affects the layout of these items, for example: + *
+ *+var w = new Ext.Window({ + height: 250, + width: 500, + bbar: new Ext.Toolbar({ + items: [{ + text: 'bbar Left' + },'->',{ + text: 'bbar Right' + }] + }), + {@link #buttonAlign}: 'left', // anything but 'center' or 'right' and you can use '-', and '->' + // to control the alignment of fbar items + fbar: [{ + text: 'fbar Left' + },'->',{ + text: 'fbar Right' + }] +}).show(); + *Note: Although a Toolbar may contain Field components, these will not be updated by a load + * of an ancestor FormPanel. A Panel's toolbars are not part of the standard Container->Component hierarchy, and + * so are not scanned to collect form items. However, the values will be submitted because form + * submission parameters are collected from the DOM tree.
+ */ + /** + * @cfg {Boolean} header + *trueto create the Panel's header element explicitly,falseto skip creating + * it. If a{@link #title}is set the header will be created automatically, otherwise it will not. + * If a{@link #title}is set butheaderis explicitly set tofalse, the header + * will not be rendered. + */ + /** + * @cfg {Boolean} footer + *trueto create the footer element explicitly, false to skip creating it. The footer + * will be created automatically if{@link #buttons}or a{@link #fbar}have + * been configured. See{@link #bodyCfg}for an example. + */ + /** + * @cfg {String} title + * The title text to be used as innerHTML (html tags are accepted) to display in the panel + *{@link #header}(defaults to ''). When atitleis specified the + *{@link #header}element will automatically be created and displayed unless + * {@link #header} is explicitly set tofalse. If you do not want to specify a + *titleat config time, but you may want one later, you must either specify a non-empty + *title(a blank space ' ' will do) orheader:trueso that the container + * element will get created. + */ + /** + * @cfg {Array} buttons + *buttonswill be used as{@link Ext.Container#items items}for the toolbar in + * the footer ({@link #fbar}). Typically the value of this configuration property will be + * an array of {@link Ext.Button}s or {@link Ext.Button} configuration objects. + * If an item is configured withminWidthor the Panel is configured withminButtonWidth, + * that width will be applied to the item. + */ + /** + * @cfg {Object/String/Function} autoLoad + * A valid url spec according to the Updater {@link Ext.Updater#update} method. + * If autoLoad is not null, the panel will attempt to load its contents + * immediately upon render.+ * The URL will become the default URL for this panel's {@link #body} element, + * so it may be {@link Ext.Element#refresh refresh}ed at any time.
+ */ + /** + * @cfg {Boolean} frame + *falseby default to render with plain 1px square borders.trueto render with + * 9 elements, complete with custom rounded corners (also see {@link Ext.Element#boxWrap}). + *The template generated for each condition is depicted below:
+ */ + /** + * @cfg {Boolean} border + * True to display the borders of the panel's body element, false to hide them (defaults to true). By default, + * the border is a 2px wide inset border, but this can be further altered by setting {@link #bodyBorder} to false. + */ + /** + * @cfg {Boolean} bodyBorder + * True to display an interior border on the body element of the panel, false to hide it (defaults to true). + * This only applies when {@link #border} == true. If border == true and bodyBorder == false, the border will display + * as a 1px wide inset border, giving the entire body element an inset appearance. + */ + /** + * @cfg {String/Object/Function} bodyCssClass + * Additional css class selector to be applied to the {@link #body} element in the format expected by + * {@link Ext.Element#addClass} (defaults to null). See {@link #bodyCfg}. + */ + /** + * @cfg {String/Object/Function} bodyStyle + * Custom CSS styles to be applied to the {@link #body} element in the format expected by + * {@link Ext.Element#applyStyles} (defaults to null). See {@link #bodyCfg}. + */ + /** + * @cfg {String} iconCls + * The CSS class selector that specifies a background image to be used as the header icon (defaults to ''). + *+ * +// frame = false +<div id="developer-specified-id-goes-here" class="x-panel"> + + <div class="x-panel-header"><span class="x-panel-header-text">Title: (frame:false)</span></div> + + <div class="x-panel-bwrap"> + <div class="x-panel-body"><p>html value goes here</p></div> + </div> +</div> + +// frame = true (create 9 elements) +<div id="developer-specified-id-goes-here" class="x-panel"> + <div class="x-panel-tl"><div class="x-panel-tr"><div class="x-panel-tc"> + <div class="x-panel-header"><span class="x-panel-header-text">Title: (frame:true)</span></div> + </div></div></div> + + <div class="x-panel-bwrap"> + <div class="x-panel-ml"><div class="x-panel-mr"><div class="x-panel-mc"> + <div class="x-panel-body"><p>html value goes here</p></div> + </div></div></div> + + <div class="x-panel-bl"><div class="x-panel-br"><div class="x-panel-bc"/> + </div></div></div> +</div> + *An example of specifying a custom icon class would be something like: + *
+ */ + /** + * @cfg {Boolean} collapsible + * True to make the panel collapsible and have the expand/collapse toggle button automatically rendered into + * the header tool button area, false to keep the panel statically sized with no button (defaults to false). + */ + /** + * @cfg {Array} tools + * An array of tool button configs to be added to the header tool area. When rendered, each tool is + * stored as an {@link Ext.Element Element} referenced by a public property called+// specify the property in the config for the class: + ... + iconCls: 'my-icon' + +// css class that specifies background image to be used as the icon image: +.my-icon { background-image: url(../images/my-icon.gif) 0 6px no-repeat !important; } +tools.<tool-type>+ *Each tool config may contain the following properties: + *
+ *-
+ *
- id : StringRequired. The type + * of tool to create. By default, this assigns a CSS class of the form
x-tool-<tool-type>to the + * resulting tool Element. Ext provides CSS rules, and an icon sprite containing images for the tool types listed below. + * The developer may implement custom tools by supplying alternate CSS rules and background images: + *-
+ *
+ *toggle(Created by default when {@link #collapsible} istrue)+ *close+ *minimize+ *maximize+ *restore+ *gear+ *pin+ *unpin+ *right+ *left+ *up+ *down+ *refresh+ *minus+ *plus+ *help+ *search+ *save+ *print
+ * - handler : FunctionRequired. The function to + * call when clicked. Arguments passed are:
-
+ *
- event : Ext.EventObjectThe click event.
+ *
- toolEl : Ext.ElementThe tool Element.
+ *
- panel : Ext.PanelThe host Panel
+ *
- tc : ObjectThe tool configuration object
+ *
+ * - event : Ext.EventObject
- stopEvent : BooleanDefaults to true. Specify as false to allow click event to propagate.
+ *
- scope : ObjectThe scope in which to call the handler.
+ *
- qtip : String/ObjectA tip string, or + * a config argument to {@link Ext.QuickTip#register}
+ *
- hidden : BooleanTrue to initially render hidden.
+ *
- on : ObjectA listener config object specifiying + * event listeners in the format of an argument to {@link #addListener}
+ *
Note that, apart from the toggle tool which is provided when a panel is collapsible, these + * tools only provide the visual button. Any required functionality must be provided by adding + * handlers that implement the necessary behavior.
+ *Example usage:
+ *
+ *+tools:[{ + id:'refresh', + qtip: 'Refresh form Data', + // hidden:true, + handler: function(event, toolEl, panel){ + // refresh logic + } +}, +{ + id:'help', + qtip: 'Get Help', + handler: function(event, toolEl, panel){ + // whatever + } +}] +For the custom id of
+ *'help'define two relevant css classes with a link to + * a 15x15 image:
+ */ + /** + * @cfg {Ext.Template/Ext.XTemplate} toolTemplate + *+.x-tool-help {background-image: url(images/help.png);} +.x-tool-help-over {background-image: url(images/help_over.png);} +// if using an image sprite: +.x-tool-help {background-image: url(images/help.png) no-repeat 0 0;} +.x-tool-help-over {background-position:-15px 0;} +A Template used to create {@link #tools} in the {@link #header} Element. Defaults to:
+ *+new Ext.Template('<div class="x-tool x-tool-{id}"> </div>')This may may be overridden to provide a custom DOM structure for tools based upon a more + * complex XTemplate. The template's data is a single tool configuration object (Not the entire Array) + * as specified in {@link #tools}. In the following example an <a> tag is used to provide a + * visual indication when hovering over the tool:
+ *+var win = new Ext.Window({ + tools: [{ + id: 'download', + href: '/MyPdfDoc.pdf' + }], + toolTemplate: new Ext.XTemplate( + '<tpl if="id==\'download\'">', + '<a class="x-tool x-tool-pdf" href="{href}"></a>', + '</tpl>', + '<tpl if="id!=\'download\'">', + '<div class="x-tool x-tool-{id}"> </div>', + '</tpl>' + ), + width:500, + height:300, + closeAction:'hide' +});Note that the CSS class 'x-tool-pdf' should have an associated style rule which provides an + * appropriate background image, something like:
+
+ */ + /** + * @cfg {Boolean} hideCollapseTool + *+ a.x-tool-pdf {background-image: url(../shared/extjs/images/pdf.gif)!important;} +trueto hide the expand/collapse toggle button when{@link #collapsible} == true, + *falseto display it (defaults tofalse). + */ + /** + * @cfg {Boolean} titleCollapse + *trueto allow expanding and collapsing the panel (when{@link #collapsible} = true) + * by clicking anywhere in the header bar,false) to allow it only by clicking to tool button + * (defaults tofalse)). If this panel is a child item of a border layout also see the + * {@link Ext.layout.BorderLayout.Region BorderLayout.Region} + *{@link Ext.layout.BorderLayout.Region#floatable floatable}config option. + */ + + /** + * @cfg {Mixed} floating + *This property is used to configure the underlying {@link Ext.Layer}. Acceptable values for this + * configuration property are:
+ */ + /** + * @cfg {Boolean/String} shadow + *-
+ *
false: Default.Display the panel inline where it is + * rendered.
+ * true:Float the panel (absolute position it with automatic + * shimming and shadow).-
+ *
Setting floating to true will create an Ext.Layer for this panel and display the + * panel at negative offsets so that it is hidden.+ *Since the panel will be absolute positioned, the position must be set explicitly + * after render (e.g.,+ *myPanel.setPosition(100,100);).Note: when floating a panel you should always assign a fixed width, + * otherwise it will be auto width and will expand to fill to the right edge of the viewport.+ *
+ * {@link Ext.Layer object}:The specified object will be used + * as the configuration object for the {@link Ext.Layer} that will be created.
+ *
true(or a valid Ext.Shadow {@link Ext.Shadow#mode} value) to display a shadow behind the + * panel,falseto display no shadow (defaults to'sides'). Note that this option + * only applies when{@link #floating} = true. + */ + /** + * @cfg {Number} shadowOffset + * The number of pixels to offset the shadow if displayed (defaults to4). Note that this + * option only applies when{@link #floating} = true. + */ + /** + * @cfg {Boolean} shim + *falseto disable the iframe shim in browsers which need one (defaults totrue). + * Note that this option only applies when{@link #floating} = true. + */ + /** + * @cfg {Object/Array} keys + * A {@link Ext.KeyMap} config object (in the format expected by {@link Ext.KeyMap#addBinding} + * used to assign custom key handling to this panel (defaults tonull). + */ + /** + * @cfg {Boolean/Object} draggable + *
+ *trueto enable dragging of this Panel (defaults tofalse).For custom drag/drop implementations, an Ext.Panel.DD config could also be passed + * in this config instead of
true. Ext.Panel.DD is an internal, undocumented class which + * moves a proxy Element around in place of the Panel's element, but provides no other behaviour + * during dragging or on drop. It is a subclass of {@link Ext.dd.DragSource}, so behaviour may be + * added by implementing the interface methods of {@link Ext.dd.DragDrop} e.g.: + *
+ */ + /** + * @cfg {Boolean} disabled + * Render this panel disabled (default is+new Ext.Panel({ + title: 'Drag me', + x: 100, + y: 100, + renderTo: Ext.getBody(), + floating: true, + frame: true, + width: 400, + height: 200, + draggable: { +// Config option of Ext.Panel.DD class. +// It's a floating Panel, so do not show a placeholder proxy in the original position. + insertProxy: false, + +// Called for each mousemove event while dragging the DD object. + onDrag : function(e){ +// Record the x,y position of the drag proxy so that we can +// position the Panel at end of drag. + var pel = this.proxy.getEl(); + this.x = pel.getLeft(true); + this.y = pel.getTop(true); + +// Keep the Shadow aligned if there is one. + var s = this.panel.getEl().shadow; + if (s) { + s.realign(this.x, this.y, pel.getWidth(), pel.getHeight()); + } + }, + +// Called on the mouseup event. + endDrag : function(e){ + this.panel.setPosition(this.x, this.y); + } + } +}).show(); +false). An important note when using the disabled + * config on panels is that IE will often fail to initialize the disabled mask element correectly if + * the panel's layout has not yet completed by the time the Panel is disabled during the render process. + * If you experience this issue, you may need to instead use the {@link #afterlayout} event to initialize + * the disabled state: + *
+ */ + /** + * @cfg {Boolean} autoHeight + *+new Ext.Panel({ + ... + listeners: { + 'afterlayout': { + fn: function(p){ + p.disable(); + }, + single: true // important, as many layouts can occur + } + } +}); +trueto use height:'auto',falseto use fixed height (defaults tofalse). + * Note: SettingautoHeight: truemeans that the browser will manage the panel's height + * based on its contents, and that Ext will not manage it at all. If the panel is within a layout that + * manages dimensions (fit,border, etc.) then settingautoHeight: true+ * can cause issues with scrolling and will not generally work as expected since the panel will take + * on the height of its contents rather than the height required by the Ext layout. + */ + + + /** + * @cfg {String} baseCls + * The base CSS class to apply to this panel's element (defaults to'x-panel'). + *Another option available by default is to specify
+ */ + baseCls : 'x-panel', + /** + * @cfg {String} collapsedCls + * A CSS class to add to the panel's element after it has been collapsed (defaults to + *'x-plain'which strips all styling + * except for required attributes for Ext layouts to function (e.g. overflow:hidden). + * See{@link #unstyled}also.'x-panel-collapsed'). + */ + collapsedCls : 'x-panel-collapsed', + /** + * @cfg {Boolean} maskDisabled + *trueto mask the panel when it is {@link #disabled},falseto not mask it (defaults + * totrue). Either way, the panel will always tell its contained elements to disable themselves + * when it is disabled, but masking the panel can provide an additional visual cue that the panel is + * disabled. + */ + maskDisabled : true, + /** + * @cfg {Boolean} animCollapse + *trueto animate the transition when the panel is collapsed,falseto skip the + * animation (defaults totrueif the {@link Ext.Fx} class is available, otherwisefalse). + */ + animCollapse : Ext.enableFx, + /** + * @cfg {Boolean} headerAsText + *trueto display the panel{@link #title}in the{@link #header}, + *falseto hide it (defaults totrue). + */ + headerAsText : true, + /** + * @cfg {String} buttonAlign + * The alignment of any {@link #buttons} added to this panel. Valid values are'right', + *'left'and'center'(defaults to'right'). + */ + buttonAlign : 'right', + /** + * @cfg {Boolean} collapsed + *trueto render the panel collapsed,falseto render it expanded (defaults to + *false). + */ + collapsed : false, + /** + * @cfg {Boolean} collapseFirst + *trueto make sure the collapse/expand toggle button always renders first (to the left of) + * any other tools in the panel's title bar,falseto render it last (defaults totrue). + */ + collapseFirst : true, + /** + * @cfg {Number} minButtonWidth + * Minimum width in pixels of all {@link #buttons} in this panel (defaults to75) + */ + minButtonWidth : 75, + /** + * @cfg {Boolean} unstyled + * Overrides the{@link #baseCls}setting to{@link #baseCls} = 'x-plain'which renders + * the panel unstyled except for required attributes for Ext layouts to function (e.g. overflow:hidden). + */ + /** + * @cfg {String} elements + * A comma-delimited list of panel elements to initialize when the panel is rendered. Normally, this list will be + * generated automatically based on the items added to the panel at config time, but sometimes it might be useful to + * make sure a structural element is rendered even if not specified at config time (for example, you may want + * to add a button or toolbar dynamically after the panel has been rendered). Adding those elements to this + * list will allocate the required placeholders in the panel when it is rendered. Valid values are+ * Defaults to '-
+ *
header
+ * tbar(top bar)
+ * body
+ * bbar(bottom bar)
+ * footer
+ *
body'. + */ + elements : 'body', + /** + * @cfg {Boolean} preventBodyReset + * Defaults tofalse. When set totrue, an extra css class'x-panel-normal'+ * will be added to the panel's element, effectively applying css styles suggested by the W3C + * (see http://www.w3.org/TR/CSS21/sample.html) to the Panel's body element (not the header, + * footer, etc.). + */ + preventBodyReset : false, + + /** + * @cfg {Number/String} padding + * A shortcut for setting a padding style on the body element. The value can either be + * a number to be applied to all sides, or a normal css string describing padding. + * Defaults to undefined. + * + */ + padding: undefined, + + /** @cfg {String} resizeEvent + * The event to listen to for resizing in layouts. Defaults to 'bodyresize'. + */ + resizeEvent: 'bodyresize', + + // protected - these could be used to customize the behavior of the window, + // but changing them would not be useful without further mofifications and + // could lead to unexpected or undesirable results. + toolTarget : 'header', + collapseEl : 'bwrap', + slideAnchor : 't', + disabledClass : '', + + // private, notify box this class will handle heights + deferHeight : true, + // private + expandDefaults: { + duration : 0.25 + }, + // private + collapseDefaults : { + duration : 0.25 + }, + + // private + initComponent : function(){ + Ext.Panel.superclass.initComponent.call(this); + + this.addEvents( + /** + * @event bodyresize + * Fires after the Panel has been resized. + * @param {Ext.Panel} p the Panel which has been resized. + * @param {Number} width The Panel body's new width. + * @param {Number} height The Panel body's new height. + */ + 'bodyresize', + /** + * @event titlechange + * Fires after the Panel title has been {@link #title set} or {@link #setTitle changed}. + * @param {Ext.Panel} p the Panel which has had its title changed. + * @param {String} The new title. + */ + 'titlechange', + /** + * @event iconchange + * Fires after the Panel icon class has been {@link #iconCls set} or {@link #setIconClass changed}. + * @param {Ext.Panel} p the Panel which has had its {@link #iconCls icon class} changed. + * @param {String} The new icon class. + * @param {String} The old icon class. + */ + 'iconchange', + /** + * @event collapse + * Fires after the Panel has been collapsed. + * @param {Ext.Panel} p the Panel that has been collapsed. + */ + 'collapse', + /** + * @event expand + * Fires after the Panel has been expanded. + * @param {Ext.Panel} p The Panel that has been expanded. + */ + 'expand', + /** + * @event beforecollapse + * Fires before the Panel is collapsed. A handler can return false to cancel the collapse. + * @param {Ext.Panel} p the Panel being collapsed. + * @param {Boolean} animate True if the collapse is animated, else false. + */ + 'beforecollapse', + /** + * @event beforeexpand + * Fires before the Panel is expanded. A handler can return false to cancel the expand. + * @param {Ext.Panel} p The Panel being expanded. + * @param {Boolean} animate True if the expand is animated, else false. + */ + 'beforeexpand', + /** + * @event beforeclose + * Fires before the Panel is closed. Note that Panels do not directly support being closed, but some + * Panel subclasses do (like {@link Ext.Window}) or a Panel within a Ext.TabPanel. This event only + * applies to such subclasses. + * A handler can return false to cancel the close. + * @param {Ext.Panel} p The Panel being closed. + */ + 'beforeclose', + /** + * @event close + * Fires after the Panel is closed. Note that Panels do not directly support being closed, but some + * Panel subclasses do (like {@link Ext.Window}) or a Panel within a Ext.TabPanel. + * @param {Ext.Panel} p The Panel that has been closed. + */ + 'close', + /** + * @event activate + * Fires after the Panel has been visually activated. + * Note that Panels do not directly support being activated, but some Panel subclasses + * do (like {@link Ext.Window}). Panels which are child Components of a TabPanel fire the + * activate and deactivate events under the control of the TabPanel. + * @param {Ext.Panel} p The Panel that has been activated. + */ + 'activate', + /** + * @event deactivate + * Fires after the Panel has been visually deactivated. + * Note that Panels do not directly support being deactivated, but some Panel subclasses + * do (like {@link Ext.Window}). Panels which are child Components of a TabPanel fire the + * activate and deactivate events under the control of the TabPanel. + * @param {Ext.Panel} p The Panel that has been deactivated. + */ + 'deactivate' + ); + + if(this.unstyled){ + this.baseCls = 'x-plain'; + } + + + this.toolbars = []; + // shortcuts + if(this.tbar){ + this.elements += ',tbar'; + this.topToolbar = this.createToolbar(this.tbar); + this.tbar = null; + + } + if(this.bbar){ + this.elements += ',bbar'; + this.bottomToolbar = this.createToolbar(this.bbar); + this.bbar = null; + } + + if(this.header === true){ + this.elements += ',header'; + this.header = null; + }else if(this.headerCfg || (this.title && this.header !== false)){ + this.elements += ',header'; + } + + if(this.footerCfg || this.footer === true){ + this.elements += ',footer'; + this.footer = null; + } + + if(this.buttons){ + this.fbar = this.buttons; + this.buttons = null; + } + if(this.fbar){ + this.createFbar(this.fbar); + } + if(this.autoLoad){ + this.on('render', this.doAutoLoad, this, {delay:10}); + } + }, + + // private + createFbar : function(fbar){ + var min = this.minButtonWidth; + this.elements += ',footer'; + this.fbar = this.createToolbar(fbar, { + buttonAlign: this.buttonAlign, + toolbarCls: 'x-panel-fbar', + enableOverflow: false, + defaults: function(c){ + return { + minWidth: c.minWidth || min + }; + } + }); + // @compat addButton and buttons could possibly be removed + // @target 4.0 + /** + * This Panel's Array of buttons as created from the{@link #buttons}+ * config property. Read only. + * @type Array + * @property buttons + */ + this.fbar.items.each(function(c){ + c.minWidth = c.minWidth || this.minButtonWidth; + }, this); + this.buttons = this.fbar.items.items; + }, + + // private + createToolbar: function(tb, options){ + var result; + // Convert array to proper toolbar config + if(Ext.isArray(tb)){ + tb = { + items: tb + }; + } + result = tb.events ? Ext.apply(tb, options) : this.createComponent(Ext.apply({}, tb, options), 'toolbar'); + this.toolbars.push(result); + return result; + }, + + // private + createElement : function(name, pnode){ + if(this[name]){ + pnode.appendChild(this[name].dom); + return; + } + + if(name === 'bwrap' || this.elements.indexOf(name) != -1){ + if(this[name+'Cfg']){ + this[name] = Ext.fly(pnode).createChild(this[name+'Cfg']); + }else{ + var el = document.createElement('div'); + el.className = this[name+'Cls']; + this[name] = Ext.get(pnode.appendChild(el)); + } + if(this[name+'CssClass']){ + this[name].addClass(this[name+'CssClass']); + } + if(this[name+'Style']){ + this[name].applyStyles(this[name+'Style']); + } + } + }, + + // private + onRender : function(ct, position){ + Ext.Panel.superclass.onRender.call(this, ct, position); + this.createClasses(); + + var el = this.el, + d = el.dom, + bw, + ts; + + + if(this.collapsible && !this.hideCollapseTool){ + this.tools = this.tools ? this.tools.slice(0) : []; + this.tools[this.collapseFirst?'unshift':'push']({ + id: 'toggle', + handler : this.toggleCollapse, + scope: this + }); + } + + if(this.tools){ + ts = this.tools; + this.elements += (this.header !== false) ? ',header' : ''; + } + this.tools = {}; + + el.addClass(this.baseCls); + if(d.firstChild){ // existing markup + this.header = el.down('.'+this.headerCls); + this.bwrap = el.down('.'+this.bwrapCls); + var cp = this.bwrap ? this.bwrap : el; + this.tbar = cp.down('.'+this.tbarCls); + this.body = cp.down('.'+this.bodyCls); + this.bbar = cp.down('.'+this.bbarCls); + this.footer = cp.down('.'+this.footerCls); + this.fromMarkup = true; + } + if (this.preventBodyReset === true) { + el.addClass('x-panel-reset'); + } + if(this.cls){ + el.addClass(this.cls); + } + + if(this.buttons){ + this.elements += ',footer'; + } + + // This block allows for maximum flexibility and performance when using existing markup + + // framing requires special markup + if(this.frame){ + el.insertHtml('afterBegin', String.format(Ext.Element.boxMarkup, this.baseCls)); + + this.createElement('header', d.firstChild.firstChild.firstChild); + this.createElement('bwrap', d); + + // append the mid and bottom frame to the bwrap + bw = this.bwrap.dom; + var ml = d.childNodes[1], bl = d.childNodes[2]; + bw.appendChild(ml); + bw.appendChild(bl); + + var mc = bw.firstChild.firstChild.firstChild; + this.createElement('tbar', mc); + this.createElement('body', mc); + this.createElement('bbar', mc); + this.createElement('footer', bw.lastChild.firstChild.firstChild); + + if(!this.footer){ + this.bwrap.dom.lastChild.className += ' x-panel-nofooter'; + } + /* + * Store a reference to this element so: + * a) We aren't looking it up all the time + * b) The last element is reported incorrectly when using a loadmask + */ + this.ft = Ext.get(this.bwrap.dom.lastChild); + this.mc = Ext.get(mc); + }else{ + this.createElement('header', d); + this.createElement('bwrap', d); + + // append the mid and bottom frame to the bwrap + bw = this.bwrap.dom; + this.createElement('tbar', bw); + this.createElement('body', bw); + this.createElement('bbar', bw); + this.createElement('footer', bw); + + if(!this.header){ + this.body.addClass(this.bodyCls + '-noheader'); + if(this.tbar){ + this.tbar.addClass(this.tbarCls + '-noheader'); + } + } + } + + if(Ext.isDefined(this.padding)){ + this.body.setStyle('padding', this.body.addUnits(this.padding)); + } + + if(this.border === false){ + this.el.addClass(this.baseCls + '-noborder'); + this.body.addClass(this.bodyCls + '-noborder'); + if(this.header){ + this.header.addClass(this.headerCls + '-noborder'); + } + if(this.footer){ + this.footer.addClass(this.footerCls + '-noborder'); + } + if(this.tbar){ + this.tbar.addClass(this.tbarCls + '-noborder'); + } + if(this.bbar){ + this.bbar.addClass(this.bbarCls + '-noborder'); + } + } + + if(this.bodyBorder === false){ + this.body.addClass(this.bodyCls + '-noborder'); + } + + this.bwrap.enableDisplayMode('block'); + + if(this.header){ + this.header.unselectable(); + + // for tools, we need to wrap any existing header markup + if(this.headerAsText){ + this.header.dom.innerHTML = + ''+this.header.dom.innerHTML+''; + + if(this.iconCls){ + this.setIconClass(this.iconCls); + } + } + } + + if(this.floating){ + this.makeFloating(this.floating); + } + + if(this.collapsible && this.titleCollapse && this.header){ + this.mon(this.header, 'click', this.toggleCollapse, this); + this.header.setStyle('cursor', 'pointer'); + } + if(ts){ + this.addTool.apply(this, ts); + } + + // Render Toolbars. + if(this.fbar){ + this.footer.addClass('x-panel-btns'); + this.fbar.ownerCt = this; + this.fbar.render(this.footer); + this.footer.createChild({cls:'x-clear'}); + } + if(this.tbar && this.topToolbar){ + this.topToolbar.ownerCt = this; + this.topToolbar.render(this.tbar); + } + if(this.bbar && this.bottomToolbar){ + this.bottomToolbar.ownerCt = this; + this.bottomToolbar.render(this.bbar); + } + }, + + /** + * Sets the CSS class that provides the icon image for this panel. This method will replace any existing + * icon class if one has already been set and fire the {@link #iconchange} event after completion. + * @param {String} cls The new CSS class name + */ + setIconClass : function(cls){ + var old = this.iconCls; + this.iconCls = cls; + if(this.rendered && this.header){ + if(this.frame){ + this.header.addClass('x-panel-icon'); + this.header.replaceClass(old, this.iconCls); + }else{ + var hd = this.header, + img = hd.child('img.x-panel-inline-icon'); + if(img){ + Ext.fly(img).replaceClass(old, this.iconCls); + }else{ + var hdspan = hd.child('span.' + this.headerTextCls); + if (hdspan) { + Ext.DomHelper.insertBefore(hdspan.dom, { + tag:'img', alt: '', src: Ext.BLANK_IMAGE_URL, cls:'x-panel-inline-icon '+this.iconCls + }); + } + } + } + } + this.fireEvent('iconchange', this, cls, old); + }, + + // private + makeFloating : function(cfg){ + this.floating = true; + this.el = new Ext.Layer(Ext.apply({}, cfg, { + shadow: Ext.isDefined(this.shadow) ? this.shadow : 'sides', + shadowOffset: this.shadowOffset, + constrain:false, + shim: this.shim === false ? false : undefined + }), this.el); + }, + + /** + * Returns the {@link Ext.Toolbar toolbar} from the top ({@link #tbar}) section of the panel. + * @return {Ext.Toolbar} The toolbar + */ + getTopToolbar : function(){ + return this.topToolbar; + }, + + /** + * Returns the {@link Ext.Toolbar toolbar} from the bottom ({@link #bbar}) section of the panel. + * @return {Ext.Toolbar} The toolbar + */ + getBottomToolbar : function(){ + return this.bottomToolbar; + }, + + /** + * Returns the {@link Ext.Toolbar toolbar} from the footer ({@link #fbar}) section of the panel. + * @return {Ext.Toolbar} The toolbar + */ + getFooterToolbar : function() { + return this.fbar; + }, + + /** + * Adds a button to this panel. Note that this method must be called prior to rendering. The preferred + * approach is to add buttons via the {@link #buttons} config. + * @param {String/Object} config A valid {@link Ext.Button} config. A string will become the text for a default + * button config, an object will be treated as a button config object. + * @param {Function} handler The function to be called on button {@link Ext.Button#click} + * @param {Object} scope The scope (thisreference) in which the button handler function is executed. Defaults to the Button. + * @return {Ext.Button} The button that was added + */ + addButton : function(config, handler, scope){ + if(!this.fbar){ + this.createFbar([]); + } + if(handler){ + if(Ext.isString(config)){ + config = {text: config}; + } + config = Ext.apply({ + handler: handler, + scope: scope + }, config); + } + return this.fbar.add(config); + }, + + // private + addTool : function(){ + if(!this.rendered){ + if(!this.tools){ + this.tools = []; + } + Ext.each(arguments, function(arg){ + this.tools.push(arg); + }, this); + return; + } + // nowhere to render tools! + if(!this[this.toolTarget]){ + return; + } + if(!this.toolTemplate){ + // initialize the global tool template on first use + var tt = new Ext.Template( + '' + ); + tt.disableFormats = true; + tt.compile(); + Ext.Panel.prototype.toolTemplate = tt; + } + for(var i = 0, a = arguments, len = a.length; i < len; i++) { + var tc = a[i]; + if(!this.tools[tc.id]){ + var overCls = 'x-tool-'+tc.id+'-over'; + var t = this.toolTemplate.insertFirst(this[this.toolTarget], tc, true); + this.tools[tc.id] = t; + t.enableDisplayMode('block'); + this.mon(t, 'click', this.createToolHandler(t, tc, overCls, this)); + if(tc.on){ + this.mon(t, tc.on); + } + if(tc.hidden){ + t.hide(); + } + if(tc.qtip){ + if(Ext.isObject(tc.qtip)){ + Ext.QuickTips.register(Ext.apply({ + target: t.id + }, tc.qtip)); + } else { + t.dom.qtip = tc.qtip; + } + } + t.addClassOnOver(overCls); + } + } + }, + + onLayout : function(shallow, force){ + Ext.Panel.superclass.onLayout.apply(this, arguments); + if(this.hasLayout && this.toolbars.length > 0){ + Ext.each(this.toolbars, function(tb){ + tb.doLayout(undefined, force); + }); + this.syncHeight(); + } + }, + + syncHeight : function(){ + var h = this.toolbarHeight, + bd = this.body, + lsh = this.lastSize.height, + sz; + + if(this.autoHeight || !Ext.isDefined(lsh) || lsh == 'auto'){ + return; + } + + + if(h != this.getToolbarHeight()){ + h = Math.max(0, lsh - this.getFrameHeight()); + bd.setHeight(h); + sz = bd.getSize(); + this.toolbarHeight = this.getToolbarHeight(); + this.onBodyResize(sz.width, sz.height); + } + }, + + // private + onShow : function(){ + if(this.floating){ + return this.el.show(); + } + Ext.Panel.superclass.onShow.call(this); + }, + + // private + onHide : function(){ + if(this.floating){ + return this.el.hide(); + } + Ext.Panel.superclass.onHide.call(this); + }, + + // private + createToolHandler : function(t, tc, overCls, panel){ + return function(e){ + t.removeClass(overCls); + if(tc.stopEvent !== false){ + e.stopEvent(); + } + if(tc.handler){ + tc.handler.call(tc.scope || t, e, t, panel, tc); + } + }; + }, + + // private + afterRender : function(){ + if(this.floating && !this.hidden){ + this.el.show(); + } + if(this.title){ + this.setTitle(this.title); + } + Ext.Panel.superclass.afterRender.call(this); // do sizing calcs last + if (this.collapsed) { + this.collapsed = false; + this.collapse(false); + } + this.initEvents(); + }, + + // private + getKeyMap : function(){ + if(!this.keyMap){ + this.keyMap = new Ext.KeyMap(this.el, this.keys); + } + return this.keyMap; + }, + + // private + initEvents : function(){ + if(this.keys){ + this.getKeyMap(); + } + if(this.draggable){ + this.initDraggable(); + } + if(this.toolbars.length > 0){ + Ext.each(this.toolbars, function(tb){ + tb.doLayout(); + tb.on({ + scope: this, + afterlayout: this.syncHeight, + remove: this.syncHeight + }); + }, this); + this.syncHeight(); + } + + }, + + // private + initDraggable : function(){ + /** + *If this Panel is configured {@link #draggable}, this property will contain + * an instance of {@link Ext.dd.DragSource} which handles dragging the Panel.
+ * The developer must provide implementations of the abstract methods of {@link Ext.dd.DragSource} + * in order to supply behaviour for each stage of the drag/drop process. See {@link #draggable}. + * @type Ext.dd.DragSource. + * @property dd + */ + this.dd = new Ext.Panel.DD(this, Ext.isBoolean(this.draggable) ? null : this.draggable); + }, + + // private + beforeEffect : function(anim){ + if(this.floating){ + this.el.beforeAction(); + } + if(anim !== false){ + this.el.addClass('x-panel-animated'); + } + }, + + // private afterEffect : function(anim){ this.syncShadow(); - if(anim !== false){ - this.el.removeClass('x-panel-animated'); + this.el.removeClass('x-panel-animated'); + }, + + // private - wraps up an animation param with internal callbacks + createEffect : function(a, cb, scope){ + var o = { + scope:scope, + block:true + }; + if(a === true){ + o.callback = cb; + return o; + }else if(!a.callback){ + o.callback = cb; + }else { // wrap it up + o.callback = function(){ + cb.call(scope); + Ext.callback(a.callback, a.scope); + }; + } + return Ext.applyIf(o, a); + }, + + /** + * Collapses the panel body so that it becomes hidden. Fires the {@link #beforecollapse} event which will + * cancel the collapse action if it returns false. + * @param {Boolean} animate True to animate the transition, else false (defaults to the value of the + * {@link #animCollapse} panel config) + * @return {Ext.Panel} this + */ + collapse : function(animate){ + if(this.collapsed || this.el.hasFxBlock() || this.fireEvent('beforecollapse', this, animate) === false){ + return; + } + var doAnim = animate === true || (animate !== false && this.animCollapse); + this.beforeEffect(doAnim); + this.onCollapse(doAnim, animate); + return this; + }, + + // private + onCollapse : function(doAnim, animArg){ + if(doAnim){ + this[this.collapseEl].slideOut(this.slideAnchor, + Ext.apply(this.createEffect(animArg||true, this.afterCollapse, this), + this.collapseDefaults)); + }else{ + this[this.collapseEl].hide(this.hideMode); + this.afterCollapse(false); + } + }, + + // private + afterCollapse : function(anim){ + this.collapsed = true; + this.el.addClass(this.collapsedCls); + if(anim !== false){ + this[this.collapseEl].hide(this.hideMode); + } + this.afterEffect(anim); + + // Reset lastSize of all sub-components so they KNOW they are in a collapsed container + this.cascade(function(c) { + if (c.lastSize) { + c.lastSize = { width: undefined, height: undefined }; + } + }); + this.fireEvent('collapse', this); + }, + + /** + * Expands the panel body so that it becomes visible. Fires the {@link #beforeexpand} event which will + * cancel the expand action if it returns false. + * @param {Boolean} animate True to animate the transition, else false (defaults to the value of the + * {@link #animCollapse} panel config) + * @return {Ext.Panel} this + */ + expand : function(animate){ + if(!this.collapsed || this.el.hasFxBlock() || this.fireEvent('beforeexpand', this, animate) === false){ + return; + } + var doAnim = animate === true || (animate !== false && this.animCollapse); + this.el.removeClass(this.collapsedCls); + this.beforeEffect(doAnim); + this.onExpand(doAnim, animate); + return this; + }, + + // private + onExpand : function(doAnim, animArg){ + if(doAnim){ + this[this.collapseEl].slideIn(this.slideAnchor, + Ext.apply(this.createEffect(animArg||true, this.afterExpand, this), + this.expandDefaults)); + }else{ + this[this.collapseEl].show(this.hideMode); + this.afterExpand(false); + } + }, + + // private + afterExpand : function(anim){ + this.collapsed = false; + if(anim !== false){ + this[this.collapseEl].show(this.hideMode); + } + this.afterEffect(anim); + if (this.deferLayout) { + delete this.deferLayout; + this.doLayout(true); + } + this.fireEvent('expand', this); + }, + + /** + * Shortcut for performing an {@link #expand} or {@link #collapse} based on the current state of the panel. + * @param {Boolean} animate True to animate the transition, else false (defaults to the value of the + * {@link #animCollapse} panel config) + * @return {Ext.Panel} this + */ + toggleCollapse : function(animate){ + this[this.collapsed ? 'expand' : 'collapse'](animate); + return this; + }, + + // private + onDisable : function(){ + if(this.rendered && this.maskDisabled){ + this.el.mask(); + } + Ext.Panel.superclass.onDisable.call(this); + }, + + // private + onEnable : function(){ + if(this.rendered && this.maskDisabled){ + this.el.unmask(); + } + Ext.Panel.superclass.onEnable.call(this); + }, + + // private + onResize : function(adjWidth, adjHeight, rawWidth, rawHeight){ + var w = adjWidth, + h = adjHeight; + + if(Ext.isDefined(w) || Ext.isDefined(h)){ + if(!this.collapsed){ + // First, set the the Panel's body width. + // If we have auto-widthed it, get the resulting full offset width so we can size the Toolbars to match + // The Toolbars must not buffer this resize operation because we need to know their heights. + + if(Ext.isNumber(w)){ + this.body.setWidth(w = this.adjustBodyWidth(w - this.getFrameWidth())); + } else if (w == 'auto') { + w = this.body.setWidth('auto').dom.offsetWidth; + } else { + w = this.body.dom.offsetWidth; + } + + if(this.tbar){ + this.tbar.setWidth(w); + if(this.topToolbar){ + this.topToolbar.setSize(w); + } + } + if(this.bbar){ + this.bbar.setWidth(w); + if(this.bottomToolbar){ + this.bottomToolbar.setSize(w); + // The bbar does not move on resize without this. + if (Ext.isIE) { + this.bbar.setStyle('position', 'static'); + this.bbar.setStyle('position', ''); + } + } + } + if(this.footer){ + this.footer.setWidth(w); + if(this.fbar){ + this.fbar.setSize(Ext.isIE ? (w - this.footer.getFrameWidth('lr')) : 'auto'); + } + } + + // At this point, the Toolbars must be layed out for getFrameHeight to find a result. + if(Ext.isNumber(h)){ + h = Math.max(0, h - this.getFrameHeight()); + //h = Math.max(0, h - (this.getHeight() - this.body.getHeight())); + this.body.setHeight(h); + }else if(h == 'auto'){ + this.body.setHeight(h); + } + + if(this.disabled && this.el._mask){ + this.el._mask.setSize(this.el.dom.clientWidth, this.el.getHeight()); + } + }else{ + // Adds an event to set the correct height afterExpand. This accounts for the deferHeight flag in panel + this.queuedBodySize = {width: w, height: h}; + if(!this.queuedExpand && this.allowQueuedExpand !== false){ + this.queuedExpand = true; + this.on('expand', function(){ + delete this.queuedExpand; + this.onResize(this.queuedBodySize.width, this.queuedBodySize.height); + }, this, {single:true}); + } + } + this.onBodyResize(w, h); + } + this.syncShadow(); + Ext.Panel.superclass.onResize.call(this, adjWidth, adjHeight, rawWidth, rawHeight); + + }, + + // private + onBodyResize: function(w, h){ + this.fireEvent('bodyresize', this, w, h); + }, + + // private + getToolbarHeight: function(){ + var h = 0; + if(this.rendered){ + Ext.each(this.toolbars, function(tb){ + h += tb.getHeight(); + }, this); } + return h; }, - // private - wraps up an animation param with internal callbacks - createEffect : function(a, cb, scope){ - var o = { - scope:scope, - block:true - }; - if(a === true){ - o.callback = cb; - return o; - }else if(!a.callback){ - o.callback = cb; - }else { // wrap it up - o.callback = function(){ - cb.call(scope); - Ext.callback(a.callback, a.scope); - }; + // deprecate + adjustBodyHeight : function(h){ + return h; + }, + + // private + adjustBodyWidth : function(w){ + return w; + }, + + // private + onPosition : function(){ + this.syncShadow(); + }, + + /** + * Returns the width in pixels of the framing elements of this panel (not including the body width). To + * retrieve the body width see {@link #getInnerWidth}. + * @return {Number} The frame width + */ + getFrameWidth : function(){ + var w = this.el.getFrameWidth('lr') + this.bwrap.getFrameWidth('lr'); + + if(this.frame){ + var l = this.bwrap.dom.firstChild; + w += (Ext.fly(l).getFrameWidth('l') + Ext.fly(l.firstChild).getFrameWidth('r')); + w += this.mc.getFrameWidth('lr'); } - return Ext.applyIf(o, a); + return w; }, /** - * Collapses the panel body so that it becomes hidden. Fires the {@link #beforecollapse} event which will - * cancel the collapse action if it returns false. - * @param {Boolean} animate True to animate the transition, else false (defaults to the value of the - * {@link #animCollapse} panel config) - * @return {Ext.Panel} this + * Returns the height in pixels of the framing elements of this panel (including any top and bottom bars and + * header and footer elements, but not including the body height). To retrieve the body height see {@link #getInnerHeight}. + * @return {Number} The frame height */ - collapse : function(animate){ - if(this.collapsed || this.el.hasFxBlock() || this.fireEvent('beforecollapse', this, animate) === false){ - return; + getFrameHeight : function() { + var h = this.el.getFrameWidth('tb') + this.bwrap.getFrameWidth('tb'); + h += (this.tbar ? this.tbar.getHeight() : 0) + + (this.bbar ? this.bbar.getHeight() : 0); + + if(this.frame){ + h += this.el.dom.firstChild.offsetHeight + this.ft.dom.offsetHeight + this.mc.getFrameWidth('tb'); + }else{ + h += (this.header ? this.header.getHeight() : 0) + + (this.footer ? this.footer.getHeight() : 0); } - var doAnim = animate === true || (animate !== false && this.animCollapse); - this.beforeEffect(doAnim); - this.onCollapse(doAnim, animate); + return h; + }, + + /** + * Returns the width in pixels of the body element (not including the width of any framing elements). + * For the frame width see {@link #getFrameWidth}. + * @return {Number} The body width + */ + getInnerWidth : function(){ + return this.getSize().width - this.getFrameWidth(); + }, + + /** + * Returns the height in pixels of the body element (not including the height of any framing elements). + * For the frame height see {@link #getFrameHeight}. + * @return {Number} The body height + */ + getInnerHeight : function(){ + return this.body.getHeight(); + /* Deprecate + return this.getSize().height - this.getFrameHeight(); + */ + }, + + // private + syncShadow : function(){ + if(this.floating){ + this.el.sync(true); + } + }, + + // private + getLayoutTarget : function(){ + return this.body; + }, + + // private + getContentTarget : function(){ + return this.body; + }, + + /** + *Sets the title text for the panel and optionally the {@link #iconCls icon class}.
+ *In order to be able to set the title, a header element must have been created + * for the Panel. This is triggered either by configuring the Panel with a non-blank
+ * @param {String} title The title text to set + * @param {String} iconCls (optional) {@link #iconCls iconCls} A user-defined CSS class that provides the icon image for this panel + */ + setTitle : function(title, iconCls){ + this.title = title; + if(this.header && this.headerAsText){ + this.header.child('span').update(title); + } + if(iconCls){ + this.setIconClass(iconCls); + } + this.fireEvent('titlechange', this, title); + return this; + }, + + /** + * Get the {@link Ext.Updater} for this panel. Enables you to perform Ajax updates of this panel's body. + * @return {Ext.Updater} The Updater + */ + getUpdater : function(){ + return this.body.getUpdater(); + }, + + /** + * Loads this content panel immediately with content returned from an XHR call. + * @param {Object/String/Function} config A config object containing any of the following options: +{@link #title}, + * or configuring it with{@link #header}: true.
+ * The only required property is url. The optional properties nocache, text and scripts + * are shorthand for disableCaching, indicatorText and loadScripts and are used to set their + * associated property on this panel Updater instance. + * @return {Ext.Panel} this + */ + load : function(){ + var um = this.body.getUpdater(); + um.update.apply(um, arguments); return this; }, // private - onCollapse : function(doAnim, animArg){ - if(doAnim){ - this[this.collapseEl].slideOut(this.slideAnchor, - Ext.apply(this.createEffect(animArg||true, this.afterCollapse, this), - this.collapseDefaults)); + beforeDestroy : function(){ + Ext.Panel.superclass.beforeDestroy.call(this); + if(this.header){ + this.header.removeAllListeners(); + } + if(this.tools){ + for(var k in this.tools){ + Ext.destroy(this.tools[k]); + } + } + if(this.toolbars.length > 0){ + Ext.each(this.toolbars, function(tb){ + tb.un('afterlayout', this.syncHeight, this); + tb.un('remove', this.syncHeight, this); + }, this); + } + if(Ext.isArray(this.buttons)){ + while(this.buttons.length) { + Ext.destroy(this.buttons[0]); + } + } + if(this.rendered){ + Ext.destroy( + this.ft, + this.header, + this.footer, + this.tbar, + this.bbar, + this.body, + this.mc, + this.bwrap, + this.dd + ); + if (this.fbar) { + Ext.destroy( + this.fbar, + this.fbar.el + ); + } + } + Ext.destroy(this.toolbars); + }, + + // private + createClasses : function(){ + this.headerCls = this.baseCls + '-header'; + this.headerTextCls = this.baseCls + '-header-text'; + this.bwrapCls = this.baseCls + '-bwrap'; + this.tbarCls = this.baseCls + '-tbar'; + this.bodyCls = this.baseCls + '-body'; + this.bbarCls = this.baseCls + '-bbar'; + this.footerCls = this.baseCls + '-footer'; + }, + + // private + createGhost : function(cls, useShim, appendTo){ + var el = document.createElement('div'); + el.className = 'x-panel-ghost ' + (cls ? cls : ''); + if(this.header){ + el.appendChild(this.el.dom.firstChild.cloneNode(true)); + } + Ext.fly(el.appendChild(document.createElement('ul'))).setHeight(this.bwrap.getHeight()); + el.style.width = this.el.dom.offsetWidth + 'px';; + if(!appendTo){ + this.container.dom.appendChild(el); }else{ - this[this.collapseEl].hide(); - this.afterCollapse(false); + Ext.getDom(appendTo).appendChild(el); + } + if(useShim !== false && this.el.useShim !== false){ + var layer = new Ext.Layer({shadow:false, useDisplay:true, constrain:false}, el); + layer.show(); + return layer; + }else{ + return new Ext.Element(el); } }, // private - afterCollapse : function(anim){ - this.collapsed = true; - this.el.addClass(this.collapsedCls); - this.afterEffect(anim); - this.fireEvent('collapse', this); + doAutoLoad : function(){ + var u = this.body.getUpdater(); + if(this.renderer){ + u.setRenderer(this.renderer); + } + u.update(Ext.isObject(this.autoLoad) ? this.autoLoad : {url: this.autoLoad}); }, /** - * Expands the panel body so that it becomes visible. Fires the {@link #beforeexpand} event which will - * cancel the expand action if it returns false. - * @param {Boolean} animate True to animate the transition, else false (defaults to the value of the - * {@link #animCollapse} panel config) - * @return {Ext.Panel} this + * Retrieve a tool by id. + * @param {String} id + * @return {Object} tool */ - expand : function(animate){ - if(!this.collapsed || this.el.hasFxBlock() || this.fireEvent('beforeexpand', this, animate) === false){ - return; - } - var doAnim = animate === true || (animate !== false && this.animCollapse); - this.el.removeClass(this.collapsedCls); - this.beforeEffect(doAnim); - this.onExpand(doAnim, animate); - return this; + getTool : function(id) { + return this.tools[id]; + } + +/** + * @cfg {String} autoEl @hide + */ +}); +Ext.reg('panel', Ext.Panel); +/** + * @class Ext.Editor + * @extends Ext.Component + * A base editor field that handles displaying/hiding on demand and has some built-in sizing and event handling logic. + * @constructor + * Create a new Editor + * @param {Object} config The config object + * @xtype editor + */ +Ext.Editor = function(field, config){ + if(field.field){ + this.field = Ext.create(field.field, 'textfield'); + config = Ext.apply({}, field); // copy so we don't disturb original config + delete config.field; + }else{ + this.field = field; + } + Ext.Editor.superclass.constructor.call(this, config); +}; + +Ext.extend(Ext.Editor, Ext.Component, { + /** + * @cfg {Ext.form.Field} field + * The Field object (or descendant) or config object for field + */ + /** + * @cfg {Boolean} allowBlur + * True to {@link #completeEdit complete the editing process} if in edit mode when the + * field is blurred. Defaults to true. + */ + allowBlur: true, + /** + * @cfg {Boolean/String} autoSize + * True for the editor to automatically adopt the size of the underlying field, "width" to adopt the width only, + * or "height" to adopt the height only, "none" to always use the field dimensions. (defaults to false) + */ + /** + * @cfg {Boolean} revertInvalid + * True to automatically revert the field value and cancel the edit when the user completes an edit and the field + * validation fails (defaults to true) + */ + /** + * @cfg {Boolean} ignoreNoChange + * True to skip the edit completion process (no save, no events fired) if the user completes an edit and + * the value has not changed (defaults to false). Applies only to string values - edits for other data types + * will never be ignored. + */ + /** + * @cfg {Boolean} hideEl + * False to keep the bound element visible while the editor is displayed (defaults to true) + */ + /** + * @cfg {Mixed} value + * The data value of the underlying field (defaults to "") + */ + value : "", + /** + * @cfg {String} alignment + * The position to align to (see {@link Ext.Element#alignTo} for more details, defaults to "c-c?"). + */ + alignment: "c-c?", + /** + * @cfg {Array} offsets + * The offsets to use when aligning (see {@link Ext.Element#alignTo} for more details. Defaults to [0, 0]. + */ + offsets: [0, 0], + /** + * @cfg {Boolean/String} shadow "sides" for sides/bottom only, "frame" for 4-way shadow, and "drop" + * for bottom-right shadow (defaults to "frame") + */ + shadow : "frame", + /** + * @cfg {Boolean} constrain True to constrain the editor to the viewport + */ + constrain : false, + /** + * @cfg {Boolean} swallowKeys Handle the keydown/keypress events so they don't propagate (defaults to true) + */ + swallowKeys : true, + /** + * @cfg {Boolean} completeOnEnter True to complete the edit when the enter key is pressed. Defaults to true. + */ + completeOnEnter : true, + /** + * @cfg {Boolean} cancelOnEsc True to cancel the edit when the escape key is pressed. Defaults to true. + */ + cancelOnEsc : true, + /** + * @cfg {Boolean} updateEl True to update the innerHTML of the bound element when the update completes (defaults to false) + */ + updateEl : false, + + initComponent : function(){ + Ext.Editor.superclass.initComponent.call(this); + this.addEvents( + /** + * @event beforestartedit + * Fires when editing is initiated, but before the value changes. Editing can be canceled by returning + * false from the handler of this event. + * @param {Editor} this + * @param {Ext.Element} boundEl The underlying element bound to this editor + * @param {Mixed} value The field value being set + */ + "beforestartedit", + /** + * @event startedit + * Fires when this editor is displayed + * @param {Ext.Element} boundEl The underlying element bound to this editor + * @param {Mixed} value The starting field value + */ + "startedit", + /** + * @event beforecomplete + * Fires after a change has been made to the field, but before the change is reflected in the underlying + * field. Saving the change to the field can be canceled by returning false from the handler of this event. + * Note that if the value has not changed and ignoreNoChange = true, the editing will still end but this + * event will not fire since no edit actually occurred. + * @param {Editor} this + * @param {Mixed} value The current field value + * @param {Mixed} startValue The original field value + */ + "beforecomplete", + /** + * @event complete + * Fires after editing is complete and any changed value has been written to the underlying field. + * @param {Editor} this + * @param {Mixed} value The current field value + * @param {Mixed} startValue The original field value + */ + "complete", + /** + * @event canceledit + * Fires after editing has been canceled and the editor's value has been reset. + * @param {Editor} this + * @param {Mixed} value The user-entered field value that was discarded + * @param {Mixed} startValue The original field value that was set back into the editor after cancel + */ + "canceledit", + /** + * @event specialkey + * Fires when any key related to navigation (arrows, tab, enter, esc, etc.) is pressed. You can check + * {@link Ext.EventObject#getKey} to determine which key was pressed. + * @param {Ext.form.Field} this + * @param {Ext.EventObject} e The event object + */ + "specialkey" + ); }, // private - onExpand : function(doAnim, animArg){ - if(doAnim){ - this[this.collapseEl].slideIn(this.slideAnchor, - Ext.apply(this.createEffect(animArg||true, this.afterExpand, this), - this.expandDefaults)); - }else{ - this[this.collapseEl].show(); - this.afterExpand(false); + onRender : function(ct, position){ + this.el = new Ext.Layer({ + shadow: this.shadow, + cls: "x-editor", + parentEl : ct, + shim : this.shim, + shadowOffset: this.shadowOffset || 4, + id: this.id, + constrain: this.constrain + }); + if(this.zIndex){ + this.el.setZIndex(this.zIndex); + } + this.el.setStyle("overflow", Ext.isGecko ? "auto" : "hidden"); + if(this.field.msgTarget != 'title'){ + this.field.msgTarget = 'qtip'; + } + this.field.inEditor = true; + this.mon(this.field, { + scope: this, + blur: this.onBlur, + specialkey: this.onSpecialKey + }); + if(this.field.grow){ + this.mon(this.field, "autosize", this.el.sync, this.el, {delay:1}); + } + this.field.render(this.el).show(); + this.field.getEl().dom.name = ''; + if(this.swallowKeys){ + this.field.el.swallowEvent([ + 'keypress', // *** Opera + 'keydown' // *** all other browsers + ]); } }, // private - afterExpand : function(anim){ - this.collapsed = false; - this.afterEffect(anim); - if(Ext.isDefined(this.deferLayout)){ - this.doLayout(true); + onSpecialKey : function(field, e){ + var key = e.getKey(), + complete = this.completeOnEnter && key == e.ENTER, + cancel = this.cancelOnEsc && key == e.ESC; + if(complete || cancel){ + e.stopEvent(); + if(complete){ + this.completeEdit(); + }else{ + this.cancelEdit(); + } + if(field.triggerBlur){ + field.triggerBlur(); + } } - this.fireEvent('expand', this); + this.fireEvent('specialkey', field, e); }, /** - * Shortcut for performing an {@link #expand} or {@link #collapse} based on the current state of the panel. - * @param {Boolean} animate True to animate the transition, else false (defaults to the value of the - * {@link #animCollapse} panel config) - * @return {Ext.Panel} this + * Starts the editing process and shows the editor. + * @param {Mixed} el The element to edit + * @param {String} value (optional) A value to initialize the editor with. If a value is not provided, it defaults + * to the innerHTML of el. */ - toggleCollapse : function(animate){ - this[this.collapsed ? 'expand' : 'collapse'](animate); - return this; - }, - - // private - onDisable : function(){ - if(this.rendered && this.maskDisabled){ - this.el.mask(); + startEdit : function(el, value){ + if(this.editing){ + this.completeEdit(); } - Ext.Panel.superclass.onDisable.call(this); - }, - - // private - onEnable : function(){ - if(this.rendered && this.maskDisabled){ - this.el.unmask(); + this.boundEl = Ext.get(el); + var v = value !== undefined ? value : this.boundEl.dom.innerHTML; + if(!this.rendered){ + this.render(this.parentEl || document.body); + } + if(this.fireEvent("beforestartedit", this, this.boundEl, v) !== false){ + this.startValue = v; + this.field.reset(); + this.field.setValue(v); + this.realign(true); + this.editing = true; + this.show(); } - Ext.Panel.superclass.onEnable.call(this); }, // private - onResize : function(w, h){ - if(Ext.isDefined(w) || Ext.isDefined(h)){ - if(!this.collapsed){ - // First, set the the Panel's body width. - // If we have auto-widthed it, get the resulting full offset width so we can size the Toolbars to match - // The Toolbars must not buffer this resize operation because we need to know their heights. - - if(Ext.isNumber(w)){ - this.body.setWidth(w = this.adjustBodyWidth(w - this.getFrameWidth())); - } else if (w == 'auto') { - w = this.body.setWidth('auto').dom.offsetWidth; - } else { - w = this.body.dom.offsetWidth; - } - - if(this.tbar){ - this.tbar.setWidth(w); - if(this.topToolbar){ - this.topToolbar.setSize(w); - } - } - if(this.bbar){ - this.bbar.setWidth(w); - if(this.bottomToolbar){ - this.bottomToolbar.setSize(w); - // The bbar does not move on resize without this. - if (Ext.isIE) { - this.bbar.setStyle('position', 'static'); - this.bbar.setStyle('position', ''); - } - } - } - if(this.footer){ - this.footer.setWidth(w); - if(this.fbar){ - this.fbar.setSize(Ext.isIE ? (w - this.footer.getFrameWidth('lr')) : 'auto'); - } - } - - // At this point, the Toolbars must be layed out for getFrameHeight to find a result. - if(Ext.isNumber(h)){ - h = Math.max(0, this.adjustBodyHeight(h - this.getFrameHeight())); - this.body.setHeight(h); - }else if(h == 'auto'){ - this.body.setHeight(h); - } + doAutoSize : function(){ + if(this.autoSize){ + var sz = this.boundEl.getSize(), + fs = this.field.getSize(); - if(this.disabled && this.el._mask){ - this.el._mask.setSize(this.el.dom.clientWidth, this.el.getHeight()); - } - }else{ - this.queuedBodySize = {width: w, height: h}; - if(!this.queuedExpand && this.allowQueuedExpand !== false){ - this.queuedExpand = true; - this.on('expand', function(){ - delete this.queuedExpand; - this.onResize(this.queuedBodySize.width, this.queuedBodySize.height); - }, this, {single:true}); - } + switch(this.autoSize){ + case "width": + this.setSize(sz.width, fs.height); + break; + case "height": + this.setSize(fs.width, sz.height); + break; + case "none": + this.setSize(fs.width, fs.height); + break; + default: + this.setSize(sz.width, sz.height); } - this.onBodyResize(w, h); } - this.syncShadow(); - Ext.Panel.superclass.onResize.call(this); - }, - - // private - onBodyResize: function(w, h){ - this.fireEvent('bodyresize', this, w, h); }, - // private - getToolbarHeight: function(){ - var h = 0; - if(this.rendered){ - Ext.each(this.toolbars, function(tb){ - h += tb.getHeight(); - }, this); + /** + * Sets the height and width of this editor. + * @param {Number} width The new width + * @param {Number} height The new height + */ + setSize : function(w, h){ + delete this.field.lastSize; + this.field.setSize(w, h); + if(this.el){ + // IE7 in strict mode doesn't size properly. + if(Ext.isGecko2 || Ext.isOpera || (Ext.isIE7 && Ext.isStrict)){ + // prevent layer scrollbars + this.el.setSize(w, h); + } + this.el.sync(); } - return h; - }, - - // private - adjustBodyHeight : function(h){ - return h; - }, - - // private - adjustBodyWidth : function(w){ - return w; - }, - - // private - onPosition : function(){ - this.syncShadow(); }, /** - * Returns the width in pixels of the framing elements of this panel (not including the body width). To - * retrieve the body width see {@link #getInnerWidth}. - * @return {Number} The frame width + * Realigns the editor to the bound field based on the current alignment config value. + * @param {Boolean} autoSize (optional) True to size the field to the dimensions of the bound element. */ - getFrameWidth : function(){ - var w = this.el.getFrameWidth('lr') + this.bwrap.getFrameWidth('lr'); - - if(this.frame){ - var l = this.bwrap.dom.firstChild; - w += (Ext.fly(l).getFrameWidth('l') + Ext.fly(l.firstChild).getFrameWidth('r')); - w += this.mc.getFrameWidth('lr'); + realign : function(autoSize){ + if(autoSize === true){ + this.doAutoSize(); } - return w; + this.el.alignTo(this.boundEl, this.alignment, this.offsets); }, /** - * Returns the height in pixels of the framing elements of this panel (including any top and bottom bars and - * header and footer elements, but not including the body height). To retrieve the body height see {@link #getInnerHeight}. - * @return {Number} The frame height + * Ends the editing process, persists the changed value to the underlying field, and hides the editor. + * @param {Boolean} remainVisible Override the default behavior and keep the editor visible after edit (defaults to false) */ - getFrameHeight : function(){ - var h = this.el.getFrameWidth('tb') + this.bwrap.getFrameWidth('tb'); - h += (this.tbar ? this.tbar.getHeight() : 0) + - (this.bbar ? this.bbar.getHeight() : 0); - - if(this.frame){ - h += this.el.dom.firstChild.offsetHeight + this.ft.dom.offsetHeight + this.mc.getFrameWidth('tb'); - }else{ - h += (this.header ? this.header.getHeight() : 0) + - (this.footer ? this.footer.getHeight() : 0); + completeEdit : function(remainVisible){ + if(!this.editing){ + return; + } + // Assert combo values first + if (this.field.assertValue) { + this.field.assertValue(); + } + var v = this.getValue(); + if(!this.field.isValid()){ + if(this.revertInvalid !== false){ + this.cancelEdit(remainVisible); + } + return; + } + if(String(v) === String(this.startValue) && this.ignoreNoChange){ + this.hideEdit(remainVisible); + return; + } + if(this.fireEvent("beforecomplete", this, v, this.startValue) !== false){ + v = this.getValue(); + if(this.updateEl && this.boundEl){ + this.boundEl.update(v); + } + this.hideEdit(remainVisible); + this.fireEvent("complete", this, v, this.startValue); } - return h; }, - /** - * Returns the width in pixels of the body element (not including the width of any framing elements). - * For the frame width see {@link #getFrameWidth}. - * @return {Number} The body width - */ - getInnerWidth : function(){ - return this.getSize().width - this.getFrameWidth(); + // private + onShow : function(){ + this.el.show(); + if(this.hideEl !== false){ + this.boundEl.hide(); + } + this.field.show().focus(false, true); + this.fireEvent("startedit", this.boundEl, this.startValue); }, /** - * Returns the height in pixels of the body element (not including the height of any framing elements). - * For the frame height see {@link #getFrameHeight}. - * @return {Number} The body height + * Cancels the editing process and hides the editor without persisting any changes. The field value will be + * reverted to the original starting value. + * @param {Boolean} remainVisible Override the default behavior and keep the editor visible after + * cancel (defaults to false) */ - getInnerHeight : function(){ - return this.getSize().height - this.getFrameHeight(); + cancelEdit : function(remainVisible){ + if(this.editing){ + var v = this.getValue(); + this.setValue(this.startValue); + this.hideEdit(remainVisible); + this.fireEvent("canceledit", this, v, this.startValue); + } }, // private - syncShadow : function(){ - if(this.floating){ - this.el.sync(true); + hideEdit: function(remainVisible){ + if(remainVisible !== true){ + this.editing = false; + this.hide(); } }, // private - getLayoutTarget : function(){ - return this.body; + onBlur : function(){ + // selectSameEditor flag allows the same editor to be started without onBlur firing on itself + if(this.allowBlur === true && this.editing && this.selectSameEditor !== true){ + this.completeEdit(); + } }, // private - getContentTarget : function(){ - return this.body; + onHide : function(){ + if(this.editing){ + this.completeEdit(); + return; + } + this.field.blur(); + if(this.field.collapse){ + this.field.collapse(); + } + this.el.hide(); + if(this.hideEl !== false){ + this.boundEl.show(); + } }, /** - *+panel.load({ + url: 'your-url.php', + params: {param1: 'foo', param2: 'bar'}, // or a URL encoded string + callback: yourFunction, + scope: yourObject, // optional scope for the callback + discardUrl: false, + nocache: false, + text: 'Loading...', + timeout: 30, + scripts: false +}); +Sets the title text for the panel and optionally the {@link #iconCls icon class}.
- *In order to be able to set the title, a header element must have been created - * for the Panel. This is triggered either by configuring the Panel with a non-blank
- * @param {String} title The title text to set - * @param {String} iconCls (optional) {@link #iconCls iconCls} A user-defined CSS class that provides the icon image for this panel + * Sets the data value of the editor + * @param {Mixed} value Any valid value supported by the underlying field */ - setTitle : function(title, iconCls){ - this.title = title; - if(this.header && this.headerAsText){ - this.header.child('span').update(title); - } - if(iconCls){ - this.setIconClass(iconCls); - } - this.fireEvent('titlechange', this, title); - return this; + setValue : function(v){ + this.field.setValue(v); }, /** - * Get the {@link Ext.Updater} for this panel. Enables you to perform Ajax updates of this panel's body. - * @return {Ext.Updater} The Updater + * Gets the data value of the editor + * @return {Mixed} The data value */ - getUpdater : function(){ - return this.body.getUpdater(); + getValue : function(){ + return this.field.getValue(); }, - /** - * Loads this content panel immediately with content returned from an XHR call. - * @param {Object/String/Function} config A config object containing any of the following options: -{@link #title}, - * or configuring it with{@link #header}: true.-panel.load({ - url: 'your-url.php', - params: {param1: 'foo', param2: 'bar'}, // or a URL encoded string - callback: yourFunction, - scope: yourObject, // optional scope for the callback - discardUrl: false, - nocache: false, - text: 'Loading...', - timeout: 30, - scripts: false + beforeDestroy : function(){ + Ext.destroyMembers(this, 'field'); + + delete this.parentEl; + delete this.boundEl; + } +}); +Ext.reg('editor', Ext.Editor); +/** + * @class Ext.ColorPalette + * @extends Ext.Component + * Simple color palette class for choosing colors. The palette can be rendered to any container.
+ * Here's an example of typical usage: + *
- * The only required property is url. The optional properties nocache, text and scripts - * are shorthand for disableCaching, indicatorText and loadScripts and are used to set their - * associated property on this panel Updater instance. - * @return {Ext.Panel} this + * @constructor + * Create a new ColorPalette + * @param {Object} config The config object + * @xtype colorpalette + */ +Ext.ColorPalette = Ext.extend(Ext.Component, { + /** + * @cfg {String} tpl An existing XTemplate instance to be used in place of the default template for rendering the component. + */ + /** + * @cfg {String} itemCls + * The CSS class to apply to the containing element (defaults to 'x-color-palette') */ - load : function(){ - var um = this.body.getUpdater(); - um.update.apply(um, arguments); - return this; - }, - + itemCls : 'x-color-palette', + /** + * @cfg {String} value + * The initial color to highlight (should be a valid 6-digit color hex code without the # symbol). Note that + * the hex codes are case-sensitive. + */ + value : null, + /** + * @cfg {String} clickEvent + * The DOM event that will cause a color to be selected. This can be any valid event name (dblclick, contextmenu). + * Defaults to 'click'. + */ + clickEvent :'click', // private - beforeDestroy : function(){ - Ext.Panel.superclass.beforeDestroy.call(this); - if(this.header){ - this.header.removeAllListeners(); - } - if(this.tools){ - for(var k in this.tools){ - Ext.destroy(this.tools[k]); - } - } - if(Ext.isArray(this.buttons)){ - while(this.buttons.length) { - Ext.destroy(this.buttons[0]); - } - } - if(this.rendered){ - Ext.destroy( - this.ft, - this.header, - this.footer, - this.toolbars, - this.tbar, - this.bbar, - this.body, - this.mc, - this.bwrap - ); - if (this.fbar) { - Ext.destroy( - this.fbar, - this.fbar.el - ); - } - }else{ - Ext.destroy( - this.topToolbar, - this.bottomToolbar - ); - } - }, + ctype : 'Ext.ColorPalette', + + /** + * @cfg {Boolean} allowReselect If set to true then reselecting a color that is already selected fires the {@link #select} event + */ + allowReselect : false, + + /** + *+var cp = new Ext.ColorPalette({value:'993300'}); // initial selected color +cp.render('my-div'); + +cp.on('select', function(palette, selColor){ + // do something with selColor });An array of 6-digit color hex code strings (without the # symbol). This array can contain any number + * of colors, and each hex code should be unique. The width of the palette is controlled via CSS by adjusting + * the width property of the 'x-color-palette' class (or assigning a custom class), so you can balance the number + * of colors with the width setting until the box is symmetrical.
+ *You can override individual colors if needed:
+ *
+ +Or you can provide a custom array of your own for complete control: ++var cp = new Ext.ColorPalette(); +cp.colors[0] = 'FF0000'; // change the first box to red +
+ * @type Array + */ + colors : [ + '000000', '993300', '333300', '003300', '003366', '000080', '333399', '333333', + '800000', 'FF6600', '808000', '008000', '008080', '0000FF', '666699', '808080', + 'FF0000', 'FF9900', '99CC00', '339966', '33CCCC', '3366FF', '800080', '969696', + 'FF00FF', 'FFCC00', 'FFFF00', '00FF00', '00FFFF', '00CCFF', '993366', 'C0C0C0', + 'FF99CC', 'FFCC99', 'FFFF99', 'CCFFCC', 'CCFFFF', '99CCFF', 'CC99FF', 'FFFFFF' + ], + /** + * @cfg {Function} handler + * Optional. A function that will handle the select event of this palette. + * The handler is passed the following parameters:+var cp = new Ext.ColorPalette(); +cp.colors = ['000000', '993300', '333300']; ++ */ + /** + * @cfg {Object} scope + * The scope (this reference) in which the-
+ *
palette: ColorPaletteThe {@link #palette Ext.ColorPalette}.
+ * color: StringThe 6-digit color hex code (without the # symbol).
+ *
{@link #handler}+ * function will be called. Defaults to this ColorPalette instance. + */ + // private - createClasses : function(){ - this.headerCls = this.baseCls + '-header'; - this.headerTextCls = this.baseCls + '-header-text'; - this.bwrapCls = this.baseCls + '-bwrap'; - this.tbarCls = this.baseCls + '-tbar'; - this.bodyCls = this.baseCls + '-body'; - this.bbarCls = this.baseCls + '-bbar'; - this.footerCls = this.baseCls + '-footer'; + initComponent : function(){ + Ext.ColorPalette.superclass.initComponent.call(this); + this.addEvents( + /** + * @event select + * Fires when a color is selected + * @param {ColorPalette} this + * @param {String} color The 6-digit color hex code (without the # symbol) + */ + 'select' + ); + + if(this.handler){ + this.on('select', this.handler, this.scope, true); + } }, // private - createGhost : function(cls, useShim, appendTo){ - var el = document.createElement('div'); - el.className = 'x-panel-ghost ' + (cls ? cls : ''); - if(this.header){ - el.appendChild(this.el.dom.firstChild.cloneNode(true)); - } - Ext.fly(el.appendChild(document.createElement('ul'))).setHeight(this.bwrap.getHeight()); - el.style.width = this.el.dom.offsetWidth + 'px';; - if(!appendTo){ - this.container.dom.appendChild(el); - }else{ - Ext.getDom(appendTo).appendChild(el); + onRender : function(container, position){ + this.autoEl = { + tag: 'div', + cls: this.itemCls + }; + Ext.ColorPalette.superclass.onRender.call(this, container, position); + var t = this.tpl || new Ext.XTemplate( + 'A popup date picker. This class is used by the {@link Ext.form.DateField DateField} class + * to allow browsing and selection of valid dates.
+ *All the string values documented below may be overridden by including an Ext locale file in + * your page.
* @constructor - * Create a new Editor + * Create a new DatePicker * @param {Object} config The config object - * @xtype editor + * @xtype datepicker */ -Ext.Editor = function(field, config){ - if(field.field){ - this.field = Ext.create(field.field, 'textfield'); - config = Ext.apply({}, field); // copy so we don't disturb original config - delete config.field; - }else{ - this.field = field; - } - Ext.Editor.superclass.constructor.call(this, config); -}; - -Ext.extend(Ext.Editor, Ext.Component, { +Ext.DatePicker = Ext.extend(Ext.BoxComponent, { /** - * @cfg {Ext.form.Field} field - * The Field object (or descendant) or config object for field - */ + * @cfg {String} todayText + * The text to display on the button that selects the current date (defaults to'Today') + */ + todayText : 'Today', /** - * @cfg {Boolean} allowBlur - * True to {@link #completeEdit complete the editing process} if in edit mode when the - * field is blurred. Defaults to false. + * @cfg {String} okText + * The text to display on the ok button (defaults to' OK 'to give the user extra clicking room) */ + okText : ' OK ', /** - * @cfg {Boolean/String} autoSize - * True for the editor to automatically adopt the size of the underlying field, "width" to adopt the width only, - * or "height" to adopt the height only, "none" to always use the field dimensions. (defaults to false) + * @cfg {String} cancelText + * The text to display on the cancel button (defaults to'Cancel') */ + cancelText : 'Cancel', /** - * @cfg {Boolean} revertInvalid - * True to automatically revert the field value and cancel the edit when the user completes an edit and the field - * validation fails (defaults to true) + * @cfg {Function} handler + * Optional. A function that will handle the select event of this picker. + * The handler is passed the following parameters:*/ /** - * @cfg {Boolean} ignoreNoChange - * True to skip the edit completion process (no save, no events fired) if the user completes an edit and - * the value has not changed (defaults to false). Applies only to string values - edits for other data types - * will never be ignored. + * @cfg {Object} scope + * The scope (-
+ *
picker: DatePickerThis DatePicker.
+ * date: DateThe selected date.
+ *
thisreference) in which the{@link #handler}+ * function will be called. Defaults to this DatePicker instance. */ /** - * @cfg {Boolean} hideEl - * False to keep the bound element visible while the editor is displayed (defaults to true) + * @cfg {String} todayTip + * A string used to format the message for displaying in a tooltip over the button that + * selects the current date. Defaults to'{0} (Spacebar)'where + * the{0}token is replaced by today's date. */ + todayTip : '{0} (Spacebar)', /** - * @cfg {Mixed} value - * The data value of the underlying field (defaults to "") + * @cfg {String} minText + * The error text to display if the minDate validation fails (defaults to'This date is before the minimum date') */ - value : "", + minText : 'This date is before the minimum date', /** - * @cfg {String} alignment - * The position to align to (see {@link Ext.Element#alignTo} for more details, defaults to "c-c?"). + * @cfg {String} maxText + * The error text to display if the maxDate validation fails (defaults to'This date is after the maximum date') */ - alignment: "c-c?", + maxText : 'This date is after the maximum date', /** - * @cfg {Array} offsets - * The offsets to use when aligning (see {@link Ext.Element#alignTo} for more details. Defaults to [0, 0]. + * @cfg {String} format + * The default date format string which can be overriden for localization support. The format must be + * valid according to {@link Date#parseDate} (defaults to'm/d/y'). */ - offsets: [0, 0], + format : 'm/d/y', + /** + * @cfg {String} disabledDaysText + * The tooltip to display when the date falls on a disabled day (defaults to'Disabled') + */ + disabledDaysText : 'Disabled', + /** + * @cfg {String} disabledDatesText + * The tooltip text to display when the date falls on a disabled date (defaults to'Disabled') + */ + disabledDatesText : 'Disabled', + /** + * @cfg {Array} monthNames + * An array of textual month names which can be overriden for localization support (defaults to Date.monthNames) + */ + monthNames : Date.monthNames, + /** + * @cfg {Array} dayNames + * An array of textual day names which can be overriden for localization support (defaults to Date.dayNames) + */ + dayNames : Date.dayNames, + /** + * @cfg {String} nextText + * The next month navigation button tooltip (defaults to'Next Month (Control+Right)') + */ + nextText : 'Next Month (Control+Right)', + /** + * @cfg {String} prevText + * The previous month navigation button tooltip (defaults to'Previous Month (Control+Left)') + */ + prevText : 'Previous Month (Control+Left)', + /** + * @cfg {String} monthYearText + * The header month selector tooltip (defaults to'Choose a month (Control+Up/Down to move years)') + */ + monthYearText : 'Choose a month (Control+Up/Down to move years)', + /** + * @cfg {Number} startDay + * Day index at which the week should begin, 0-based (defaults to 0, which is Sunday) + */ + startDay : 0, + /** + * @cfg {Boolean} showToday + * False to hide the footer area containing the Today button and disable the keyboard handler for spacebar + * that selects the current date (defaults totrue). + */ + showToday : true, + /** + * @cfg {Date} minDate + * Minimum allowable date (JavaScript date object, defaults to null) + */ + /** + * @cfg {Date} maxDate + * Maximum allowable date (JavaScript date object, defaults to null) + */ + /** + * @cfg {Array} disabledDays + * An array of days to disable, 0-based. For example, [0, 6] disables Sunday and Saturday (defaults to null). + */ + /** + * @cfg {RegExp} disabledDatesRE + * JavaScript regular expression used to disable a pattern of dates (defaults to null). The {@link #disabledDates} + * config will generate this regex internally, but if you specify disabledDatesRE it will take precedence over the + * disabledDates value. + */ + /** + * @cfg {Array} disabledDates + * An array of 'dates' to disable, as strings. These strings will be used to build a dynamic regular + * expression so they are very powerful. Some examples: + *-
+ *
- ['03/08/2003', '09/16/2003'] would disable those exact dates + *
- ['03/08', '09/16'] would disable those days for every year + *
- ['^03/08'] would only match the beginning (useful if you are using short years) + *
- ['03/../2006'] would disable every day in March 2006 + *
- ['^03'] would disable every day in every March + *
']; + for(var i = 0; i < 6; i++){ + buf.push( + '
' + ); + this.monthPicker.update(buf.join('')); - /** - * Starts the editing process and shows the editor. - * @param {Mixed} el The element to edit - * @param {String} value (optional) A value to initialize the editor with. If a value is not provided, it defaults - * to the innerHTML of el. - */ - startEdit : function(el, value){ - if(this.editing){ - this.completeEdit(); - } - this.boundEl = Ext.get(el); - var v = value !== undefined ? value : this.boundEl.dom.innerHTML; - if(!this.rendered){ - this.render(this.parentEl || document.body); - } - if(this.fireEvent("beforestartedit", this, this.boundEl, v) !== false){ - this.startValue = v; - this.field.reset(); - this.field.setValue(v); - this.realign(true); - this.editing = true; - this.show(); + this.mon(this.monthPicker, 'click', this.onMonthClick, this); + this.mon(this.monthPicker, 'dblclick', this.onMonthDblClick, this); + + this.mpMonths = this.monthPicker.select('td.x-date-mp-month'); + this.mpYears = this.monthPicker.select('td.x-date-mp-year'); + + this.mpMonths.each(function(m, a, i){ + i += 1; + if((i%2) === 0){ + m.dom.xmonth = 5 + Math.round(i * 0.5); + }else{ + m.dom.xmonth = Math.round((i-1) * 0.5); + } + }); } }, // private - doAutoSize : function(){ - if(this.autoSize){ - var sz = this.boundEl.getSize(), - fs = this.field.getSize(); + showMonthPicker : function(){ + if(!this.disabled){ + this.createMonthPicker(); + var size = this.el.getSize(); + this.monthPicker.setSize(size); + this.monthPicker.child('table').setSize(size); - switch(this.autoSize){ - case "width": - this.setSize(sz.width, fs.height); - break; - case "height": - this.setSize(fs.width, sz.height); - break; - case "none": - this.setSize(fs.width, fs.height); - break; - default: - this.setSize(sz.width, sz.height); - } + this.mpSelMonth = (this.activeDate || this.value).getMonth(); + this.updateMPMonth(this.mpSelMonth); + this.mpSelYear = (this.activeDate || this.value).getFullYear(); + this.updateMPYear(this.mpSelYear); + + this.monthPicker.slideIn('t', {duration:0.2}); } }, - /** - * Sets the height and width of this editor. - * @param {Number} width The new width - * @param {Number} height The new height - */ - setSize : function(w, h){ - delete this.field.lastSize; - this.field.setSize(w, h); - if(this.el){ - if(Ext.isGecko2 || Ext.isOpera){ - // prevent layer scrollbars - this.el.setSize(w, h); + // private + updateMPYear : function(y){ + this.mpyear = y; + var ys = this.mpYears.elements; + for(var i = 1; i <= 10; i++){ + var td = ys[i-1], y2; + if((i%2) === 0){ + y2 = y + Math.round(i * 0.5); + td.firstChild.innerHTML = y2; + td.xyear = y2; + }else{ + y2 = y - (5-Math.round(i * 0.5)); + td.firstChild.innerHTML = y2; + td.xyear = y2; } - this.el.sync(); + this.mpYears.item(i-1)[y2 == this.mpSelYear ? 'addClass' : 'removeClass']('x-date-mp-sel'); } }, - /** - * Realigns the editor to the bound field based on the current alignment config value. - * @param {Boolean} autoSize (optional) True to size the field to the dimensions of the bound element. - */ - realign : function(autoSize){ - if(autoSize === true){ - this.doAutoSize(); - } - this.el.alignTo(this.boundEl, this.alignment, this.offsets); + // private + updateMPMonth : function(sm){ + this.mpMonths.each(function(m, a, i){ + m[m.dom.xmonth == sm ? 'addClass' : 'removeClass']('x-date-mp-sel'); + }); }, - /** - * Ends the editing process, persists the changed value to the underlying field, and hides the editor. - * @param {Boolean} remainVisible Override the default behavior and keep the editor visible after edit (defaults to false) - */ - completeEdit : function(remainVisible){ - if(!this.editing){ - return; + // private + selectMPMonth : function(m){ + + }, + + // private + onMonthClick : function(e, t){ + e.stopEvent(); + var el = new Ext.Element(t), pn; + if(el.is('button.x-date-mp-cancel')){ + this.hideMonthPicker(); } - var v = this.getValue(); - if(!this.field.isValid()){ - if(this.revertInvalid !== false){ - this.cancelEdit(remainVisible); + else if(el.is('button.x-date-mp-ok')){ + var d = new Date(this.mpSelYear, this.mpSelMonth, (this.activeDate || this.value).getDate()); + if(d.getMonth() != this.mpSelMonth){ + // 'fix' the JS rolling date conversion if needed + d = new Date(this.mpSelYear, this.mpSelMonth, 1).getLastDateOfMonth(); } - return; + this.update(d); + this.hideMonthPicker(); } - if(String(v) === String(this.startValue) && this.ignoreNoChange){ - this.hideEdit(remainVisible); - return; + else if((pn = el.up('td.x-date-mp-month', 2))){ + this.mpMonths.removeClass('x-date-mp-sel'); + pn.addClass('x-date-mp-sel'); + this.mpSelMonth = pn.dom.xmonth; + } + else if((pn = el.up('td.x-date-mp-year', 2))){ + this.mpYears.removeClass('x-date-mp-sel'); + pn.addClass('x-date-mp-sel'); + this.mpSelYear = pn.dom.xyear; + } + else if(el.is('a.x-date-mp-prev')){ + this.updateMPYear(this.mpyear-10); + } + else if(el.is('a.x-date-mp-next')){ + this.updateMPYear(this.mpyear+10); + } + }, + + // private + onMonthDblClick : function(e, t){ + e.stopEvent(); + var el = new Ext.Element(t), pn; + if((pn = el.up('td.x-date-mp-month', 2))){ + this.update(new Date(this.mpSelYear, pn.dom.xmonth, (this.activeDate || this.value).getDate())); + this.hideMonthPicker(); } - if(this.fireEvent("beforecomplete", this, v, this.startValue) !== false){ - v = this.getValue(); - if(this.updateEl && this.boundEl){ - this.boundEl.update(v); - } - this.hideEdit(remainVisible); - this.fireEvent("complete", this, v, this.startValue); + else if((pn = el.up('td.x-date-mp-year', 2))){ + this.update(new Date(pn.dom.xyear, this.mpSelMonth, (this.activeDate || this.value).getDate())); + this.hideMonthPicker(); } }, // private - onShow : function(){ - this.el.show(); - if(this.hideEl !== false){ - this.boundEl.hide(); + hideMonthPicker : function(disableAnim){ + if(this.monthPicker){ + if(disableAnim === true){ + this.monthPicker.hide(); + }else{ + this.monthPicker.slideOut('t', {duration:0.2}); + } } - this.field.show().focus(false, true); - this.fireEvent("startedit", this.boundEl, this.startValue); }, - /** - * Cancels the editing process and hides the editor without persisting any changes. The field value will be - * reverted to the original starting value. - * @param {Boolean} remainVisible Override the default behavior and keep the editor visible after - * cancel (defaults to false) - */ - cancelEdit : function(remainVisible){ - if(this.editing){ - var v = this.getValue(); - this.setValue(this.startValue); - this.hideEdit(remainVisible); - this.fireEvent("canceledit", this, v, this.startValue); - } + // private + showPrevMonth : function(e){ + this.update(this.activeDate.add('mo', -1)); }, - + // private - hideEdit: function(remainVisible){ - if(remainVisible !== true){ - this.editing = false; - this.hide(); - } + showNextMonth : function(e){ + this.update(this.activeDate.add('mo', 1)); }, // private - onBlur : function(){ - if(this.allowBlur !== true && this.editing){ - this.completeEdit(); - } + showPrevYear : function(){ + this.update(this.activeDate.add('y', -1)); }, // private - onHide : function(){ - if(this.editing){ - this.completeEdit(); - return; - } - this.field.blur(); - if(this.field.collapse){ - this.field.collapse(); + showNextYear : function(){ + this.update(this.activeDate.add('y', 1)); + }, + + // private + handleMouseWheel : function(e){ + e.stopEvent(); + if(!this.disabled){ + var delta = e.getWheelDelta(); + if(delta > 0){ + this.showPrevMonth(); + } else if(delta < 0){ + this.showNextMonth(); + } } - this.el.hide(); - if(this.hideEl !== false){ - this.boundEl.show(); + }, + + // private + handleDateClick : function(e, t){ + e.stopEvent(); + if(!this.disabled && t.dateValue && !Ext.fly(t.parentNode).hasClass('x-date-disabled')){ + this.cancelFocus = this.focusOnSelect === false; + this.setValue(new Date(t.dateValue)); + delete this.cancelFocus; + this.fireEvent('select', this, this.value); } }, - /** - * Sets the data value of the editor - * @param {Mixed} value Any valid value supported by the underlying field - */ - setValue : function(v){ - this.field.setValue(v); + // private + selectToday : function(){ + if(this.todayBtn && !this.todayBtn.disabled){ + this.setValue(new Date().clearTime()); + this.fireEvent('select', this, this.value); + } }, - /** - * Gets the data value of the editor - * @return {Mixed} The data value - */ - getValue : function(){ - return this.field.getValue(); + // private + update : function(date, forceRefresh){ + if(this.rendered){ + var vd = this.activeDate, vis = this.isVisible(); + this.activeDate = date; + if(!forceRefresh && vd && this.el){ + var t = date.getTime(); + if(vd.getMonth() == date.getMonth() && vd.getFullYear() == date.getFullYear()){ + this.cells.removeClass('x-date-selected'); + this.cells.each(function(c){ + if(c.dom.firstChild.dateValue == t){ + c.addClass('x-date-selected'); + if(vis && !this.cancelFocus){ + Ext.fly(c.dom.firstChild).focus(50); + } + return false; + } + }, this); + return; + } + } + var days = date.getDaysInMonth(), + firstOfMonth = date.getFirstDateOfMonth(), + startingPos = firstOfMonth.getDay()-this.startDay; + + if(startingPos < 0){ + startingPos += 7; + } + days += startingPos; + + var pm = date.add('mo', -1), + prevStart = pm.getDaysInMonth()-startingPos, + cells = this.cells.elements, + textEls = this.textNodes, + // convert everything to numbers so it's fast + d = (new Date(pm.getFullYear(), pm.getMonth(), prevStart, this.initHour)), + today = new Date().clearTime().getTime(), + sel = date.clearTime(true).getTime(), + min = this.minDate ? this.minDate.clearTime(true) : Number.NEGATIVE_INFINITY, + max = this.maxDate ? this.maxDate.clearTime(true) : Number.POSITIVE_INFINITY, + ddMatch = this.disabledDatesRE, + ddText = this.disabledDatesText, + ddays = this.disabledDays ? this.disabledDays.join('') : false, + ddaysText = this.disabledDaysText, + format = this.format; + + if(this.showToday){ + var td = new Date().clearTime(), + disable = (td < min || td > max || + (ddMatch && format && ddMatch.test(td.dateFormat(format))) || + (ddays && ddays.indexOf(td.getDay()) != -1)); + + if(!this.disabled){ + this.todayBtn.setDisabled(disable); + this.todayKeyListener[disable ? 'disable' : 'enable'](); + } + } + + var setCellClass = function(cal, cell){ + cell.title = ''; + var t = d.clearTime(true).getTime(); + cell.firstChild.dateValue = t; + if(t == today){ + cell.className += ' x-date-today'; + cell.title = cal.todayText; + } + if(t == sel){ + cell.className += ' x-date-selected'; + if(vis){ + Ext.fly(cell.firstChild).focus(50); + } + } + // disabling + if(t < min) { + cell.className = ' x-date-disabled'; + cell.title = cal.minText; + return; + } + if(t > max) { + cell.className = ' x-date-disabled'; + cell.title = cal.maxText; + return; + } + if(ddays){ + if(ddays.indexOf(d.getDay()) != -1){ + cell.title = ddaysText; + cell.className = ' x-date-disabled'; + } + } + if(ddMatch && format){ + var fvalue = d.dateFormat(format); + if(ddMatch.test(fvalue)){ + cell.title = ddText.replace('%0', fvalue); + cell.className = ' x-date-disabled'; + } + } + }; + + var i = 0; + for(; i < startingPos; i++) { + textEls[i].innerHTML = (++prevStart); + d.setDate(d.getDate()+1); + cells[i].className = 'x-date-prevday'; + setCellClass(this, cells[i]); + } + for(; i < days; i++){ + var intDay = i - startingPos + 1; + textEls[i].innerHTML = (intDay); + d.setDate(d.getDate()+1); + cells[i].className = 'x-date-active'; + setCellClass(this, cells[i]); + } + var extraDays = 0; + for(; i < 42; i++) { + textEls[i].innerHTML = (++extraDays); + d.setDate(d.getDate()+1); + cells[i].className = 'x-date-nextday'; + setCellClass(this, cells[i]); + } + + this.mbtn.setText(this.monthNames[date.getMonth()] + ' ' + date.getFullYear()); + + if(!this.internalRender){ + var main = this.el.dom.firstChild, + w = main.offsetWidth; + this.el.setWidth(w + this.el.getBorderWidth('lr')); + Ext.fly(main).setWidth(w); + this.internalRender = true; + // opera does not respect the auto grow header center column + // then, after it gets a width opera refuses to recalculate + // without a second pass + if(Ext.isOpera && !this.secondPass){ + main.rows[0].cells[1].style.width = (w - (main.rows[0].cells[0].offsetWidth+main.rows[0].cells[2].offsetWidth)) + 'px'; + this.secondPass = true; + this.update.defer(10, this, [date]); + } + } + } }, - beforeDestroy : function(){ - Ext.destroyMembers(this, 'field'); - - delete this.parentEl; - delete this.boundEl; + // private + beforeDestroy : function() { + if(this.rendered){ + Ext.destroy( + this.keyNav, + this.monthPicker, + this.eventEl, + this.mbtn, + this.nextRepeater, + this.prevRepeater, + this.cells.el, + this.todayBtn + ); + delete this.textNodes; + delete this.cells.elements; + } } -}); -Ext.reg('editor', Ext.Editor); -/** - * @class Ext.ColorPalette - * @extends Ext.Component - * Simple color palette class for choosing colors. The palette can be rendered to any container.', Date.getShortMonthName(i), ' ', + '', Date.getShortMonthName(i + 6), ' ', + i === 0 ? + '' + ); } - } - this.fireEvent('specialkey', field, e); - }, + buf.push( + '
- * Here's an example of typical usage: - *-var cp = new Ext.ColorPalette({value:'993300'}); // initial selected color -cp.render('my-div'); -cp.on('select', function(palette, selColor){ - // do something with selColor + /** + * @cfg {String} autoEl @hide + */ }); + +Ext.reg('datepicker', Ext.DatePicker); +/** + * @class Ext.LoadMask + * A simple utility class for generically masking elements while loading data. If the {@link #store} + * config option is specified, the masking will be automatically synchronized with the store's loading + * process and the mask element will be cached for reuse. For all other elements, this mask will replace the + * element's Updater load indicator and will be destroyed after the initial load. + *Example usage:
+ *
* @constructor - * Create a new ColorPalette + * Create a new LoadMask + * @param {Mixed} el The element or DOM node, or its id * @param {Object} config The config object - * @xtype colorpalette */ -Ext.ColorPalette = Ext.extend(Ext.Component, { - /** - * @cfg {String} tpl An existing XTemplate instance to be used in place of the default template for rendering the component. - */ - /** - * @cfg {String} itemCls - * The CSS class to apply to the containing element (defaults to 'x-color-palette') - */ - itemCls : 'x-color-palette', +Ext.LoadMask = function(el, config){ + this.el = Ext.get(el); + Ext.apply(this, config); + if(this.store){ + this.store.on({ + scope: this, + beforeload: this.onBeforeLoad, + load: this.onLoad, + exception: this.onLoad + }); + this.removeMask = Ext.value(this.removeMask, false); + }else{ + var um = this.el.getUpdater(); + um.showLoadIndicator = false; // disable the default indicator + um.on({ + scope: this, + beforeupdate: this.onBeforeLoad, + update: this.onLoad, + failure: this.onLoad + }); + this.removeMask = Ext.value(this.removeMask, true); + } +}; + +Ext.LoadMask.prototype = { /** - * @cfg {String} value - * The initial color to highlight (should be a valid 6-digit color hex code without the # symbol). Note that - * the hex codes are case-sensitive. + * @cfg {Ext.data.Store} store + * Optional Store to which the mask is bound. The mask is displayed when a load request is issued, and + * hidden on either load sucess, or load fail. */ - value : null, /** - * @cfg {String} clickEvent - * The DOM event that will cause a color to be selected. This can be any valid event name (dblclick, contextmenu). - * Defaults to 'click'. + * @cfg {Boolean} removeMask + * True to create a single-use mask that is automatically destroyed after loading (useful for page loads), + * False to persist the mask element reference for multiple uses (e.g., for paged data widgets). Defaults to false. */ - clickEvent :'click', - // private - ctype : 'Ext.ColorPalette', - /** - * @cfg {Boolean} allowReselect If set to true then reselecting a color that is already selected fires the {@link #select} event + * @cfg {String} msg + * The text to display in a centered loading message box (defaults to 'Loading...') */ - allowReselect : false, - + msg : 'Loading...', /** - *+// Basic mask: +var myMask = new Ext.LoadMask(Ext.getBody(), {msg:"Please wait..."}); +myMask.show();An array of 6-digit color hex code strings (without the # symbol). This array can contain any number - * of colors, and each hex code should be unique. The width of the palette is controlled via CSS by adjusting - * the width property of the 'x-color-palette' class (or assigning a custom class), so you can balance the number - * of colors with the width setting until the box is symmetrical.
- *You can override individual colors if needed:
- *
- -Or you can provide a custom array of your own for complete control: --var cp = new Ext.ColorPalette(); -cp.colors[0] = 'FF0000'; // change the first box to red -
- * @type Array + * @cfg {String} msgCls + * The CSS class to apply to the loading message element (defaults to "x-mask-loading") */ - colors : [ - '000000', '993300', '333300', '003300', '003366', '000080', '333399', '333333', - '800000', 'FF6600', '808000', '008000', '008080', '0000FF', '666699', '808080', - 'FF0000', 'FF9900', '99CC00', '339966', '33CCCC', '3366FF', '800080', '969696', - 'FF00FF', 'FFCC00', 'FFFF00', '00FF00', '00FFFF', '00CCFF', '993366', 'C0C0C0', - 'FF99CC', 'FFCC99', 'FFFF99', 'CCFFCC', 'CCFFFF', '99CCFF', 'CC99FF', 'FFFFFF' - ], + msgCls : 'x-mask-loading', /** - * @cfg {Function} handler - * Optional. A function that will handle the select event of this palette. - * The handler is passed the following parameters:-var cp = new Ext.ColorPalette(); -cp.colors = ['000000', '993300', '333300']; -+ * Read-only. True if the mask is currently disabled so that it will not be displayed (defaults to false) + * @type Boolean */ + disabled: false, + /** - * @cfg {Object} scope - * The scope (this reference) in which the-
- *
palette: ColorPaletteThe {@link #palette Ext.ColorPalette}.
- * color: StringThe 6-digit color hex code (without the # symbol).
- *
{@link #handler}- * function will be called. Defaults to this ColorPalette instance. + * Disables the mask to prevent it from being displayed */ - - // private - initComponent : function(){ - Ext.ColorPalette.superclass.initComponent.call(this); - this.addEvents( - /** - * @event select - * Fires when a color is selected - * @param {ColorPalette} this - * @param {String} color The 6-digit color hex code (without the # symbol) - */ - 'select' - ); - - if(this.handler){ - this.on('select', this.handler, this.scope, true); - } + disable : function(){ + this.disabled = true; }, - // private - onRender : function(container, position){ - this.autoEl = { - tag: 'div', - cls: this.itemCls - }; - Ext.ColorPalette.superclass.onRender.call(this, container, position); - var t = this.tpl || new Ext.XTemplate( - 'A popup date picker. This class is used by the {@link Ext.form.DateField DateField} class - * to allow browsing and selection of valid dates.
- *All the string values documented below may be overridden by including an Ext locale file in - * your page.
- * @constructor - * Create a new DatePicker - * @param {Object} config The config object - * @xtype datepicker + * @class Ext.slider.Thumb + * @extends Object + * Represents a single thumb element on a Slider. This would not usually be created manually and would instead + * be created internally by an {@link Ext.slider.MultiSlider Ext.Slider}. */ -Ext.DatePicker = Ext.extend(Ext.BoxComponent, { +Ext.slider.Thumb = Ext.extend(Object, { + /** - * @cfg {String} todayText - * The text to display on the button that selects the current date (defaults to'Today') + * True while the thumb is in a drag operation + * @type Boolean */ - todayText : 'Today', + dragging: false, + /** - * @cfg {String} okText - * The text to display on the ok button (defaults to' OK 'to give the user extra clicking room) + * @constructor + * @cfg {Ext.slider.MultiSlider} slider The Slider to render to (required) */ - okText : ' OK ', + constructor: function(config) { + /** + * @property slider + * @type Ext.slider.MultiSlider + * The slider this thumb is contained within + */ + Ext.apply(this, config || {}, { + cls: 'x-slider-thumb', + + /** + * @cfg {Boolean} constrain True to constrain the thumb so that it cannot overlap its siblings + */ + constrain: false + }); + + Ext.slider.Thumb.superclass.constructor.call(this, config); + + if (this.slider.vertical) { + Ext.apply(this, Ext.slider.Thumb.Vertical); + } + }, + /** - * @cfg {String} cancelText - * The text to display on the cancel button (defaults to'Cancel') + * Renders the thumb into a slider */ - cancelText : 'Cancel', + render: function() { + this.el = this.slider.innerEl.insertFirst({cls: this.cls}); + + this.initEvents(); + }, + /** - * @cfg {Function} handler - * Optional. A function that will handle the select event of this picker. - * The handler is passed the following parameters:+ * Enables the thumb if it is currently disabled */ + enable: function() { + this.disabled = false; + this.el.removeClass(this.slider.disabledClass); + }, + /** - * @cfg {Object} scope - * The scope (-
- *
picker: DatePickerThis DatePicker.
- * date: DateThe selected date.
- *
thisreference) in which the{@link #handler}- * function will be called. Defaults to this DatePicker instance. - */ + * Disables the thumb if it is currently enabled + */ + disable: function() { + this.disabled = true; + this.el.addClass(this.slider.disabledClass); + }, + /** - * @cfg {String} todayTip - * A string used to format the message for displaying in a tooltip over the button that - * selects the current date. Defaults to'{0} (Spacebar)'where - * the{0}token is replaced by today's date. + * Sets up an Ext.dd.DragTracker for this thumb */ - todayTip : '{0} (Spacebar)', + initEvents: function() { + var el = this.el; + + el.addClassOnOver('x-slider-thumb-over'); + + this.tracker = new Ext.dd.DragTracker({ + onBeforeStart: this.onBeforeDragStart.createDelegate(this), + onStart : this.onDragStart.createDelegate(this), + onDrag : this.onDrag.createDelegate(this), + onEnd : this.onDragEnd.createDelegate(this), + tolerance : 3, + autoStart : 300 + }); + + this.tracker.initEl(el); + }, + /** - * @cfg {String} minText - * The error text to display if the minDate validation fails (defaults to'This date is before the minimum date') + * @private + * This is tied into the internal Ext.dd.DragTracker. If the slider is currently disabled, + * this returns false to disable the DragTracker too. + * @return {Boolean} False if the slider is currently disabled */ - minText : 'This date is before the minimum date', + onBeforeDragStart : function(e) { + if (this.disabled) { + return false; + } else { + this.slider.promoteThumb(this); + return true; + } + }, + /** - * @cfg {String} maxText - * The error text to display if the maxDate validation fails (defaults to'This date is after the maximum date') + * @private + * This is tied into the internal Ext.dd.DragTracker's onStart template method. Adds the drag CSS class + * to the thumb and fires the 'dragstart' event */ - maxText : 'This date is after the maximum date', + onDragStart: function(e){ + this.el.addClass('x-slider-thumb-drag'); + this.dragging = true; + this.dragStartValue = this.value; + + this.slider.fireEvent('dragstart', this.slider, e, this); + }, + /** - * @cfg {String} format - * The default date format string which can be overriden for localization support. The format must be - * valid according to {@link Date#parseDate} (defaults to'm/d/y'). + * @private + * This is tied into the internal Ext.dd.DragTracker's onDrag template method. This is called every time + * the DragTracker detects a drag movement. It updates the Slider's value using the position of the drag */ - format : 'm/d/y', + onDrag: function(e) { + var slider = this.slider, + index = this.index, + newValue = this.getNewValue(); + + if (this.constrain) { + var above = slider.thumbs[index + 1], + below = slider.thumbs[index - 1]; + + if (below != undefined && newValue <= below.value) newValue = below.value; + if (above != undefined && newValue >= above.value) newValue = above.value; + } + + slider.setValue(index, newValue, false); + slider.fireEvent('drag', slider, e, this); + }, + + getNewValue: function() { + var slider = this.slider, + pos = slider.innerEl.translatePoints(this.tracker.getXY()); + + return Ext.util.Format.round(slider.reverseValue(pos.left), slider.decimalPrecision); + }, + /** - * @cfg {String} disabledDaysText - * The tooltip to display when the date falls on a disabled day (defaults to'Disabled') + * @private + * This is tied to the internal Ext.dd.DragTracker's onEnd template method. Removes the drag CSS class and + * fires the 'changecomplete' event with the new value */ - disabledDaysText : 'Disabled', + onDragEnd: function(e) { + var slider = this.slider, + value = this.value; + + this.el.removeClass('x-slider-thumb-drag'); + + this.dragging = false; + slider.fireEvent('dragend', slider, e); + + if (this.dragStartValue != value) { + slider.fireEvent('changecomplete', slider, value, this); + } + }, + /** - * @cfg {String} disabledDatesText - * The tooltip text to display when the date falls on a disabled date (defaults to'Disabled') + * @private + * Destroys the thumb */ - disabledDatesText : 'Disabled', + destroy: function(){ + Ext.destroyMembers(this, 'tracker', 'el'); + } +}); + +/** + * @class Ext.slider.MultiSlider + * @extends Ext.BoxComponent + * Slider which supports vertical or horizontal orientation, keyboard adjustments, configurable snapping, axis clicking and animation. Can be added as an item to any container. Example usage: ++new Ext.Slider({ + renderTo: Ext.getBody(), + width: 200, + value: 50, + increment: 10, + minValue: 0, + maxValue: 100 +}); ++ * Sliders can be created with more than one thumb handle by passing an array of values instead of a single one: ++new Ext.Slider({ + renderTo: Ext.getBody(), + width: 200, + values: [25, 50, 75], + minValue: 0, + maxValue: 100, + + //this defaults to true, setting to false allows the thumbs to pass each other + {@link #constrainThumbs}: false +}); ++ */ +Ext.slider.MultiSlider = Ext.extend(Ext.BoxComponent, { /** - * @cfg {Array} monthNames - * An array of textual month names which can be overriden for localization support (defaults to Date.monthNames) + * @cfg {Number} value The value to initialize the slider with. Defaults to minValue. */ - monthNames : Date.monthNames, /** - * @cfg {Array} dayNames - * An array of textual day names which can be overriden for localization support (defaults to Date.dayNames) + * @cfg {Boolean} vertical Orient the Slider vertically rather than horizontally, defaults to false. */ - dayNames : Date.dayNames, + vertical: false, /** - * @cfg {String} nextText - * The next month navigation button tooltip (defaults to'Next Month (Control+Right)') + * @cfg {Number} minValue The minimum value for the Slider. Defaults to 0. */ - nextText : 'Next Month (Control+Right)', + minValue: 0, /** - * @cfg {String} prevText - * The previous month navigation button tooltip (defaults to'Previous Month (Control+Left)') + * @cfg {Number} maxValue The maximum value for the Slider. Defaults to 100. */ - prevText : 'Previous Month (Control+Left)', + maxValue: 100, /** - * @cfg {String} monthYearText - * The header month selector tooltip (defaults to'Choose a month (Control+Up/Down to move years)') + * @cfg {Number/Boolean} decimalPrecision. + *The number of decimal places to which to round the Slider's value. Defaults to 0.
+ *To disable rounding, configure as false.
*/ - monthYearText : 'Choose a month (Control+Up/Down to move years)', + decimalPrecision: 0, /** - * @cfg {Number} startDay - * Day index at which the week should begin, 0-based (defaults to 0, which is Sunday) + * @cfg {Number} keyIncrement How many units to change the Slider when adjusting with keyboard navigation. Defaults to 1. If the increment config is larger, it will be used instead. */ - startDay : 0, + keyIncrement: 1, /** - * @cfg {Boolean} showToday - * False to hide the footer area containing the Today button and disable the keyboard handler for spacebar - * that selects the current date (defaults totrue). + * @cfg {Number} increment How many units to change the slider when adjusting by drag and drop. Use this option to enable 'snapping'. */ - showToday : true, + increment: 0, + /** - * @cfg {Date} minDate - * Minimum allowable date (JavaScript date object, defaults to null) + * @private + * @property clickRange + * @type Array + * Determines whether or not a click to the slider component is considered to be a user request to change the value. Specified as an array of [top, bottom], + * the click event's 'top' property is compared to these numbers and the click only considered a change request if it falls within them. e.g. if the 'top' + * value of the click event is 4 or 16, the click is not considered a change request as it falls outside of the [5, 15] range */ + clickRange: [5,15], + /** - * @cfg {Date} maxDate - * Maximum allowable date (JavaScript date object, defaults to null) + * @cfg {Boolean} clickToChange Determines whether or not clicking on the Slider axis will change the slider. Defaults to true */ + clickToChange : true, /** - * @cfg {Array} disabledDays - * An array of days to disable, 0-based. For example, [0, 6] disables Sunday and Saturday (defaults to null). + * @cfg {Boolean} animate Turn on or off animation. Defaults to true */ + animate: true, /** - * @cfg {RegExp} disabledDatesRE - * JavaScript regular expression used to disable a pattern of dates (defaults to null). The {@link #disabledDates} - * config will generate this regex internally, but if you specify disabledDatesRE it will take precedence over the - * disabledDates value. + * @cfg {Boolean} constrainThumbs True to disallow thumbs from overlapping one another. Defaults to true */ + constrainThumbs: true, + /** - * @cfg {Array} disabledDates - * An array of 'dates' to disable, as strings. These strings will be used to build a dynamic regular - * expression so they are very powerful. Some examples: - *-
- *
- ['03/08/2003', '09/16/2003'] would disable those exact dates - *
- ['03/08', '09/16'] would disable those days for every year - *
- ['^03/08'] would only match the beginning (useful if you are using short years) - *
- ['03/../2006'] would disable every day in March 2006 - *
- ['^03'] would disable every day in every March - *
', - '
'); - - var el = document.createElement('div'); - el.className = 'x-date-picker'; - el.innerHTML = m.join(''); - - container.dom.insertBefore(el, position); - - this.el = Ext.get(el); - this.eventEl = Ext.get(el.firstChild); - - this.prevRepeater = new Ext.util.ClickRepeater(this.el.child('td.x-date-left a'), { - handler: this.showPrevMonth, - scope: this, - preventDefault:true, - stopDefault:true - }); + return newValue.constrain(this.minValue, this.maxValue); + }, - this.nextRepeater = new Ext.util.ClickRepeater(this.el.child('td.x-date-right a'), { - handler: this.showNextMonth, - scope: this, - preventDefault:true, - stopDefault:true - }); + // private + afterRender : function(){ + Ext.slider.MultiSlider.superclass.afterRender.apply(this, arguments); - this.monthPicker = this.el.down('div.x-date-mp'); - this.monthPicker.enableDisplayMode('block'); + for (var i=0; i < this.thumbs.length; i++) { + var thumb = this.thumbs[i]; - this.keyNav = new Ext.KeyNav(this.eventEl, { - 'left' : function(e){ - if(e.ctrlKey){ - this.showPrevMonth(); - }else{ - this.update(this.activeDate.add('d', -1)); - } - }, + if (thumb.value !== undefined) { + var v = this.normalizeValue(thumb.value); - 'right' : function(e){ - if(e.ctrlKey){ - this.showNextMonth(); - }else{ - this.update(this.activeDate.add('d', 1)); + if (v !== thumb.value) { + // delete this.value; + this.setValue(i, v, false); + } else { + this.moveThumb(i, this.translateValue(v), false); } - }, + } + }; + }, - 'up' : function(e){ - if(e.ctrlKey){ - this.showNextYear(); - }else{ - this.update(this.activeDate.add('d', -7)); - } - }, + /** + * @private + * Returns the ratio of pixels to mapped values. e.g. if the slider is 200px wide and maxValue - minValue is 100, + * the ratio is 2 + * @return {Number} The ratio of pixels to mapped values + */ + getRatio : function(){ + var w = this.innerEl.getWidth(), + v = this.maxValue - this.minValue; + return v == 0 ? w : (w/v); + }, - 'down' : function(e){ - if(e.ctrlKey){ - this.showPrevYear(); - }else{ - this.update(this.activeDate.add('d', 7)); - } - }, + /** + * @private + * Returns a snapped, constrained value when given a desired value + * @param {Number} value Raw number value + * @return {Number} The raw value rounded to the correct d.p. and constrained within the set max and min values + */ + normalizeValue : function(v){ + v = this.doSnap(v); + v = Ext.util.Format.round(v, this.decimalPrecision); + v = v.constrain(this.minValue, this.maxValue); + return v; + }, - 'pageUp' : function(e){ - this.showNextMonth(); - }, + /** + * Sets the minimum value for the slider instance. If the current value is less than the + * minimum value, the current value will be changed. + * @param {Number} val The new minimum value + */ + setMinValue : function(val){ + this.minValue = val; + var i = 0, + thumbs = this.thumbs, + len = thumbs.length, + t; + + for(; i < len; ++i){ + t = thumbs[i]; + t.value = t.value < val ? val : t.value; + } + this.syncThumb(); + }, - 'pageDown' : function(e){ - this.showPrevMonth(); - }, + /** + * Sets the maximum value for the slider instance. If the current value is more than the + * maximum value, the current value will be changed. + * @param {Number} val The new maximum value + */ + setMaxValue : function(val){ + this.maxValue = val; + var i = 0, + thumbs = this.thumbs, + len = thumbs.length, + t; + + for(; i < len; ++i){ + t = thumbs[i]; + t.value = t.value > val ? val : t.value; + } + this.syncThumb(); + }, - 'enter' : function(e){ - e.stopPropagation(); - return true; - }, + /** + * Programmatically sets the value of the Slider. Ensures that the value is constrained within + * the minValue and maxValue. + * @param {Number} index Index of the thumb to move + * @param {Number} value The value to set the slider to. (This will be constrained within minValue and maxValue) + * @param {Boolean} animate Turn on or off animation, defaults to true + */ + setValue : function(index, v, animate, changeComplete) { + var thumb = this.thumbs[index], + el = thumb.el; - scope : this - }); + v = this.normalizeValue(v); - this.el.unselectable(); + if (v !== thumb.value && this.fireEvent('beforechange', this, v, thumb.value, thumb) !== false) { + thumb.value = v; + if(this.rendered){ + this.moveThumb(index, this.translateValue(v), animate !== false); + this.fireEvent('change', this, v, thumb); + if(changeComplete){ + this.fireEvent('changecomplete', this, v, thumb); + } + } + } + }, - this.cells = this.el.select('table.x-date-inner tbody td'); - this.textNodes = this.el.query('table.x-date-inner tbody span'); + /** + * @private + */ + translateValue : function(v) { + var ratio = this.getRatio(); + return (v * ratio) - (this.minValue * ratio) - this.halfThumb; + }, - this.mbtn = new Ext.Button({ - text: ' ', - tooltip: this.monthYearText, - renderTo: this.el.child('td.x-date-middle', true) - }); - this.mbtn.el.child('em').addClass('x-btn-arrow'); + /** + * @private + * Given a pixel location along the slider, returns the mapped slider value for that pixel. + * E.g. if we have a slider 200px wide with minValue = 100 and maxValue = 500, reverseValue(50) + * returns 200 + * @param {Number} pos The position along the slider to return a mapped value for + * @return {Number} The mapped value for the given position + */ + reverseValue : function(pos){ + var ratio = this.getRatio(); + return (pos + (this.minValue * ratio)) / ratio; + }, - if(this.showToday){ - this.todayKeyListener = this.eventEl.addKeyListener(Ext.EventObject.SPACE, this.selectToday, this); - var today = (new Date()).dateFormat(this.format); - this.todayBtn = new Ext.Button({ - renderTo: this.el.child('td.x-date-bottom', true), - text: String.format(this.todayText, today), - tooltip: String.format(this.todayTip, today), - handler: this.selectToday, - scope: this - }); + /** + * @private + * @param {Number} index Index of the thumb to move + */ + moveThumb: function(index, v, animate){ + var thumb = this.thumbs[index].el; + + if(!animate || this.animate === false){ + thumb.setLeft(v); + }else{ + thumb.shift({left: v, stopFx: true, duration:.35}); } - this.mon(this.eventEl, 'mousewheel', this.handleMouseWheel, this); - this.mon(this.eventEl, 'click', this.handleDateClick, this, {delegate: 'a.x-date-date'}); - this.mon(this.mbtn, 'click', this.showMonthPicker, this); - this.onEnable(true); }, // private - createMonthPicker : function(){ - if(!this.monthPicker.dom.firstChild){ - var buf = [''], - dn = this.dayNames, - i; - for(i = 0; i < 7; i++){ - var d = this.startDay+i; - if(d > 6){ - d = d-7; - } - m.push(' ', dn[d].substr(0,1), ' '); + /** + * @private + * If using snapping, this takes a desired new value and returns the closest snapped + * value to it + * @param {Number} value The unsnapped value + * @return {Number} The value of the nearest snap target + */ + doSnap : function(value){ + if (!(this.increment && value)) { + return value; } - m[m.length] = ''; - for(i = 0; i < 42; i++) { - if(i % 7 === 0 && i !== 0){ - m[m.length] = ' '; + var newValue = value, + inc = this.increment, + m = value % inc; + if (m != 0) { + newValue -= m; + if (m * 2 >= inc) { + newValue += inc; + } else if (m * 2 < -inc) { + newValue -= inc; } - m[m.length] = ' '; } - m.push(' ']; - for(var i = 0; i < 6; i++){ - buf.push( - '
' - ); - this.monthPicker.update(buf.join('')); + focus : function(){ + this.focusEl.focus(10); + }, - this.mon(this.monthPicker, 'click', this.onMonthClick, this); - this.mon(this.monthPicker, 'dblclick', this.onMonthDblClick, this); + // private + onResize : function(w, h){ + var thumbs = this.thumbs, + len = thumbs.length, + i = 0; + + /* + * If we happen to be animating during a resize, the position of the thumb will likely be off + * when the animation stops. As such, just stop any animations before syncing the thumbs. + */ + for(; i < len; ++i){ + thumbs[i].el.stopFx(); + } + // check to see if we're using an auto width + if(Ext.isNumber(w)){ + this.innerEl.setWidth(w - (this.el.getPadding('l') + this.endEl.getPadding('r'))); + } + this.syncThumb(); + Ext.slider.MultiSlider.superclass.onResize.apply(this, arguments); + }, - this.mpMonths = this.monthPicker.select('td.x-date-mp-month'); - this.mpYears = this.monthPicker.select('td.x-date-mp-year'); + //private + onDisable: function(){ + Ext.slider.MultiSlider.superclass.onDisable.call(this); - this.mpMonths.each(function(m, a, i){ - i += 1; - if((i%2) === 0){ - m.dom.xmonth = 5 + Math.round(i * 0.5); - }else{ - m.dom.xmonth = Math.round((i-1) * 0.5); + for (var i=0; i < this.thumbs.length; i++) { + var thumb = this.thumbs[i], + el = thumb.el; + + thumb.disable(); + + if(Ext.isIE){ + //IE breaks when using overflow visible and opacity other than 1. + //Create a place holder for the thumb and display it. + var xy = el.getXY(); + el.hide(); + + this.innerEl.addClass(this.disabledClass).dom.disabled = true; + + if (!this.thumbHolder) { + this.thumbHolder = this.endEl.createChild({cls: 'x-slider-thumb ' + this.disabledClass}); } - }); + + this.thumbHolder.show().setXY(xy); + } } }, - // private - showMonthPicker : function(){ - if(!this.disabled){ - this.createMonthPicker(); - var size = this.el.getSize(); - this.monthPicker.setSize(size); - this.monthPicker.child('table').setSize(size); + //private + onEnable: function(){ + Ext.slider.MultiSlider.superclass.onEnable.call(this); - this.mpSelMonth = (this.activeDate || this.value).getMonth(); - this.updateMPMonth(this.mpSelMonth); - this.mpSelYear = (this.activeDate || this.value).getFullYear(); - this.updateMPYear(this.mpSelYear); + for (var i=0; i < this.thumbs.length; i++) { + var thumb = this.thumbs[i], + el = thumb.el; - this.monthPicker.slideIn('t', {duration:0.2}); + thumb.enable(); + + if (Ext.isIE) { + this.innerEl.removeClass(this.disabledClass).dom.disabled = false; + + if (this.thumbHolder) this.thumbHolder.hide(); + + el.show(); + this.syncThumb(); + } } }, - // private - updateMPYear : function(y){ - this.mpyear = y; - var ys = this.mpYears.elements; - for(var i = 1; i <= 10; i++){ - var td = ys[i-1], y2; - if((i%2) === 0){ - y2 = y + Math.round(i * 0.5); - td.firstChild.innerHTML = y2; - td.xyear = y2; - }else{ - y2 = y - (5-Math.round(i * 0.5)); - td.firstChild.innerHTML = y2; - td.xyear = y2; + /** + * Synchronizes the thumb position to the proper proportion of the total component width based + * on the current slider {@link #value}. This will be called automatically when the Slider + * is resized by a layout, but if it is rendered auto width, this method can be called from + * another resize handler to sync the Slider if necessary. + */ + syncThumb : function() { + if (this.rendered) { + for (var i=0; i < this.thumbs.length; i++) { + this.moveThumb(i, this.translateValue(this.thumbs[i].value)); } - this.mpYears.item(i-1)[y2 == this.mpSelYear ? 'addClass' : 'removeClass']('x-date-mp-sel'); } }, - // private - updateMPMonth : function(sm){ - this.mpMonths.each(function(m, a, i){ - m[m.dom.xmonth == sm ? 'addClass' : 'removeClass']('x-date-mp-sel'); - }); + /** + * Returns the current value of the slider + * @param {Number} index The index of the thumb to return a value for + * @return {Number} The current value of the slider + */ + getValue : function(index) { + return this.thumbs[index].value; }, - // private - selectMPMonth : function(m){ - - }, + /** + * Returns an array of values - one for the location of each thumb + * @return {Array} The set of thumb values + */ + getValues: function() { + var values = []; - // private - onMonthClick : function(e, t){ - e.stopEvent(); - var el = new Ext.Element(t), pn; - if(el.is('button.x-date-mp-cancel')){ - this.hideMonthPicker(); - } - else if(el.is('button.x-date-mp-ok')){ - var d = new Date(this.mpSelYear, this.mpSelMonth, (this.activeDate || this.value).getDate()); - if(d.getMonth() != this.mpSelMonth){ - // 'fix' the JS rolling date conversion if needed - d = new Date(this.mpSelYear, this.mpSelMonth, 1).getLastDateOfMonth(); - } - this.update(d); - this.hideMonthPicker(); - } - else if((pn = el.up('td.x-date-mp-month', 2))){ - this.mpMonths.removeClass('x-date-mp-sel'); - pn.addClass('x-date-mp-sel'); - this.mpSelMonth = pn.dom.xmonth; - } - else if((pn = el.up('td.x-date-mp-year', 2))){ - this.mpYears.removeClass('x-date-mp-sel'); - pn.addClass('x-date-mp-sel'); - this.mpSelYear = pn.dom.xyear; - } - else if(el.is('a.x-date-mp-prev')){ - this.updateMPYear(this.mpyear-10); - } - else if(el.is('a.x-date-mp-next')){ - this.updateMPYear(this.mpyear+10); + for (var i=0; i < this.thumbs.length; i++) { + values.push(this.thumbs[i].value); } + + return values; }, // private - onMonthDblClick : function(e, t){ - e.stopEvent(); - var el = new Ext.Element(t), pn; - if((pn = el.up('td.x-date-mp-month', 2))){ - this.update(new Date(this.mpSelYear, pn.dom.xmonth, (this.activeDate || this.value).getDate())); - this.hideMonthPicker(); - } - else if((pn = el.up('td.x-date-mp-year', 2))){ - this.update(new Date(pn.dom.xyear, this.mpSelMonth, (this.activeDate || this.value).getDate())); - this.hideMonthPicker(); + beforeDestroy : function(){ + var thumbs = this.thumbs; + for(var i = 0, len = thumbs.length; i < len; ++i){ + thumbs[i].destroy(); + thumbs[i] = null; } + Ext.destroyMembers(this, 'endEl', 'innerEl', 'focusEl', 'thumbHolder'); + Ext.slider.MultiSlider.superclass.beforeDestroy.call(this); + } +}); + +Ext.reg('multislider', Ext.slider.MultiSlider); + +/** + * @class Ext.slider.SingleSlider + * @extends Ext.slider.MultiSlider + * Slider which supports vertical or horizontal orientation, keyboard adjustments, + * configurable snapping, axis clicking and animation. Can be added as an item to + * any container. Example usage: +', Date.getShortMonthName(i), ' ', - '', Date.getShortMonthName(i + 6), ' ', - i === 0 ? - '' - ); - } - buf.push( - '
+ * The class Ext.slider.SingleSlider is aliased to Ext.Slider for backwards compatibility. + */ +Ext.slider.SingleSlider = Ext.extend(Ext.slider.MultiSlider, { + constructor: function(config) { + config = config || {}; + + Ext.applyIf(config, { + values: [config.value || 0] + }); + + Ext.slider.SingleSlider.superclass.constructor.call(this, config); + }, + + /** + * Returns the current value of the slider + * @return {Number} The current value of the slider + */ + getValue: function() { + //just returns the value of the first thumb, which should be the only one in a single slider + return Ext.slider.SingleSlider.superclass.getValue.call(this, 0); }, - // private - hideMonthPicker : function(disableAnim){ - if(this.monthPicker){ - if(disableAnim === true){ - this.monthPicker.hide(); - }else{ - this.monthPicker.slideOut('t', {duration:0.2}); - } + /** + * Programmatically sets the value of the Slider. Ensures that the value is constrained within + * the minValue and maxValue. + * @param {Number} value The value to set the slider to. (This will be constrained within minValue and maxValue) + * @param {Boolean} animate Turn on or off animation, defaults to true + */ + setValue: function(value, animate) { + var args = Ext.toArray(arguments), + len = args.length; + + //this is to maintain backwards compatiblity for sliders with only one thunb. Usually you must pass the thumb + //index to setValue, but if we only have one thumb we inject the index here first if given the multi-slider + //signature without the required index. The index will always be 0 for a single slider + if (len == 1 || (len <= 3 && typeof arguments[1] != 'number')) { + args.unshift(0); } + + return Ext.slider.SingleSlider.superclass.setValue.apply(this, args); }, + /** + * Synchronizes the thumb position to the proper proportion of the total component width based + * on the current slider {@link #value}. This will be called automatically when the Slider + * is resized by a layout, but if it is rendered auto width, this method can be called from + * another resize handler to sync the Slider if necessary. + */ + syncThumb : function() { + return Ext.slider.SingleSlider.superclass.syncThumb.apply(this, [0].concat(arguments)); + }, + // private - showPrevMonth : function(e){ - this.update(this.activeDate.add('mo', -1)); + getNearest : function(){ + // Since there's only 1 thumb, it's always the nearest + return this.thumbs[0]; + } +}); + +//backwards compatibility +Ext.Slider = Ext.slider.SingleSlider; + +Ext.reg('slider', Ext.slider.SingleSlider); + +// private class to support vertical sliders +Ext.slider.Vertical = { + onResize : function(w, h){ + this.innerEl.setHeight(h - (this.el.getPadding('t') + this.endEl.getPadding('b'))); + this.syncThumb(); }, - // private - showNextMonth : function(e){ - this.update(this.activeDate.add('mo', 1)); + getRatio : function(){ + var h = this.innerEl.getHeight(), + v = this.maxValue - this.minValue; + return h/v; }, - // private - showPrevYear : function(){ - this.update(this.activeDate.add('y', -1)); + moveThumb: function(index, v, animate) { + var thumb = this.thumbs[index], + el = thumb.el; + + if (!animate || this.animate === false) { + el.setBottom(v); + } else { + el.shift({bottom: v, stopFx: true, duration:.35}); + } }, + onClickChange : function(local) { + if (local.left > this.clickRange[0] && local.left < this.clickRange[1]) { + var thumb = this.getNearest(local, 'top'), + index = thumb.index, + value = this.minValue + this.reverseValue(this.innerEl.getHeight() - local.top); + + this.setValue(index, Ext.util.Format.round(value, this.decimalPrecision), undefined, true); + } + } +}; + +//private class to support vertical dragging of thumbs within a slider +Ext.slider.Thumb.Vertical = { + getNewValue: function() { + var slider = this.slider, + innerEl = slider.innerEl, + pos = innerEl.translatePoints(this.tracker.getXY()), + bottom = innerEl.getHeight() - pos.top; + + return slider.minValue + Ext.util.Format.round(bottom / slider.getRatio(), slider.decimalPrecision); + } +}; +/** + * @class Ext.ProgressBar + * @extends Ext.BoxComponent + *+new Ext.slider.SingleSlider({ + renderTo: Ext.getBody(), + width: 200, + value: 50, + increment: 10, + minValue: 0, + maxValue: 100 +}); +An updateable progress bar component. The progress bar supports two different modes: manual and automatic.
+ *In manual mode, you are responsible for showing, updating (via {@link #updateProgress}) and clearing the + * progress bar as needed from your own code. This method is most appropriate when you want to show progress + * throughout an operation that has predictable points of interest at which you can update the control.
+ *In automatic mode, you simply call {@link #wait} and let the progress bar run indefinitely, only clearing it + * once the operation is complete. You can optionally have the progress bar wait for a specific amount of time + * and then clear itself. Automatic mode is most appropriate for timed operations or asynchronous operations in + * which you have no need for indicating intermediate progress.
+ * @cfg {Float} value A floating point value between 0 and 1 (e.g., .5, defaults to 0) + * @cfg {String} text The progress bar text (defaults to '') + * @cfg {Mixed} textEl The element to render the progress text to (defaults to the progress + * bar's internal text element) + * @cfg {String} id The progress bar element's id (defaults to an auto-generated id) + * @xtype progress + */ +Ext.ProgressBar = Ext.extend(Ext.BoxComponent, { + /** + * @cfg {String} baseCls + * The base CSS class to apply to the progress bar's wrapper element (defaults to 'x-progress') + */ + baseCls : 'x-progress', + + /** + * @cfg {Boolean} animate + * True to animate the progress bar during transitions (defaults to false) + */ + animate : false, + // private - showNextYear : function(){ - this.update(this.activeDate.add('y', 1)); - }, + waitTimer : null, // private - handleMouseWheel : function(e){ - e.stopEvent(); - if(!this.disabled){ - var delta = e.getWheelDelta(); - if(delta > 0){ - this.showPrevMonth(); - } else if(delta < 0){ - this.showNextMonth(); - } - } + initComponent : function(){ + Ext.ProgressBar.superclass.initComponent.call(this); + this.addEvents( + /** + * @event update + * Fires after each update interval + * @param {Ext.ProgressBar} this + * @param {Number} The current progress value + * @param {String} The current progress text + */ + "update" + ); }, // private - handleDateClick : function(e, t){ - e.stopEvent(); - if(!this.disabled && t.dateValue && !Ext.fly(t.parentNode).hasClass('x-date-disabled')){ - this.cancelFocus = this.focusOnSelect === false; - this.setValue(new Date(t.dateValue)); - delete this.cancelFocus; - this.fireEvent('select', this, this.value); + onRender : function(ct, position){ + var tpl = new Ext.Template( + '', + '' + ); + + this.el = position ? tpl.insertBefore(position, {cls: this.baseCls}, true) + : tpl.append(ct, {cls: this.baseCls}, true); + + if(this.id){ + this.el.dom.id = this.id; } - }, + var inner = this.el.dom.firstChild; + this.progressBar = Ext.get(inner.firstChild); - // private - selectToday : function(){ - if(this.todayBtn && !this.todayBtn.disabled){ - this.setValue(new Date().clearTime()); - this.fireEvent('select', this, this.value); + if(this.textEl){ + //use an external text el + this.textEl = Ext.get(this.textEl); + delete this.textTopEl; + }else{ + //setup our internal layered text els + this.textTopEl = Ext.get(this.progressBar.dom.firstChild); + var textBackEl = Ext.get(inner.childNodes[1]); + this.textTopEl.setStyle("z-index", 99).addClass('x-hidden'); + this.textEl = new Ext.CompositeElement([this.textTopEl.dom.firstChild, textBackEl.dom.firstChild]); + this.textEl.setWidth(inner.offsetWidth); } + this.progressBar.setHeight(inner.offsetHeight); }, - + // private - update : function(date, forceRefresh){ - if(this.rendered){ - var vd = this.activeDate, vis = this.isVisible(); - this.activeDate = date; - if(!forceRefresh && vd && this.el){ - var t = date.getTime(); - if(vd.getMonth() == date.getMonth() && vd.getFullYear() == date.getFullYear()){ - this.cells.removeClass('x-date-selected'); - this.cells.each(function(c){ - if(c.dom.firstChild.dateValue == t){ - c.addClass('x-date-selected'); - if(vis && !this.cancelFocus){ - Ext.fly(c.dom.firstChild).focus(50); - } - return false; - } - }, this); - return; - } - } - var days = date.getDaysInMonth(), - firstOfMonth = date.getFirstDateOfMonth(), - startingPos = firstOfMonth.getDay()-this.startDay; - - if(startingPos < 0){ - startingPos += 7; - } - days += startingPos; - - var pm = date.add('mo', -1), - prevStart = pm.getDaysInMonth()-startingPos, - cells = this.cells.elements, - textEls = this.textNodes, - // convert everything to numbers so it's fast - day = 86400000, - d = (new Date(pm.getFullYear(), pm.getMonth(), prevStart)).clearTime(), - today = new Date().clearTime().getTime(), - sel = date.clearTime(true).getTime(), - min = this.minDate ? this.minDate.clearTime(true) : Number.NEGATIVE_INFINITY, - max = this.maxDate ? this.maxDate.clearTime(true) : Number.POSITIVE_INFINITY, - ddMatch = this.disabledDatesRE, - ddText = this.disabledDatesText, - ddays = this.disabledDays ? this.disabledDays.join('') : false, - ddaysText = this.disabledDaysText, - format = this.format; - - if(this.showToday){ - var td = new Date().clearTime(), - disable = (td < min || td > max || - (ddMatch && format && ddMatch.test(td.dateFormat(format))) || - (ddays && ddays.indexOf(td.getDay()) != -1)); - - if(!this.disabled){ - this.todayBtn.setDisabled(disable); - this.todayKeyListener[disable ? 'disable' : 'enable'](); - } - } - - var setCellClass = function(cal, cell){ - cell.title = ''; - var t = d.getTime(); - cell.firstChild.dateValue = t; - if(t == today){ - cell.className += ' x-date-today'; - cell.title = cal.todayText; - } - if(t == sel){ - cell.className += ' x-date-selected'; - if(vis){ - Ext.fly(cell.firstChild).focus(50); - } - } - // disabling - if(t < min) { - cell.className = ' x-date-disabled'; - cell.title = cal.minText; - return; - } - if(t > max) { - cell.className = ' x-date-disabled'; - cell.title = cal.maxText; - return; - } - if(ddays){ - if(ddays.indexOf(d.getDay()) != -1){ - cell.title = ddaysText; - cell.className = ' x-date-disabled'; - } - } - if(ddMatch && format){ - var fvalue = d.dateFormat(format); - if(ddMatch.test(fvalue)){ - cell.title = ddText.replace('%0', fvalue); - cell.className = ' x-date-disabled'; - } - } - }; - - var i = 0; - for(; i < startingPos; i++) { - textEls[i].innerHTML = (++prevStart); - d.setDate(d.getDate()+1); - cells[i].className = 'x-date-prevday'; - setCellClass(this, cells[i]); - } - for(; i < days; i++){ - var intDay = i - startingPos + 1; - textEls[i].innerHTML = (intDay); - d.setDate(d.getDate()+1); - cells[i].className = 'x-date-active'; - setCellClass(this, cells[i]); - } - var extraDays = 0; - for(; i < 42; i++) { - textEls[i].innerHTML = (++extraDays); - d.setDate(d.getDate()+1); - cells[i].className = 'x-date-nextday'; - setCellClass(this, cells[i]); - } - - this.mbtn.setText(this.monthNames[date.getMonth()] + ' ' + date.getFullYear()); - - if(!this.internalRender){ - var main = this.el.dom.firstChild, - w = main.offsetWidth; - this.el.setWidth(w + this.el.getBorderWidth('lr')); - Ext.fly(main).setWidth(w); - this.internalRender = true; - // opera does not respect the auto grow header center column - // then, after it gets a width opera refuses to recalculate - // without a second pass - if(Ext.isOpera && !this.secondPass){ - main.rows[0].cells[1].style.width = (w - (main.rows[0].cells[0].offsetWidth+main.rows[0].cells[2].offsetWidth)) + 'px'; - this.secondPass = true; - this.update.defer(10, this, [date]); - } - } + afterRender : function(){ + Ext.ProgressBar.superclass.afterRender.call(this); + if(this.value){ + this.updateProgress(this.value, this.text); + }else{ + this.updateText(this.text); } }, - // private - beforeDestroy : function() { - if(this.rendered){ - Ext.destroy( - this.keyNav, - this.monthPicker, - this.eventEl, - this.mbtn, - this.nextRepeater, - this.prevRepeater, - this.cells.el, - this.todayBtn - ); - delete this.textNodes; - delete this.cells.elements; + /** + * Updates the progress bar value, and optionally its text. If the text argument is not specified, + * any existing text value will be unchanged. To blank out existing text, pass ''. Note that even + * if the progress bar value exceeds 1, it will never automatically reset -- you are responsible for + * determining when the progress is complete and calling {@link #reset} to clear and/or hide the control. + * @param {Float} value (optional) A floating point value between 0 and 1 (e.g., .5, defaults to 0) + * @param {String} text (optional) The string to display in the progress text element (defaults to '') + * @param {Boolean} animate (optional) Whether to animate the transition of the progress bar. If this value is + * not specified, the default for the class is used (default to false) + * @return {Ext.ProgressBar} this + */ + updateProgress : function(value, text, animate){ + this.value = value || 0; + if(text){ + this.updateText(text); } - } + if(this.rendered && !this.isDestroyed){ + var w = Math.floor(value*this.el.dom.firstChild.offsetWidth); + this.progressBar.setWidth(w, animate === true || (animate !== false && this.animate)); + if(this.textTopEl){ + //textTopEl should be the same width as the bar so overflow will clip as the bar moves + this.textTopEl.removeClass('x-hidden').setWidth(w); + } + } + this.fireEvent('update', this, value, text); + return this; + }, /** - * @cfg {String} autoEl @hide - */ + * Initiates an auto-updating progress bar. A duration can be specified, in which case the progress + * bar will automatically reset after a fixed amount of time and optionally call a callback function + * if specified. If no duration is passed in, then the progress bar will run indefinitely and must + * be manually cleared by calling {@link #reset}. The wait method accepts a config object with + * the following properties: + *', + '', + '', + '', + '', + '', + '+Property Type Description +---------- ------------ ---------------------------------------------------------------------- +duration Number The length of time in milliseconds that the progress bar should + run before resetting itself (defaults to undefined, in which case it + will run indefinitely until reset is called) +interval Number The length of time in milliseconds between each progress update + (defaults to 1000 ms) +animate Boolean Whether to animate the transition of the progress bar. If this value is + not specified, the default for the class is used. +increment Number The number of progress update segments to display within the progress + bar (defaults to 10). If the bar reaches the end and is still + updating, it will automatically wrap back to the beginning. +text String Optional text to display in the progress bar element (defaults to ''). +fn Function A callback function to execute after the progress bar finishes auto- + updating. The function will be called with no arguments. This function + will be ignored if duration is not specified since in that case the + progress bar can only be stopped programmatically, so any required function + should be called by the same code after it resets the progress bar. +scope Object The scope that is passed to the callback function (only applies when + duration and fn are both passed). +
+ * + * Example usage: + *
+ * @param {Object} config (optional) Configuration options + * @return {Ext.ProgressBar} this + */ + wait : function(o){ + if(!this.waitTimer){ + var scope = this; + o = o || {}; + this.updateText(o.text); + this.waitTimer = Ext.TaskMgr.start({ + run: function(i){ + var inc = o.increment || 10; + i -= 1; + this.updateProgress(((((i+inc)%inc)+1)*(100/inc))*0.01, null, o.animate); + }, + interval: o.interval || 1000, + duration: o.duration, + onStop: function(){ + if(o.fn){ + o.fn.apply(o.scope || this); + } + this.reset(); + }, + scope: scope + }); + } + return this; + }, /** - * Read-only. True if the mask is currently disabled so that it will not be displayed (defaults to false) - * @type Boolean + * Returns true if the progress bar is currently in a {@link #wait} operation + * @return {Boolean} True if waiting, else false */ - disabled: false, + isWaiting : function(){ + return this.waitTimer !== null; + }, /** - * Disables the mask to prevent it from being displayed + * Updates the progress bar text. If specified, textEl will be updated, otherwise the progress + * bar itself will display the updated text. + * @param {String} text (optional) The string to display in the progress text element (defaults to '') + * @return {Ext.ProgressBar} this */ - disable : function(){ - this.disabled = true; + updateText : function(text){ + this.text = text || ' '; + if(this.rendered){ + this.textEl.update(this.text); + } + return this; }, - + /** - * Enables the mask so that it can be displayed + * Synchronizes the inner bar width to the proper proportion of the total componet width based + * on the current progress {@link #value}. This will be called automatically when the ProgressBar + * is resized by a layout, but if it is rendered auto width, this method can be called from + * another resize handler to sync the ProgressBar if necessary. */ - enable : function(){ - this.disabled = false; - }, - - // private - onLoad : function(){ - this.el.unmask(this.removeMask); - }, - - // private - onBeforeLoad : function(){ - if(!this.disabled){ - this.el.mask(this.msg, this.msgCls); + syncProgressBar : function(){ + if(this.value){ + this.updateProgress(this.value, this.text); } + return this; }, /** - * Show this LoadMask over the configured Element. + * Sets the size of the progress bar. + * @param {Number} width The new width in pixels + * @param {Number} height The new height in pixels + * @return {Ext.ProgressBar} this */ - show: function(){ - this.onBeforeLoad(); + setSize : function(w, h){ + Ext.ProgressBar.superclass.setSize.call(this, w, h); + if(this.textTopEl){ + var inner = this.el.dom.firstChild; + this.textEl.setSize(inner.offsetWidth, inner.offsetHeight); + } + this.syncProgressBar(); + return this; }, /** - * Hide this LoadMask. + * Resets the progress bar value to 0 and text to empty string. If hide = true, the progress + * bar will also be hidden (using the {@link #hideMode} property internally). + * @param {Boolean} hide (optional) True to hide the progress bar (defaults to false) + * @return {Ext.ProgressBar} this */ - hide: function(){ - this.onLoad(); + reset : function(hide){ + this.updateProgress(0); + if(this.textTopEl){ + this.textTopEl.addClass('x-hidden'); + } + this.clearTimer(); + if(hide === true){ + this.hide(); + } + return this; }, - + // private - destroy : function(){ - if(this.store){ - this.store.un('beforeload', this.onBeforeLoad, this); - this.store.un('load', this.onLoad, this); - this.store.un('exception', this.onLoad, this); - }else{ - var um = this.el.getUpdater(); - um.un('beforeupdate', this.onBeforeLoad, this); - um.un('update', this.onLoad, this); - um.un('failure', this.onLoad, this); + clearTimer : function(){ + if(this.waitTimer){ + this.waitTimer.onStop = null; //prevent recursion + Ext.TaskMgr.stop(this.waitTimer); + this.waitTimer = null; } + }, + + onDestroy: function(){ + this.clearTimer(); + if(this.rendered){ + if(this.textEl.isComposite){ + this.textEl.clear(); + } + Ext.destroyMembers(this, 'textEl', 'progressBar', 'textTopEl'); + } + Ext.ProgressBar.superclass.onDestroy.call(this); } -};/** - * @class Ext.Slider - * @extends Ext.BoxComponent - * Slider which supports vertical or horizontal orientation, keyboard adjustments, - * configurable snapping, axis clicking and animation. Can be added as an item to - * any container. Example usage: -+var p = new Ext.ProgressBar({ + renderTo: 'my-el' }); -Ext.reg('datepicker', Ext.DatePicker); -/** - * @class Ext.LoadMask - * A simple utility class for generically masking elements while loading data. If the {@link #store} - * config option is specified, the masking will be automatically synchronized with the store's loading - * process and the mask element will be cached for reuse. For all other elements, this mask will replace the - * element's Updater load indicator and will be destroyed after the initial load. - *Example usage:
- *
- * @constructor - * Create a new LoadMask - * @param {Mixed} el The element or DOM node, or its id - * @param {Object} config The config object - */ -Ext.LoadMask = function(el, config){ - this.el = Ext.get(el); - Ext.apply(this, config); - if(this.store){ - this.store.on({ - scope: this, - beforeload: this.onBeforeLoad, - load: this.onLoad, - exception: this.onLoad - }); - this.removeMask = Ext.value(this.removeMask, false); - }else{ - var um = this.el.getUpdater(); - um.showLoadIndicator = false; // disable the default indicator - um.on({ - scope: this, - beforeupdate: this.onBeforeLoad, - update: this.onLoad, - failure: this.onLoad - }); - this.removeMask = Ext.value(this.removeMask, true); - } -}; +//Wait for 5 seconds, then update the status el (progress bar will auto-reset) +p.wait({ + interval: 100, //bar will move fast! + duration: 5000, + increment: 15, + text: 'Updating...', + scope: this, + fn: function(){ + Ext.fly('status').update('Done!'); + } +}); -Ext.LoadMask.prototype = { - /** - * @cfg {Ext.data.Store} store - * Optional Store to which the mask is bound. The mask is displayed when a load request is issued, and - * hidden on either load sucess, or load fail. - */ - /** - * @cfg {Boolean} removeMask - * True to create a single-use mask that is automatically destroyed after loading (useful for page loads), - * False to persist the mask element reference for multiple uses (e.g., for paged data widgets). Defaults to false. - */ - /** - * @cfg {String} msg - * The text to display in a centered loading message box (defaults to 'Loading...') - */ - msg : 'Loading...', - /** - * @cfg {String} msgCls - * The CSS class to apply to the loading message element (defaults to "x-mask-loading") - */ - msgCls : 'x-mask-loading', +//Or update indefinitely until some async action completes, then reset manually +p.wait(); +myAction.on('complete', function(){ + p.reset(); + Ext.fly('status').update('Done!'); +}); +-// Basic mask: -var myMask = new Ext.LoadMask(Ext.getBody(), {msg:"Please wait..."}); -myMask.show(); -
- */ -Ext.Slider = Ext.extend(Ext.BoxComponent, { - /** - * @cfg {Number} value The value to initialize the slider with. Defaults to minValue. - */ - /** - * @cfg {Boolean} vertical Orient the Slider vertically rather than horizontally, defaults to false. - */ - vertical: false, - /** - * @cfg {Number} minValue The minimum value for the Slider. Defaults to 0. - */ - minValue: 0, - /** - * @cfg {Number} maxValue The maximum value for the Slider. Defaults to 100. - */ - maxValue: 100, - /** - * @cfg {Number/Boolean} decimalPrecision. - *-new Ext.Slider({ - renderTo: Ext.getBody(), - width: 200, - value: 50, - increment: 10, - minValue: 0, - maxValue: 100 -}); -The number of decimal places to which to round the Slider's value. Defaults to 0.
- *To disable rounding, configure as false.
- */ - decimalPrecision: 0, - /** - * @cfg {Number} keyIncrement How many units to change the Slider when adjusting with keyboard navigation. Defaults to 1. If the increment config is larger, it will be used instead. - */ - keyIncrement: 1, - /** - * @cfg {Number} increment How many units to change the slider when adjusting by drag and drop. Use this option to enable 'snapping'. - */ - increment: 0, - // private - clickRange: [5,15], - /** - * @cfg {Boolean} clickToChange Determines whether or not clicking on the Slider axis will change the slider. Defaults to true - */ - clickToChange : true, - /** - * @cfg {Boolean} animate Turn on or off animation. Defaults to true - */ - animate: true, - - /** - * True while the thumb is in a drag operation - * @type boolean - */ - dragging: false, - - // private override - initComponent : function(){ - if(!Ext.isDefined(this.value)){ - this.value = this.minValue; - } - Ext.Slider.superclass.initComponent.call(this); - this.keyIncrement = Math.max(this.increment, this.keyIncrement); - this.addEvents( - /** - * @event beforechange - * Fires before the slider value is changed. By returning false from an event handler, - * you can cancel the event and prevent the slider from changing. - * @param {Ext.Slider} slider The slider - * @param {Number} newValue The new value which the slider is being changed to. - * @param {Number} oldValue The old value which the slider was previously. - */ - 'beforechange', - /** - * @event change - * Fires when the slider value is changed. - * @param {Ext.Slider} slider The slider - * @param {Number} newValue The new value which the slider has been changed to. - */ - 'change', - /** - * @event changecomplete - * Fires when the slider value is changed by the user and any drag operations have completed. - * @param {Ext.Slider} slider The slider - * @param {Number} newValue The new value which the slider has been changed to. - */ - 'changecomplete', - /** - * @event dragstart - * Fires after a drag operation has started. - * @param {Ext.Slider} slider The slider - * @param {Ext.EventObject} e The event fired from Ext.dd.DragTracker - */ - 'dragstart', - /** - * @event drag - * Fires continuously during the drag operation while the mouse is moving. - * @param {Ext.Slider} slider The slider - * @param {Ext.EventObject} e The event fired from Ext.dd.DragTracker - */ - 'drag', - /** - * @event dragend - * Fires after the drag operation has completed. - * @param {Ext.Slider} slider The slider - * @param {Ext.EventObject} e The event fired from Ext.dd.DragTracker - */ - 'dragend' - ); - - if(this.vertical){ - Ext.apply(this, Ext.Slider.Vertical); - } - }, - - // private override - onRender : function(){ - this.autoEl = { - cls: 'x-slider ' + (this.vertical ? 'x-slider-vert' : 'x-slider-horz'), - cn:{cls:'x-slider-end',cn:{cls:'x-slider-inner',cn:[{cls:'x-slider-thumb'},{tag:'a', cls:'x-slider-focus', href:"#", tabIndex: '-1', hidefocus:'on'}]}} - }; - Ext.Slider.superclass.onRender.apply(this, arguments); - this.endEl = this.el.first(); - this.innerEl = this.endEl.first(); - this.thumb = this.innerEl.first(); - this.halfThumb = (this.vertical ? this.thumb.getHeight() : this.thumb.getWidth())/2; - this.focusEl = this.thumb.next(); - this.initEvents(); - }, - - // private override - initEvents : function(){ - this.thumb.addClassOnOver('x-slider-thumb-over'); - this.mon(this.el, { - scope: this, - mousedown: this.onMouseDown, - keydown: this.onKeyDown - }); - - this.focusEl.swallowEvent("click", true); - - this.tracker = new Ext.dd.DragTracker({ - onBeforeStart: this.onBeforeDragStart.createDelegate(this), - onStart: this.onDragStart.createDelegate(this), - onDrag: this.onDrag.createDelegate(this), - onEnd: this.onDragEnd.createDelegate(this), - tolerance: 3, - autoStart: 300 - }); - this.tracker.initEl(this.thumb); - }, - - // private override - onMouseDown : function(e){ - if(this.disabled){ - return; - } - if(this.clickToChange && e.target != this.thumb.dom){ - var local = this.innerEl.translatePoints(e.getXY()); - this.onClickChange(local); - } - this.focus(); - }, - - // private - onClickChange : function(local){ - if(local.top > this.clickRange[0] && local.top < this.clickRange[1]){ - this.setValue(Ext.util.Format.round(this.reverseValue(local.left), this.decimalPrecision), undefined, true); - } - }, - - // private - onKeyDown : function(e){ - if(this.disabled){e.preventDefault();return;} - var k = e.getKey(); - switch(k){ - case e.UP: - case e.RIGHT: - e.stopEvent(); - if(e.ctrlKey){ - this.setValue(this.maxValue, undefined, true); - }else{ - this.setValue(this.value+this.keyIncrement, undefined, true); - } - break; - case e.DOWN: - case e.LEFT: - e.stopEvent(); - if(e.ctrlKey){ - this.setValue(this.minValue, undefined, true); - }else{ - this.setValue(this.value-this.keyIncrement, undefined, true); - } - break; - default: - e.preventDefault(); - } - }, - - // private - doSnap : function(value){ - if(!(this.increment && value)){ - return value; - } - var newValue = value, - inc = this.increment, - m = value % inc; - if(m != 0){ - newValue -= m; - if(m * 2 > inc){ - newValue += inc; - }else if(m * 2 < -inc){ - newValue -= inc; - } - } - return newValue.constrain(this.minValue, this.maxValue); - }, - - // private - afterRender : function(){ - Ext.Slider.superclass.afterRender.apply(this, arguments); - if(this.value !== undefined){ - var v = this.normalizeValue(this.value); - if(v !== this.value){ - delete this.value; - this.setValue(v, false); - }else{ - this.moveThumb(this.translateValue(v), false); - } - } - }, - - // private - getRatio : function(){ - var w = this.innerEl.getWidth(), - v = this.maxValue - this.minValue; - return v == 0 ? w : (w/v); - }, - - // private - normalizeValue : function(v){ - v = this.doSnap(v); - v = Ext.util.Format.round(v, this.decimalPrecision); - v = v.constrain(this.minValue, this.maxValue); - return v; - }, - - /** - * Programmatically sets the value of the Slider. Ensures that the value is constrained within - * the minValue and maxValue. - * @param {Number} value The value to set the slider to. (This will be constrained within minValue and maxValue) - * @param {Boolean} animate Turn on or off animation, defaults to true - */ - setValue : function(v, animate, changeComplete){ - v = this.normalizeValue(v); - if(v !== this.value && this.fireEvent('beforechange', this, v, this.value) !== false){ - this.value = v; - this.moveThumb(this.translateValue(v), animate !== false); - this.fireEvent('change', this, v); - if(changeComplete){ - this.fireEvent('changecomplete', this, v); - } - } - }, - - // private - translateValue : function(v){ - var ratio = this.getRatio(); - return (v * ratio) - (this.minValue * ratio) - this.halfThumb; - }, - - reverseValue : function(pos){ - var ratio = this.getRatio(); - return (pos + this.halfThumb + (this.minValue * ratio)) / ratio; - }, - - // private - moveThumb: function(v, animate){ - if(!animate || this.animate === false){ - this.thumb.setLeft(v); - }else{ - this.thumb.shift({left: v, stopFx: true, duration:.35}); - } - }, - - // private - focus : function(){ - this.focusEl.focus(10); - }, - - // private - onBeforeDragStart : function(e){ - return !this.disabled; - }, - - // private - onDragStart: function(e){ - this.thumb.addClass('x-slider-thumb-drag'); - this.dragging = true; - this.dragStartValue = this.value; - this.fireEvent('dragstart', this, e); - }, - - // private - onDrag: function(e){ - var pos = this.innerEl.translatePoints(this.tracker.getXY()); - this.setValue(Ext.util.Format.round(this.reverseValue(pos.left), this.decimalPrecision), false); - this.fireEvent('drag', this, e); - }, - - // private - onDragEnd: function(e){ - this.thumb.removeClass('x-slider-thumb-drag'); - this.dragging = false; - this.fireEvent('dragend', this, e); - if(this.dragStartValue != this.value){ - this.fireEvent('changecomplete', this, this.value); - } - }, - - // private - onResize : function(w, h){ - this.innerEl.setWidth(w - (this.el.getPadding('l') + this.endEl.getPadding('r'))); - this.syncThumb(); - }, - - //private - onDisable: function(){ - Ext.Slider.superclass.onDisable.call(this); - this.thumb.addClass(this.disabledClass); - if(Ext.isIE){ - //IE breaks when using overflow visible and opacity other than 1. - //Create a place holder for the thumb and display it. - var xy = this.thumb.getXY(); - this.thumb.hide(); - this.innerEl.addClass(this.disabledClass).dom.disabled = true; - if (!this.thumbHolder){ - this.thumbHolder = this.endEl.createChild({cls: 'x-slider-thumb ' + this.disabledClass}); - } - this.thumbHolder.show().setXY(xy); - } - }, - - //private - onEnable: function(){ - Ext.Slider.superclass.onEnable.call(this); - this.thumb.removeClass(this.disabledClass); - if(Ext.isIE){ - this.innerEl.removeClass(this.disabledClass).dom.disabled = false; - if(this.thumbHolder){ - this.thumbHolder.hide(); - } - this.thumb.show(); - this.syncThumb(); - } - }, - - /** - * Synchronizes the thumb position to the proper proportion of the total component width based - * on the current slider {@link #value}. This will be called automatically when the Slider - * is resized by a layout, but if it is rendered auto width, this method can be called from - * another resize handler to sync the Slider if necessary. - */ - syncThumb : function(){ - if(this.rendered){ - this.moveThumb(this.translateValue(this.value)); - } - }, - - /** - * Returns the current value of the slider - * @return {Number} The current value of the slider - */ - getValue : function(){ - return this.value; - }, - - // private - beforeDestroy : function(){ - Ext.destroyMembers(this, 'endEl', 'innerEl', 'thumb', 'halfThumb', 'focusEl', 'tracker', 'thumbHolder'); - Ext.Slider.superclass.beforeDestroy.call(this); - } -}); -Ext.reg('slider', Ext.Slider); - -// private class to support vertical sliders -Ext.Slider.Vertical = { - onResize : function(w, h){ - this.innerEl.setHeight(h - (this.el.getPadding('t') + this.endEl.getPadding('b'))); - this.syncThumb(); - }, - - getRatio : function(){ - var h = this.innerEl.getHeight(), - v = this.maxValue - this.minValue; - return h/v; - }, - - moveThumb: function(v, animate){ - if(!animate || this.animate === false){ - this.thumb.setBottom(v); - }else{ - this.thumb.shift({bottom: v, stopFx: true, duration:.35}); - } - }, - - onDrag: function(e){ - var pos = this.innerEl.translatePoints(this.tracker.getXY()), - bottom = this.innerEl.getHeight()-pos.top; - this.setValue(this.minValue + Ext.util.Format.round(bottom/this.getRatio(), this.decimalPrecision), false); - this.fireEvent('drag', this, e); - }, - - onClickChange : function(local){ - if(local.left > this.clickRange[0] && local.left < this.clickRange[1]){ - var bottom = this.innerEl.getHeight() - local.top; - this.setValue(this.minValue + Ext.util.Format.round(bottom/this.getRatio(), this.decimalPrecision), undefined, true); - } - } -};/** - * @class Ext.ProgressBar - * @extends Ext.BoxComponent - *An updateable progress bar component. The progress bar supports two different modes: manual and automatic.
- *In manual mode, you are responsible for showing, updating (via {@link #updateProgress}) and clearing the - * progress bar as needed from your own code. This method is most appropriate when you want to show progress - * throughout an operation that has predictable points of interest at which you can update the control.
- *In automatic mode, you simply call {@link #wait} and let the progress bar run indefinitely, only clearing it - * once the operation is complete. You can optionally have the progress bar wait for a specific amount of time - * and then clear itself. Automatic mode is most appropriate for timed operations or asynchronous operations in - * which you have no need for indicating intermediate progress.
- * @cfg {Float} value A floating point value between 0 and 1 (e.g., .5, defaults to 0) - * @cfg {String} text The progress bar text (defaults to '') - * @cfg {Mixed} textEl The element to render the progress text to (defaults to the progress - * bar's internal text element) - * @cfg {String} id The progress bar element's id (defaults to an auto-generated id) - * @xtype progress - */ -Ext.ProgressBar = Ext.extend(Ext.BoxComponent, { - /** - * @cfg {String} baseCls - * The base CSS class to apply to the progress bar's wrapper element (defaults to 'x-progress') - */ - baseCls : 'x-progress', - - /** - * @cfg {Boolean} animate - * True to animate the progress bar during transitions (defaults to false) - */ - animate : false, - - // private - waitTimer : null, - - // private - initComponent : function(){ - Ext.ProgressBar.superclass.initComponent.call(this); - this.addEvents( - /** - * @event update - * Fires after each update interval - * @param {Ext.ProgressBar} this - * @param {Number} The current progress value - * @param {String} The current progress text - */ - "update" - ); - }, - - // private - onRender : function(ct, position){ - var tpl = new Ext.Template( - '', - '' - ); - - this.el = position ? tpl.insertBefore(position, {cls: this.baseCls}, true) - : tpl.append(ct, {cls: this.baseCls}, true); - - if(this.id){ - this.el.dom.id = this.id; - } - var inner = this.el.dom.firstChild; - this.progressBar = Ext.get(inner.firstChild); - - if(this.textEl){ - //use an external text el - this.textEl = Ext.get(this.textEl); - delete this.textTopEl; - }else{ - //setup our internal layered text els - this.textTopEl = Ext.get(this.progressBar.dom.firstChild); - var textBackEl = Ext.get(inner.childNodes[1]); - this.textTopEl.setStyle("z-index", 99).addClass('x-hidden'); - this.textEl = new Ext.CompositeElement([this.textTopEl.dom.firstChild, textBackEl.dom.firstChild]); - this.textEl.setWidth(inner.offsetWidth); - } - this.progressBar.setHeight(inner.offsetHeight); - }, - - // private - afterRender : function(){ - Ext.ProgressBar.superclass.afterRender.call(this); - if(this.value){ - this.updateProgress(this.value, this.text); - }else{ - this.updateText(this.text); - } - }, - - /** - * Updates the progress bar value, and optionally its text. If the text argument is not specified, - * any existing text value will be unchanged. To blank out existing text, pass ''. Note that even - * if the progress bar value exceeds 1, it will never automatically reset -- you are responsible for - * determining when the progress is complete and calling {@link #reset} to clear and/or hide the control. - * @param {Float} value (optional) A floating point value between 0 and 1 (e.g., .5, defaults to 0) - * @param {String} text (optional) The string to display in the progress text element (defaults to '') - * @param {Boolean} animate (optional) Whether to animate the transition of the progress bar. If this value is - * not specified, the default for the class is used (default to false) - * @return {Ext.ProgressBar} this - */ - updateProgress : function(value, text, animate){ - this.value = value || 0; - if(text){ - this.updateText(text); - } - if(this.rendered){ - var w = Math.floor(value*this.el.dom.firstChild.offsetWidth); - this.progressBar.setWidth(w, animate === true || (animate !== false && this.animate)); - if(this.textTopEl){ - //textTopEl should be the same width as the bar so overflow will clip as the bar moves - this.textTopEl.removeClass('x-hidden').setWidth(w); - } - } - this.fireEvent('update', this, value, text); - return this; - }, - - /** - * Initiates an auto-updating progress bar. A duration can be specified, in which case the progress - * bar will automatically reset after a fixed amount of time and optionally call a callback function - * if specified. If no duration is passed in, then the progress bar will run indefinitely and must - * be manually cleared by calling {@link #reset}. The wait method accepts a config object with - * the following properties: - *', - '', - '', - '', - '', - '', - '-Property Type Description ----------- ------------ ---------------------------------------------------------------------- -duration Number The length of time in milliseconds that the progress bar should - run before resetting itself (defaults to undefined, in which case it - will run indefinitely until reset is called) -interval Number The length of time in milliseconds between each progress update - (defaults to 1000 ms) -animate Boolean Whether to animate the transition of the progress bar. If this value is - not specified, the default for the class is used. -increment Number The number of progress update segments to display within the progress - bar (defaults to 10). If the bar reaches the end and is still - updating, it will automatically wrap back to the beginning. -text String Optional text to display in the progress bar element (defaults to ''). -fn Function A callback function to execute after the progress bar finishes auto- - updating. The function will be called with no arguments. This function - will be ignored if duration is not specified since in that case the - progress bar can only be stopped programmatically, so any required function - should be called by the same code after it resets the progress bar. -scope Object The scope that is passed to the callback function (only applies when - duration and fn are both passed). -
- * - * Example usage: - *
- * @param {Object} config (optional) Configuration options - * @return {Ext.ProgressBar} this - */ - wait : function(o){ - if(!this.waitTimer){ - var scope = this; - o = o || {}; - this.updateText(o.text); - this.waitTimer = Ext.TaskMgr.start({ - run: function(i){ - var inc = o.increment || 10; - i -= 1; - this.updateProgress(((((i+inc)%inc)+1)*(100/inc))*0.01, null, o.animate); - }, - interval: o.interval || 1000, - duration: o.duration, - onStop: function(){ - if(o.fn){ - o.fn.apply(o.scope || this); - } - this.reset(); - }, - scope: scope - }); - } - return this; - }, - - /** - * Returns true if the progress bar is currently in a {@link #wait} operation - * @return {Boolean} True if waiting, else false - */ - isWaiting : function(){ - return this.waitTimer !== null; - }, - - /** - * Updates the progress bar text. If specified, textEl will be updated, otherwise the progress - * bar itself will display the updated text. - * @param {String} text (optional) The string to display in the progress text element (defaults to '') - * @return {Ext.ProgressBar} this - */ - updateText : function(text){ - this.text = text || ' '; - if(this.rendered){ - this.textEl.update(this.text); - } - return this; - }, - - /** - * Synchronizes the inner bar width to the proper proportion of the total componet width based - * on the current progress {@link #value}. This will be called automatically when the ProgressBar - * is resized by a layout, but if it is rendered auto width, this method can be called from - * another resize handler to sync the ProgressBar if necessary. - */ - syncProgressBar : function(){ - if(this.value){ - this.updateProgress(this.value, this.text); - } - return this; - }, - - /** - * Sets the size of the progress bar. - * @param {Number} width The new width in pixels - * @param {Number} height The new height in pixels - * @return {Ext.ProgressBar} this - */ - setSize : function(w, h){ - Ext.ProgressBar.superclass.setSize.call(this, w, h); - if(this.textTopEl){ - var inner = this.el.dom.firstChild; - this.textEl.setSize(inner.offsetWidth, inner.offsetHeight); - } - this.syncProgressBar(); - return this; - }, - - /** - * Resets the progress bar value to 0 and text to empty string. If hide = true, the progress - * bar will also be hidden (using the {@link #hideMode} property internally). - * @param {Boolean} hide (optional) True to hide the progress bar (defaults to false) - * @return {Ext.ProgressBar} this - */ - reset : function(hide){ - this.updateProgress(0); - if(this.textTopEl){ - this.textTopEl.addClass('x-hidden'); - } - if(this.waitTimer){ - this.waitTimer.onStop = null; //prevent recursion - Ext.TaskMgr.stop(this.waitTimer); - this.waitTimer = null; - } - if(hide === true){ - this.hide(); - } - return this; - }, - - onDestroy: function(){ - if(this.rendered){ - if(this.textEl.isComposite){ - this.textEl.clear(); - } - Ext.destroyMembers(this, 'textEl', 'progressBar', 'textTopEl'); - } - Ext.ProgressBar.superclass.onDestroy.call(this); - } -}); +}); Ext.reg('progress', Ext.ProgressBar); \ No newline at end of file-var p = new Ext.ProgressBar({ - renderTo: 'my-el' -}); - -//Wait for 5 seconds, then update the status el (progress bar will auto-reset) -p.wait({ - interval: 100, //bar will move fast! - duration: 5000, - increment: 15, - text: 'Updating...', - scope: this, - fn: function(){ - Ext.fly('status').update('Done!'); - } -}); - -//Or update indefinitely until some async action completes, then reset manually -p.wait(); -myAction.on('complete', function(){ - p.reset(); - Ext.fly('status').update('Done!'); -}); -
-
+ *
{@link #buttons}
- * config property. Read only.
- * @type Array
- * @property buttons
- */
- this.fbar.items.each(function(c){
- c.minWidth = c.minWidth || this.minButtonWidth;
- }, this);
- this.buttons = this.fbar.items.items;
- },
- // private
- createToolbar: function(tb, options){
- var result;
- // Convert array to proper toolbar config
- if(Ext.isArray(tb)){
- tb = {
- items: tb
- };
- }
- result = tb.events ? Ext.apply(tb, options) : this.createComponent(Ext.apply({}, tb, options), 'toolbar');
- result.ownerCt = this;
- result.bufferResize = false;
- this.toolbars.push(result);
- return result;
- },
+ maxHeight = Math.max(maxHeight, childHeight + childMargins.top + childMargins.bottom);
- // private
- createElement : function(name, pnode){
- if(this[name]){
- pnode.appendChild(this[name].dom);
- return;
+ //cache the size of each child component. Don't set height or width to 0, keep undefined instead
+ boxes.push({
+ component: child,
+ height : childHeight || undefined,
+ width : childWidth || undefined
+ });
}
-
- if(name === 'bwrap' || this.elements.indexOf(name) != -1){
- if(this[name+'Cfg']){
- this[name] = Ext.fly(pnode).createChild(this[name+'Cfg']);
- }else{
- var el = document.createElement('div');
- el.className = this[name+'Cls'];
- this[name] = Ext.get(pnode.appendChild(el));
- }
- if(this[name+'CssClass']){
- this[name].addClass(this[name+'CssClass']);
- }
- if(this[name+'Style']){
- this[name].applyStyles(this[name+'Style']);
+
+ var shortfall = desiredWidth - width,
+ tooNarrow = minimumWidth > width;
+
+ //the width available to the flexed items
+ var availableWidth = Math.max(0, width - nonFlexWidth - paddingHoriz);
+
+ if (tooNarrow) {
+ for (i = 0; i < visibleCount; i++) {
+ boxes[i].width = visibleItems[i].minWidth || visibleItems[i].width || boxes[i].width;
}
- }
- },
+ } else {
+ //all flexed items should be sized to their minimum width, other items should be shrunk down until
+ //the shortfall has been accounted for
+ if (shortfall > 0) {
+ var minWidths = [];
+
+ /**
+ * When we have a shortfall but are not tooNarrow, we need to shrink the width of each non-flexed item.
+ * Flexed items are immediately reduced to their minWidth and anything already at minWidth is ignored.
+ * The remaining items are collected into the minWidths array, which is later used to distribute the shortfall.
+ */
+ for (var index = 0, length = visibleCount; index < length; index++) {
+ var item = visibleItems[index],
+ minWidth = item.minWidth || 0;
+
+ //shrink each non-flex tab by an equal amount to make them all fit. Flexed items are all
+ //shrunk to their minWidth because they're flexible and should be the first to lose width
+ if (item.flex) {
+ boxes[index].width = minWidth;
+ } else {
+ minWidths.push({
+ minWidth : minWidth,
+ available: boxes[index].width - minWidth,
+ index : index
+ });
+ }
+ }
+
+ //sort by descending amount of width remaining before minWidth is reached
+ minWidths.sort(function(a, b) {
+ return a.available > b.available ? 1 : -1;
+ });
+
+ /*
+ * Distribute the shortfall (difference between total desired with of all items and actual width available)
+ * between the non-flexed items. We try to distribute the shortfall evenly, but apply it to items with the
+ * smallest difference between their width and minWidth first, so that if reducing the width by the average
+ * amount would make that item less than its minWidth, we carry the remainder over to the next item.
+ */
+ for (var i = 0, length = minWidths.length; i < length; i++) {
+ var itemIndex = minWidths[i].index;
+
+ if (itemIndex == undefined) {
+ continue;
+ }
+
+ var item = visibleItems[itemIndex],
+ box = boxes[itemIndex],
+ oldWidth = box.width,
+ minWidth = item.minWidth,
+ newWidth = Math.max(minWidth, oldWidth - Math.ceil(shortfall / (length - i))),
+ reduction = oldWidth - newWidth;
+
+ boxes[itemIndex].width = newWidth;
+ shortfall -= reduction;
+ }
+ } else {
+ //temporary variables used in the flex width calculations below
+ var remainingWidth = availableWidth,
+ remainingFlex = totalFlex;
- // private
- onRender : function(ct, position){
- Ext.Panel.superclass.onRender.call(this, ct, position);
- this.createClasses();
+ //calculate the widths of each flexed item
+ for (i = 0; i < visibleCount; i++) {
+ child = visibleItems[i];
+ calcs = boxes[i];
- var el = this.el,
- d = el.dom,
- bw,
- ts;
+ childMargins = child.margins;
+ vertMargins = childMargins.top + childMargins.bottom;
+ if (isStart && child.flex && !child.width) {
+ flexedWidth = Math.ceil((child.flex / remainingFlex) * remainingWidth);
+ remainingWidth -= flexedWidth;
+ remainingFlex -= child.flex;
- if(this.collapsible && !this.hideCollapseTool){
- this.tools = this.tools ? this.tools.slice(0) : [];
- this.tools[this.collapseFirst?'unshift':'push']({
- id: 'toggle',
- handler : this.toggleCollapse,
- scope: this
- });
- }
-
- if(this.tools){
- ts = this.tools;
- this.elements += (this.header !== false) ? ',header' : '';
- }
- this.tools = {};
-
- el.addClass(this.baseCls);
- if(d.firstChild){ // existing markup
- this.header = el.down('.'+this.headerCls);
- this.bwrap = el.down('.'+this.bwrapCls);
- var cp = this.bwrap ? this.bwrap : el;
- this.tbar = cp.down('.'+this.tbarCls);
- this.body = cp.down('.'+this.bodyCls);
- this.bbar = cp.down('.'+this.bbarCls);
- this.footer = cp.down('.'+this.footerCls);
- this.fromMarkup = true;
- }
- if (this.preventBodyReset === true) {
- el.addClass('x-panel-reset');
+ calcs.width = flexedWidth;
+ calcs.dirtySize = true;
+ }
+ }
+ }
}
- if(this.cls){
- el.addClass(this.cls);
+
+ if (isCenter) {
+ leftOffset += availableWidth / 2;
+ } else if (isEnd) {
+ leftOffset += availableWidth;
}
-
- if(this.buttons){
- this.elements += ',footer';
+
+ //finally, calculate the left and top position of each item
+ for (i = 0; i < visibleCount; i++) {
+ child = visibleItems[i];
+ calcs = boxes[i];
+
+ childMargins = child.margins;
+ leftOffset += childMargins.left;
+ vertMargins = childMargins.top + childMargins.bottom;
+
+ calcs.left = leftOffset;
+ calcs.top = topOffset + childMargins.top;
+
+ switch (this.align) {
+ case 'stretch':
+ stretchHeight = availHeight - vertMargins;
+ calcs.height = stretchHeight.constrain(child.minHeight || 0, child.maxHeight || 1000000);
+ calcs.dirtySize = true;
+ break;
+ case 'stretchmax':
+ stretchHeight = maxHeight - vertMargins;
+ calcs.height = stretchHeight.constrain(child.minHeight || 0, child.maxHeight || 1000000);
+ calcs.dirtySize = true;
+ break;
+ case 'middle':
+ var diff = availHeight - calcs.height - vertMargins;
+ if (diff > 0) {
+ calcs.top = topOffset + vertMargins + (diff / 2);
+ }
+ }
+
+ leftOffset += calcs.width + childMargins.right;
}
- // This block allows for maximum flexibility and performance when using existing markup
+ return {
+ boxes: boxes,
+ meta : {
+ maxHeight : maxHeight,
+ nonFlexWidth: nonFlexWidth,
+ desiredWidth: desiredWidth,
+ minimumWidth: minimumWidth,
+ shortfall : desiredWidth - width,
+ tooNarrow : tooNarrow
+ }
+ };
+ }
+});
- // framing requires special markup
- if(this.frame){
- el.insertHtml('afterBegin', String.format(Ext.Element.boxMarkup, this.baseCls));
+Ext.Container.LAYOUTS.hbox = Ext.layout.HBoxLayout;/**
+ * @class Ext.layout.VBoxLayout
+ * @extends Ext.layout.BoxLayout
+ * A layout that arranges items vertically down a Container. This layout optionally divides available vertical
+ * space between child items containing a numeric flex configuration.
-
+ *
-
+ *
{@link #tbar}) section of the panel.
- * @return {Ext.Toolbar} The toolbar
+ * @property triggerWidth
+ * @type Number
+ * The width allocated for the menu trigger at the extreme right end of the Toolbar
*/
- getTopToolbar : function(){
- return this.topToolbar;
- },
+ triggerWidth: 18,
/**
- * Returns the {@link Ext.Toolbar toolbar} from the bottom ({@link #bbar}) section of the panel.
- * @return {Ext.Toolbar} The toolbar
+ * @property noItemsMenuText
+ * @type String
+ * HTML fragment to render into the toolbar overflow menu if there are no items to display
*/
- getBottomToolbar : function(){
- return this.bottomToolbar;
- },
+ noItemsMenuText : '',
/**
- * Adds a button to this panel. Note that this method must be called prior to rendering. The preferred
- * approach is to add buttons via the {@link #buttons} config.
- * @param {String/Object} config A valid {@link Ext.Button} config. A string will become the text for a default
- * button config, an object will be treated as a button config object.
- * @param {Function} handler The function to be called on button {@link Ext.Button#click}
- * @param {Object} scope The scope (this reference) in which the button handler function is executed. Defaults to the Button.
- * @return {Ext.Button} The button that was added
+ * @private
+ * @property lastOverflow
+ * @type Boolean
+ * Used internally to record whether the last layout caused an overflow or not
*/
- addButton : function(config, handler, scope){
- if(!this.fbar){
- this.createFbar([]);
+ lastOverflow: false,
+
+ /**
+ * @private
+ * @property tableHTML
+ * @type String
+ * String used to build the HTML injected to support the Toolbar's layout. The align property is
+ * injected into this string inside the td.x-toolbar-left element during onLayout.
+ */
+ tableHTML: [
+ '| ',
+ ' | ',
+ '',
+ '
| ',
+ '