- animCollapse : Ext.enableFx,
- <div id="cfg-Ext.Panel-headerAsText"></div>/**
- * @cfg {Boolean} headerAsText
- * <code>true</code> to display the panel <code>{@link #title}</code> in the <code>{@link #header}</code>,
- * <code>false</code> to hide it (defaults to <code>true</code>).
- */
- headerAsText : true,
- <div id="cfg-Ext.Panel-buttonAlign"></div>/**
- * @cfg {String} buttonAlign
- * The alignment of any {@link #buttons} added to this panel. Valid values are <code>'right'</code>,
- * <code>'left'</code> and <code>'center'</code> (defaults to <code>'right'</code>).
- */
- buttonAlign : 'right',
- <div id="cfg-Ext.Panel-collapsed"></div>/**
- * @cfg {Boolean} collapsed
- * <code>true</code> to render the panel collapsed, <code>false</code> to render it expanded (defaults to
- * <code>false</code>).
- */
- collapsed : false,
- <div id="cfg-Ext.Panel-collapseFirst"></div>/**
- * @cfg {Boolean} collapseFirst
- * <code>true</code> to make sure the collapse/expand toggle button always renders first (to the left of)
- * any other tools in the panel's title bar, <code>false</code> to render it last (defaults to <code>true</code>).
- */
- collapseFirst : true,
- <div id="cfg-Ext.Panel-minButtonWidth"></div>/**
- * @cfg {Number} minButtonWidth
- * Minimum width in pixels of all {@link #buttons} in this panel (defaults to <code>75</code>)
- */
- minButtonWidth : 75,
- <div id="cfg-Ext.Panel-unstyled"></div>/**
- * @cfg {Boolean} unstyled
- * Overrides the <code>{@link #baseCls}</code> setting to <code>{@link #baseCls} = 'x-plain'</code> which renders
- * the panel unstyled except for required attributes for Ext layouts to function (e.g. overflow:hidden).
- */
- <div id="cfg-Ext.Panel-elements"></div>/**
- * @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><code>header</code></li>
- * <li><code>tbar</code> (top bar)</li>
- * <li><code>body</code></li>
- * <li><code>bbar</code> (bottom bar)</li>
- * <li><code>footer</code></li>
- * </ul></div>
- * Defaults to '<code>body</code>'.
- */
- elements : 'body',
- <div id="cfg-Ext.Panel-preventBodyReset"></div>/**
- * @cfg {Boolean} preventBodyReset
- * Defaults to <code>false</code>. When set to <code>true</code>, an extra css class <code>'x-panel-normal'</code>
- * 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,
-
- <div id="cfg-Ext.Panel-resizeEvent"></div>/** @cfg {String} resizeEvent
- * The event to listen to for resizing in layouts. Defaults to <tt>'bodyresize'</tt>.
- */
- resizeEvent: 'bodyresize',
-
- // protected - these could be used to customize the behavior of the window,
- // but changing them would not be useful without further mofifications and
- // could lead to unexpected or undesirable results.
- toolTarget : 'header',
- collapseEl : 'bwrap',
- slideAnchor : 't',
- disabledClass : '',
-
- // private, notify box this class will handle heights
- deferHeight : true,
- // private
- expandDefaults: {
- duration : 0.25
- },
- // private
- collapseDefaults : {
- duration : 0.25
- },
-
- // private
- initComponent : function(){
- Ext.Panel.superclass.initComponent.call(this);
-
- this.addEvents(
- <div id="event-Ext.Panel-bodyresize"></div>/**
- * @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',
- <div id="event-Ext.Panel-titlechange"></div>/**
- * @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',
- <div id="event-Ext.Panel-iconchange"></div>/**
- * @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',
- <div id="event-Ext.Panel-collapse"></div>/**
- * @event collapse
- * Fires after the Panel has been collapsed.
- * @param {Ext.Panel} p the Panel that has been collapsed.
- */
- 'collapse',
- <div id="event-Ext.Panel-expand"></div>/**
- * @event expand
- * Fires after the Panel has been expanded.
- * @param {Ext.Panel} p The Panel that has been expanded.
- */
- 'expand',
- <div id="event-Ext.Panel-beforecollapse"></div>/**
- * @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',
- <div id="event-Ext.Panel-beforeexpand"></div>/**
- * @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',
- <div id="event-Ext.Panel-beforeclose"></div>/**
- * @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',
- <div id="event-Ext.Panel-close"></div>/**
- * @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',
- <div id="event-Ext.Panel-activate"></div>/**
- * @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',
- <div id="event-Ext.Panel-deactivate"></div>/**
- * @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;
- <div id="prop-Ext.Panel-buttons"></div>/**
- * This Panel's Array of buttons as created from the <code>{@link #buttons}</code>
- * config property. Read only.
- * @type Array
- * @property buttons
- */
- this.buttons = [];
- Ext.each(btns, function(btn){
- if(btn.render){ // button instance
- this.buttons.push(btn);
- }else if(btn.xtype){
- this.buttons.push(Ext.create(btn, 'button'));
- }else{
- this.addButton(btn);
- }
- }, this);
- }
- 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,
- ts;
-
-
- if(this.collapsible && !this.hideCollapseTool){
- this.tools = this.tools ? this.tools.slice(0) : [];
- this.tools[this.collapseFirst?'unshift':'push']({
- id: 'toggle',
- handler : this.toggleCollapse,
- scope: this
- });
- }
-
- if(this.tools){
- ts = this.tools;
- this.elements += (this.header !== false) ? ',header' : '';
- }
- this.tools = {};
-
- el.addClass(this.baseCls);
- if(d.firstChild){ // existing markup
- this.header = el.down('.'+this.headerCls);
- this.bwrap = el.down('.'+this.bwrapCls);
- var cp = this.bwrap ? this.bwrap : el;
- this.tbar = cp.down('.'+this.tbarCls);
- this.body = cp.down('.'+this.bodyCls);
- this.bbar = cp.down('.'+this.bbarCls);
- this.footer = cp.down('.'+this.footerCls);
- this.fromMarkup = true;
- }
- if (this.preventBodyReset === true) {
- el.addClass('x-panel-reset');
- }
- if(this.cls){
- el.addClass(this.cls);
- }
-
- if(this.buttons){
- this.elements += ',footer';
- }
-
- // This block allows for maximum flexibility and performance when using existing markup
-
- // framing requires special markup
- if(this.frame){
- el.insertHtml('afterBegin', String.format(Ext.Element.boxMarkup, this.baseCls));
-
- this.createElement('header', d.firstChild.firstChild.firstChild);
- this.createElement('bwrap', d);
-
- // append the mid and bottom frame to the bwrap
- bw = this.bwrap.dom;
- var ml = d.childNodes[1], bl = d.childNodes[2];
- bw.appendChild(ml);
- bw.appendChild(bl);
-
- var mc = bw.firstChild.firstChild.firstChild;
- this.createElement('tbar', mc);
- this.createElement('body', mc);
- this.createElement('bbar', mc);
- this.createElement('footer', bw.lastChild.firstChild.firstChild);
-
- if(!this.footer){
- this.bwrap.dom.lastChild.className += ' x-panel-nofooter';
- }
- /*
- * Store a reference to this element so:
- * a) We aren't looking it up all the time
- * b) The last element is reported incorrectly when using a loadmask
- */
- this.ft = Ext.get(this.bwrap.dom.lastChild);
- this.mc = Ext.get(this.bwrap.dom.firstChild.firstChild.firstChild);
- }else{
- this.createElement('header', d);
- this.createElement('bwrap', d);
-
- // append the mid and bottom frame to the bwrap
- bw = this.bwrap.dom;
- this.createElement('tbar', bw);
- this.createElement('body', bw);
- this.createElement('bbar', bw);
- this.createElement('footer', bw);
-
- if(!this.header){
- this.body.addClass(this.bodyCls + '-noheader');
- if(this.tbar){
- this.tbar.addClass(this.tbarCls + '-noheader');
- }
- }
- }
-
- if(Ext.isDefined(this.padding)){
- this.body.setStyle('padding', this.body.addUnits(this.padding));
- }
-
- if(this.border === false){
- this.el.addClass(this.baseCls + '-noborder');
- this.body.addClass(this.bodyCls + '-noborder');
- if(this.header){
- this.header.addClass(this.headerCls + '-noborder');
- }
- if(this.footer){
- this.footer.addClass(this.footerCls + '-noborder');
- }
- if(this.tbar){
- this.tbar.addClass(this.tbarCls + '-noborder');
- }
- if(this.bbar){
- this.bbar.addClass(this.bbarCls + '-noborder');
- }
- }
-
- if(this.bodyBorder === false){
- this.body.addClass(this.bodyCls + '-noborder');
- }
-
- this.bwrap.enableDisplayMode('block');
-
- if(this.header){
- this.header.unselectable();
-
- // for tools, we need to wrap any existing header markup
- if(this.headerAsText){
- this.header.dom.innerHTML =
- '<span class="' + this.headerTextCls + '">'+this.header.dom.innerHTML+'</span>';
-
- if(this.iconCls){
- this.setIconClass(this.iconCls);
- }
- }
- }