中间件编程

开发平台：

JavaScript

ext-all-debug.js：源码内容

items: [{
title: 'Column 1',
width: 120
},{
title: 'Column 2',
columnWidth: .8
},{
title: 'Column 3',
columnWidth: .2
}]
});
</code></pre>
*/
Ext.layout.ColumnLayout = Ext.extend(Ext.layout.ContainerLayout, {
// private
monitorResize:true,
extraCls: 'x-column',
scrollOffset : 0,
// private
isValidParent : function(c, target){
return (c.getPositionEl ? c.getPositionEl() : c.getEl()).dom.parentNode == this.innerCt.dom;
},
// private
onLayout : function(ct, target){
var cs = ct.items.items, len = cs.length, c, i;
if(!this.innerCt){
target.addClass('x-column-layout-ct');
// 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'});
}
this.renderAll(ct, this.innerCt);
var size = Ext.isIE && target.dom != Ext.getBody().dom ? target.getStyleSize() : target.getViewSize();
if(size.width < 1 && size.height < 1){ // display none?
return;
}
var w = size.width - target.getPadding('lr') - this.scrollOffset,
h = size.height - target.getPadding('tb'),
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];
if(!c.columnWidth){
pw -= (c.getSize().width + c.getEl().getMargins('lr'));
}
}
pw = pw < 0 ? 0 : pw;
for(i = 0; i < len; i++){
c = cs[i];
if(c.columnWidth){
c.setSize(Math.floor(c.columnWidth*pw) - c.getEl().getMargins('lr'));
}
}
}
/**
* @property activeItem
* @hide
*/
});
Ext.Container.LAYOUTS['column'] = Ext.layout.ColumnLayout;/** * @class Ext.layout.BorderLayout * @extends Ext.layout.ContainerLayout * <p>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.</p> * <p>This class is intended to be extended or created via the <tt>layout:'border'</tt> * {@link Ext.Container#layout} config, and should generally not need to be created directly * via the new keyword.</p> * <p>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.</p> * <p>Example usage:</p> * <pre><code> 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' }] }); </code></pre> * <p><b><u>Notes</u></b>:</p><div class="mdetail-params"><ul> * <li>Any container using the BorderLayout <b>must</b> have a child item with <tt>region:'center'</tt>. * 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.</li> * <li>Any child items with a region of <tt>west</tt> or <tt>east</tt> must have <tt>width</tt> defined * (an integer representing the number of pixels that the region should take up).</li> * <li>Any child items with a region of <tt>north</tt> or <tt>south</tt> must have <tt>height</tt> defined.</li> * <li>The regions of a BorderLayout are <b>fixed at render time</b> and thereafter, its child Components may not be removed or added</b>. 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: * <div style="margin-left:16px"><pre><code> 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' }); wrc.{@link Ext.Container#doLayout doLayout}(); * </code></pre></div> * </li> * <li> To reference a {@link Ext.layout.BorderLayout.Region Region}: * <div style="margin-left:16px"><pre><code> wr = myBorderPanel.layout.west; * </code></pre></div> * </li> * </ul></div> */ Ext.layout.BorderLayout = Ext.extend(Ext.layout.ContainerLayout, { // private monitorResize:true, // private rendered : false, // private onLayout : function(ct, target){ var collapsed; if(!this.rendered){ target.addClass('x-border-layout-ct'); var items = ct.items.items; collapsed = []; for(var i = 0, len = items.length; i < len; i++) { var c = items[i]; var pos = c.region; if(c.collapsed){ collapsed.push(c); } c.collapsed = false; if(!c.rendered){ c.cls = c.cls ? c.cls +' x-border-panel' : 'x-border-panel'; c.render(target, i); } this[pos] = pos != 'center' && c.split ? new Ext.layout.BorderLayout.SplitRegion(this, c.initialConfig, pos) : new Ext.layout.BorderLayout.Region(this, c.initialConfig, pos); this[pos].render(target, c); } this.rendered = true; } var size = target.getViewSize(); if(size.width < 20 || size.height < 20){ // display none? if(collapsed){ this.restoreCollapsed = collapsed; } return; }else if(this.restoreCollapsed){ collapsed = this.restoreCollapsed; 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; 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.width = w - (m.left+m.right); b.x = m.left; b.y = m.top; centerY = b.height + b.y + m.bottom; centerH -= centerY; n.applyLayout(b); } if(s && s.isVisible()){ var b = s.getSize(); var m = s.getMargins(); b.width = w - (m.left+m.right); b.x = m.left; var 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.height = centerH - (m.top+m.bottom); b.x = m.left; b.y = centerY + m.top; var 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.height = centerH - (m.top+m.bottom); var 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(); var centerBox = { x: centerX + m.left, y: centerY + m.top, width: centerW - (m.left+m.right), height: centerH - (m.top+m.bottom) }; c.applyLayout(centerBox); } if(collapsed){ for(var i = 0, len = collapsed.length; i < len; i++){ collapsed[i].collapse(false); } } if(Ext.isIE && Ext.isStrict){ // workaround IE strict repainting issue target.repaint(); } }, destroy: function() { var r = ['north', 'south', 'east', 'west']; for (var i = 0; i < r.length; i++) { var region = this[r[i]]; if(region){ if(region.destroy){ region.destroy(); }else if (region.split){ region.split.destroy(true); } } } Ext.layout.BorderLayout.superclass.destroy.call(this); } /** * @property activeItem * @hide */ }); /** * @class Ext.layout.BorderLayout.Region * <p>This is a region of a {@link Ext.layout.BorderLayout BorderLayout} that acts as a subcontainer * within the layout. Each region has its own {@link Ext.layout.ContainerLayout layout} that is * independent of other regions and the containing BorderLayout, and can be any of the * {@link Ext.layout.ContainerLayout valid Ext layout types}.</p> * <p>Region size is managed automatically and cannot be changed by the user -- for * {@link #split resizable regions}, see {@link Ext.layout.BorderLayout.SplitRegion}.</p> * @constructor * Create a new Region. * @param {Layout} layout The {@link Ext.layout.BorderLayout BorderLayout} instance that is managing this Region. * @param {Object} config The configuration options * @param {String} position The region position. Valid values are: <tt>north</tt>, <tt>south</tt>, * <tt>east</tt>, <tt>west</tt> and <tt>center</tt>. Every {@link Ext.layout.BorderLayout BorderLayout} * <b>must have a center region</b> for the primary content -- all other regions are optional. */ Ext.layout.BorderLayout.Region = function(layout, config, pos){ Ext.apply(this, config); this.layout = layout; this.position = pos; this.state = {}; if(typeof this.margins == 'string'){ this.margins = this.layout.parseMargins(this.margins); } this.margins = Ext.applyIf(this.margins || {}, this.defaultMargins); if(this.collapsible){ if(typeof this.cmargins == 'string'){ this.cmargins = this.layout.parseMargins(this.cmargins); } if(this.collapseMode == 'mini' && !this.cmargins){ this.cmargins = {left:0,top:0,right:0,bottom:0}; }else{ this.cmargins = Ext.applyIf(this.cmargins || {}, pos == 'north' || pos == 'south' ? this.defaultNSCMargins : this.defaultEWCMargins); } } }; Ext.layout.BorderLayout.Region.prototype = { /** * @cfg {Boolean} animFloat * When a collapsed region's bar is clicked, the region's panel will be displayed as a floated * panel that will close again once the user mouses out of that panel (or clicks out if * <tt>{@link #autoHide} = false</tt>). Setting <tt>{@link #animFloat} = false</tt> will * prevent the open and close of these floated panels from being animated (defaults to <tt>true</tt>). */ /** * @cfg {Boolean} autoHide * When a collapsed region's bar is clicked, the region's panel will be displayed as a floated * panel. If <tt>autoHide = true</tt>, the panel will automatically hide after the user mouses * out of the panel. If <tt>autoHide = false</tt>, the panel will continue to display until the * user clicks outside of the panel (defaults to <tt>true</tt>). */ /** * @cfg {String} collapseMode * <tt>collapseMode</tt> supports two configuration values:<div class="mdetail-params"><ul> * <li><b><tt>undefined</tt></b> (default)<div class="sub-desc">By default, {@link #collapsible} * regions are collapsed by clicking the expand/collapse tool button that renders into the region's * title bar.</div></li> * <li><b><tt>'mini'</tt></b><div class="sub-desc">Optionally, when <tt>collapseMode</tt> is set to * <tt>'mini'</tt> the region's split bar will also display a small collapse button in the center of * the bar. In <tt>'mini'</tt> mode the region will collapse to a thinner bar than in normal mode. * </div></li> * </ul></div></p> * <p><b>Note</b>: if a collapsible region does not have a title bar, then set <tt>collapseMode = * 'mini'</tt> and <tt>{@link #split} = true</tt> in order for the region to be {@link #collapsible} * by the user as the expand/collapse tool button (that would go in the title bar) will not be rendered.</p> * <p>See also <tt>{@link #cmargins}</tt>.</p> */ /** * @cfg {Object} margins * An object containing margins to apply to the region when in the expanded state in the * format:<pre><code> { top: (top margin), right: (right margin), bottom: (bottom margin), left: (left margin) }</code></pre> * <p>May also be a string containing space-separated, numeric margin values. The order of the * sides associated with each value matches the way CSS processes margin values:</p> * <p><div class="mdetail-params"><ul> * <li>If there is only one value, it applies to all sides.</li> * <li>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.</li> * <li>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.</li> * <li>If there are four values, they apply to the top, right, bottom, and left, respectively.</li> * </ul></div></p> * <p>Defaults to:</p><pre><code> * {top:0, right:0, bottom:0, left:0} * </code></pre> */ /** * @cfg {Object} cmargins * An object containing margins to apply to the region when in the collapsed state in the * format:<pre><code> { top: (top margin), right: (right margin), bottom: (bottom margin), left: (left margin) }</code></pre> * <p>May also be a string containing space-separated, numeric margin values. The order of the * sides associated with each value matches the way CSS processes margin values.</p> * <p><ul> * <li>If there is only one value, it applies to all sides.</li> * <li>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.</li> * <li>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.</li> * <li>If there are four values, they apply to the top, right, bottom, and left, respectively.</li> * </ul></p> */ /** * @cfg {Boolean} collapsible * <p><tt>true</tt> to allow the user to collapse this region (defaults to <tt>false</tt>). If * <tt>true</tt>, an expand/collapse tool button will automatically be rendered into the title * bar of the region, otherwise the button will not be shown.</p> * <p><b>Note</b>: that a title bar is required to display the collapse/expand toggle button -- if * no <tt>title</tt> is specified for the region's panel, the region will only be collapsible if * <tt>{@link #collapseMode} = 'mini'</tt> and <tt>{@link #split} = true</tt>. */ collapsible : false, /** * @cfg {Boolean} split * <p><tt>true</tt> to create a {@link Ext.layout.BorderLayout.SplitRegion SplitRegion} and * display a 5px wide {@link Ext.SplitBar} between this region and its neighbor, allowing the user to * resize the regions dynamically. Defaults to <tt>false</tt> creating a * {@link Ext.layout.BorderLayout.Region Region}.</p><br> * <p><b>Notes</b>:</p><div class="mdetail-params"><ul> * <li>this configuration option is ignored if <tt>region='center'</tt></li> * <li>when <tt>split == true</tt>, it is common to specify a * <tt>{@link Ext.SplitBar#minSize minSize}</tt> and <tt>{@link Ext.SplitBar#maxSize maxSize}</tt> * for the {@link Ext.BoxComponent BoxComponent} representing the region. These are not native * configs of {@link Ext.BoxComponent BoxComponent}, and are used only by this class.</li> * <li>if <tt>{@link #collapseMode} = 'mini'</tt> requires <tt>split = true</tt> to reserve space * for the collapse tool</tt></li> * </ul></div> */ split:false, /** * @cfg {Boolean} floatable * <tt>true</tt> to allow clicking a collapsed region's bar to display the region's panel floated * above the layout, <tt>false</tt> to force the user to fully expand a collapsed region by * clicking the expand button to see it again (defaults to <tt>true</tt>). */ floatable: true, /** * @cfg {Number} minWidth * <p>The minimum allowable width in pixels for this region (defaults to <tt>50</tt>). * <tt>maxWidth</tt> may also be specified.</p><br> * <p><b>Note</b>: setting the <tt>{@link Ext.SplitBar#minSize minSize}</tt> / * <tt>{@link Ext.SplitBar#maxSize maxSize}</tt> supersedes any specified * <tt>minWidth</tt> / <tt>maxWidth</tt>.</p> */ minWidth:50, /** * @cfg {Number} minHeight * The minimum allowable height in pixels for this region (defaults to <tt>50</tt>) * <tt>maxHeight</tt> may also be specified.</p><br> * <p><b>Note</b>: setting the <tt>{@link Ext.SplitBar#minSize minSize}</tt> / * <tt>{@link Ext.SplitBar#maxSize maxSize}</tt> supersedes any specified * <tt>minHeight</tt> / <tt>maxHeight</tt>.</p> */ minHeight:50, // private defaultMargins : {left:0,top:0,right:0,bottom:0}, // private defaultNSCMargins : {left:5,top:5,right:5,bottom:5}, // private defaultEWCMargins : {left:5,top:0,right:5,bottom:0}, floatingZIndex: 100, /** * True if this region is collapsed. Read-only. * @type Boolean * @property */ isCollapsed : false, /** * This region's panel. Read-only. * @type Ext.Panel * @property panel */ /** * This region's layout. Read-only. * @type Layout * @property layout */ /** * This region's layout position (north, south, east, west or center). Read-only. * @type String * @property position */ // private render : function(ct, p){ this.panel = p; p.el.enableDisplayMode(); this.targetEl = ct; this.el = p.el; var gs = p.getState, ps = this.position; p.getState = function(){ return Ext.apply(gs.call(p) || {}, this.state); }.createDelegate(this); if(ps != 'center'){ p.allowQueuedExpand = false; p.on({ beforecollapse: this.beforeCollapse, collapse: this.onCollapse, beforeexpand: this.beforeExpand, expand: this.onExpand, hide: this.onHide, show: this.onShow, scope: this }); if(this.collapsible || this.floatable){ p.collapseEl = 'el'; p.slideAnchor = this.getSlideAnchor(); } if(p.tools && p.tools.toggle){ p.tools.toggle.addClass('x-tool-collapse-'+ps); p.tools.toggle.addClassOnOver('x-tool-collapse-'+ps+'-over'); } } }, // private getCollapsedEl : function(){ if(!this.collapsedEl){ if(!this.toolTemplate){ var tt = new Ext.Template( '<div class="x-tool x-tool-{id}"> </div>' ); tt.disableFormats = true; tt.compile(); Ext.layout.BorderLayout.Region.prototype.toolTemplate = tt; } this.collapsedEl = this.targetEl.createChild({ cls: "x-layout-collapsed x-layout-collapsed-"+this.position, id: this.panel.id + '-xcollapsed' }); this.collapsedEl.enableDisplayMode('block'); if(this.collapseMode == 'mini'){ this.collapsedEl.addClass('x-layout-cmini-'+this.position); this.miniCollapsedEl = this.collapsedEl.createChild({ cls: "x-layout-mini x-layout-mini-"+this.position, html: " " }); this.miniCollapsedEl.addClassOnOver('x-layout-mini-over'); this.collapsedEl.addClassOnOver("x-layout-collapsed-over"); this.collapsedEl.on('click', this.onExpandClick, this, {stopEvent:true}); }else { if(this.collapsible !== false && !this.hideCollapseTool) { var t = this.toolTemplate.append( this.collapsedEl.dom, {id:'expand-'+this.position}, true); t.addClassOnOver('x-tool-expand-'+this.position+'-over'); t.on('click', this.onExpandClick, this, {stopEvent:true}); } if(this.floatable !== false || this.titleCollapse){ this.collapsedEl.addClassOnOver("x-layout-collapsed-over"); this.collapsedEl.on("click", this[this.floatable ? 'collapseClick' : 'onExpandClick'], this); } } } return this.collapsedEl; }, // private onExpandClick : function(e){ if(this.isSlid){ this.afterSlideIn(); this.panel.expand(false); }else{ this.panel.expand(); } }, // private onCollapseClick : function(e){ this.panel.collapse(); }, // private beforeCollapse : function(p, animate){ this.lastAnim = animate; if(this.splitEl){ this.splitEl.hide(); } this.getCollapsedEl().show(); this.panel.el.setStyle('z-index', 100); this.isCollapsed = true; this.layout.layout(); }, // private onCollapse : function(animate){ this.panel.el.setStyle('z-index', 1); if(this.lastAnim === false || this.panel.animCollapse === false){ this.getCollapsedEl().dom.style.visibility = 'visible'; }else{ this.getCollapsedEl().slideIn(this.panel.slideAnchor, {duration:.2}); } this.state.collapsed = true; this.panel.saveState(); }, // private beforeExpand : function(animate){ var c = this.getCollapsedEl(); this.el.show(); if(this.position == 'east' || this.position == 'west'){ this.panel.setSize(undefined, c.getHeight()); }else{ this.panel.setSize(c.getWidth(), undefined); } c.hide(); c.dom.style.visibility = 'hidden'; this.panel.el.setStyle('z-index', this.floatingZIndex); }, // private onExpand : function(){ this.isCollapsed = false; if(this.splitEl){ this.splitEl.show(); } this.layout.layout(); this.panel.el.setStyle('z-index', 1); this.state.collapsed = false; this.panel.saveState(); }, // private collapseClick : function(e){ if(this.isSlid){ e.stopPropagation(); this.slideIn(); }else{ e.stopPropagation(); this.slideOut(); } }, // private onHide : function(){ if(this.isCollapsed){ this.getCollapsedEl().hide(); }else if(this.splitEl){ this.splitEl.hide(); } }, // private onShow : function(){ if(this.isCollapsed){ this.getCollapsedEl().show(); }else if(this.splitEl){ this.splitEl.show(); } }, /** * True if this region is currently visible, else false. * @return {Boolean} */ isVisible : function(){ return !this.panel.hidden; }, /** * Returns the current margins for this region. If the region is collapsed, the * {@link #cmargins} (collapsed margins) value will be returned, otherwise the * {@link #margins} value will be returned. * @return {Object} An object containing the element's margins: <tt>{left: (left * margin), top: (top margin), right: (right margin), bottom: (bottom margin)}</tt> */ getMargins : function(){ return this.isCollapsed && this.cmargins ? this.cmargins : this.margins; }, /** * Returns the current size of this region. If the region is collapsed, the size of the * collapsedEl will be returned, otherwise the size of the region's panel will be returned. * @return {Object} An object containing the element's size: <tt>{width: (element width), * height: (element height)}</tt> */ getSize : function(){ return this.isCollapsed ? this.getCollapsedEl().getSize() : this.panel.getSize(); }, /** * Sets the specified panel as the container element for this region. * @param {Ext.Panel} panel The new panel */ setPanel : function(panel){ this.panel = panel; }, /** * Returns the minimum allowable width for this region. * @return {Number} The minimum width */ getMinWidth: function(){ return this.minWidth; }, /** * Returns the minimum allowable height for this region. * @return {Number} The minimum height */ getMinHeight: function(){ return this.minHeight; }, // private applyLayoutCollapsed : function(box){ var ce = this.getCollapsedEl(); ce.setLeftTop(box.x, box.y); ce.setSize(box.width, box.height); }, // private applyLayout : function(box){ if(this.isCollapsed){ this.applyLayoutCollapsed(box); }else{ this.panel.setPosition(box.x, box.y); this.panel.setSize(box.width, box.height); } }, // private beforeSlide: function(){ this.panel.beforeEffect(); }, // private afterSlide : function(){ this.panel.afterEffect(); }, // private initAutoHide : function(){ if(this.autoHide !== false){ if(!this.autoHideHd){ var st = new Ext.util.DelayedTask(this.slideIn, this); this.autoHideHd = { "mouseout": function(e){ if(!e.within(this.el, true)){ st.delay(500); } }, "mouseover" : function(e){ st.cancel(); }, scope : this }; } this.el.on(this.autoHideHd); } }, // private clearAutoHide : function(){ if(this.autoHide !== false){ this.el.un("mouseout", this.autoHideHd.mouseout); this.el.un("mouseover", this.autoHideHd.mouseover); } }, // private clearMonitor : function(){ Ext.getDoc().un("click", this.slideInIf, this); }, /** * If this Region is {@link #floatable}, this method slides this Region into full visibility <i>over the top * of the center Region</i> where it floats until either {@link #slideIn} is called, or other regions of the layout * are clicked, or the mouse exits the Region. */ slideOut : function(){ if(this.isSlid || this.el.hasActiveFx()){ return; } this.isSlid = true; var ts = this.panel.tools; if(ts && ts.toggle){ ts.toggle.hide(); } this.el.show(); if(this.position == 'east' || this.position == 'west'){ this.panel.setSize(undefined, this.collapsedEl.getHeight()); }else{ this.panel.setSize(this.collapsedEl.getWidth(), undefined); } 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); this.panel.el.replaceClass('x-panel-collapsed', 'x-panel-floating'); if(this.animFloat !== false){ this.beforeSlide(); this.el.slideIn(this.getSlideAnchor(), { callback: function(){ this.afterSlide(); this.initAutoHide(); Ext.getDoc().on("click", this.slideInIf, this); }, scope: this, block: true }); }else{ this.initAutoHide(); Ext.getDoc().on("click", this.slideInIf, this); } }, // private afterSlideIn : function(){ this.clearAutoHide(); this.isSlid = false; this.clearMonitor(); this.el.setStyle("z-index", ""); this.panel.el.replaceClass('x-panel-floating', 'x-panel-collapsed'); this.el.dom.style.left = this.restoreLT[0]; this.el.dom.style.top = this.restoreLT[1]; var ts = this.panel.tools; if(ts && ts.toggle){ ts.toggle.show(); } }, /** * If this Region is {@link #floatable}, and this Region has been slid into floating visibility, then this method slides * this region back into its collapsed state. */ slideIn : function(cb){ if(!this.isSlid || this.el.hasActiveFx()){ Ext.callback(cb); return; } this.isSlid = false; if(this.animFloat !== false){ this.beforeSlide(); this.el.slideOut(this.getSlideAnchor(), { callback: function(){ this.el.hide(); this.afterSlide(); this.afterSlideIn(); Ext.callback(cb); }, scope: this, block: true }); }else{ this.el.hide(); this.afterSlideIn(); } }, // private slideInIf : function(e){ if(!e.within(this.el)){ this.slideIn(); } }, // private anchors : { "west" : "left", "east" : "right", "north" : "top", "south" : "bottom" }, // private sanchors : { "west" : "l", "east" : "r", "north" : "t", "south" : "b" }, // private canchors : { "west" : "tl-tr", "east" : "tr-tl", "north" : "tl-bl", "south" : "bl-tl" }, // private getAnchor : function(){ return this.anchors[this.position]; }, // private getCollapseAnchor : function(){ return this.canchors[this.position]; }, // private getSlideAnchor : function(){ return this.sanchors[this.position]; }, // private getAlignAdj : function(){ var cm = this.cmargins; switch(this.position){ case "west": return [0, 0]; break; case "east": return [0, 0]; break; case "north": return [0, 0]; break; case "south": return [0, 0]; break; } }, // private getExpandAdj : function(){ var c = this.collapsedEl, cm = this.cmargins; switch(this.position){ case "west": return [-(cm.right+c.getWidth()+cm.left), 0]; break; case "east": return [cm.right+c.getWidth()+cm.left, 0]; break; case "north": return [0, -(cm.top+cm.bottom+c.getHeight())]; break; case "south": return [0, cm.top+cm.bottom+c.getHeight()]; break; } } }; /** * @class Ext.layout.BorderLayout.SplitRegion * @extends Ext.layout.BorderLayout.Region * <p>This is a specialized type of {@link Ext.layout.BorderLayout.Region BorderLayout region} that * has a built-in {@link Ext.SplitBar} for user resizing of regions. The movement of the split bar * is configurable to move either {@link #tickSize smooth or incrementally}.</p> * @constructor * Create a new SplitRegion. * @param {Layout} layout The {@link Ext.layout.BorderLayout BorderLayout} instance that is managing this Region. * @param {Object} config The configuration options * @param {String} position The region position. Valid values are: north, south, east, west and center. Every * BorderLayout must have a center region for the primary content -- all other regions are optional. */ Ext.layout.BorderLayout.SplitRegion = function(layout, config, pos){ Ext.layout.BorderLayout.SplitRegion.superclass.constructor.call(this, layout, config, pos); // prevent switch this.applyLayout = this.applyFns[pos]; }; Ext.extend(Ext.layout.BorderLayout.SplitRegion, Ext.layout.BorderLayout.Region, { /** * @cfg {Number} tickSize * The increment, in pixels by which to move this Region's {@link Ext.SplitBar SplitBar}. * By default, the {@link Ext.SplitBar SplitBar} moves smoothly. */ /** * @cfg {String} splitTip * The tooltip to display when the user hovers over a * {@link Ext.layout.BorderLayout.Region#collapsible non-collapsible} region's split bar * (defaults to <tt>"Drag to resize."</tt>). Only applies if * <tt>{@link #useSplitTips} = true</tt>. */ splitTip : "Drag to resize.", /** * @cfg {String} collapsibleSplitTip * The tooltip to display when the user hovers over a * {@link Ext.layout.BorderLayout.Region#collapsible collapsible} region's split bar * (defaults to "Drag to resize. Double click to hide."). Only applies if * <tt>{@link #useSplitTips} = true</tt>. */ collapsibleSplitTip : "Drag to resize. Double click to hide.", /** * @cfg {Boolean} useSplitTips * <tt>true</tt> to display a tooltip when the user hovers over a region's split bar * (defaults to <tt>false</tt>). The tooltip text will be the value of either * <tt>{@link #splitTip}</tt> or <tt>{@link #collapsibleSplitTip}</tt> as appropriate. */ useSplitTips : false, // private splitSettings : { north : { orientation: Ext.SplitBar.VERTICAL, placement: Ext.SplitBar.TOP, maxFn : 'getVMaxSize', minProp: 'minHeight', maxProp: 'maxHeight' }, south : { orientation: Ext.SplitBar.VERTICAL, placement: Ext.SplitBar.BOTTOM, maxFn : 'getVMaxSize', minProp: 'minHeight', maxProp: 'maxHeight' }, east : { orientation: Ext.SplitBar.HORIZONTAL, placement: Ext.SplitBar.RIGHT, maxFn : 'getHMaxSize', minProp: 'minWidth', maxProp: 'maxWidth' }, west : { orientation: Ext.SplitBar.HORIZONTAL, placement: Ext.SplitBar.LEFT, maxFn : 'getHMaxSize', minProp: 'minWidth', maxProp: 'maxWidth' } }, // private applyFns : { west : function(box){ if(this.isCollapsed){ return this.applyLayoutCollapsed(box); } var sd = this.splitEl.dom, s = sd.style; this.panel.setPosition(box.x, box.y); var sw = sd.offsetWidth; s.left = (box.x+box.width-sw)+'px'; s.top = (box.y)+'px'; s.height = Math.max(0, box.height)+'px'; this.panel.setSize(box.width-sw, box.height); }, east : function(box){ if(this.isCollapsed){ return this.applyLayoutCollapsed(box); } var sd = this.splitEl.dom, s = sd.style; var sw = sd.offsetWidth; this.panel.setPosition(box.x+sw, box.y); s.left = (box.x)+'px'; s.top = (box.y)+'px'; s.height = Math.max(0, box.height)+'px'; this.panel.setSize(box.width-sw, box.height); }, north : function(box){ if(this.isCollapsed){ return this.applyLayoutCollapsed(box); } var sd = this.splitEl.dom, s = sd.style; var sh = sd.offsetHeight; this.panel.setPosition(box.x, box.y); s.left = (box.x)+'px'; s.top = (box.y+box.height-sh)+'px'; s.width = Math.max(0, box.width)+'px'; this.panel.setSize(box.width, box.height-sh); }, south : function(box){ if(this.isCollapsed){ return this.applyLayoutCollapsed(box); } var sd = this.splitEl.dom, s = sd.style; var sh = sd.offsetHeight; this.panel.setPosition(box.x, box.y+sh); s.left = (box.x)+'px'; s.top = (box.y)+'px'; s.width = Math.max(0, box.width)+'px'; this.panel.setSize(box.width, box.height-sh); } }, // private render : function(ct, p){ Ext.layout.BorderLayout.SplitRegion.superclass.render.call(this, ct, p); var ps = this.position; this.splitEl = ct.createChild({ cls: "x-layout-split x-layout-split-"+ps, html: " ", id: this.panel.id + '-xsplit' }); if(this.collapseMode == 'mini'){ this.miniSplitEl = this.splitEl.createChild({ cls: "x-layout-mini x-layout-mini-"+ps, html: " " }); this.miniSplitEl.addClassOnOver('x-layout-mini-over'); this.miniSplitEl.on('click', this.onCollapseClick, this, {stopEvent:true}); } var s = this.splitSettings[ps]; this.split = new Ext.SplitBar(this.splitEl.dom, p.el, s.orientation); this.split.tickSize = this.tickSize; this.split.placement = s.placement; this.split.getMaximumSize = this[s.maxFn].createDelegate(this); this.split.minSize = this.minSize || this[s.minProp]; this.split.on("beforeapply", this.onSplitMove, this); this.split.useShim = this.useShim === true; this.maxSize = this.maxSize || this[s.maxProp]; if(p.hidden){ this.splitEl.hide(); } if(this.useSplitTips){ this.splitEl.dom.title = this.collapsible ? this.collapsibleSplitTip : this.splitTip; } if(this.collapsible){ this.splitEl.on("dblclick", this.onCollapseClick, this); } }, //docs inherit from superclass getSize : function(){ if(this.isCollapsed){ return this.collapsedEl.getSize(); } var s = this.panel.getSize(); if(this.position == 'north' || this.position == 'south'){ s.height += this.splitEl.dom.offsetHeight; }else{ s.width += this.splitEl.dom.offsetWidth; } return s; }, // private getHMaxSize : function(){ var cmax = this.maxSize || 10000; var center = this.layout.center; return Math.min(cmax, (this.el.getWidth()+center.el.getWidth())-center.getMinWidth()); }, // private getVMaxSize : function(){ var cmax = this.maxSize || 10000; var center = this.layout.center; return Math.min(cmax, (this.el.getHeight()+center.el.getHeight())-center.getMinHeight()); }, // private onSplitMove : function(split, newSize){ var s = this.panel.getSize(); this.lastSplitSize = newSize; if(this.position == 'north' || this.position == 'south'){ this.panel.setSize(s.width, newSize); this.state.height = newSize; }else{ this.panel.setSize(newSize, s.height); this.state.width = newSize; } this.layout.layout(); this.panel.saveState(); return false; }, /** * Returns a reference to the split bar in use by this region. * @return {Ext.SplitBar} The split bar */ getSplitBar : function(){ return this.split; }, // inherit docs destroy : function() { Ext.destroy( this.miniSplitEl, this.split, this.splitEl ); } }); Ext.Container.LAYOUTS['border'] = Ext.layout.BorderLayout;/** * @class Ext.layout.FormLayout * @extends Ext.layout.AnchorLayout * <p>This layout manager is specifically designed for rendering and managing child Components of * {@link Ext.form.FormPanel forms}. It is responsible for rendering the labels of * {@link Ext.form.Field Field}s.</p> * * <p>This layout manager is used when a Container is configured with the <tt>layout:'form'</tt> * {@link Ext.Container#layout layout} config option, and should generally not need to be created directly * via the new keyword. See <tt><b>{@link Ext.Container#layout}</b></tt> for additional details.</p> * * <p>In an application, it will usually be preferrable to use a {@link Ext.form.FormPanel FormPanel} * (which is configured with FormLayout as its layout class by default) since it also provides built-in * functionality for {@link Ext.form.BasicForm#doAction loading, validating and submitting} the form.</p> * * <p>A {@link Ext.Container Container} <i>using</i> the FormLayout layout manager (e.g. * {@link Ext.form.FormPanel} or specifying <tt>layout:'form'</tt>) can also accept the following * layout-specific config properties:<div class="mdetail-params"><ul> * <li><b><tt>{@link Ext.form.FormPanel#hideLabels hideLabels}</tt></b></li> * <li><b><tt>{@link Ext.form.FormPanel#labelAlign labelAlign}</tt></b></li> * <li><b><tt>{@link Ext.form.FormPanel#labelPad labelPad}</tt></b></li> * <li><b><tt>{@link Ext.form.FormPanel#labelSeparator labelSeparator}</tt></b></li> * <li><b><tt>{@link Ext.form.FormPanel#labelWidth labelWidth}</tt></b></li> * </ul></div></p> * * <p>Any Component (including Fields) managed by FormLayout accepts the following as a config option: * <div class="mdetail-params"><ul> * <li><b><tt>{@link Ext.Component#anchor anchor}</tt></b></li> * </ul></div></p> * * <p>Any Component managed by FormLayout may be rendered as a form field (with an associated label) by * configuring it with a non-null <b><tt>{@link Ext.Component#fieldLabel fieldLabel}</tt></b>. Components configured * in this way may be configured with the following options which affect the way the FormLayout renders them: * <div class="mdetail-params"><ul> * <li><b><tt>{@link Ext.Component#clearCls clearCls}</tt></b></li> * <li><b><tt>{@link Ext.Component#fieldLabel fieldLabel}</tt></b></li> * <li><b><tt>{@link Ext.Component#hideLabel hideLabel}</tt></b></li> * <li><b><tt>{@link Ext.Component#itemCls itemCls}</tt></b></li> * <li><b><tt>{@link Ext.Component#labelSeparator labelSeparator}</tt></b></li> * <li><b><tt>{@link Ext.Component#labelStyle labelStyle}</tt></b></li> * </ul></div></p> * * <p>Example usage:</p> * <pre><code> // Required if showing validation messages Ext.QuickTips.init(); // While you can create a basic Panel with layout:'form', practically // you should usually use a FormPanel to also get its form functionality // since it already creates a FormLayout internally. var form = new Ext.form.FormPanel({ title: 'Form Layout', bodyStyle: 'padding:15px', width: 350, defaultType: 'textfield', defaults: { // applied to each contained item width: 230, msgTarget: 'side' }, items: [{ fieldLabel: 'First Name', name: 'first', allowBlank: false, {@link Ext.Component#labelSeparator labelSeparator}: ':' // override labelSeparator layout config },{ fieldLabel: 'Last Name', name: 'last' },{ fieldLabel: 'Email', name: 'email', vtype:'email' }, { xtype: 'textarea', hideLabel: true, // override hideLabels layout config name: 'msg', anchor: '100% -53' } ], buttons: [ {text: 'Save'}, {text: 'Cancel'} ], layoutConfig: { {@link #labelSeparator}: '~' // superseded by assignment below }, // config options applicable to container when layout='form': hideLabels: false, labelAlign: 'left', // or 'right' or 'top' {@link Ext.form.FormPanel#labelSeparator labelSeparator}: '>>', // takes precedence over layoutConfig value labelWidth: 65, // defaults to 100 labelPad: 8 // defaults to 5, must specify labelWidth to be honored }); </code></pre> */ Ext.layout.FormLayout = Ext.extend(Ext.layout.AnchorLayout, { /** * @cfg {String} labelSeparator * See {@link Ext.form.FormPanel}.{@link Ext.form.FormPanel#labelSeparator labelSeparator}. Configuration * of this property at the <b>container</b> level takes precedence. */ labelSeparator : ':', /** * Read only. The CSS style specification string added to field labels in this layout if not * otherwise {@link Ext.Component#labelStyle specified by each contained field}. * @type String * @property labelStyle */ // private setContainer : function(ct){ Ext.layout.FormLayout.superclass.setContainer.call(this, ct); if(ct.labelAlign){ ct.addClass('x-form-label-'+ct.labelAlign); } if(ct.hideLabels){ this.labelStyle = "display:none"; this.elementStyle = "padding-left:0;"; this.labelAdjust = 0; }else{ this.labelSeparator = ct.labelSeparator || this.labelSeparator; ct.labelWidth = ct.labelWidth || 100; if(typeof ct.labelWidth == 'number'){ var pad = (typeof ct.labelPad == 'number' ? ct.labelPad : 5); this.labelAdjust = ct.labelWidth+pad; this.labelStyle = "width:"+ct.labelWidth+"px;"; this.elementStyle = "padding-left:"+(ct.labelWidth+pad)+'px'; } if(ct.labelAlign == 'top'){ this.labelStyle = "width:auto;"; this.labelAdjust = 0; this.elementStyle = "padding-left:0;"; } } }, //private getLabelStyle: function(s){ var ls = '', items = [this.labelStyle, s]; for (var i = 0, len = items.length; i < len; ++i){ if (items[i]){ ls += items[i]; if (ls.substr(-1, 1) != ';'){ ls += ';' } } } return ls; }, /** * @cfg {Ext.Template} fieldTpl * A {@link Ext.Template#compile compile}d {@link Ext.Template} for rendering * the fully wrapped, labeled and styled form Field. Defaults to:</p><pre><code> new Ext.Template( '<div class="x-form-item {itemCls}" tabIndex="-1">', '<label for="{id}" style="{labelStyle}" class="x-form-item-label">{label}{labelSeparator}</label>', '<div class="x-form-element" id="x-form-el-{id}" style="{elementStyle}">', '</div><div class="{clearCls}"></div>', '</div>' ); </code></pre> * <p>This may be specified to produce a different DOM structure when rendering form Fields.</p> * <p>A description of the properties within the template follows:</p><div class="mdetail-params"><ul> * <li><b><tt>itemCls</tt></b> : String<div class="sub-desc">The CSS class applied to the outermost div wrapper * that contains this field label and field element (the default class is <tt>'x-form-item'</tt> and <tt>itemCls</tt> * will be added to that). If supplied, <tt>itemCls</tt> at the field level will override the default <tt>itemCls</tt> * supplied at the container level.</div></li> * <li><b><tt>id</tt></b> : String<div class="sub-desc">The id of the Field</div></li> * <li><b><tt>{@link #labelStyle}</tt></b> : String<div class="sub-desc"> * A CSS style specification string to add to the field label for this field (defaults to <tt>''</tt> or the * {@link #labelStyle layout's value for <tt>labelStyle</tt>}).</div></li> * <li><b><tt>label</tt></b> : String<div class="sub-desc">The text to display as the label for this * field (defaults to <tt>''</tt>)</div></li> * <li><b><tt>{@link #labelSeparator}</tt></b> : String<div class="sub-desc">The separator to display after * the text of the label for this field (defaults to a colon <tt>':'</tt> or the * {@link #labelSeparator layout's value for labelSeparator}). To hide the separator use empty string ''.</div></li> * <li><b><tt>elementStyle</tt></b> : String<div class="sub-desc">The styles text for the input element's wrapper.</div></li> * <li><b><tt>clearCls</tt></b> : String<div class="sub-desc">The CSS class to apply to the special clearing div * rendered directly after each form field wrapper (defaults to <tt>'x-form-clear-left'</tt>)</div></li> * </ul></div> * <p>Also see <tt>{@link #getTemplateArgs}</tt></p> */ // private renderItem : function(c, position, target){ if(c && !c.rendered && (c.isFormField || c.fieldLabel) && c.inputType != 'hidden'){ var args = this.getTemplateArgs(c); if(typeof position == 'number'){ position = target.dom.childNodes[position] || null; } if(position){ this.fieldTpl.insertBefore(position, args); }else{ this.fieldTpl.append(target, args); } c.render('x-form-el-'+c.id); }else { Ext.layout.FormLayout.superclass.renderItem.apply(this, arguments); } }, /** * <p>Provides template arguments for rendering the fully wrapped, labeled and styled form Field.</p> * <p>This method returns an object hash containing properties used by the layout's {@link #fieldTpl} * to create a correctly wrapped, labeled and styled form Field. This may be overriden to * create custom layouts. The properties which must be returned are:</p><div class="mdetail-params"><ul> * <li><b><tt>itemCls</tt></b> : String<div class="sub-desc">The CSS class applied to the outermost div wrapper * that contains this field label and field element (the default class is <tt>'x-form-item'</tt> and <tt>itemCls</tt> * will be added to that). If supplied, <tt>itemCls</tt> at the field level will override the default <tt>itemCls</tt> * supplied at the container level.</div></li> * <li><b><tt>id</tt></b> : String<div class="sub-desc">The id of the Field</div></li> * <li><b><tt>{@link #labelStyle}</tt></b> : String<div class="sub-desc"> * A CSS style specification string to add to the field label for this field (defaults to <tt>''</tt> or the * {@link #labelStyle layout's value for <tt>labelStyle</tt>}).</div></li> * <li><b><tt>label</tt></b> : String<div class="sub-desc">The text to display as the label for this * field (defaults to <tt>''</tt>)</div></li> * <li><b><tt>{@link #labelSeparator}</tt></b> : String<div class="sub-desc">The separator to display after * the text of the label for this field (defaults to a colon <tt>':'</tt> or the * {@link #labelSeparator layout's value for labelSeparator}). To hide the separator use empty string ''.</div></li> * <li><b><tt>elementStyle</tt></b> : String<div class="sub-desc">The styles text for the input element's wrapper.</div></li> * <li><b><tt>clearCls</tt></b> : String<div class="sub-desc">The CSS class to apply to the special clearing div * rendered directly after each form field wrapper (defaults to <tt>'x-form-clear-left'</tt>)</div></li> * </ul></div> * @param field The {@link Field Ext.form.Field} being rendered. * @return An object hash containing the properties required to render the Field. */ getTemplateArgs: function(field) { var noLabelSep = !field.fieldLabel || field.hideLabel; return { id: field.id, label: field.fieldLabel, labelStyle: field.labelStyle||this.labelStyle||'', elementStyle: this.elementStyle||'', labelSeparator: noLabelSep ? '' : (typeof field.labelSeparator == 'undefined' ? this.labelSeparator : field.labelSeparator), itemCls: (field.itemCls||this.container.itemCls||'') + (field.hideLabel ? ' x-hide-label' : ''), clearCls: field.clearCls || 'x-form-clear-left' }; }, // private adjustWidthAnchor : function(value, comp){ return value - (comp.isFormField || comp.fieldLabel ? (comp.hideLabel ? 0 : this.labelAdjust) : 0); }, // private isValidParent : function(c, target){ return true; } /** * @property activeItem * @hide */ }); Ext.Container.LAYOUTS['form'] = Ext.layout.FormLayout;/**
* @class Ext.layout.AccordionLayout
* @extends Ext.layout.FitLayout
* <p>This is a layout that contains multiple panels in an expandable accordion style such that only
* <b>one panel can be open at any given time</b>. Each panel has built-in support for expanding and collapsing.
* <p>This class is intended to be extended or created via the <tt><b>{@link Ext.Container#layout layout}</b></tt>
* configuration property. See <tt><b>{@link Ext.Container#layout}</b></tt> for additional details.</p>
* <p>Example usage:</p>
* <pre><code>
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>'
}]
});
</code></pre>
*/
Ext.layout.AccordionLayout = Ext.extend(Ext.layout.FitLayout, {
/**
* @cfg {Boolean} fill
* True to adjust the active item's height to fill the available space in the container, false to use the
* item's current height, or auto height if not explicitly set (defaults to true).
*/
fill : true,
/**
* @cfg {Boolean} autoWidth
* True to set each contained item's width to 'auto', false to use the item's current width (defaults to true).
* Note that some components, in particular the {@link Ext.grid.GridPanel grid}, will not function properly within
* layouts if they have auto width, so in such cases this config should be set to false.
*/
autoWidth : true,
/**
* @cfg {Boolean} titleCollapse
* True to allow expand/collapse of each contained panel by clicking anywhere on the title bar, false to allow
* expand/collapse only when the toggle tool button is clicked (defaults to true). When set to false,
* {@link #hideCollapseTool} should be false also.
*/
titleCollapse : true,
/**
* @cfg {Boolean} hideCollapseTool
* True to hide the contained panels' collapse/expand toggle buttons, false to display them (defaults to false).
* When set to true, {@link #titleCollapse} should be true also.
*/
hideCollapseTool : 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 contained panels' title bars, false to render it last (defaults to false).
*/
collapseFirst : false,
/**
* @cfg {Boolean} animate
* True to slide the contained panels open and closed during expand/collapse using animation, false to open and
* close directly with no animation (defaults to false). Note: to defer to the specific config setting of each
* contained panel for this property, set this to undefined at the layout level.
*/
animate : false,
/**
* @cfg {Boolean} sequence
* <b>Experimental</b>. If animate is set to true, this will result in each animation running in sequence.
*/
sequence : false,
/**
* @cfg {Boolean} activeOnTop
* True to swap the position of each panel as it is expanded so that it becomes the first item in the container,
* false to keep the panels in the rendered order. <b>This is NOT compatible with "animate:true"</b> (defaults to false).
*/
activeOnTop : false,
renderItem : function(c){
if(this.animate === false){
c.animCollapse = false;
}
c.collapsible = true;
if(this.autoWidth){
c.autoWidth = true;
}
if(this.titleCollapse){
c.titleCollapse = true;
}
if(this.hideCollapseTool){
c.hideCollapseTool = true;
}
if(this.collapseFirst !== undefined){
c.collapseFirst = this.collapseFirst;
}
if(!this.activeItem && !c.collapsed){
this.activeItem = c;
}else if(this.activeItem && this.activeItem != c){
c.collapsed = true;
}
Ext.layout.AccordionLayout.superclass.renderItem.apply(this, arguments);
c.header.addClass('x-accordion-hd');
c.on('beforeexpand', this.beforeExpand, this);
},
// private
beforeExpand : function(p, anim){
var ai = this.activeItem;
if(ai){
if(this.sequence){
delete this.activeItem;
if (!ai.collapsed){
ai.collapse({callback:function(){
p.expand(anim || true);
}, scope: this});
return false;
}
}else{
ai.collapse(this.animate);
}
}
this.activeItem = p;
if(this.activeOnTop){
p.el.dom.parentNode.insertBefore(p.el.dom, p.el.dom.parentNode.firstChild);
}
this.layout();
},
// private
setItemSize : function(item, size){
if(this.fill && item){
var hh = 0;
this.container.items.each(function(p){
if(p != item){
hh += p.header.getHeight();
}
});
size.height -= hh;
item.setSize(size);
}
},
/**
* Sets the active (expanded) item in the layout.
* @param {String/Number} item The string component id or numeric index of the item to activate
*/
setActiveItem : function(item){
item = this.container.getComponent(item);
if(this.activeItem != item){
if(item.rendered && item.collapsed){
item.expand();
}else{
this.activeItem = item;
}
}
}
});
Ext.Container.LAYOUTS.accordion = Ext.layout.AccordionLayout;
//backwards compat
Ext.layout.Accordion = Ext.layout.AccordionLayout;/**
* @class Ext.layout.TableLayout
* @extends Ext.layout.ContainerLayout
* <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.</p>
* <p>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:</p>
* <ul>
* <li><b>rowspan</b> Applied to the table cell containing the item.</li>
* <li><b>colspan</b> Applied to the table cell containing the item.</li>
* <li><b>cellId</b> An id applied to the table cell containing the item.</li>
* <li><b>cellCls</b> A CSS class name added to the table cell containing the item.</li>
* </ul>
* <p>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:</p>
* <pre><code>
// 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>'
}]
});
</code></pre>
*/
Ext.layout.TableLayout = Ext.extend(Ext.layout.ContainerLayout, {
/**
* @cfg {Number} columns
* The total number of columns to create in the table for this layout. If not specified, all Components added to
* this layout will be rendered into a single row using one column per Component.
*/
// private
monitorResize:false,
/**
* @cfg {Object} tableAttrs
* <p>An object containing properties which are added to the {@link Ext.DomHelper DomHelper} specification
* used to create the layout's <tt><table></tt> element. Example:</p><pre><code>
{
xtype: 'panel',
layout: 'table',
layoutConfig: {
tableAttrs: {
style: {
width: '100%'
}
},
columns: 3
}
}</code></pre>
*/
tableAttrs:null,
// private
setContainer : function(ct){
Ext.layout.TableLayout.superclass.setContainer.call(this, ct);
this.currentRow = 0;
this.currentColumn = 0;
this.cells = [];
},
// private
onLayout : function(ct, target){
var cs = ct.items.items, len = cs.length, c, i;
if(!this.table){
target.addClass('x-table-layout-ct');
this.table = target.createChild(
Ext.apply({tag:'table', cls:'x-table-layout', cellspacing: 0, cn: {tag: 'tbody'}}, this.tableAttrs), null, true);
}
this.renderAll(ct, target);
},
// private
getRow : function(index){
var row = this.table.tBodies[0].childNodes[index];
if(!row){
row = document.createElement('tr');
this.table.tBodies[0].appendChild(row);
}
return row;
},
// private
getNextCell : function(c){
var cell = this.getNextNonSpan(this.currentColumn, this.currentRow);
var curCol = this.currentColumn = cell[0], curRow = this.currentRow = cell[1];
for(var rowIndex = curRow; rowIndex < curRow + (c.rowspan || 1); rowIndex++){
if(!this.cells[rowIndex]){
this.cells[rowIndex] = [];
}
for(var colIndex = curCol; colIndex < curCol + (c.colspan || 1); colIndex++){
this.cells[rowIndex][colIndex] = true;
}
}
var td = document.createElement('td');
if(c.cellId){
td.id = c.cellId;
}
var cls = 'x-table-layout-cell';
if(c.cellCls){
cls += ' ' + c.cellCls;
}
td.className = cls;
if(c.colspan){
td.colSpan = c.colspan;
}
if(c.rowspan){
td.rowSpan = c.rowspan;
}
this.getRow(curRow).appendChild(td);
return td;
},
// private
getNextNonSpan: function(colIndex, rowIndex){
var cols = this.columns;
while((cols && colIndex >= cols) || (this.cells[rowIndex] && this.cells[rowIndex][colIndex])) {
if(cols && colIndex >= cols){
rowIndex++;
colIndex = 0;
}else{
colIndex++;
}
}
return [colIndex, rowIndex];
},
// private
renderItem : function(c, position, target){
if(c && !c.rendered){
c.render(this.getNextCell(c));
if(this.extraCls){
var t = c.getPositionEl ? c.getPositionEl() : c;
t.addClass(this.extraCls);
}
}
},
// private
isValidParent : function(c, target){
return true;
}
/**
* @property activeItem
* @hide
*/
});
Ext.Container.LAYOUTS['table'] = Ext.layout.TableLayout;/**
* @class Ext.layout.AbsoluteLayout
* @extends Ext.layout.AnchorLayout
* <p>This is a layout that inherits the anchoring of <b>{@link Ext.layout.AnchorLayout}</b> and adds the
* ability for x/y positioning using the standard x and y component config options.</p>
* <p>This class is intended to be extended or created via the <tt><b>{@link Ext.Container#layout layout}</b></tt>
* configuration property. See <tt><b>{@link Ext.Container#layout}</b></tt> for additional details.</p>
* <p>Example usage:</p>
* <pre><code>
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
}]
});
</code></pre>
*/
Ext.layout.AbsoluteLayout = Ext.extend(Ext.layout.AnchorLayout, {
extraCls: 'x-abs-layout-item',
onLayout : function(ct, target){
target.position();
this.paddingLeft = target.getPadding('l');
this.paddingTop = target.getPadding('t');
Ext.layout.AbsoluteLayout.superclass.onLayout.call(this, ct, target);
},
// private
adjustWidthAnchor : function(value, comp){
return value ? value - comp.getPosition(true)[0] + this.paddingLeft : value;
},
// private
adjustHeightAnchor : function(value, comp){
return value ? value - comp.getPosition(true)[1] + this.paddingTop : value;
}
/**
* @property activeItem
* @hide
*/
});
Ext.Container.LAYOUTS['absolute'] = Ext.layout.AbsoluteLayout; /**
* @class Ext.layout.BoxLayout
* @extends Ext.layout.ContainerLayout
* <p>Base Class for HBoxLayout and VBoxLayout Classes. Generally it should not need to be used directly.</p>
*/
Ext.layout.BoxLayout = Ext.extend(Ext.layout.ContainerLayout, {
/**
* @cfg {Object} defaultMargins
* <p>If the individual contained items do not have a <tt>margins</tt>
* property specified, the default margins from this property will be
* applied to each item.</p>
* <br><p>This property may be specified as an object containing margins
* to apply in the format:</p><pre><code>
{
top: (top margin),
right: (right margin),
bottom: (bottom margin),
left: (left margin)
}</code></pre>
* <p>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:</p>
* <div class="mdetail-params"><ul>
* <li>If there is only one value, it applies to all sides.</li>
* <li>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.</li>
* <li>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.</li>
* <li>If there are four values, they apply to the top, right, bottom, and
* left, respectively.</li>
* </ul></div>
* <p>Defaults to:</p><pre><code>
* {top:0, right:0, bottom:0, left:0}
* </code></pre>
*/
defaultMargins : {left:0,top:0,right:0,bottom:0},
/**
* @cfg {String} padding
* Defaults to <tt>'0'</tt>. Sets the padding to be applied to all child items managed by this
* container's layout.
*/
padding : '0',
// documented in subclasses
pack : 'start',
// private
monitorResize : true,
scrollOffset : 0,
extraCls : 'x-box-item',
ctCls : 'x-box-layout-ct',
innerCls : 'x-box-inner',
// private
isValidParent : function(c, target){
return c.getEl().dom.parentNode == this.innerCt.dom;
},
// private
onLayout : function(ct, target){
var cs = ct.items.items, len = cs.length, c, i, last = len-1, cm;
if(!this.innerCt){
target.addClass(this.ctCls);
// the innerCt prevents wrapping and shuffling while
// the container is resizing
this.innerCt = target.createChild({cls:this.innerCls});
this.padding = this.parseMargins(this.padding);
}
this.renderAll(ct, this.innerCt);
},
// private
renderItem : function(c){
if(typeof c.margins == 'string'){
c.margins = this.parseMargins(c.margins);
}else if(!c.margins){
c.margins = this.defaultMargins;
}
Ext.layout.BoxLayout.superclass.renderItem.apply(this, arguments);
},
getTargetSize : function(target){ return (Ext.isIE6 && Ext.isStrict && target.dom == document.body) ? target.getStyleSize() : target.getViewSize();
},
getItems: function(ct){
var items = [];
ct.items.each(function(c){
if(c.isVisible()){
items.push(c);
}
});
return items;
}
/**
* @property activeItem
* @hide
*/
});
/**
* @class Ext.layout.VBoxLayout
* @extends Ext.layout.BoxLayout
* A layout that arranges items vertically
*/
Ext.layout.VBoxLayout = Ext.extend(Ext.layout.BoxLayout, {
/**
* @cfg {String} align
* Controls how the child items of the container are aligned. Acceptable configuration values for this
* property are:
* <div class="mdetail-params"><ul>
* <li><b><tt>left</tt></b> : <b>Default</b><div class="sub-desc">child items are aligned horizontally
* at the <b>left</b> side of the container</div></li>
* <li><b><tt>center</tt></b> : <div class="sub-desc">child items are aligned horizontally at the
* <b>mid-width</b> of the container</div></li>
* <li><b><tt>stretch</tt></b> : <div class="sub-desc">child items are stretched horizontally to fill
* the width of the container</div></li>
* <li><b><tt>stretchmax</tt></b> : <div class="sub-desc">child items are stretched horizontally to
* the size of the largest item.</div></li>
* </ul></div>
*/
align : 'left', // left, center, stretch, strechmax
/**
* @cfg {String} pack
* Controls how the child items of the container are packed together. Acceptable configuration values
* for this property are:
* <div class="mdetail-params"><ul>
* <li><b><tt>start</tt></b> : <b>Default</b><div class="sub-desc">child items are packed together at
* <b>top</b> side of container</div></li>
* <li><b><tt>center</tt></b> : <div class="sub-desc">child items are packed together at
* <b>mid-height</b> of container</div></li>
* <li><b><tt>end</tt></b> : <div class="sub-desc">child items are packed together at <b>bottom</b>
* side of container</div></li>
* </ul></div>
*/
/**
* @cfg {Number} flex
* This configuation option is to be applied to <b>child <tt>items</tt></b> of the container managed
* by this layout. Each child item with a <tt>flex</tt> property will be flexed <b>vertically</b>
* according to each item's <b>relative</b> <tt>flex</tt> value compared to the sum of all items with
* a <tt>flex</tt> value specified. Any child items that have either a <tt>flex = 0</tt> or
* <tt>flex = undefined</tt> will not be 'flexed' (the initial size will not be changed).
*/
// private
onLayout : function(ct, target){
Ext.layout.VBoxLayout.superclass.onLayout.call(this, ct, target);
var cs = this.getItems(ct), cm, ch, margin,
size = this.getTargetSize(target),
w = size.width - target.getPadding('lr') - this.scrollOffset,
h = size.height - target.getPadding('tb'),
l = this.padding.left, t = this.padding.top,
isStart = this.pack == 'start',
isRestore = ['stretch', 'stretchmax'].indexOf(this.align) == -1,
stretchWidth = w - (this.padding.left + this.padding.right),
extraHeight = 0,
maxWidth = 0,
totalFlex = 0,
flexHeight = 0,
usedHeight = 0;
Ext.each(cs, function(c){
cm = c.margins;
totalFlex += c.flex || 0;
ch = c.getHeight();
margin = cm.top + cm.bottom;
extraHeight += ch + margin;
flexHeight += margin + (c.flex ? 0 : ch);
maxWidth = Math.max(maxWidth, c.getWidth() + cm.left + cm.right);
});
extraHeight = h - extraHeight - this.padding.top - this.padding.bottom;
var innerCtWidth = maxWidth + this.padding.left + this.padding.right;
switch(this.align){
case 'stretch':
this.innerCt.setSize(w, h);
break;
case 'stretchmax':
case 'left':
this.innerCt.setSize(innerCtWidth, h);
break;
case 'center':
this.innerCt.setSize(w = Math.max(w, innerCtWidth), h);
break;
}
var availHeight = Math.max(0, h - this.padding.top - this.padding.bottom - flexHeight),
leftOver = availHeight,
heights = [],
restore = [],
idx = 0,
availableWidth = Math.max(0, w - this.padding.left - this.padding.right);
Ext.each(cs, function(c){
if(isStart && c.flex){
ch = Math.floor(availHeight * (c.flex / totalFlex));
leftOver -= ch;
heights.push(ch);
}
});
if(this.pack == 'center'){
t += extraHeight ? extraHeight / 2 : 0;
}else if(this.pack == 'end'){
t += extraHeight;
}
Ext.each(cs, function(c){
cm = c.margins;
t += cm.top;
c.setPosition(l + cm.left, t);
if(isStart && c.flex){
ch = Math.max(0, heights[idx++] + (leftOver-- > 0 ? 1 : 0));
if(isRestore){
restore.push(c.getWidth());
}
c.setSize(availableWidth, ch);
}else{
ch = c.getHeight();
}
t += ch + cm.bottom;
});
idx = 0;
Ext.each(cs, function(c){
cm = c.margins;
if(this.align == 'stretch'){
c.setWidth((stretchWidth - (cm.left + cm.right)).constrain(
c.minWidth || 0, c.maxWidth || 1000000));
}else if(this.align == 'stretchmax'){
c.setWidth((maxWidth - (cm.left + cm.right)).constrain(
c.minWidth || 0, c.maxWidth || 1000000));
}else{
if(this.align == 'center'){
var diff = availableWidth - (c.getWidth() + cm.left + cm.right);
if(diff > 0){
c.setPosition(l + cm.left + (diff/2), c.y);
}
}
if(isStart && c.flex){
c.setWidth(restore[idx++]);
}
}
}, this);
}
/**
* @property activeItem
* @hide
*/
});
Ext.Container.LAYOUTS.vbox = Ext.layout.VBoxLayout;
/**
* @class Ext.layout.HBoxLayout
* @extends Ext.layout.BoxLayout
* A layout that arranges items horizontally
*/
Ext.layout.HBoxLayout = Ext.extend(Ext.layout.BoxLayout, {
/**
* @cfg {String} align
* Controls how the child items of the container are aligned. Acceptable configuration values for this
* property are:
* <div class="mdetail-params"><ul>
* <li><b><tt>top</tt></b> : <b>Default</b><div class="sub-desc">child items are aligned vertically
* at the <b>left</b> side of the container</div></li>
* <li><b><tt>middle</tt></b> : <div class="sub-desc">child items are aligned vertically at the
* <b>mid-height</b> of the container</div></li>
* <li><b><tt>stretch</tt></b> : <div class="sub-desc">child items are stretched vertically to fill
* the height of the container</div></li>
* <li><b><tt>stretchmax</tt></b> : <div class="sub-desc">child items are stretched vertically to
* the size of the largest item.</div></li>
*/
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:
* <div class="mdetail-params"><ul>
* <li><b><tt>start</tt></b> : <b>Default</b><div class="sub-desc">child items are packed together at
* <b>left</b> side of container</div></li>
* <li><b><tt>center</tt></b> : <div class="sub-desc">child items are packed together at
* <b>mid-width</b> of container</div></li>
* <li><b><tt>end</tt></b> : <div class="sub-desc">child items are packed together at <b>right</b>
* side of container</div></li>
* </ul></div>
*/
/**
* @cfg {Number} flex
* This configuation option is to be applied to <b>child <tt>items</tt></b> of the container managed
* by this layout. Each child item with a <tt>flex</tt> property will be flexed <b>horizontally</b>
* according to each item's <b>relative</b> <tt>flex</tt> value compared to the sum of all items with
* a <tt>flex</tt> value specified. Any child items that have either a <tt>flex = 0</tt> or
* <tt>flex = undefined</tt> will not be 'flexed' (the initial size will not be changed).
*/
// private
onLayout : function(ct, target){
Ext.layout.HBoxLayout.superclass.onLayout.call(this, ct, target);
var cs = this.getItems(ct), cm, cw, margin,
size = this.getTargetSize(target),
w = size.width - target.getPadding('lr') - this.scrollOffset,
h = size.height - target.getPadding('tb'),
l = this.padding.left, t = this.padding.top,
isStart = this.pack == 'start',
isRestore = ['stretch', 'stretchmax'].indexOf(this.align) == -1,
stretchHeight = h - (this.padding.top + this.padding.bottom),
extraWidth = 0,
maxHeight = 0,
totalFlex = 0,
flexWidth = 0,
usedWidth = 0;
Ext.each(cs, function(c){
cm = c.margins;
totalFlex += c.flex || 0;
cw = c.getWidth();
margin = cm.left + cm.right;
extraWidth += cw + margin;
flexWidth += margin + (c.flex ? 0 : cw);
maxHeight = Math.max(maxHeight, c.getHeight() + cm.top + cm.bottom);
});
extraWidth = w - extraWidth - this.padding.left - this.padding.right;
var innerCtHeight = maxHeight + this.padding.top + this.padding.bottom;
switch(this.align){
case 'stretch':
this.innerCt.setSize(w, h);
break;
case 'stretchmax':
case 'top':
this.innerCt.setSize(w, innerCtHeight);
break;
case 'middle':
this.innerCt.setSize(w, h = Math.max(h, innerCtHeight));
break;
}
var availWidth = Math.max(0, w - this.padding.left - this.padding.right - flexWidth),
leftOver = availWidth,
widths = [],
restore = [],
idx = 0,
availableHeight = Math.max(0, h - this.padding.top - this.padding.bottom);
Ext.each(cs, function(c){
if(isStart && c.flex){
cw = Math.floor(availWidth * (c.flex / totalFlex));
leftOver -= cw;
widths.push(cw);
}
});
if(this.pack == 'center'){
l += extraWidth ? extraWidth / 2 : 0;
}else if(this.pack == 'end'){
l += extraWidth;
}
Ext.each(cs, function(c){
cm = c.margins;
l += cm.left;
c.setPosition(l, t + cm.top);
if(isStart && c.flex){
cw = Math.max(0, widths[idx++] + (leftOver-- > 0 ? 1 : 0));
if(isRestore){
restore.push(c.getHeight());
}
c.setSize(cw, availableHeight);
}else{
cw = c.getWidth();
}
l += cw + cm.right;
});
idx = 0;
Ext.each(cs, function(c){
var cm = c.margins;
if(this.align == 'stretch'){
c.setHeight((stretchHeight - (cm.top + cm.bottom)).constrain(
c.minHeight || 0, c.maxHeight || 1000000));
}else if(this.align == 'stretchmax'){
c.setHeight((maxHeight - (cm.top + cm.bottom)).constrain(
c.minHeight || 0, c.maxHeight || 1000000));
}else{
if(this.align == 'middle'){
var diff = availableHeight - (c.getHeight() + cm.top + cm.bottom);
if(diff > 0){
c.setPosition(c.x, t + cm.top + (diff/2));
}
}
if(isStart && c.flex){
c.setHeight(restore[idx++]);
}
}
}, this);
}
/**
* @property activeItem
* @hide
*/
});
Ext.Container.LAYOUTS.hbox = Ext.layout.HBoxLayout; /**
* @class Ext.Viewport
* @extends Ext.Container
* <p>A specialized container representing the viewable application area (the browser viewport).</p>
* <p>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.</p>
* <p>The Viewport does not provide scrolling, so child Panels within the Viewport should provide
* for scrolling if needed using the {@link #autoScroll} config.</p>
* <p>An example showing a classic application border layout:</p><pre><code>
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'
}
}]
});
</code></pre>
* @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 * <p>Panel is a container that has specific functionality and structural components that make * it the perfect building block for application-oriented user interfaces.</p> * <p>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.</p> * <p>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 <tt><b>{@link Ext.Container#layout layout}</b></tt> 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 <b>does not apply any sizing</b> * at all.</p> * <p>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).</p> * <p>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}.</p> * @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. * <p>This Element is used to house the {@link #title} and {@link #tools}</p> * <br><p><b>Note</b>: see the Note for <tt>{@link Ext.Component#el el} also.</p> * @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. * <p>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.</p> * <p>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. * <br><p><b>Note</b>: see the Note for <tt>{@link Ext.Component#el el} also.</p> * @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 * <p>A {@link Ext.DomHelper DomHelper} element specification object may be specified for any * Panel Element.</p> * <p>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 (<tt>baseCls</tt> will be * replaced by <tt>{@link #baseCls}</tt>):</p> * <pre> * 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 * </pre> * <p>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:</p> * <pre><code> new Ext.Panel({ title: 'Message Title', renderTo: Ext.getBody(), width: 200, height: 130, <b>bodyCfg</b>: { 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} }); * </code></pre> * <p>The example above also explicitly creates a <tt>{@link #footer}</tt> with custom markup and * styling applied.</p> */ /** * @cfg {Object} headerCfg * <p>A {@link Ext.DomHelper DomHelper} element specification object specifying the element structure * of this Panel's {@link #header} Element. See <tt>{@link #bodyCfg}</tt> also.</p> */ /** * @cfg {Object} bwrapCfg * <p>A {@link Ext.DomHelper DomHelper} element specification object specifying the element structure * of this Panel's {@link #bwrap} Element. See <tt>{@link #bodyCfg}</tt> also.</p> */ /** * @cfg {Object} tbarCfg * <p>A {@link Ext.DomHelper DomHelper} element specification object specifying the element structure * of this Panel's {@link #tbar} Element. See <tt>{@link #bodyCfg}</tt> also.</p> */ /** * @cfg {Object} bbarCfg * <p>A {@link Ext.DomHelper DomHelper} element specification object specifying the element structure * of this Panel's {@link #bbar} Element. See <tt>{@link #bodyCfg}</tt> also.</p> */ /** * @cfg {Object} footerCfg * <p>A {@link Ext.DomHelper DomHelper} element specification object specifying the element structure * of this Panel's {@link #footer} Element. See <tt>{@link #bodyCfg}</tt> also.</p> */ /** * @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 <tt>true</tt> * to enable closing in such situations. Defaults to <tt>false</tt>. */ /** * The Panel's footer {@link Ext.Element Element}. Read-only. * <p>This Element is used to house the Panel's <tt>{@link #buttons}</tt> or <tt>{@link #fbar}</tt>.</p> * <br><p><b>Note</b>: see the Note for <tt>{@link Ext.Component#el el} also.</p> * @type Ext.Element * @property footer */ /** * @cfg {Mixed} applyTo * <p>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 <tt>applyTo</tt> 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.</p> * <p>The following class names are supported (baseCls will be replaced by {@link #baseCls}):</p> * <ul><li>baseCls + '-header'</li> * <li>baseCls + '-header-text'</li> * <li>baseCls + '-bwrap'</li> * <li>baseCls + '-tbar'</li> * <li>baseCls + '-body'</li> * <li>baseCls + '-bbar'</li> * <li>baseCls + '-footer'</li></ul> * <p>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.</p> */ /** * @cfg {Object/Array} tbar * <p>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}.</p> * <p><b>Note:</b> Although a Toolbar may contain Field components, these will <b>not</b> 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 <b>will</b> be submitted because form * submission parameters are collected from the DOM tree.</p> */ /** * @cfg {Object/Array} bbar * <p>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}.</p> * <p><b>Note:</b> Although a Toolbar may contain Field components, these will <b>not<b> 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 <b>will</b> be submitted because form * submission parameters are collected from the DOM tree.</p> */ /** @cfg {Object/Array} fbar * <p>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.</p> * <p>After render, the <code>fbar</code> property will be an {@link Ext.Toolbar Toolbar} instance.</p> * <p>If <tt>{@link #buttons}</tt> are specified, they will supersede the <tt>fbar</tt> configuration property.</p> * The Panel's <tt>{@link #buttonAlign}</tt> configuration affects the layout of these items, for example: * <pre><code> 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(); * </code></pre> * <p><b>Note:</b> Although a Toolbar may contain Field components, these will <b>not<b> 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 <b>will</b> be submitted because form * submission parameters are collected from the DOM tree.</p> */ /** * @cfg {Boolean} header * <tt>true</tt> to create the Panel's header element explicitly, <tt>false</tt> to skip creating * it. If a <tt>{@link #title}</tt> is set the header will be created automatically, otherwise it will not. * If a <tt>{@link #title}</tt> is set but <tt>header</tt> is explicitly set to <tt>false</tt>, the header * will not be rendered. */ /** * @cfg {Boolean} footer * <tt>true</tt> to create the footer element explicitly, false to skip creating it. The footer * will be created automatically if <tt>{@link #buttons}</tt> or a <tt>{@link #fbar}</tt> have * been configured. See <tt>{@link #bodyCfg}</tt> for an example. */ /** * @cfg {String} title * The title text to be used as innerHTML (html tags are accepted) to display in the panel * <tt>{@link #header}</tt> (defaults to ''). When a <tt>title</tt> is specified the * <tt>{@link #header}</tt> element will automatically be created and displayed unless * {@link #header} is explicitly set to <tt>false</tt>. If you do not want to specify a * <tt>title</tt> at config time, but you may want one later, you must either specify a non-empty * <tt>title</tt> (a blank space ' ' will do) or <tt>header:true</tt> so that the container * element will get created. */ /** * @cfg {Array} buttons * <tt>buttons</tt> will be used as <tt>{@link Ext.Container#items items}</tt> for the toolbar in * the footer (<tt>{@link #fbar}</tt>). 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 <tt>minWidth</tt> or the Panel is configured with <tt>minButtonWidth</tt>, * 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.<p> * 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.</p> */ /** * @cfg {Boolean} frame * <tt>false</tt> by default to render with plain 1px square borders. <tt>true</tt> to render with * 9 elements, complete with custom rounded corners (also see {@link Ext.Element#boxWrap}). * <p>The template generated for each condition is depicted below:</p><pre><code> * // 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> * </code></pre> */ /** * @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 ''). * <p>An example of specifying a custom icon class would be something like: * </p><pre><code> // 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; } </code></pre> */ /** * @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 <tt><b></b>tools.<i><tool-type></i></tt> * <p>Each tool config may contain the following properties: * <div class="mdetail-params"><ul> * <li><b>id</b> : String<div class="sub-desc"><b>Required.</b> The type * of tool to create. By default, this assigns a CSS class of the form <tt>x-tool-<i><tool-type></i></tt> 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: * <ul> * <div class="x-tool x-tool-toggle" style="float:left; margin-right:5;"> </div><div><tt> toggle</tt> (Created by default when {@link #collapsible} is <tt>true</tt>)</div> * <div class="x-tool x-tool-close" style="float:left; margin-right:5;"> </div><div><tt> close</tt></div> * <div class="x-tool x-tool-minimize" style="float:left; margin-right:5;"> </div><div><tt> minimize</tt></div> * <div class="x-tool x-tool-maximize" style="float:left; margin-right:5;"> </div><div><tt> maximize</tt></div> * <div class="x-tool x-tool-restore" style="float:left; margin-right:5;"> </div><div><tt> restore</tt></div> * <div class="x-tool x-tool-gear" style="float:left; margin-right:5;"> </div><div><tt> gear</tt></div> * <div class="x-tool x-tool-pin" style="float:left; margin-right:5;"> </div><div><tt> pin</tt></div> * <div class="x-tool x-tool-unpin" style="float:left; margin-right:5;"> </div><div><tt> unpin</tt></div> * <div class="x-tool x-tool-right" style="float:left; margin-right:5;"> </div><div><tt> right</tt></div> * <div class="x-tool x-tool-left" style="float:left; margin-right:5;"> </div><div><tt> left</tt></div> * <div class="x-tool x-tool-up" style="float:left; margin-right:5;"> </div><div><tt> up</tt></div> * <div class="x-tool x-tool-down" style="float:left; margin-right:5;"> </div><div><tt> down</tt></div> * <div class="x-tool x-tool-refresh" style="float:left; margin-right:5;"> </div><div><tt> refresh</tt></div> * <div class="x-tool x-tool-minus" style="float:left; margin-right:5;"> </div><div><tt> minus</tt></div> * <div class="x-tool x-tool-plus" style="float:left; margin-right:5;"> </div><div><tt> plus</tt></div> * <div class="x-tool x-tool-help" style="float:left; margin-right:5;"> </div><div><tt> help</tt></div> * <div class="x-tool x-tool-search" style="float:left; margin-right:5;"> </div><div><tt> search</tt></div> * <div class="x-tool x-tool-save" style="float:left; margin-right:5;"> </div><div><tt> save</tt></div> * <div class="x-tool x-tool-print" style="float:left; margin-right:5;"> </div><div><tt> print</tt></div> * </ul></div></li> * <li><b>handler</b> : Function<div class="sub-desc"><b>Required.</b> The function to * call when clicked. Arguments passed are:<ul> * <li><b>event</b> : Ext.EventObject<div class="sub-desc">The click event.</div></li> * <li><b>toolEl</b> : Ext.Element<div class="sub-desc">The tool Element.</div></li> * <li><b>panel</b> : Ext.Panel<div class="sub-desc">The host Panel</div></li> * <li><b>tc</b> : Ext.Panel<div class="sub-desc">The tool configuration object</div></li> * </ul></div></li> * <li><b>stopEvent</b> : Boolean<div class="sub-desc">Defaults to true. Specify as false to allow click event to propagate.</div></li> * <li><b>scope</b> : Object<div class="sub-desc">The scope in which to call the handler.</div></li> * <li><b>qtip</b> : String/Object<div class="sub-desc">A tip string, or * a config argument to {@link Ext.QuickTip#register}</div></li> * <li><b>hidden</b> : Boolean<div class="sub-desc">True to initially render hidden.</div></li> * <li><b>on</b> : Object<div class="sub-desc">A listener config object specifiying * event listeners in the format of an argument to {@link #addListener}</div></li> * </ul></div> * <p>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.</p> * <p>Example usage:</p> * <pre><code> 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 } }] </code></pre> * <p>For the custom id of <tt>'help'</tt> define two relevant css classes with a link to * a 15x15 image:</p> * <pre><code> .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;} </code></pre> */ /** * @cfg {Ext.Template/Ext.XTemplate} toolTemplate * <p>A Template used to create {@link #tools} in the {@link #header} Element. Defaults to:</p><pre><code> new Ext.Template('<div class="x-tool x-tool-{id}">&#160;</div>')</code></pre> * <p>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:</p><pre><code> 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}">&#160;</div>', '</tpl>' ), width:500, height:300, closeAction:'hide' });</code></pre> * <p>Note that the CSS class "x-tool-pdf" should have an associated style rule which provides an * appropriate background image, something like:</p> <pre><code> a.x-tool-pdf {background-image: url(../shared/extjs/images/pdf.gif)!important;} </code></pre> */ /** * @cfg {Boolean} hideCollapseTool * <tt>true</tt> to hide the expand/collapse toggle button when <code>{@link #collapsible} == true</code>, * <tt>false</tt> to display it (defaults to <tt>false</tt>). */ /** * @cfg {Boolean} titleCollapse * <tt>true</tt> to allow expanding and collapsing the panel (when <tt>{@link #collapsible} = true</tt>) * by clicking anywhere in the header bar, <tt>false</tt>) to allow it only by clicking to tool button * (defaults to <tt>false</tt>)). If this panel is a child item of a border layout also see the * {@link Ext.layout.BorderLayout.Region BorderLayout.Region} * <tt>{@link Ext.layout.BorderLayout.Region#floatable floatable}</tt> config option. */ /** * @cfg {Boolean} autoScroll * <tt>true</tt> to use overflow:'auto' on the panel's body element and show scroll bars automatically when * necessary, <tt>false</tt> to clip any overflowing content (defaults to <tt>false</tt>). */ /** * @cfg {Mixed} floating * <p>This property is used to configure the underlying {@link Ext.Layer}. Acceptable values for this * configuration property are:</p><div class="mdetail-params"><ul> * <li><b><tt>false</tt></b> : <b>Default.</b><div class="sub-desc">Display the panel inline where it is * rendered.</div></li> * <li><b><tt>true</tt></b> : <div class="sub-desc">Float the panel (absolute position it with automatic * shimming and shadow).<ul> * <div class="sub-desc">Setting floating to true will create an Ext.Layer for this panel and display the * panel at negative offsets so that it is hidden.</div> * <div class="sub-desc">Since the panel will be absolute positioned, the position must be set explicitly * <i>after</i> render (e.g., <tt>myPanel.setPosition(100,100);</tt>).</div> * <div class="sub-desc"><b>Note</b>: 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.</div> * </ul></div></li> * <li><b><tt>{@link Ext.Layer object}</tt></b> : <div class="sub-desc">The specified object will be used * as the configuration object for the {@link Ext.Layer} that will be created.</div></li> * </ul></div> */ /** * @cfg {Boolean/String} shadow * <tt>true</tt> (or a valid Ext.Shadow {@link Ext.Shadow#mode} value) to display a shadow behind the * panel, <tt>false</tt> to display no shadow (defaults to <tt>'sides'</tt>). Note that this option * only applies when <tt>{@link #floating} = true</tt>. */ /** * @cfg {Number} shadowOffset * The number of pixels to offset the shadow if displayed (defaults to <tt>4</tt>). Note that this * option only applies when <tt>{@link #floating} = true</tt>. */ /** * @cfg {Boolean} shim * <tt>false</tt> to disable the iframe shim in browsers which need one (defaults to <tt>true</tt>). * Note that this option only applies when <tt>{@link #floating} = true</tt>. */ /** * @cfg {String/Object} html * An HTML fragment, or a {@link Ext.DomHelper DomHelper} specification to use as the panel's body * content (defaults to ''). The HTML content is added by the Panel's {@link #afterRender} method, * and so the document will not contain this HTML at the time the {@link #render} event is fired. * This content is inserted into the body <i>before</i> any configured {@link #contentEl} is appended. */ /** * @cfg {String} contentEl * <p>Specify the <tt>id</tt> of an existing HTML node to use as the panel's body content * (defaults to '').</p><div><ul> * <li><b>Description</b> : <ul> * <div class="sub-desc">This config option is used to take an existing HTML element and place it in the body * of a new panel (it simply moves the specified DOM element into the body element of the Panel * <i>when the Panel is rendered</i> to use as the content (it is not going to be the * actual panel itself).</div> * </ul></li> * <li><b>Notes</b> : <ul> * <div class="sub-desc">The specified HTML Element is appended to the Panel's {@link #body} Element by the * Panel's {@link #afterRender} method <i>after any configured {@link #html HTML} has * been inserted</i>, and so the document will not contain this HTML at the time the * {@link #render} event is fired.</div> * <div class="sub-desc">The specified HTML element used will not participate in any layout scheme that the * Panel may use. It's just HTML. Layouts operate on child items.</div> * <div class="sub-desc">Add either the <tt>x-hidden</tt> or the <tt>x-hide-display</tt> CSS class to * prevent a brief flicker of the content before it is rendered to the panel.</div> * </ul></li> * </ul></div> */ /** * @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 <tt>null</tt>). */ /** * @cfg {Boolean/Object} draggable * <p><tt>true</tt> to enable dragging of this Panel (defaults to <tt>false</tt>).</p> * <p>For custom drag/drop implementations, an <b>Ext.Panel.DD</b> config could also be passed * in this config instead of <tt>true</tt>. 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.: * <pre><code> 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(); </code></pre> */ /** * @cfg {String} tabTip * A string to be used as innerHTML (html tags are accepted) to show in a tooltip when mousing over * the tab of a Ext.Panel which is an item of a {@link Ext.TabPanel}. {@link Ext.QuickTips}.init() * must be called in order for the tips to render. */ /** * @cfg {Boolean} disabled * Render this panel disabled (default is <tt>false</tt>). 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: * <pre><code> new Ext.Panel({ ... listeners: { 'afterlayout': { fn: function(p){ p.disable(); }, single: true // important, as many layouts can occur } } }); </code></pre> */ /** * @cfg {Boolean} autoHeight * <tt>true</tt> to use height:'auto', <tt>false</tt> to use fixed height (defaults to <tt>false</tt>). * <b>Note</b>: Setting <tt>autoHeight:true</tt> 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 (<tt>fit</tt>, <tt>border</tt>, etc.) then setting <tt>autoHeight:true</tt> * 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 <tt>'x-panel'</tt>). * <p>Another option available by default is to specify <tt>'x-plain'</tt> which strips all styling * except for required attributes for Ext layouts to function (e.g. overflow:hidden). * See <tt>{@link #unstyled}</tt> also.</p> */ baseCls : 'x-panel', /** * @cfg {String} collapsedCls * A CSS class to add to the panel's element after it has been collapsed (defaults to * <tt>'x-panel-collapsed'</tt>). */ collapsedCls : 'x-panel-collapsed', /** * @cfg {Boolean} maskDisabled * <tt>true</tt> to mask the panel when it is {@link #disabled}, <tt>false</tt> to not mask it (defaults * to <tt>true</tt>). 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 * <tt>true</tt> to animate the transition when the panel is collapsed, <tt>false</tt> to skip the * animation (defaults to <tt>true</tt> if the {@link Ext.Fx} class is available, otherwise <tt>false</tt>). */ animCollapse : Ext.enableFx, /** * @cfg {Boolean} headerAsText * <tt>true</tt> to display the panel <tt>{@link #title}</tt> in the <tt>{@link #header}</tt>, * <tt>false</tt> to hide it (defaults to <tt>true</tt>). */ headerAsText : true, /** * @cfg {String} buttonAlign * The alignment of any {@link #buttons} added to this panel. Valid values are <tt>'right'</tt>, * <tt>'left'</tt> and <tt>'center'</tt> (defaults to <tt>'right'</tt>). */ buttonAlign : 'right', /** * @cfg {Boolean} collapsed * <tt>true</tt> to render the panel collapsed, <tt>false</tt> to render it expanded (defaults to * <tt>false</tt>). */ collapsed : false, /** * @cfg {Boolean} collapseFirst * <tt>true</tt> to make sure the collapse/expand toggle button always renders first (to the left of) * any other tools in the panel's title bar, <tt>false</tt> to render it last (defaults to <tt>true</tt>). */ collapseFirst : true, /** * @cfg {Number} minButtonWidth * Minimum width in pixels of all {@link #buttons} in this panel (defaults to <tt>75</tt>) */ minButtonWidth : 75, /** * @cfg {Boolean} unstyled * Overrides the <tt>{@link #baseCls}</tt> setting to <tt>{@link #baseCls} = 'x-plain'</tt> 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<div class="mdetail-params"><ul> * <li><tt>header</tt></li> * <li><tt>tbar</tt> (top bar)</li> * <li><tt>body</tt></li> * <li><tt>bbar</tt> (bottom bar)</li> * <li><tt>footer</tt></li> * </ul></div> * Defaults to '<tt>body</tt>'. */ elements : 'body', /** * @cfg {Boolean} preventBodyReset * Defaults to <tt>false</tt>. When set to <tt>true</tt>, an extra css class <tt>'x-panel-normal'</tt> * 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 <b>body</b> element (not the header, * footer, etc.). */ preventBodyReset : false, // 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'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'; } // shortcuts if(this.tbar){ this.elements += ',tbar'; if(Ext.isObject(this.tbar)){ this.topToolbar = this.tbar; } delete this.tbar; } if(this.bbar){ this.elements += ',bbar'; if(Ext.isObject(this.bbar)){ this.bottomToolbar = this.bbar; } delete this.bbar; } if(this.header === true){ this.elements += ',header'; delete this.header; }else if(this.headerCfg || (this.title && this.header !== false)){ this.elements += ',header'; } if(this.footerCfg || this.footer === true){ this.elements += ',footer'; delete this.footer; } if(this.buttons){ this.elements += ',footer'; var btns = this.buttons; /** * This Panel's Array of buttons as created from the <tt>{@link #buttons}</tt> * config property. Read only. * @type Array * @property buttons */ this.buttons = []; for(var i = 0, len = btns.length; i < len; i++) { if(btns[i].render){ // button instance this.buttons.push(btns[i]); }else if(btns[i].xtype){ this.buttons.push(Ext.create(btns[i], 'button')); }else{ this.addButton(btns[i]); } } } if(this.fbar){ this.elements += ',footer'; } if(this.autoLoad){ this.on('render', this.doAutoLoad, this, {delay:10}); } }, // 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; 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'; } }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(this.padding !== undefined) { 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 = '<span class="' + this.headerTextCls + '">'+this.header.dom.innerHTML+'</span>'; if(this.iconCls){ this.setIconClass(this.iconCls); } } } if(this.floating){ this.makeFloating(this.floating); } if(this.collapsible){ this.tools = this.tools ? this.tools.slice(0) : []; if(!this.hideCollapseTool){ this.tools[this.collapseFirst?'unshift':'push']({ id: 'toggle', handler : this.toggleCollapse, scope: this }); } if(this.titleCollapse && this.header){ this.mon(this.header, 'click', this.toggleCollapse, this); this.header.setStyle('cursor', 'pointer'); } } if(this.tools){ var ts = this.tools; this.tools = {}; this.addTool.apply(this, ts); }else{ this.tools = {}; } if(this.buttons && this.buttons.length > 0){ this.fbar = new Ext.Toolbar({ items: this.buttons, toolbarCls: 'x-panel-fbar' }); } this.toolbars = []; if(this.fbar){ this.fbar = Ext.create(this.fbar, 'toolbar'); this.fbar.enableOverflow = false; if(this.fbar.items){ this.fbar.items.each(function(c){ c.minWidth = c.minWidth || this.minButtonWidth; }, this); } this.fbar.toolbarCls = 'x-panel-fbar'; var bct = this.footer.createChild({cls: 'x-panel-btns x-panel-btns-'+this.buttonAlign}); this.fbar.ownerCt = this; this.fbar.render(bct); bct.createChild({cls:'x-clear'}); this.toolbars.push(this.fbar); } if(this.tbar && this.topToolbar){ if(Ext.isArray(this.topToolbar)){ this.topToolbar = new Ext.Toolbar(this.topToolbar); }else if(!this.topToolbar.events){ this.topToolbar = Ext.create(this.topToolbar, 'toolbar'); } this.topToolbar.ownerCt = this; this.topToolbar.render(this.tbar); this.toolbars.push(this.topToolbar); } if(this.bbar && this.bottomToolbar){ if(Ext.isArray(this.bottomToolbar)){ this.bottomToolbar = new Ext.Toolbar(this.bottomToolbar); }else if(!this.bottomToolbar.events){ this.bottomToolbar = Ext.create(this.bottomToolbar, 'toolbar'); } this.bottomToolbar.ownerCt = this; this.bottomToolbar.render(this.bbar); this.toolbars.push(this.bottomToolbar); } Ext.each(this.toolbars, function(tb){ tb.on({ scope: this, afterlayout: this.syncHeight, remove: this.syncHeight }); }, this); }, /** * 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.dom; var img = hd.firstChild && String(hd.firstChild.tagName).toLowerCase() == 'img' ? hd.firstChild : null; if(img){ Ext.fly(img).replaceClass(old, this.iconCls); }else{ Ext.DomHelper.insertBefore(hd.firstChild, { tag:'img', 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.isObject(cfg) ? cfg : { shadow: this.shadow !== undefined ? 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 (<tt>{@link #tbar}</tt>) section of the panel. * @return {Ext.Toolbar} The toolbar */ getTopToolbar : function(){ return this.topToolbar; }, /** * Returns the {@link Ext.Toolbar toolbar} from the bottom (<tt>{@link #bbar}</tt>) section of the panel. * @return {Ext.Toolbar} The toolbar */ getBottomToolbar : function(){ return this.bottomToolbar; }, /** * 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 to use for the button handler function * @return {Ext.Button} The button that was added */ addButton : function(config, handler, scope){ var bc = { handler: handler, scope: scope, minWidth: this.minButtonWidth, hideParent:true }; if(typeof config == "string"){ bc.text = config; }else{ Ext.apply(bc, config); } var btn = new Ext.Button(bc); if(!this.buttons){ this.buttons = []; } this.buttons.push(btn); return btn; }, // private addTool : function(){ if(!this[this.toolTarget]) { // no where to render tools! return; } if(!this.toolTemplate){ // initialize the global tool template on first use var tt = new Ext.Template( '<div class="x-tool x-tool-{id}"> </div>' ); 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((tc.align !== 'left') ? this[this.toolTarget] : this[this.toolTarget].child('span'), 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(){ if(this.toolbars.length > 0){ this.duringLayout = true; Ext.each(this.toolbars, function(tb){ tb.doLayout(); }); delete this.duringLayout; this.syncHeight(); } }, syncHeight : function(){ if(!(this.autoHeight || this.duringLayout)){ var last = this.lastSize; if(last && !Ext.isEmpty(last.height)){ var old = last.height, h = this.el.getHeight(); if(old != 'auto' && old != h){ var bd = this.body, bdh = bd.getHeight(); h = Math.max(bdh + old - h, 0); if(bdh > 0 && bdh != h){ bd.setHeight(h); if(Ext.isIE && h <= 0){ return; } var sz = bd.getSize(); this.fireEvent('bodyresize', 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); } this.setAutoScroll(); if(this.html){ this.body.update(Ext.isObject(this.html) ? Ext.DomHelper.markup(this.html) : this.html); delete this.html; } if(this.contentEl){ var ce = Ext.getDom(this.contentEl); Ext.fly(ce).removeClass(['x-hidden', 'x-hide-display']); this.body.dom.appendChild(ce); } if(this.collapsed){ this.collapsed = false; this.collapse(false); } Ext.Panel.superclass.afterRender.call(this); // do sizing calcs last this.initEvents(); }, // private setAutoScroll : function(){ if(this.rendered && this.autoScroll){ var el = this.body || this.el; if(el){ el.setOverflow('auto'); } } }, // 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(); } }, // private initDraggable : function(){ /** * <p>If this Panel is configured {@link #draggable}, this property will contain * an instance of {@link Ext.dd.DragSource} which handles dragging the Panel.</p> * 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, typeof this.draggable == 'boolean' ? null : this.draggable); }, // private beforeEffect : function(){ if(this.floating){ this.el.beforeAction(); } this.el.addClass('x-panel-animated'); }, // private afterEffect : function(){ this.syncShadow(); 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(); 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.afterCollapse(); } }, // private afterCollapse : function(){ this.collapsed = true; this.el.addClass(this.collapsedCls); this.afterEffect(); 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(); 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.afterExpand(); } }, // private afterExpand : function(){ this.collapsed = false; this.afterEffect(); if(this.deferLayout !== undefined){ 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(w, h){ if(w !== undefined || h !== undefined){ if(!this.collapsed){ if(typeof w == 'number'){ w = this.adjustBodyWidth(w - this.getFrameWidth()); 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); } } if(this.fbar){ var f = this.fbar, fWidth = 1, strict = Ext.isStrict; if(this.buttonAlign == 'left'){ fWidth = w - f.container.getFrameWidth('lr'); }else{ //center/right alignment off in webkit if(Ext.isIE || Ext.isWebKit){ //center alignment ok on webkit. //right broken in both, center on IE if(!(this.buttonAlign == 'center' && Ext.isWebKit) && (!strict || (!Ext.isIE8 && strict))){ (function(){ f.setWidth(f.getEl().child('.x-toolbar-ct').getWidth()); }).defer(1); }else{ fWidth = 'auto'; } }else{ fWidth = 'auto'; } } f.setWidth(fWidth); } this.body.setWidth(w); }else if(w == 'auto'){ this.body.setWidth(w); } if(typeof h == 'number'){ h = Math.max(0, this.adjustBodyHeight(h - this.getFrameHeight())); 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{ 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.doLayout(); }, this, {single:true}); } } this.fireEvent('bodyresize', this, w, h); } this.syncShadow(); }, // 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 */ 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')); var mc = this.bwrap.dom.firstChild.firstChild.firstChild; w += Ext.fly(mc).getFrameWidth('lr'); } return w; }, /** * 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 */ 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){ var hd = this.el.dom.firstChild; var ft = this.bwrap.dom.lastChild; h += (hd.offsetHeight + ft.offsetHeight); var mc = this.bwrap.dom.firstChild.firstChild.firstChild; h += Ext.fly(mc).getFrameWidth('tb'); }else{ h += (this.header ? this.header.getHeight() : 0) + (this.footer ? this.footer.getHeight() : 0); } 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.getSize().height - this.getFrameHeight(); }, // private syncShadow : function(){ if(this.floating){ this.el.sync(true); } }, // private getLayoutTarget : function(){ return this.body; }, /** * <p>Sets the title text for the panel and optionally the {@link #iconCls icon class}.</p> * <p>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 <tt>{@link #title}</tt>, * or configuring it with <tt><b>{@link #header}: true</b></tt>.</p> * @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: <pre><code> 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 }); </code></pre> * 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 beforeDestroy : function(){ if(this.header){ this.header.removeAllListeners(); if(this.headerAsText){ Ext.Element.uncache(this.header.child('span')); } } Ext.Element.uncache( this.header, this.tbar, this.bbar, this.footer, this.body, this.bwrap ); if(this.tools){ for(var k in this.tools){ Ext.destroy(this.tools[k]); } } if(this.buttons){ for(var b in this.buttons){ Ext.destroy(this.buttons[b]); } } Ext.destroy(this.toolbars); Ext.Panel.superclass.beforeDestroy.call(this); }, // 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{ 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 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}); }, /** * Retrieve a tool by id. * @param {String} id * @return {Object} tool */ 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 <tt>false</tt>. */ /** * @cfg {Boolean/String} autoSize * True for the editor to automatically adopt the size of the element being edited, "width" to adopt the width only, * or "height" to adopt the height only (defaults to false) */ /** * @cfg {Boolean} revertInvalid * True to automatically revert the field value and cancel the edit when the user completes an edit and the field * validation fails (defaults to true) */ /** * @cfg {Boolean} ignoreNoChange * True to skip the 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 {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 false) */ completeOnEnter : false, /** * @cfg {Boolean} cancelOnEsc True to cancel the edit when the escape key is pressed (defaults to false) */ cancelOnEsc : false, /** * @cfg {Boolean} updateEl True to update the innerHTML of the bound element when the update completes (defaults to false) */ updateEl : false, 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 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.field.render(this.el); if(Ext.isGecko){ this.field.el.dom.setAttribute('autocomplete', 'off'); } this.mon(this.field, "specialkey", this.onSpecialKey, this); if(this.swallowKeys){ this.field.el.swallowEvent(['keydown','keypress']); } this.field.show(); this.mon(this.field, "blur", this.onBlur, this); if(this.field.grow){ this.mon(this.field, "autosize", this.el.sync, this.el, {delay:1}); } }, // private onSpecialKey : function(field, e){ var key = e.getKey(); if(this.completeOnEnter && key == e.ENTER){ e.stopEvent(); this.completeEdit(); }else if(this.cancelOnEsc && key == e.ESC){ this.cancelEdit(); }else{ this.fireEvent('specialkey', field, e); } if(this.field.triggerBlur && (key == e.ENTER || key == e.ESC || key == e.TAB)){ this.field.triggerBlur(); } }, /** * 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){ return; } this.startValue = v; this.field.setValue(v); this.doAutoSize(); this.el.alignTo(this.boundEl, this.alignment); this.editing = true; this.show(); }, // private doAutoSize : function(){ if(this.autoSize){ var sz = this.boundEl.getSize(); switch(this.autoSize){ case "width": this.setSize(sz.width, ""); break; case "height": this.setSize("", sz.height); break; default: this.setSize(sz.width, sz.height); } } }, /** * 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); } this.el.sync(); } }, /** * Realigns the editor to the bound field based on the current alignment config value. */ realign : function(){ this.el.alignTo(this.boundEl, this.alignment); }, /** * Ends the editing process, persists the changed value to the underlying field, and hides the editor. * @param {Boolean} remainVisible Override the default behavior and keep the editor visible after edit (defaults to false) */ completeEdit : function(remainVisible){ if(!this.editing){ return; } var v = this.getValue(); if(!this.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); } }, // private onShow : function(){ this.el.show(); if(this.hideEl !== false){ this.boundEl.hide(); } this.field.show(); if(Ext.isIE && !this.fixIEFocus){ // IE has problems with focusing the first time this.fixIEFocus = true; this.deferredFocus.defer(50, this); }else{ this.field.focus(); } this.fireEvent("startedit", this.boundEl, this.startValue); }, deferredFocus : function(){ if(this.editing){ this.field.focus(); } }, /** * Cancels the editing process and hides the editor without persisting any changes. The field value will be * reverted to the original starting value. * @param {Boolean} remainVisible Override the default behavior and keep the editor visible after * cancel (defaults to false) */ cancelEdit : function(remainVisible){ if(this.editing){ var v = this.getValue(); this.setValue(this.startValue); this.hideEdit(remainVisible); this.fireEvent("canceledit", this, v, this.startValue); } }, // private hideEdit: function(remainVisible){ if(remainVisible !== true){ this.editing = false; this.hide(); } }, // private onBlur : function(){ if(this.allowBlur !== true && this.editing){ this.completeEdit(); } }, // private onHide : function(){ if(this.editing){ this.completeEdit(); return; } this.field.blur(); if(this.field.collapse){ this.field.collapse(); } this.el.hide(); if(this.hideEl !== false){ this.boundEl.show(); } }, /** * Sets the data value of the editor * @param {Mixed} value Any valid value supported by the underlying field */ setValue : function(v){ this.field.setValue(v); }, /** * Gets the data value of the editor * @return {Mixed} The data value */ getValue : function(){ return this.field.getValue(); }, beforeDestroy : function(){ Ext.destroy(this.field); this.field = null; } }); 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.<br /> * Here's an example of typical usage: * <pre><code> var cp = new Ext.ColorPalette({value:'993300'}); // initial selected color cp.render('my-div'); cp.on('select', function(palette, selColor){ // do something with selColor }); </code></pre> * @constructor * Create a new ColorPalette * @param {Object} config The config object * @xtype colorpalette */ Ext.ColorPalette = function(config){ Ext.ColorPalette.superclass.constructor.call(this, config); this.addEvents( /** * @event select * Fires when a color is selected * @param {ColorPalette} this * @param {String} color The 6-digit color hex code (without the # symbol) */ 'select' ); if(this.handler){ this.on("select", this.handler, this.scope, true); } }; Ext.extend(Ext.ColorPalette, 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", /** * @cfg {String} value * The initial color to highlight (should be a valid 6-digit color hex code without the # symbol). Note that * the hex codes are case-sensitive. */ value : null, clickEvent:'click', // private ctype: "Ext.ColorPalette", /** * @cfg {Boolean} allowReselect If set to true then reselecting a color that is already selected fires the {@link #select} event */ allowReselect : false, /** * <p>An array of 6-digit color hex code strings (without the # symbol). This array can contain any number * of colors, and each hex code should be unique. The width of the palette is controlled via CSS by adjusting * the width property of the 'x-color-palette' class (or assigning a custom class), so you can balance the number * of colors with the width setting until the box is symmetrical.</p> * <p>You can override individual colors if needed:</p> * <pre><code> var cp = new Ext.ColorPalette(); cp.colors[0] = "FF0000"; // change the first box to red </code></pre> Or you can provide a custom array of your own for complete control: <pre><code> var cp = new Ext.ColorPalette(); cp.colors = ["000000", "993300", "333300"]; </code></pre> * @type Array */ colors : [ "000000", "993300", "333300", "003300", "003366", "000080", "333399", "333333", "800000", "FF6600", "808000", "008000", "008080", "0000FF", "666699", "808080", "FF0000", "FF9900", "99CC00", "339966", "33CCCC", "3366FF", "800080", "969696", "FF00FF", "FFCC00", "FFFF00", "00FF00", "00FFFF", "00CCFF", "993366", "C0C0C0", "FF99CC", "FFCC99", "FFFF99", "CCFFCC", "CCFFFF", "99CCFF", "CC99FF", "FFFFFF" ], // private onRender : function(container, position){ var t = this.tpl || new Ext.XTemplate( '<tpl for="."><a href="#" class="color-{.}" hidefocus="on"><em><span style="background:#{.}" unselectable="on"> </span></em></a></tpl>' ); var el = document.createElement("div"); el.id = this.getId(); el.className = this.itemCls; t.overwrite(el, this.colors); container.dom.insertBefore(el, position); this.el = Ext.get(el); this.mon(this.el, this.clickEvent, this.handleClick, this, {delegate: 'a'}); if(this.clickEvent != 'click'){ this.mon(this.el, 'click', Ext.emptyFn, this, {delegate: 'a', preventDefault: true}); } }, // private afterRender : function(){ Ext.ColorPalette.superclass.afterRender.call(this); if(this.value){ var s = this.value; this.value = null; this.select(s); } }, // private handleClick : function(e, t){ e.preventDefault(); if(!this.disabled){ var c = t.className.match(/(?:^|s)color-(.{6})(?:s|$)/)[1]; this.select(c.toUpperCase()); } }, /** * Selects the specified color in the palette (fires the {@link #select} event) * @param {String} color A valid 6-digit color hex code (# will be stripped if included) */ select : function(color){ color = color.replace("#", ""); if(color != this.value || this.allowReselect){ var el = this.el; if(this.value){ el.child("a.color-"+this.value).removeClass("x-color-palette-sel"); } el.child("a.color-"+color).addClass("x-color-palette-sel"); this.value = color; this.fireEvent("select", this, color); } } /** * @cfg {String} autoEl @hide */ }); Ext.reg('colorpalette', Ext.ColorPalette);/**
* @class Ext.DatePicker
* @extends Ext.Component
* Simple date picker class.
* @constructor
* Create a new DatePicker
* @param {Object} config The config object
* @xtype datepicker
*/
Ext.DatePicker = Ext.extend(Ext.BoxComponent, {
/**
* @cfg {String} todayText
* The text to display on the button that selects the current date (defaults to <tt>'Today'</tt>)
*/
todayText : 'Today',
/**
* @cfg {String} okText
* The text to display on the ok button (defaults to <tt>' OK '</tt> to give the user extra clicking room)
*/
okText : ' OK ',
/**
* @cfg {String} cancelText
* The text to display on the cancel button (defaults to <tt>'Cancel'</tt>)
*/
cancelText : 'Cancel',
/**
* @cfg {String} todayTip
* The tooltip to display for the button that selects the current date (defaults to <tt>'{current date} (Spacebar)'</tt>)
*/
todayTip : '{0} (Spacebar)',
/**
* @cfg {String} minText
* The error text to display if the minDate validation fails (defaults to <tt>'This date is before the minimum date'</tt>)
*/
minText : 'This date is before the minimum date',
/**
* @cfg {String} maxText
* The error text to display if the maxDate validation fails (defaults to <tt>'This date is after the maximum date'</tt>)
*/
maxText : 'This date is after the maximum date',
/**
* @cfg {String} format
* The default date format string which can be overriden for localization support. The format must be
* valid according to {@link Date#parseDate} (defaults to <tt>'m/d/y'</tt>).
*/
format : 'm/d/y',
/**
* @cfg {String} disabledDaysText
* The tooltip to display when the date falls on a disabled day (defaults to <tt>'Disabled'</tt>)
*/
disabledDaysText : 'Disabled',
/**
* @cfg {String} disabledDatesText
* The tooltip text to display when the date falls on a disabled date (defaults to <tt>'Disabled'</tt>)
*/
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 <tt>'Next Month (Control+Right)'</tt>)
*/
nextText : 'Next Month (Control+Right)',
/**
* @cfg {String} prevText
* The previous month navigation button tooltip (defaults to <tt>'Previous Month (Control+Left)'</tt>)
*/
prevText : 'Previous Month (Control+Left)',
/**
* @cfg {String} monthYearText
* The header month selector tooltip (defaults to <tt>'Choose a month (Control+Up/Down to move years)'</tt>)
*/
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 to <tt>true</tt>).
*/
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:
* <ul>
* <li>['03/08/2003', '09/16/2003'] would disable those exact dates</li>
* <li>['03/08', '09/16'] would disable those days for every year</li>
* <li>['^03/08'] would only match the beginning (useful if you are using short years)</li>
* <li>['03/../2006'] would disable every day in March 2006</li>
* <li>['^03'] would disable every day in every March</li>
* </ul>
* Note that the format of the dates included in the array should exactly match the {@link #format} config.
* In order to support regular expressions, if you are using a date format that has '.' in it, you will have to
* escape the dot when restricting dates. For example: ['03\.08\.03'].
*/
// private
initComponent : function(){
Ext.DatePicker.superclass.initComponent.call(this);
this.value = this.value ?
this.value.clearTime() : new Date().clearTime();
this.addEvents(
/**
* @event select
* Fires when a date is selected
* @param {DatePicker} this
* @param {Date} date The selected date
*/
'select'
);
if(this.handler){
this.on('select', this.handler, this.scope || this);
}
this.initDisabledDays();
},
// private
initDisabledDays : function(){
if(!this.disabledDatesRE && this.disabledDates){
var dd = this.disabledDates,
len = dd.length - 1,
re = '(?:';
Ext.each(dd, function(d, i){
re += Ext.isDate(d) ? '^' + Ext.escapeRe(d.dateFormat(this.format)) + '$' : dd[i];
if(i != len){
re += '|';
}
}, this);
this.disabledDatesRE = new RegExp(re + ')');
}
},
/**
* Replaces any existing disabled dates with new values and refreshes the DatePicker.
* @param {Array/RegExp} disabledDates An array of date strings (see the {@link #disabledDates} config
* for details on supported values), or a JavaScript regular expression used to disable a pattern of dates.
*/
setDisabledDates : function(dd){
if(Ext.isArray(dd)){
this.disabledDates = dd;
this.disabledDatesRE = null;
}else{
this.disabledDatesRE = dd;
}
this.initDisabledDays();
this.update(this.value, true);
},
/**
* Replaces any existing disabled days (by index, 0-6) with new values and refreshes the DatePicker.
* @param {Array} disabledDays An array of disabled day indexes. See the {@link #disabledDays} config
* for details on supported values.
*/
setDisabledDays : function(dd){
this.disabledDays = dd;
this.update(this.value, true);
},
/**
* Replaces any existing {@link #minDate} with the new value and refreshes the DatePicker.
* @param {Date} value The minimum date that can be selected
*/
setMinDate : function(dt){
this.minDate = dt;
this.update(this.value, true);
},
/**
* Replaces any existing {@link #maxDate} with the new value and refreshes the DatePicker.
* @param {Date} value The maximum date that can be selected
*/
setMaxDate : function(dt){
this.maxDate = dt;
this.update(this.value, true);
},
/**
* Sets the value of the date field
* @param {Date} value The date to set
*/
setValue : function(value){
var old = this.value;
this.value = value.clearTime(true);
if(this.el){
this.update(this.value);
}
},
/**
* Gets the current selected value of the date field
* @return {Date} The selected date
*/
getValue : function(){
return this.value;
},
// private
focus : function(){
if(this.el){
this.update(this.activeDate);
}
},
// private
onEnable: function(initial){
Ext.DatePicker.superclass.onEnable.call(this);
this.doDisabled(false);
this.update(initial ? this.value : this.activeDate);
if(Ext.isIE){
this.el.repaint();
}
},
// private
onDisable: function(){
Ext.DatePicker.superclass.onDisable.call(this);
this.doDisabled(true);
if(Ext.isIE && !Ext.isIE8){
/* Really strange problem in IE6/7, when disabled, have to explicitly
* repaint each of the nodes to get them to display correctly, simply
* calling repaint on the main element doesn't appear to be enough.
*/
Ext.each([].concat(this.textNodes, this.el.query('th span')), function(el){
Ext.fly(el).repaint();
});
}
},
// private
doDisabled: function(disabled){
this.keyNav.setDisabled(disabled);
this.prevRepeater.setDisabled(disabled);
this.nextRepeater.setDisabled(disabled);
if(this.showToday){
this.todayKeyListener.setDisabled(disabled);
this.todayBtn.setDisabled(disabled);
}
},
// private
onRender : function(container, position){
var m = [
'<table cellspacing="0">',
'<tr><td class="x-date-left"><a href="#" title="', this.prevText ,'"> </a></td><td class="x-date-middle" align="center"></td><td class="x-date-right"><a href="#" title="', this.nextText ,'"> </a></td></tr>',
'<tr><td colspan="3"><table class="x-date-inner" cellspacing="0"><thead><tr>'],
dn = this.dayNames,
i;
for(i = 0; i < 7; i++){
var d = this.startDay+i;
if(d > 6){
d = d-7;
}
m.push('<th><span>', dn[d].substr(0,1), '</span></th>');
}
m[m.length] = '</tr></thead><tbody><tr>';
for(i = 0; i < 42; i++) {
if(i % 7 === 0 && i !== 0){
m[m.length] = '</tr><tr>';
}
m[m.length] = '<td><a href="#" hidefocus="on" class="x-date-date" tabIndex="1"><em><span></span></em></a></td>';
}
m.push('</tr></tbody></table></td></tr>',
this.showToday ? '<tr><td colspan="3" class="x-date-bottom" align="center"></td></tr>' : '',
'</table><div class="x-date-mp"></div>');
var el = document.createElement('div');
el.className = 'x-date-picker';
el.innerHTML = m.join('');
container.dom.insertBefore(el, position);
this.el = 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
});
this.nextRepeater = new Ext.util.ClickRepeater(this.el.child('td.x-date-right a'), {
handler: this.showNextMonth,
scope: this,
preventDefault:true,
stopDefault:true
});
this.monthPicker = this.el.down('div.x-date-mp');
this.monthPicker.enableDisplayMode('block');
this.keyNav = new Ext.KeyNav(this.eventEl, {
'left' : function(e){
if(e.ctrlKey){
this.showPrevMonth();
}else{
this.update(this.activeDate.add('d', -1));
}
},
'right' : function(e){
if(e.ctrlKey){
this.showNextMonth();
}else{
this.update(this.activeDate.add('d', 1));
}
},
'up' : function(e){
if(e.ctrlKey){
this.showNextYear();
}else{
this.update(this.activeDate.add('d', -7));
}
},
'down' : function(e){
if(e.ctrlKey){
this.showPrevYear();
}else{
this.update(this.activeDate.add('d', 7));
}
},
'pageUp' : function(e){
this.showNextMonth();
},
'pageDown' : function(e){
this.showPrevMonth();
},
'enter' : function(e){
e.stopPropagation();
return true;
},
scope : this
});
this.el.unselectable();
this.cells = this.el.select('table.x-date-inner tbody td');
this.textNodes = this.el.query('table.x-date-inner tbody span');
this.mbtn = new Ext.Button({
text: ' ',
tooltip: this.monthYearText,
renderTo: this.el.child('td.x-date-middle', true)
});
this.mbtn.el.child('em').addClass('x-btn-arrow');
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
});
}
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 = ['<table border="0" cellspacing="0">'];
for(var i = 0; i < 6; i++){
buf.push(
'<tr><td class="x-date-mp-month"><a href="#">', Date.getShortMonthName(i), '</a></td>',
'<td class="x-date-mp-month x-date-mp-sep"><a href="#">', Date.getShortMonthName(i + 6), '</a></td>',
i === 0 ?
'<td class="x-date-mp-ybtn" align="center"><a class="x-date-mp-prev"></a></td><td class="x-date-mp-ybtn" align="center"><a class="x-date-mp-next"></a></td></tr>' :
'<td class="x-date-mp-year"><a href="#"></a></td><td class="x-date-mp-year"><a href="#"></a></td></tr>'
);
}
buf.push(
'<tr class="x-date-mp-btns"><td colspan="4"><button type="button" class="x-date-mp-ok">',
this.okText,
'</button><button type="button" class="x-date-mp-cancel">',
this.cancelText,
'</button></td></tr>',
'</table>'
);
this.monthPicker.update(buf.join(''));
this.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
showMonthPicker : function(){
if(!this.disabled){
this.createMonthPicker();
var size = this.el.getSize();
this.monthPicker.setSize(size);
this.monthPicker.child('table').setSize(size);
this.mpSelMonth = (this.activeDate || this.value).getMonth();
this.updateMPMonth(this.mpSelMonth);
this.mpSelYear = (this.activeDate || this.value).getFullYear();
this.updateMPYear(this.mpSelYear);
this.monthPicker.slideIn('t', {duration:0.2});
}
},
// 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.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');
});
},
// 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();
}
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);
}
},
// 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();
}
},
// private
hideMonthPicker : function(disableAnim){
if(this.monthPicker){
if(disableAnim === true){
this.monthPicker.hide();
}else{
this.monthPicker.slideOut('t', {duration:0.2});
}
}
},
// private
showPrevMonth : function(e){
this.update(this.activeDate.add('mo', -1));
},
// private
showNextMonth : function(e){
this.update(this.activeDate.add('mo', 1));
},
// private
showPrevYear : function(){
this.update(this.activeDate.add('y', -1));
},
// private
showNextYear : function(){
this.update(this.activeDate.add('y', 1));
},
// private
handleMouseWheel : function(e){
e.stopEvent();
if(!this.disabled){
var delta = e.getWheelDelta();
if(delta > 0){
this.showPrevMonth();
} else if(delta < 0){
this.showNextMonth();
}
}
},
// private
handleDateClick : function(e, t){
e.stopEvent();
if(!this.disabled && t.dateValue && !Ext.fly(t.parentNode).hasClass('x-date-disabled')){
this.setValue(new Date(t.dateValue));
this.fireEvent('select', this, this.value);
}
},
// private
selectToday : function(){
if(this.todayBtn && !this.todayBtn.disabled){
this.setValue(new Date().clearTime());
this.fireEvent('select', this, this.value);
}
},
// private
update : function(date, forceRefresh){
var vd = this.activeDate, vis = this.isVisible();
this.activeDate = date;