This Element is used to house the {@link #title} and {@link #tools}
- * @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. - *If this is used to load visible HTML elements in either way, then - * the Panel may not be used as a Layout for hosting nested Panels.
- *If this Panel is intended to be used as the host of a Layout (See {@link #layout} - * then the body Element must not be loaded or changed - it is under the control - * of the Panel's Layout. - * @type Ext.Element - * @property body - */ - /** - * @cfg {Object} bodyCfg - *
A {@link Ext.DomHelper DomHelper} configuration object specifying the element structure - * of this Panel's {@link #body} Element.
- *This may be used to force the body Element to use a different form of markup than - * is created automatically. An example of this might be to create a child Panel containing - * custom content, such as a header, or forcing centering of all Panel - * content by having the body be a <center> element:
-new Ext.Panel({
- title: 'New Message',
- collapsible: true,
- renderTo: Ext.getBody(),
- width: 400,
- bodyCfg: {
- tag: 'center',
- cls: 'x-panel-body'
- },
- items: [{
- border: false,
- header: false,
- bodyCfg: {tag: 'h2', html: 'Message'}
- }, {
- xtype: 'textarea',
- style: {
- width: '95%',
- marginBottom: '10px'
- }
- },
- new Ext.Button({
- text: 'Send',
- minWidth: '100',
- style: {
- marginBottom: '10px'
- }
- })
- ]
-});This Element is used to house the Panel's {@link #buttons}.
- * @type Ext.Element - * @property footer - */ - /** - * @cfg {Mixed} applyTo - * The id of the node, a DOM node or an existing Element corresponding to a DIV that is already present in - * the document that specifies some panel-specific structural markup. When applyTo is used, constituent parts of - * the panel can be specified by CSS class name within the main element, and the panel will automatically create those - * components from that markup. Any required components not specified in the markup will be autogenerated if necessary. - * The following class names are supported (baseCls will be replaced by {@link #baseCls}): - *- * The URL will become the default URL for this panel's {@link #body} element, - * so it may be {@link Ext.Element#refresh refresh}ed at any time.
- */ - /** - * @cfg {Boolean} frame - * True to render the panel with custom rounded borders, false to render with plain 1px square borders (defaults to false). - */ - /** - * @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} bodyStyle - * Custom CSS styles to be applied to the body element in the format expected by {@link Ext.Element#applyStyles} - * (defaults to null). - */ - /** - * @cfg {String} iconCls - * A CSS class that will provide a background image to be used as the header icon (defaults to ''). An example - * custom icon class would be something like: .my-icon { background: url(../images/my-icon.gif) 0 6px no-repeat !important;} - */ - /** - * @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 tools.<tool-type> - *Each tool config may contain the following properties: - *
-tools:[{
- id:'refresh',
- qtip: 'Refresh form Data',
- // hidden:true,
- handler: function(event, toolEl, panel){
- // refresh logic
- }
-}]
-True to enable dragging of this Panel (defaults to false).
- *For custom drag/drop implementations, an Ext.Panel.DD - * config could also be passed in this config instead of true. Ext.Panel.DD is an internal, - * undocumented class which moves a proxy Element around in place of the Panel's element, but - * provides no other behaviour during dragging or on drop. It is a subclass of - * {@link Ext.dd.DragSource}, so behaviour may be added by implementing the interface methods - * of {@link Ext.dd.DragDrop} eg: - *
-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();
-
-new Ext.Panel({
- ...
- listeners: {
- 'afterlayout': {
- fn: function(p){
- p.disable();
- },
- single: true // important, as many layouts can occur
- }
- }
-});
-If this Panel is configured {@link #draggable}, this property will contain - * an instance of {@link Ext.dd.DragSource} which handles dragging the Panel.
- * The developer must provide implementations of the abstract methods of {@link Ext.dd.DragSource} - * in order to supply behaviour for each stage of the drag/drop process. See {@link #draggable}. - * @type Ext.dd.DragSource. - * @property dd - */ - this.dd = new Ext.Panel.DD(this, 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(); - 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'){ - this.body.setWidth( - this.adjustBodyWidth(w - this.getFrameWidth())); - }else if(w == 'auto'){ - this.body.setWidth(w); - } - - if(typeof h == 'number'){ - this.body.setHeight( - this.adjustBodyHeight(h - this.getFrameHeight())); - }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'); - - 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'); - 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; - }, - - /** - *Sets the title text for the panel and optionally the icon class.
- *In order to be able to set the title, a header element must have been created - * for the Panel. This is triggered either by configuring the Panel with a non-blank title, - * or configuring it with {@link #header}: true.
- * @param {String} title The title text to set - * @param {String} iconCls (optional) 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: -
-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
-});
-