git.roojs.org Git - roojs1/blob - docs/src/Roo_LayoutDialog.js.html

   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
   6  * @builder-top
   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.&lt;br&gt;
   9  * Example usage (including a nested layout):
  10  * &lt;pre&gt;&lt;code&gt;
  11 if(!dialog){
  12     dialog = new Roo.LayoutDialog(&quot;download-dlg&quot;, {
  13         modal: true,
  14         width:600,
  15         height:450,
  16         shadow:true,
  17         minWidth:500,
  18         minHeight:350,
  19         autoTabs:true,
  20         proxyDrag:true,
  21         // layout config merges with the dialog config
  22         center:{
  23             tabPosition: &quot;top&quot;,
  24             alwaysShowTabs: true
  25         }
  26     });
  27     dialog.addKeyListener(27, dialog.hide, dialog);
  28     dialog.setDefaultButton(dialog.addButton(&quot;Close&quot;, dialog.hide, dialog));
  29     dialog.addButton(&quot;Build It!&quot;, this.getDownload, this);
  30
  31     // we can even add nested layouts
  32     var innerLayout = new Roo.BorderLayout(&quot;dl-inner&quot;, {
  33         east: {
  34             initialSize: 200,
  35             autoScroll:true,
  36             split:true
  37         },
  38         center: {
  39             autoScroll:true
  40         }
  41     });
  42     innerLayout.beginUpdate();
  43     innerLayout.add(&quot;east&quot;, new Roo.ContentPanel(&quot;dl-details&quot;));
  44     innerLayout.add(&quot;center&quot;, new Roo.ContentPanel(&quot;selection-panel&quot;));
  45     innerLayout.endUpdate(true);
  46
  47     var layout = dialog.getLayout();
  48     layout.beginUpdate();
  49     layout.add(&quot;center&quot;, new Roo.ContentPanel(&quot;standard-panel&quot;,
  50                         {title: &quot;Download the Source&quot;, fitToFrame:true}));
  51     layout.add(&quot;center&quot;, new Roo.NestedLayoutPanel(innerLayout,
  52                {title: &quot;Build your own roo.js&quot;}));
  53     layout.getRegion(&quot;center&quot;).showPanel(sp);
  54     layout.endUpdate();
  55 }
  56 &lt;/code&gt;&lt;/pre&gt;
  57     * @constructor
  58     * @param {String/HTMLElement/Roo.Element} el The id of or container element, or config
  59     * @param {Object} config configuration options
  60   */
  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">){
  62
  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">}
  72
  73
  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">&quot;hidden&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">position</span><span class="jsdoc-syntax">:</span><span class="jsdoc-string">&quot;relative&quot;</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">&quot;x-dlg-auto-layout&quot;</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">&quot;show&quot;</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">);
  87     }
  88
  89
  90 };
  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">, {
  92
  93
  94     </span><span class="jsdoc-comment">/**
  95      * @cfg {Roo.LayoutRegion} east
  96      */
  97     /**
  98      * @cfg {Roo.LayoutRegion} west
  99      */
 100     /**
 101      * @cfg {Roo.LayoutRegion} south
 102      */
 103     /**
 104      * @cfg {Roo.LayoutRegion} north
 105      */
 106     /**
 107      * @cfg {Roo.LayoutRegion} center
 108      */
 109     /**
 110      * @cfg {Roo.Button} buttons[]  Bottom buttons..
 111      */
 112
 113
 114     /**
 115      * Ends update of the layout &lt;strike&gt;and resets display to none&lt;/strike&gt;. Use standard beginUpdate/endUpdate on the layout.
 116      * @deprecated
 117      */
 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">();
 120     },
 121
 122     </span><span class="jsdoc-comment">/**
 123      * 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.
 124      *  @deprecated
 125      */
 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">();
 128     },
 129
 130     </span><span class="jsdoc-comment">/**
 131      * Get the BorderLayout for this dialog
 132      * @return {Roo.BorderLayout}
 133      */
 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">;
 136     },
 137
 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">();
 142         }
 143     },
 144
 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">();}
 150     },
 151
 152       </span><span class="jsdoc-comment">/**
 153      * Add an xtype element (actually adds to the layout.)
 154      * @return {Object} xdata xtype object data.
 155      */
 156
 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">);
 159     }
 160 });</span></code></body></html>