webgui/www/extras/extjs/docs/output/BasicDialog.jss.html

1186 lines
No EOL
48 KiB
HTML

<html><head><title>BasicDialog.js</title><link rel="stylesheet" type="text/css" href="../resources/style.css" media="screen"/></head><body><h1>BasicDialog.js</h1><pre class="highlighted"><code><i>/**
* @class Ext.BasicDialog
* @extends Ext.util.Observable
* Lightweight Dialog Class. The code below shows the creation of a typical dialog using existing HTML markup:
* &lt;pre&gt;&lt;code&gt;
<b>var</b> dlg = <b>new</b> Ext.BasicDialog(&quot;my-dlg&quot;, {
height: 200,
width: 300,
minHeight: 100,
minWidth: 150,
modal: true,
proxyDrag: true,
shadow: true
});
dlg.addKeyListener(27, dlg.hide, dlg); <i>// ESC can also close the dialog</i>
dlg.addButton('OK', dlg.hide, dlg); <i>// Could call a save <b>function</b> instead of hiding</i>
dlg.addButton('Cancel', dlg.hide, dlg);
dlg.show();
&lt;/code&gt;&lt;/pre&gt;
&lt;b&gt;A Dialog should always be a direct child of the body element.&lt;/b&gt;
* @cfg {Boolean/DomHelper} autoCreate True to auto create from scratch, or using a DomHelper Object (defaults to false)
* @cfg {String} title Default text to display <b>in</b> the title bar (defaults to null)
* @cfg {Number} width Width of the dialog <b>in</b> pixels (can also be set via CSS). Determined by browser <b>if</b> unspecified.
* @cfg {Number} height Height of the dialog <b>in</b> pixels (can also be set via CSS). Determined by browser <b>if</b> unspecified.
* @cfg {Number} x The <b>default</b> top page coordinate of the dialog (defaults to center screen)
* @cfg {Number} y The <b>default</b> left page coordinate of the dialog (defaults to center screen)
* @cfg {String/Element} animateTarget Id or element from which the dialog should animate <b>while</b> opening
* (defaults to null <b>with</b> no animation)
* @cfg {Boolean} resizable False to disable manual dialog resizing (defaults to true)
* @cfg {String} resizeHandles Which resize handles to display - see the {@link Ext.Resizable} handles config
* property <b>for</b> valid values (defaults to 'all')
* @cfg {Number} minHeight The minimum allowable height <b>for</b> a resizable dialog (defaults to 80)
* @cfg {Number} minWidth The minimum allowable width <b>for</b> a resizable dialog (defaults to 200)
* @cfg {Boolean} modal True to show the dialog modally, preventing user interaction <b>with</b> the rest of the page (defaults to false)
* @cfg {Boolean} autoScroll True to allow the dialog body contents to overflow and display scrollbars (defaults to false)
* @cfg {Boolean} closable False to remove the built-<b>in</b> top-right corner close button (defaults to true)
* @cfg {Boolean} collapsible False to remove the built-<b>in</b> top-right corner collapse button (defaults to true)
* @cfg {Boolean} constraintoviewport True to keep the dialog constrained within the visible viewport boundaries (defaults to true)
* @cfg {Boolean} syncHeightBeforeShow True to cause the dimensions to be recalculated before the dialog is shown (defaults to false)
* @cfg {Boolean} draggable False to disable dragging of the dialog within the viewport (defaults to true)
* @cfg {Boolean} autoTabs If true, all elements <b>with</b> class 'x-dlg-tab' will get automatically converted to tabs (defaults to false)
* @cfg {String} tabTag The tag name of tab elements, used when autoTabs = true (defaults to 'div')
* @cfg {Boolean} proxyDrag True to drag a lightweight proxy element rather than the dialog itself, used when
* draggable = true (defaults to false)
* @cfg {Boolean} fixedcenter True to ensure that anytime the dialog is shown or resized it gets centered (defaults to false)
* @cfg {Boolean/String} shadow True or &quot;sides&quot; <b>for</b> the <b>default</b> effect, &quot;frame&quot; <b>for</b> 4-way shadow, and &quot;drop&quot; <b>for</b> bottom-right
* shadow (defaults to false)
* @cfg {Number} shadowOffset The number of pixels to offset the shadow <b>if</b> displayed (defaults to 5)
* @cfg {String} buttonAlign Valid values are &quot;left,&quot; &quot;center&quot; and &quot;right&quot; (defaults to &quot;right&quot;)
* @cfg {Number} minButtonWidth Minimum width of all dialog buttons (defaults to 75)
* @cfg {Boolean} shim True to create an iframe shim that prevents selects from showing through (defaults to false)
* @constructor
* Create a <b>new</b> BasicDialog.
* @param {String/HTMLElement/Ext.Element} el The container element or DOM node, or its id
* @param {Object} config Configuration options
*/</i>
Ext.BasicDialog = <b>function</b>(el, config){
<b>this</b>.el = Ext.get(el);
<b>var</b> dh = Ext.DomHelper;
<b>if</b>(!<b>this</b>.el &amp;&amp; config &amp;&amp; config.autoCreate){
<b>if</b>(typeof config.autoCreate == &quot;object&quot;){
<b>if</b>(!config.autoCreate.id){
config.autoCreate.id = el;
}
<b>this</b>.el = dh.append(document.body,
config.autoCreate, true);
}<b>else</b>{
<b>this</b>.el = dh.append(document.body,
{tag: &quot;div&quot;, id: el, style:'visibility:hidden;'}, true);
}
}
el = <b>this</b>.el;
el.setDisplayed(true);
el.hide = <b>this</b>.hideAction;
<b>this</b>.id = el.id;
el.addClass(&quot;x-dlg&quot;);
Ext.apply(<b>this</b>, config);
<b>this</b>.proxy = el.createProxy(&quot;x-dlg-proxy&quot;);
<b>this</b>.proxy.hide = <b>this</b>.hideAction;
<b>this</b>.proxy.setOpacity(.5);
<b>this</b>.proxy.hide();
<b>if</b>(config.width){
el.setWidth(config.width);
}
<b>if</b>(config.height){
el.setHeight(config.height);
}
<b>this</b>.size = el.getSize();
<b>if</b>(typeof config.x != &quot;undefined&quot; &amp;&amp; <b>typeof</b> config.y != &quot;undefined&quot;){
<b>this</b>.xy = [config.x,config.y];
}<b>else</b>{
<b>this</b>.xy = el.getCenterXY(true);
}
<i>/** The header element @type Ext.Element */</i>
<b>this</b>.header = el.child(&quot;/.x-dlg-hd&quot;);
<i>/** The body element @type Ext.Element */</i>
<b>this</b>.body = el.child(&quot;/.x-dlg-bd&quot;);
<i>/** The footer element @type Ext.Element */</i>
<b>this</b>.footer = el.child(&quot;/.x-dlg-ft&quot;);
<b>if</b>(!<b>this</b>.header){
<b>this</b>.header = el.createChild({tag: &quot;div&quot;, cls:&quot;x-dlg-hd&quot;, html: &quot;&amp;#160;&quot;}, <b>this</b>.body ? <b>this</b>.body.dom : null);
}
<b>if</b>(!<b>this</b>.body){
<b>this</b>.body = el.createChild({tag: &quot;div&quot;, cls:&quot;x-dlg-bd&quot;});
}
<b>this</b>.header.unselectable();
<b>if</b>(this.title){
<b>this</b>.header.update(<b>this</b>.title);
}
<i>// <b>this</b> element allows the dialog to be focused <b>for</b> keyboard event</i>
<b>this</b>.focusEl = el.createChild({tag: &quot;a&quot;, href:&quot;#&quot;, cls:&quot;x-dlg-focus&quot;, tabIndex:&quot;-1&quot;});
<b>this</b>.focusEl.swallowEvent(&quot;click&quot;, true);
<b>this</b>.header.wrap({cls:&quot;x-dlg-hd-right&quot;}).wrap({cls:&quot;x-dlg-hd-left&quot;}, true);
<i>// wrap the body and footer <b>for</b> special rendering</i>
<b>this</b>.bwrap = <b>this</b>.body.wrap({tag: &quot;div&quot;, cls:&quot;x-dlg-dlg-body&quot;});
<b>if</b>(this.footer){
<b>this</b>.bwrap.dom.appendChild(<b>this</b>.footer.dom);
}
<b>this</b>.bg = <b>this</b>.el.createChild({
tag: &quot;div&quot;, cls:&quot;x-dlg-bg&quot;,
html: '&lt;div class=&quot;x-dlg-bg-left&quot;&gt;&lt;div class=&quot;x-dlg-bg-right&quot;&gt;&lt;div class=&quot;x-dlg-bg-center&quot;&gt;&amp;#160;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;'
});
<b>this</b>.centerBg = <b>this</b>.bg.child(&quot;div.x-dlg-bg-center&quot;);
<b>if</b>(this.autoScroll !== false &amp;&amp; !<b>this</b>.autoTabs){
<b>this</b>.body.setStyle(&quot;overflow&quot;, &quot;auto&quot;);
}
<b>this</b>.toolbox = <b>this</b>.el.createChild({cls: &quot;x-dlg-toolbox&quot;});
<b>if</b>(this.closable !== false){
<b>this</b>.el.addClass(&quot;x-dlg-closable&quot;);
<b>this</b>.close = <b>this</b>.toolbox.createChild({cls:&quot;x-dlg-close&quot;});
<b>this</b>.close.on(&quot;click&quot;, <b>this</b>.closeClick, <b>this</b>);
<b>this</b>.close.addClassOnOver(&quot;x-dlg-close-over&quot;);
}
<b>if</b>(this.collapsible !== false){
<b>this</b>.collapseBtn = <b>this</b>.toolbox.createChild({cls:&quot;x-dlg-collapse&quot;});
<b>this</b>.collapseBtn.on(&quot;click&quot;, <b>this</b>.collapseClick, <b>this</b>);
<b>this</b>.collapseBtn.addClassOnOver(&quot;x-dlg-collapse-over&quot;);
<b>this</b>.header.on(&quot;dblclick&quot;, <b>this</b>.collapseClick, <b>this</b>);
}
<b>if</b>(this.resizable !== false){
<b>this</b>.el.addClass(&quot;x-dlg-resizable&quot;);
<b>this</b>.resizer = <b>new</b> Ext.Resizable(el, {
minWidth: <b>this</b>.minWidth || 80,
minHeight:<b>this</b>.minHeight || 80,
handles: <b>this</b>.resizeHandles || &quot;all&quot;,
pinned: true
});
<b>this</b>.resizer.on(&quot;beforeresize&quot;, <b>this</b>.beforeResize, <b>this</b>);
<b>this</b>.resizer.on(&quot;resize&quot;, <b>this</b>.onResize, <b>this</b>);
}
<b>if</b>(this.draggable !== false){
el.addClass(&quot;x-dlg-draggable&quot;);
<b>if</b> (!<b>this</b>.proxyDrag) {
<b>var</b> dd = <b>new</b> Ext.dd.DD(el.dom.id, &quot;WindowDrag&quot;);
}
<b>else</b> {
<b>var</b> dd = <b>new</b> Ext.dd.DDProxy(el.dom.id, &quot;WindowDrag&quot;, {dragElId: <b>this</b>.proxy.id});
}
dd.setHandleElId(<b>this</b>.header.id);
dd.endDrag = <b>this</b>.endMove.createDelegate(<b>this</b>);
dd.startDrag = <b>this</b>.startMove.createDelegate(<b>this</b>);
dd.onDrag = <b>this</b>.onDrag.createDelegate(<b>this</b>);
dd.scroll = false;
<b>this</b>.dd = dd;
}
<b>if</b>(this.modal){
<b>this</b>.mask = dh.append(document.body, {tag: &quot;div&quot;, cls:&quot;x-dlg-mask&quot;}, true);
<b>this</b>.mask.enableDisplayMode(&quot;block&quot;);
<b>this</b>.mask.hide();
<b>this</b>.el.addClass(&quot;x-dlg-modal&quot;);
}
<b>if</b>(this.shadow){
<b>this</b>.shadow = <b>new</b> Ext.Shadow({
mode : <b>typeof</b> this.shadow == &quot;string&quot; ? <b>this</b>.shadow : &quot;sides&quot;,
offset : <b>this</b>.shadowOffset
});
}<b>else</b>{
<b>this</b>.shadowOffset = 0;
}
<b>if</b>(Ext.useShims &amp;&amp; <b>this</b>.shim !== false){
<b>this</b>.shim = <b>this</b>.el.createShim();
<b>this</b>.shim.hide = <b>this</b>.hideAction;
<b>this</b>.shim.hide();
}<b>else</b>{
<b>this</b>.shim = false;
}
<b>if</b>(this.autoTabs){
<b>this</b>.initTabs();
}
<b>this</b>.addEvents({
<i>/**
* @event keydown
* Fires when a key is pressed
* @param {Ext.BasicDialog} <b>this</b>
* @param {Ext.EventObject} e
*/</i>
&quot;keydown&quot; : true,
<i>/**
* @event move
* Fires when <b>this</b> dialog is moved by the user.
* @param {Ext.BasicDialog} <b>this</b>
* @param {Number} x The <b>new</b> page X
* @param {Number} y The <b>new</b> page Y
*/</i>
&quot;move&quot; : true,
<i>/**
* @event resize
* Fires when <b>this</b> dialog is resized by the user.
* @param {Ext.BasicDialog} <b>this</b>
* @param {Number} width The <b>new</b> width
* @param {Number} height The <b>new</b> height
*/</i>
&quot;resize&quot; : true,
<i>/**
* @event beforehide
* Fires before <b>this</b> dialog is hidden.
* @param {Ext.BasicDialog} <b>this</b>
*/</i>
&quot;beforehide&quot; : true,
<i>/**
* @event hide
* Fires when <b>this</b> dialog is hidden.
* @param {Ext.BasicDialog} <b>this</b>
*/</i>
&quot;hide&quot; : true,
<i>/**
* @event beforeshow
* Fires before <b>this</b> dialog is shown.
* @param {Ext.BasicDialog} <b>this</b>
*/</i>
&quot;beforeshow&quot; : true,
<i>/**
* @event show
* Fires when <b>this</b> dialog is shown.
* @param {Ext.BasicDialog} <b>this</b>
*/</i>
&quot;show&quot; : true
});
el.on(&quot;keydown&quot;, <b>this</b>.onKeyDown, <b>this</b>);
el.on(&quot;mousedown&quot;, <b>this</b>.toFront, <b>this</b>);
Ext.EventManager.onWindowResize(<b>this</b>.adjustViewport, <b>this</b>, true);
<b>this</b>.el.hide();
Ext.DialogManager.register(<b>this</b>);
Ext.BasicDialog.superclass.constructor.call(<b>this</b>);
};
Ext.extend(Ext.BasicDialog, Ext.util.Observable, {
shadowOffset: 5,
minHeight: 80,
minWidth: 200,
minButtonWidth: 75,
defaultButton: null,
buttonAlign: &quot;right&quot;,
tabTag: 'div',
firstShow: true,
<i>/**
* Sets the dialog title text
* @param {String} text The title text to display
* @<b>return</b> {Ext.BasicDialog} <b>this</b>
*/</i>
setTitle : <b>function</b>(text){
<b>this</b>.header.update(text);
<b>return</b> this;
},
<i>// private</i>
closeClick : <b>function</b>(){
<b>this</b>.hide();
},
<i>// private</i>
collapseClick : <b>function</b>(){
<b>this</b>[this.collapsed ? &quot;expand&quot; : &quot;collapse&quot;]();
},
<i>/**
* Collapses the dialog to its minimized state (only the title bar is visible).
* Equivalent to the user clicking the collapse dialog button.
*/</i>
collapse : <b>function</b>(){
<b>if</b>(!<b>this</b>.collapsed){
<b>this</b>.collapsed = true;
<b>this</b>.el.addClass(&quot;x-dlg-collapsed&quot;);
<b>this</b>.restoreHeight = <b>this</b>.el.getHeight();
<b>this</b>.resizeTo(<b>this</b>.el.getWidth(), <b>this</b>.header.getHeight());
}
},
<i>/**
* Expands a collapsed dialog back to its normal state. Equivalent to the user
* clicking the expand dialog button.
*/</i>
expand : <b>function</b>(){
<b>if</b>(this.collapsed){
<b>this</b>.collapsed = false;
<b>this</b>.el.removeClass(&quot;x-dlg-collapsed&quot;);
<b>this</b>.resizeTo(<b>this</b>.el.getWidth(), <b>this</b>.restoreHeight);
}
},
<i>/**
* Reinitializes the tabs component, clearing out old tabs and finding <b>new</b> ones.
* @<b>return</b> {Ext.TabPanel} The tabs component
*/</i>
initTabs : <b>function</b>(){
<b>var</b> tabs = <b>this</b>.getTabs();
<b>while</b>(tabs.getTab(0)){
tabs.removeTab(0);
}
<b>this</b>.el.select(<b>this</b>.tabTag+'.x-dlg-tab').each(<b>function</b>(el){
<b>var</b> dom = el.dom;
tabs.addTab(Ext.id(dom), dom.title);
dom.title = &quot;&quot;;
});
tabs.activate(0);
<b>return</b> tabs;
},
<i>// private</i>
beforeResize : <b>function</b>(){
<b>this</b>.resizer.minHeight = Math.max(<b>this</b>.minHeight, <b>this</b>.getHeaderFooterHeight(true)+40);
},
<i>// private</i>
onResize : <b>function</b>(){
<b>this</b>.refreshSize();
<b>this</b>.syncBodyHeight();
<b>this</b>.adjustAssets();
<b>this</b>.focus();
<b>this</b>.fireEvent(&quot;resize&quot;, <b>this</b>, <b>this</b>.size.width, <b>this</b>.size.height);
},
<i>// private</i>
onKeyDown : <b>function</b>(e){
<b>if</b>(this.isVisible()){
<b>this</b>.fireEvent(&quot;keydown&quot;, <b>this</b>, e);
}
},
<i>/**
* Resizes the dialog.
* @param {Number} width
* @param {Number} height
* @<b>return</b> {Ext.BasicDialog} <b>this</b>
*/</i>
resizeTo : <b>function</b>(width, height){
<b>this</b>.el.setSize(width, height);
<b>this</b>.size = {width: width, height: height};
<b>this</b>.syncBodyHeight();
<b>if</b>(this.fixedcenter){
<b>this</b>.center();
}
<b>if</b>(this.isVisible()){
<b>this</b>.constrainXY();
<b>this</b>.adjustAssets();
}
<b>this</b>.fireEvent(&quot;resize&quot;, <b>this</b>, width, height);
<b>return</b> this;
},
<i>/**
* Resizes the dialog to fit the specified content size.
* @param {Number} width
* @param {Number} height
* @<b>return</b> {Ext.BasicDialog} <b>this</b>
*/</i>
setContentSize : <b>function</b>(w, h){
h += <b>this</b>.getHeaderFooterHeight() + <b>this</b>.body.getMargins(&quot;tb&quot;);
w += <b>this</b>.body.getMargins(&quot;lr&quot;) + <b>this</b>.bwrap.getMargins(&quot;lr&quot;) + <b>this</b>.centerBg.getPadding(&quot;lr&quot;);
<i>//<b>if</b>(!<b>this</b>.el.isBorderBox()){</i>
h += <b>this</b>.body.getPadding(&quot;tb&quot;) + <b>this</b>.bwrap.getBorderWidth(&quot;tb&quot;) + <b>this</b>.body.getBorderWidth(&quot;tb&quot;) + <b>this</b>.el.getBorderWidth(&quot;tb&quot;);
w += <b>this</b>.body.getPadding(&quot;lr&quot;) + <b>this</b>.bwrap.getBorderWidth(&quot;lr&quot;) + <b>this</b>.body.getBorderWidth(&quot;lr&quot;) + <b>this</b>.bwrap.getPadding(&quot;lr&quot;) + <b>this</b>.el.getBorderWidth(&quot;lr&quot;);
<i>//}</i>
<b>if</b>(this.tabs){
h += <b>this</b>.tabs.stripWrap.getHeight() + <b>this</b>.tabs.bodyEl.getMargins(&quot;tb&quot;) + <b>this</b>.tabs.bodyEl.getPadding(&quot;tb&quot;);
w += <b>this</b>.tabs.bodyEl.getMargins(&quot;lr&quot;) + <b>this</b>.tabs.bodyEl.getPadding(&quot;lr&quot;);
}
<b>this</b>.resizeTo(w, h);
<b>return</b> this;
},
<i>/**
* Adds a key listener <b>for</b> when <b>this</b> dialog is displayed. This allows you to hook <b>in</b> a <b>function</b> that will be
* executed <b>in</b> response to a particular key being pressed <b>while</b> the dialog is active.
* @param {Number/Array/Object} key Either the numeric key code, array of key codes or an object <b>with</b> the following options:
* {key: (number or array), shift: (true/false), ctrl: (true/false), alt: (true/false)}
* @param {Function} fn The <b>function</b> to call
* @param {Object} scope (optional) The scope of the <b>function</b>
* @<b>return</b> {Ext.BasicDialog} <b>this</b>
*/</i>
addKeyListener : <b>function</b>(key, fn, scope){
<b>var</b> keyCode, shift, ctrl, alt;
<b>if</b>(typeof key == &quot;object&quot; &amp;&amp; !(key instanceof Array)){
keyCode = key[&quot;key&quot;];
shift = key[&quot;shift&quot;];
ctrl = key[&quot;ctrl&quot;];
alt = key[&quot;alt&quot;];
}<b>else</b>{
keyCode = key;
}
<b>var</b> handler = <b>function</b>(dlg, e){
<b>if</b>((!shift || e.shiftKey) &amp;&amp; (!ctrl || e.ctrlKey) &amp;&amp; (!alt || e.altKey)){
<b>var</b> k = e.getKey();
<b>if</b>(keyCode instanceof Array){
<b>for</b>(var i = 0, len = keyCode.length; i &lt; len; i++){
<b>if</b>(keyCode[i] == k){
fn.call(scope || window, dlg, k, e);
<b>return</b>;
}
}
}<b>else</b>{
<b>if</b>(k == keyCode){
fn.call(scope || window, dlg, k, e);
}
}
}
};
<b>this</b>.on(&quot;keydown&quot;, handler);
<b>return</b> this;
},
<i>/**
* Returns the TabPanel component (creates it <b>if</b> it doesn't exist).
* Note: If you wish to simply check <b>for</b> the existence of tabs without creating them,
* check <b>for</b> a null 'tabs' property.
* @<b>return</b> {Ext.TabPanel} The tabs component
*/</i>
getTabs : <b>function</b>(){
<b>if</b>(!<b>this</b>.tabs){
<b>this</b>.el.addClass(&quot;x-dlg-auto-tabs&quot;);
<b>this</b>.body.addClass(<b>this</b>.tabPosition == &quot;bottom&quot; ? &quot;x-tabs-bottom&quot; : &quot;x-tabs-top&quot;);
<b>this</b>.tabs = <b>new</b> Ext.TabPanel(<b>this</b>.body.dom, <b>this</b>.tabPosition == &quot;bottom&quot;);
}
<b>return</b> this.tabs;
},
<i>/**
* Adds a button to the footer section of the dialog.
* @param {String/Object} config A string becomes the button text, an object can either be a Button config
* object or a valid Ext.DomHelper element config
* @param {Function} handler The <b>function</b> called when the button is clicked
* @param {Object} scope (optional) The scope of the handler <b>function</b>
* @<b>return</b> {Ext.Button} <b>this</b>
*/</i>
addButton : <b>function</b>(config, handler, scope){
<b>var</b> dh = Ext.DomHelper;
<b>if</b>(!<b>this</b>.footer){
<b>this</b>.footer = dh.append(<b>this</b>.bwrap, {tag: &quot;div&quot;, cls:&quot;x-dlg-ft&quot;}, true);
}
<b>if</b>(!<b>this</b>.btnContainer){
<b>var</b> tb = <b>this</b>.footer.createChild({
tag:&quot;div&quot;,
cls:&quot;x-dlg-btns x-dlg-btns-&quot;+<b>this</b>.buttonAlign,
html:'&lt;table cellspacing=&quot;0&quot;&gt;&lt;tbody&gt;&lt;tr&gt;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;&lt;div class=&quot;x-clear&quot;&gt;&lt;/div&gt;'
}, null, true);
<b>this</b>.btnContainer = tb.firstChild.firstChild.firstChild;
}
<b>var</b> bconfig = {
handler: handler,
scope: scope,
minWidth: <b>this</b>.minButtonWidth,
hideParent:true
};
<b>if</b>(typeof config == &quot;string&quot;){
bconfig.text = config;
}<b>else</b>{
<b>if</b>(config.tag){
bconfig.dhconfig = config;
}<b>else</b>{
Ext.apply(bconfig, config);
}
}
<b>var</b> btn = <b>new</b> Ext.Button(
<b>this</b>.btnContainer.appendChild(document.createElement(&quot;td&quot;)),
bconfig
);
<b>this</b>.syncBodyHeight();
<b>if</b>(!<b>this</b>.buttons){
<i>/**
* Array of all the buttons that have been added to <b>this</b> dialog via addButton
* @type Array
*/</i>
<b>this</b>.buttons = [];
}
<b>this</b>.buttons.push(btn);
<b>return</b> btn;
},
<i>/**
* Sets the <b>default</b> button to be focused when the dialog is displayed.
* @param {Ext.BasicDialog.Button} btn The button object returned by {@link #addButton}
* @<b>return</b> {Ext.BasicDialog} <b>this</b>
*/</i>
setDefaultButton : <b>function</b>(btn){
<b>this</b>.defaultButton = btn;
<b>return</b> this;
},
<i>// private</i>
getHeaderFooterHeight : <b>function</b>(safe){
<b>var</b> height = 0;
<b>if</b>(this.header){
height += <b>this</b>.header.getHeight();
}
<b>if</b>(this.footer){
<b>var</b> fm = <b>this</b>.footer.getMargins();
height += (<b>this</b>.footer.getHeight()+fm.top+fm.bottom);
}
height += <b>this</b>.bwrap.getPadding(&quot;tb&quot;)+<b>this</b>.bwrap.getBorderWidth(&quot;tb&quot;);
height += <b>this</b>.centerBg.getPadding(&quot;tb&quot;);
<b>return</b> height;
},
<i>// private</i>
syncBodyHeight : <b>function</b>(){
<b>var</b> bd = <b>this</b>.body, cb = <b>this</b>.centerBg, bw = <b>this</b>.bwrap;
<b>var</b> height = <b>this</b>.size.height - <b>this</b>.getHeaderFooterHeight(false);
bd.setHeight(height-bd.getMargins(&quot;tb&quot;));
<b>var</b> hh = <b>this</b>.header.getHeight();
<b>var</b> h = <b>this</b>.size.height-hh;
cb.setHeight(h);
bw.setLeftTop(cb.getPadding(&quot;l&quot;), hh+cb.getPadding(&quot;t&quot;));
bw.setHeight(h-cb.getPadding(&quot;tb&quot;));
bw.setWidth(<b>this</b>.el.getWidth(true)-cb.getPadding(&quot;lr&quot;));
bd.setWidth(bw.getWidth(true));
<b>if</b>(this.tabs){
<b>this</b>.tabs.syncHeight();
<b>if</b>(Ext.isIE){
<b>this</b>.tabs.el.repaint();
}
}
},
<i>/**
* Restores the previous state of the dialog <b>if</b> Ext.state is configured.
* @<b>return</b> {Ext.BasicDialog} <b>this</b>
*/</i>
restoreState : <b>function</b>(){
<b>var</b> box = Ext.state.Manager.get(<b>this</b>.stateId || (<b>this</b>.el.id + &quot;-state&quot;));
<b>if</b>(box &amp;&amp; box.width){
<b>this</b>.xy = [box.x, box.y];
<b>this</b>.resizeTo(box.width, box.height);
}
<b>return</b> this;
},
<i>// private</i>
beforeShow : <b>function</b>(){
<b>this</b>.expand();
<b>if</b>(this.fixedcenter){
<b>this</b>.xy = <b>this</b>.el.getCenterXY(true);
}
<b>if</b>(this.modal){
Ext.get(document.body).addClass(&quot;x-body-masked&quot;);
<b>this</b>.mask.setSize(Ext.lib.Dom.getViewWidth(true), Ext.lib.Dom.getViewHeight(true));
<b>this</b>.mask.show();
}
<b>this</b>.constrainXY();
},
<i>// private</i>
animShow : <b>function</b>(){
<b>var</b> b = Ext.get(<b>this</b>.animateTarget, true).getBox();
<b>this</b>.proxy.setSize(b.width, b.height);
<b>this</b>.proxy.setLocation(b.x, b.y);
<b>this</b>.proxy.show();
<b>this</b>.proxy.setBounds(<b>this</b>.xy[0], <b>this</b>.xy[1], <b>this</b>.size.width, <b>this</b>.size.height,
true, .35, <b>this</b>.showEl.createDelegate(<b>this</b>));
},
<i>/**
* Shows the dialog.
* @param {String/HTMLElement/Ext.Element} animateTarget (optional) Reset the animation target
* @<b>return</b> {Ext.BasicDialog} <b>this</b>
*/</i>
show : <b>function</b>(animateTarget){
<b>if</b> (<b>this</b>.fireEvent(&quot;beforeshow&quot;, <b>this</b>) === false){
<b>return</b>;
}
<b>if</b>(this.syncHeightBeforeShow){
<b>this</b>.syncBodyHeight();
}<b>else</b> if(<b>this</b>.firstShow){
<b>this</b>.firstShow = false;
<b>this</b>.syncBodyHeight(); <i>// sync the height on the first show instead of <b>in</b> the constructor</i>
}
<b>this</b>.animateTarget = animateTarget || <b>this</b>.animateTarget;
<b>if</b>(!<b>this</b>.el.isVisible()){
<b>this</b>.beforeShow();
<b>if</b>(this.animateTarget){
<b>this</b>.animShow();
}<b>else</b>{
<b>this</b>.showEl();
}
}
<b>return</b> this;
},
<i>// private</i>
showEl : <b>function</b>(){
<b>this</b>.proxy.hide();
<b>this</b>.el.setXY(<b>this</b>.xy);
<b>this</b>.el.show();
<b>this</b>.adjustAssets(true);
<b>this</b>.toFront();
<b>this</b>.focus();
<i>// IE peekaboo bug - fix found by Dave Fenwick</i>
<b>if</b>(Ext.isIE){
<b>this</b>.el.repaint();
}
<b>this</b>.fireEvent(&quot;show&quot;, <b>this</b>);
},
<i>/**
* Focuses the dialog. If a defaultButton is set, it will receive focus, otherwise the
* dialog itself will receive focus.
*/</i>
focus : <b>function</b>(){
<b>if</b>(this.defaultButton){
<b>this</b>.defaultButton.focus();
}<b>else</b>{
<b>this</b>.focusEl.focus();
}
},
<i>// private</i>
constrainXY : <b>function</b>(){
<b>if</b>(this.constraintoviewport !== false){
<b>if</b>(!<b>this</b>.viewSize){
<b>if</b>(this.container){
<b>var</b> s = <b>this</b>.container.getSize();
<b>this</b>.viewSize = [s.width, s.height];
}<b>else</b>{
<b>this</b>.viewSize = [Ext.lib.Dom.getViewWidth(),Ext.lib.Dom.getViewHeight()];
}
}
<b>var</b> s = Ext.get(<b>this</b>.container||document).getScroll();
<b>var</b> x = <b>this</b>.xy[0], y = <b>this</b>.xy[1];
<b>var</b> w = <b>this</b>.size.width, h = <b>this</b>.size.height;
<b>var</b> vw = <b>this</b>.viewSize[0], vh = <b>this</b>.viewSize[1];
<i>// only move it <b>if</b> it needs it</i>
<b>var</b> moved = false;
<i>// first validate right/bottom</i>
<b>if</b>(x + w &gt; vw+s.left){
x = vw - w;
moved = true;
}
<b>if</b>(y + h &gt; vh+s.top){
y = vh - h;
moved = true;
}
<i>// then make sure top/left isn't negative</i>
<b>if</b>(x &lt; s.left){
x = s.left;
moved = true;
}
<b>if</b>(y &lt; s.top){
y = s.top;
moved = true;
}
<b>if</b>(moved){
<i>// cache xy</i>
<b>this</b>.xy = [x, y];
<b>if</b>(this.isVisible()){
<b>this</b>.el.setLocation(x, y);
<b>this</b>.adjustAssets();
}
}
}
},
<i>// private</i>
onDrag : <b>function</b>(){
<b>if</b>(!<b>this</b>.proxyDrag){
<b>this</b>.xy = <b>this</b>.el.getXY();
<b>this</b>.adjustAssets();
}
},
<i>// private</i>
adjustAssets : <b>function</b>(doShow){
<b>var</b> x = <b>this</b>.xy[0], y = <b>this</b>.xy[1];
<b>var</b> w = <b>this</b>.size.width, h = <b>this</b>.size.height;
<b>if</b>(doShow === true){
<b>if</b>(this.shadow){
<b>this</b>.shadow.show(<b>this</b>.el);
}
<b>if</b>(this.shim){
<b>this</b>.shim.show();
}
}
<b>if</b>(this.shadow &amp;&amp; <b>this</b>.shadow.isVisible()){
<b>this</b>.shadow.show(<b>this</b>.el);
}
<b>if</b>(this.shim &amp;&amp; <b>this</b>.shim.isVisible()){
<b>this</b>.shim.setBounds(x, y, w, h);
}
},
<i>// private</i>
adjustViewport : <b>function</b>(w, h){
<b>if</b>(!w || !h){
w = Ext.lib.Dom.getViewWidth();
h = Ext.lib.Dom.getViewHeight();
}
<i>// cache the size</i>
<b>this</b>.viewSize = [w, h];
<b>if</b>(this.modal &amp;&amp; <b>this</b>.mask.isVisible()){
<b>this</b>.mask.setSize(w, h); <i>// first make sure the mask isn't causing overflow</i>
<b>this</b>.mask.setSize(Ext.lib.Dom.getViewWidth(true), Ext.lib.Dom.getViewHeight(true));
}
<b>if</b>(this.isVisible()){
<b>this</b>.constrainXY();
}
},
<i>/**
* Destroys <b>this</b> dialog and all its supporting elements (including any tabs, shim,
* shadow, proxy, mask, etc.) Also removes all event listeners.
* @param {Boolean} removeEl (optional) true to remove the element from the DOM
*/</i>
destroy : <b>function</b>(removeEl){
<b>if</b>(this.isVisible()){
<b>this</b>.animateTarget = null;
<b>this</b>.hide();
}
Ext.EventManager.removeResizeListener(<b>this</b>.adjustViewport, <b>this</b>);
<b>if</b>(this.tabs){
<b>this</b>.tabs.destroy(removeEl);
}
Ext.destroy(
<b>this</b>.shim,
<b>this</b>.proxy,
<b>this</b>.resizer,
<b>this</b>.close,
<b>this</b>.mask
);
<b>if</b>(this.dd){
<b>this</b>.dd.unreg();
}
<b>if</b>(this.buttons){
<b>for</b>(var i = 0, len = <b>this</b>.buttons.length; i &lt; len; i++){
<b>this</b>.buttons[i].destroy();
}
}
<b>this</b>.el.removeAllListeners();
<b>if</b>(removeEl === true){
<b>this</b>.el.update(&quot;&quot;);
<b>this</b>.el.remove();
}
Ext.DialogManager.unregister(<b>this</b>);
},
<i>// private</i>
startMove : <b>function</b>(){
<b>if</b>(this.proxyDrag){
<b>this</b>.proxy.show();
}
<b>if</b>(this.constraintoviewport !== false){
<b>this</b>.dd.constrainTo(document.body, {right: <b>this</b>.shadowOffset, bottom: <b>this</b>.shadowOffset});
}
},
<i>// private</i>
endMove : <b>function</b>(){
<b>if</b>(!<b>this</b>.proxyDrag){
Ext.dd.DD.prototype.endDrag.apply(<b>this</b>.dd, arguments);
}<b>else</b>{
Ext.dd.DDProxy.prototype.endDrag.apply(<b>this</b>.dd, arguments);
<b>this</b>.proxy.hide();
}
<b>this</b>.refreshSize();
<b>this</b>.adjustAssets();
<b>this</b>.focus();
<b>this</b>.fireEvent(&quot;move&quot;, <b>this</b>, <b>this</b>.xy[0], <b>this</b>.xy[1]);
},
<i>/**
* Brings <b>this</b> dialog to the front of any other visible dialogs
* @<b>return</b> {Ext.BasicDialog} <b>this</b>
*/</i>
toFront : <b>function</b>(){
Ext.DialogManager.bringToFront(<b>this</b>);
<b>return</b> this;
},
<i>/**
* Sends <b>this</b> dialog to the back (under) of any other visible dialogs
* @<b>return</b> {Ext.BasicDialog} <b>this</b>
*/</i>
toBack : <b>function</b>(){
Ext.DialogManager.sendToBack(<b>this</b>);
<b>return</b> this;
},
<i>/**
* Centers <b>this</b> dialog <b>in</b> the viewport
* @<b>return</b> {Ext.BasicDialog} <b>this</b>
*/</i>
center : <b>function</b>(){
<b>var</b> xy = <b>this</b>.el.getCenterXY(true);
<b>this</b>.moveTo(xy[0], xy[1]);
<b>return</b> this;
},
<i>/**
* Moves the dialog's top-left corner to the specified point
* @param {Number} x
* @param {Number} y
* @<b>return</b> {Ext.BasicDialog} <b>this</b>
*/</i>
moveTo : <b>function</b>(x, y){
<b>this</b>.xy = [x,y];
<b>if</b>(this.isVisible()){
<b>this</b>.el.setXY(<b>this</b>.xy);
<b>this</b>.adjustAssets();
}
<b>return</b> this;
},
<i>/**
* Aligns the dialog to the specified element
* @param {String/HTMLElement/Ext.Element} element The element to align to.
* @param {String} position The position to align to (see {@link Ext.Element#alignTo} <b>for</b> more details).
* @param {Array} offsets (optional) Offset the positioning by [x, y]
* @<b>return</b> {Ext.BasicDialog} <b>this</b>
*/</i>
alignTo : <b>function</b>(element, position, offsets){
<b>this</b>.xy = <b>this</b>.el.getAlignToXY(element, position, offsets);
<b>if</b>(this.isVisible()){
<b>this</b>.el.setXY(<b>this</b>.xy);
<b>this</b>.adjustAssets();
}
<b>return</b> this;
},
<i>/**
* Anchors an element to another element and realigns it when the window is resized.
* @param {String/HTMLElement/Ext.Element} element The element to align to.
* @param {String} position The position to align to (see {@link Ext.Element#alignTo} <b>for</b> more details)
* @param {Array} offsets (optional) Offset the positioning by [x, y]
* @param {Boolean/Number} monitorScroll (optional) true to monitor body scroll and reposition. If <b>this</b> parameter
* is a number, it is used as the buffer delay (defaults to 50ms).
* @<b>return</b> {Ext.BasicDialog} <b>this</b>
*/</i>
anchorTo : <b>function</b>(el, alignment, offsets, monitorScroll){
<b>var</b> action = <b>function</b>(){
<b>this</b>.alignTo(el, alignment, offsets);
};
Ext.EventManager.onWindowResize(action, <b>this</b>);
<b>var</b> tm = <b>typeof</b> monitorScroll;
<b>if</b>(tm != 'undefined'){
Ext.EventManager.on(window, 'scroll', action, <b>this</b>,
{buffer: tm == 'number' ? monitorScroll : 50});
}
action.call(<b>this</b>);
<b>return</b> this;
},
<i>/**
* Returns true <b>if</b> the dialog is visible
* @<b>return</b> {Boolean}
*/</i>
isVisible : <b>function</b>(){
<b>return</b> this.el.isVisible();
},
<i>// private</i>
animHide : <b>function</b>(callback){
<b>var</b> b = Ext.get(<b>this</b>.animateTarget).getBox();
<b>this</b>.proxy.show();
<b>this</b>.proxy.setBounds(<b>this</b>.xy[0], <b>this</b>.xy[1], <b>this</b>.size.width, <b>this</b>.size.height);
<b>this</b>.el.hide();
<b>this</b>.proxy.setBounds(b.x, b.y, b.width, b.height, true, .35,
<b>this</b>.hideEl.createDelegate(<b>this</b>, [callback]));
},
<i>/**
* Hides the dialog.
* @param {Function} callback (optional) Function to call when the dialog is hidden
* @<b>return</b> {Ext.BasicDialog} <b>this</b>
*/</i>
hide : <b>function</b>(callback){
<b>if</b> (<b>this</b>.fireEvent(&quot;beforehide&quot;, <b>this</b>) === false){
<b>return</b>;
}
<b>if</b>(this.shadow){
<b>this</b>.shadow.hide();
}
<b>if</b>(this.shim) {
<b>this</b>.shim.hide();
}
<b>if</b>(this.animateTarget){
<b>this</b>.animHide(callback);
}<b>else</b>{
<b>this</b>.el.hide();
<b>this</b>.hideEl(callback);
}
<b>return</b> this;
},
<i>// private</i>
hideEl : <b>function</b>(callback){
<b>this</b>.proxy.hide();
<b>if</b>(this.modal){
<b>this</b>.mask.hide();
Ext.get(document.body).removeClass(&quot;x-body-masked&quot;);
}
<b>this</b>.fireEvent(&quot;hide&quot;, <b>this</b>);
<b>if</b>(typeof callback == &quot;<b>function</b>&quot;){
callback();
}
},
<i>// private</i>
hideAction : <b>function</b>(){
<b>this</b>.setLeft(&quot;-10000px&quot;);
<b>this</b>.setTop(&quot;-10000px&quot;);
<b>this</b>.setStyle(&quot;visibility&quot;, &quot;hidden&quot;);
},
<i>// private</i>
refreshSize : <b>function</b>(){
<b>this</b>.size = <b>this</b>.el.getSize();
<b>this</b>.xy = <b>this</b>.el.getXY();
Ext.state.Manager.set(<b>this</b>.stateId || <b>this</b>.el.id + &quot;-state&quot;, <b>this</b>.el.getBox());
},
<i>// private</i>
<i>// z-index is managed by the DialogManager and may be overwritten at any time</i>
setZIndex : <b>function</b>(index){
<b>if</b>(this.modal){
<b>this</b>.mask.setStyle(&quot;z-index&quot;, index);
}
<b>if</b>(this.shim){
<b>this</b>.shim.setStyle(&quot;z-index&quot;, ++index);
}
<b>if</b>(this.shadow){
<b>this</b>.shadow.setZIndex(++index);
}
<b>this</b>.el.setStyle(&quot;z-index&quot;, ++index);
<b>if</b>(this.proxy){
<b>this</b>.proxy.setStyle(&quot;z-index&quot;, ++index);
}
<b>if</b>(this.resizer){
<b>this</b>.resizer.proxy.setStyle(&quot;z-index&quot;, ++index);
}
<b>this</b>.lastZIndex = index;
},
<i>/**
* Returns the element <b>for</b> this dialog
* @<b>return</b> {Ext.Element} The underlying dialog Element
*/</i>
getEl : <b>function</b>(){
<b>return</b> this.el;
}
});
<i>/**
* @class Ext.DialogManager
* Provides global access to BasicDialogs that have been created and
* support <b>for</b> z-indexing (layering) multiple open dialogs.
*/</i>
Ext.DialogManager = <b>function</b>(){
<b>var</b> list = {};
<b>var</b> accessList = [];
<b>var</b> front = null;
<i>// private</i>
<b>var</b> sortDialogs = <b>function</b>(d1, d2){
<b>return</b> (!d1._lastAccess || d1._lastAccess &lt; d2._lastAccess) ? -1 : 1;
};
<i>// private</i>
<b>var</b> orderDialogs = <b>function</b>(){
accessList.sort(sortDialogs);
<b>var</b> seed = Ext.DialogManager.zseed;
<b>for</b>(var i = 0, len = accessList.length; i &lt; len; i++){
<b>var</b> dlg = accessList[i];
<b>if</b>(dlg){
dlg.setZIndex(seed + (i*10));
}
}
};
<b>return</b> {
<i>/**
* The starting z-index <b>for</b> BasicDialogs (defaults to 9000)
* @type Number The z-index value
*/</i>
zseed : 9000,
<i>// private</i>
register : <b>function</b>(dlg){
list[dlg.id] = dlg;
accessList.push(dlg);
},
<i>// private</i>
unregister : <b>function</b>(dlg){
<b>delete</b> list[dlg.id];
<b>if</b>(!accessList.indexOf){
<b>for</b>(var i = 0, len = accessList.length; i &lt; len; i++){
<b>if</b>(accessList[i] == dlg){
accessList.splice(i, 1);
<b>return</b>;
}
}
}<b>else</b>{
<b>var</b> i = accessList.indexOf(dlg);
<b>if</b>(i != -1){
accessList.splice(i, 1);
}
}
},
<i>/**
* Gets a registered dialog by id
* @param {String/Object} id The id of the dialog or a dialog
* @<b>return</b> {Ext.BasicDialog} <b>this</b>
*/</i>
get : <b>function</b>(id){
<b>return</b> typeof id == &quot;object&quot; ? id : list[id];
},
<i>/**
* Brings the specified dialog to the front
* @param {String/Object} dlg The id of the dialog or a dialog
* @<b>return</b> {Ext.BasicDialog} <b>this</b>
*/</i>
bringToFront : <b>function</b>(dlg){
dlg = <b>this</b>.get(dlg);
<b>if</b>(dlg != front){
front = dlg;
dlg._lastAccess = <b>new</b> Date().getTime();
orderDialogs();
}
<b>return</b> dlg;
},
<i>/**
* Sends the specified dialog to the back
* @param {String/Object} dlg The id of the dialog or a dialog
* @<b>return</b> {Ext.BasicDialog} <b>this</b>
*/</i>
sendToBack : <b>function</b>(dlg){
dlg = <b>this</b>.get(dlg);
dlg._lastAccess = -(<b>new</b> Date().getTime());
orderDialogs();
<b>return</b> dlg;
},
<i>/**
* Hides all dialogs
*/</i>
hideAll : <b>function</b>(){
<b>for</b>(var id <b>in</b> list){
<b>if</b>(list[id] &amp;&amp; <b>typeof</b> list[id] != &quot;<b>function</b>&quot; &amp;&amp; list[id].isVisible()){
list[id].hide();
}
}
}
};
}();
<i>/**
* @class Ext.LayoutDialog
* @extends Ext.BasicDialog
* Dialog which provides adjustments <b>for</b> working <b>with</b> a layout <b>in</b> a Dialog.
* Add your neccessary layout config options to the dialogs config.&lt;br&gt;
* Example Usage (including a nested layout):
* &lt;pre&gt;&lt;code&gt; <b>if</b>(!dialog){
dialog = <b>new</b> Ext.LayoutDialog(&quot;download-dlg&quot;, {
modal: true,
width:600,
height:450,
shadow:true,
minWidth:500,
minHeight:350,
autoTabs:true,
proxyDrag:true,
<i>// layout config merges <b>with</b> the dialog config</i>
center:{
tabPosition: &quot;top&quot;,
alwaysShowTabs: true
}
});
dialog.addKeyListener(27, dialog.hide, dialog);
dialog.setDefaultButton(dialog.addButton(&quot;Close&quot;, dialog.hide, dialog));
dialog.addButton(&quot;Build It!&quot;, <b>this</b>.getDownload, <b>this</b>);
<i>// we can even add nested layouts</i>
<b>var</b> innerLayout = <b>new</b> Ext.BorderLayout(&quot;dl-inner&quot;, {
east: {
initialSize: 200,
autoScroll:true,
split:true
},
center: {
autoScroll:true
}
});
innerLayout.beginUpdate();
innerLayout.add(&quot;east&quot;, <b>new</b> Ext.ContentPanel(&quot;dl-details&quot;));
innerLayout.add(&quot;center&quot;, <b>new</b> Ext.ContentPanel(&quot;selection-panel&quot;));
innerLayout.endUpdate(true);
<b>var</b> layout = dialog.getLayout();
layout.beginUpdate();
layout.add(&quot;center&quot;, <b>new</b> Ext.ContentPanel(&quot;standard-panel&quot;,
{title: &quot;Download the Source&quot;, fitToFrame:true}));
layout.add(&quot;center&quot;, <b>new</b> Ext.NestedLayoutPanel(innerLayout,
{title: &quot;Build your own ext.js&quot;}));
layout.getRegion(&quot;center&quot;).showPanel(sp);
layout.endUpdate();&lt;/code&gt;&lt;/pre&gt;
* @constructor
* @param {String/HTMLElement/Ext.Element} el The id of or container element
* @param {Object} config configuration options
*/</i>
Ext.LayoutDialog = <b>function</b>(el, config){
config.autoTabs = false;
Ext.LayoutDialog.superclass.constructor.call(<b>this</b>, el, config);
<b>this</b>.body.setStyle({overflow:&quot;hidden&quot;, position:&quot;relative&quot;});
<b>this</b>.layout = <b>new</b> Ext.BorderLayout(<b>this</b>.body.dom, config);
<b>this</b>.layout.monitorWindowResize = false;
<b>this</b>.el.addClass(&quot;x-dlg-auto-layout&quot;);
<i>// fix <b>case</b> when center region overwrites center <b>function</b></i>
<b>this</b>.center = Ext.BasicDialog.prototype.center;
<b>this</b>.on(&quot;show&quot;, <b>this</b>.layout.layout, <b>this</b>.layout, true);
};
Ext.extend(Ext.LayoutDialog, Ext.BasicDialog, {
<i>/**
* Ends update of the layout &lt;strike&gt;and resets display to none&lt;/strike&gt;. Use standard beginUpdate/endUpdate on the layout.
* @deprecated
*/</i>
endUpdate : <b>function</b>(){
<b>this</b>.layout.endUpdate();
},
<i>/**
* Begins an update of the layout &lt;strike&gt;and sets display to block and visibility to hidden&lt;/strike&gt;. Use standard beginUpdate/endUpdate on the layout.
* @deprecated
*/</i>
beginUpdate : <b>function</b>(){
<b>this</b>.layout.beginUpdate();
},
<i>/**
* Get the BorderLayout <b>for</b> this dialog
* @<b>return</b> {Ext.BorderLayout}
*/</i>
getLayout : <b>function</b>(){
<b>return</b> this.layout;
},
showEl : <b>function</b>(){
Ext.LayoutDialog.superclass.showEl.apply(<b>this</b>, arguments);
<b>if</b>(Ext.isIE7){
<b>this</b>.layout.layout();
}
},
<i>// private</i>
<i>// Use the syncHeightBeforeShow config option to control <b>this</b> automatically</i>
syncBodyHeight : <b>function</b>(){
Ext.LayoutDialog.superclass.syncBodyHeight.call(<b>this</b>);
<b>if</b>(this.layout){<b>this</b>.layout.layout();}
}
});</code></pre><hr><div style="font-size:10px;text-align:center;color:gray;">Ext - Copyright &copy; 2006-2007 Ext JS, LLC<br />All rights reserved.</div>
</body></html>