1 <html><head><title>Roo/LayoutDialog.js</title><link rel="stylesheet" type="text/css" href="../../css/highlight-js.css"/></head><body class="highlightpage"><code class="jsdoc-pretty">
2 <span class="jsdoc-comment">/**
3 * @class Roo.LayoutDialog
4 * @extends Roo.BasicDialog
5 * @children Roo.ContentPanel
7 * Dialog which provides adjustments for working with a layout in a Dialog.
8 * Add your necessary layout config options to the dialog's config.<br>
9 * Example usage (including a nested layout):
10 * <pre><code>
12 dialog = new Roo.LayoutDialog("download-dlg", {
21 // layout config merges with the dialog config
23 tabPosition: "top",
27 dialog.addKeyListener(27, dialog.hide, dialog);
28 dialog.setDefaultButton(dialog.addButton("Close", dialog.hide, dialog));
29 dialog.addButton("Build It!", this.getDownload, this);
31 // we can even add nested layouts
32 var innerLayout = new Roo.BorderLayout("dl-inner", {
42 innerLayout.beginUpdate();
43 innerLayout.add("east", new Roo.ContentPanel("dl-details"));
44 innerLayout.add("center", new Roo.ContentPanel("selection-panel"));
45 innerLayout.endUpdate(true);
47 var layout = dialog.getLayout();
49 layout.add("center", new Roo.ContentPanel("standard-panel",
50 {title: "Download the Source", fitToFrame:true}));
51 layout.add("center", new Roo.NestedLayoutPanel(innerLayout,
52 {title: "Build your own roo.js"}));
53 layout.getRegion("center").showPanel(sp);
56 </code></pre>
58 * @param {String/HTMLElement/Roo.Element} el The id of or container element, or config
59 * @param {Object} config configuration options
61 </span><span class="jsdoc-var">Roo.LayoutDialog </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">cfg</span><span class="jsdoc-syntax">){
63 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">cfg</span><span class="jsdoc-syntax">;
64 </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">typeof</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">cfg</span><span class="jsdoc-syntax">) == </span><span class="jsdoc-string">'undefined'</span><span class="jsdoc-syntax">) {
65 </span><span class="jsdoc-var">config </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.apply</span><span class="jsdoc-syntax">({}, </span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">);
66 </span><span class="jsdoc-comment">// not sure why we use documentElement here.. - it should always be body.
67 // IE7 borks horribly if we use documentElement.
68 // webkit also does not like documentElement - it creates a body element...
69 </span><span class="jsdoc-var">el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.get</span><span class="jsdoc-syntax">( </span><span class="jsdoc-var">document.body </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">document.documentElement </span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.createChild</span><span class="jsdoc-syntax">();
70 </span><span class="jsdoc-comment">//config.autoCreate = true;
71 </span><span class="jsdoc-syntax">}
74 </span><span class="jsdoc-var">config.autoTabs </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
75 </span><span class="jsdoc-var">Roo.LayoutDialog.superclass.constructor.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">);
76 </span><span class="jsdoc-var">this.body.setStyle</span><span class="jsdoc-syntax">({</span><span class="jsdoc-var">overflow</span><span class="jsdoc-syntax">:</span><span class="jsdoc-string">"hidden"</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">position</span><span class="jsdoc-syntax">:</span><span class="jsdoc-string">"relative"</span><span class="jsdoc-syntax">});
77 </span><span class="jsdoc-var">this.layout </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo.BorderLayout</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.body.dom</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">);
78 </span><span class="jsdoc-var">this.layout.monitorWindowResize </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
79 </span><span class="jsdoc-var">this.el.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">"x-dlg-auto-layout"</span><span class="jsdoc-syntax">);
80 </span><span class="jsdoc-comment">// fix case when center region overwrites center function
81 </span><span class="jsdoc-var">this.center </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.BasicDialog.prototype.center</span><span class="jsdoc-syntax">;
82 </span><span class="jsdoc-var">this.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">"show"</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.layout.layout</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.layout</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
83 </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">config.items</span><span class="jsdoc-syntax">) {
84 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">xitems </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">config.items</span><span class="jsdoc-syntax">;
85 </span><span class="jsdoc-keyword">delete </span><span class="jsdoc-var">config.items</span><span class="jsdoc-syntax">;
86 </span><span class="jsdoc-var">Roo.each</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">xitems</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.addxtype</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
91 </span><span class="jsdoc-var">Roo.extend</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.LayoutDialog</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">Roo.BasicDialog</span><span class="jsdoc-syntax">, {
94 </span><span class="jsdoc-comment">/**
95 * @cfg {Roo.LayoutRegion} east
98 * @cfg {Roo.LayoutRegion} west
101 * @cfg {Roo.LayoutRegion} south
104 * @cfg {Roo.LayoutRegion} north
107 * @cfg {Roo.LayoutRegion} center
110 * @cfg {Roo.Button} buttons[] Bottom buttons..
115 * Ends update of the layout <strike>and resets display to none</strike>. Use standard beginUpdate/endUpdate on the layout.
118 </span><span class="jsdoc-var">endUpdate </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
119 </span><span class="jsdoc-var">this.layout.endUpdate</span><span class="jsdoc-syntax">();
122 </span><span class="jsdoc-comment">/**
123 * Begins an update of the layout <strike>and sets display to block and visibility to hidden</strike>. Use standard beginUpdate/endUpdate on the layout.
126 </span><span class="jsdoc-var">beginUpdate </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
127 </span><span class="jsdoc-var">this.layout.beginUpdate</span><span class="jsdoc-syntax">();
130 </span><span class="jsdoc-comment">/**
131 * Get the BorderLayout for this dialog
132 * @return {Roo.BorderLayout}
134 </span><span class="jsdoc-var">getLayout </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
135 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.layout</span><span class="jsdoc-syntax">;
138 </span><span class="jsdoc-var">showEl </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
139 </span><span class="jsdoc-var">Roo.LayoutDialog.superclass.showEl.apply</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">arguments</span><span class="jsdoc-syntax">);
140 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.isIE7</span><span class="jsdoc-syntax">){
141 </span><span class="jsdoc-var">this.layout.layout</span><span class="jsdoc-syntax">();
145 </span><span class="jsdoc-comment">// private
146 // Use the syncHeightBeforeShow config option to control this automatically
147 </span><span class="jsdoc-var">syncBodyHeight </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
148 </span><span class="jsdoc-var">Roo.LayoutDialog.superclass.syncBodyHeight.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
149 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.layout</span><span class="jsdoc-syntax">){</span><span class="jsdoc-var">this.layout.layout</span><span class="jsdoc-syntax">();}
152 </span><span class="jsdoc-comment">/**
153 * Add an xtype element (actually adds to the layout.)
154 * @return {Object} xdata xtype object data.
157 </span><span class="jsdoc-var">addxtype </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">c</span><span class="jsdoc-syntax">) {
158 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.layout.addxtype</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">c</span><span class="jsdoc-syntax">);
160 });</span></code></body></html>