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

   1 <html><head><title>/home/edward/gitlive/roojs1/Roo/ReaderLayout.js</title><link rel="stylesheet" type="text/css" href="../../css/highlight-js.css"/></head><body class="highlightpage"><code class="jsdoc-pretty"><span class="jsdoc-comment">/*
   2  * Based on:
   3  * Ext JS Library 1.1.1
   4  * Copyright(c) 2006-2007, Ext JS, LLC.
   5  *
   6  * Originally Released Under LGPL - original licence link has changed is not relivant.
   7  *
   8  * Fork - LGPL
   9  * &lt;script type=&quot;text/javascript&quot;&gt;
  10  */
  11
  12
  13 /**
  14  * @class Roo.ReaderLayout
  15  * @extends Roo.BorderLayout
  16  * This is a pre-built layout that represents a classic, 5-pane application.  It consists of a header, a primary
  17  * center region containing two nested regions (a top one for a list view and one for item preview below),
  18  * and regions on either side that can be used for navigation, application commands, informational displays, etc.
  19  * The setup and configuration work exactly the same as it does for a {@link Roo.BorderLayout} - this class simply
  20  * expedites the setup of the overall layout and regions for this common application style.
  21  * Example:
  22  &lt;pre&gt;&lt;code&gt;
  23 var reader = new Roo.ReaderLayout();
  24 var CP = Roo.ContentPanel;  // shortcut for adding
  25
  26 reader.beginUpdate();
  27 reader.add(&quot;north&quot;, new CP(&quot;north&quot;, &quot;North&quot;));
  28 reader.add(&quot;west&quot;, new CP(&quot;west&quot;, {title: &quot;West&quot;}));
  29 reader.add(&quot;east&quot;, new CP(&quot;east&quot;, {title: &quot;East&quot;}));
  30
  31 reader.regions.listView.add(new CP(&quot;listView&quot;, &quot;List&quot;));
  32 reader.regions.preview.add(new CP(&quot;preview&quot;, &quot;Preview&quot;));
  33 reader.endUpdate();
  34 &lt;/code&gt;&lt;/pre&gt;
  35 * @constructor
  36 * Create a new ReaderLayout
  37 * @param {Object} config Configuration options
  38 * @param {String/HTMLElement/Element} container (optional) The container this layout is bound to (defaults to
  39 * document.body if omitted)
  40 */
  41 </span><span class="jsdoc-var">Roo.ReaderLayout </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">renderTo</span><span class="jsdoc-syntax">){
  42     </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">c </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">config </span><span class="jsdoc-syntax">|| {</span><span class="jsdoc-var">size</span><span class="jsdoc-syntax">:{}};
  43     </span><span class="jsdoc-var">Roo.ReaderLayout.superclass.constructor.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">renderTo </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">document.body</span><span class="jsdoc-syntax">, {
  44         </span><span class="jsdoc-var">north</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">c.north </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-keyword">false </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">Roo.apply</span><span class="jsdoc-syntax">({
  45             </span><span class="jsdoc-var">split</span><span class="jsdoc-syntax">:</span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
  46             </span><span class="jsdoc-var">initialSize</span><span class="jsdoc-syntax">: 32,
  47             </span><span class="jsdoc-var">titlebar</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false
  48         </span><span class="jsdoc-syntax">}, </span><span class="jsdoc-var">c.north</span><span class="jsdoc-syntax">) : </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
  49         </span><span class="jsdoc-var">west</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">c.west </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-keyword">false </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">Roo.apply</span><span class="jsdoc-syntax">({
  50             </span><span class="jsdoc-var">split</span><span class="jsdoc-syntax">:</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
  51             </span><span class="jsdoc-var">initialSize</span><span class="jsdoc-syntax">: 200,
  52             </span><span class="jsdoc-var">minSize</span><span class="jsdoc-syntax">: 175,
  53             </span><span class="jsdoc-var">maxSize</span><span class="jsdoc-syntax">: 400,
  54             </span><span class="jsdoc-var">titlebar</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
  55             </span><span class="jsdoc-var">collapsible</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
  56             </span><span class="jsdoc-var">animate</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
  57             </span><span class="jsdoc-var">margins</span><span class="jsdoc-syntax">:{</span><span class="jsdoc-var">left</span><span class="jsdoc-syntax">:5,</span><span class="jsdoc-var">right</span><span class="jsdoc-syntax">:0,</span><span class="jsdoc-var">bottom</span><span class="jsdoc-syntax">:5,</span><span class="jsdoc-var">top</span><span class="jsdoc-syntax">:5},
  58             </span><span class="jsdoc-var">cmargins</span><span class="jsdoc-syntax">:{</span><span class="jsdoc-var">left</span><span class="jsdoc-syntax">:5,</span><span class="jsdoc-var">right</span><span class="jsdoc-syntax">:5,</span><span class="jsdoc-var">bottom</span><span class="jsdoc-syntax">:5,</span><span class="jsdoc-var">top</span><span class="jsdoc-syntax">:5}
  59         }, </span><span class="jsdoc-var">c.west</span><span class="jsdoc-syntax">) : </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
  60         </span><span class="jsdoc-var">east</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">c.east </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-keyword">false </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">Roo.apply</span><span class="jsdoc-syntax">({
  61             </span><span class="jsdoc-var">split</span><span class="jsdoc-syntax">:</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
  62             </span><span class="jsdoc-var">initialSize</span><span class="jsdoc-syntax">: 200,
  63             </span><span class="jsdoc-var">minSize</span><span class="jsdoc-syntax">: 175,
  64             </span><span class="jsdoc-var">maxSize</span><span class="jsdoc-syntax">: 400,
  65             </span><span class="jsdoc-var">titlebar</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
  66             </span><span class="jsdoc-var">collapsible</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
  67             </span><span class="jsdoc-var">animate</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
  68             </span><span class="jsdoc-var">margins</span><span class="jsdoc-syntax">:{</span><span class="jsdoc-var">left</span><span class="jsdoc-syntax">:0,</span><span class="jsdoc-var">right</span><span class="jsdoc-syntax">:5,</span><span class="jsdoc-var">bottom</span><span class="jsdoc-syntax">:5,</span><span class="jsdoc-var">top</span><span class="jsdoc-syntax">:5},
  69             </span><span class="jsdoc-var">cmargins</span><span class="jsdoc-syntax">:{</span><span class="jsdoc-var">left</span><span class="jsdoc-syntax">:5,</span><span class="jsdoc-var">right</span><span class="jsdoc-syntax">:5,</span><span class="jsdoc-var">bottom</span><span class="jsdoc-syntax">:5,</span><span class="jsdoc-var">top</span><span class="jsdoc-syntax">:5}
  70         }, </span><span class="jsdoc-var">c.east</span><span class="jsdoc-syntax">) : </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
  71         </span><span class="jsdoc-var">center</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">Roo.apply</span><span class="jsdoc-syntax">({
  72             </span><span class="jsdoc-var">tabPosition</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'top'</span><span class="jsdoc-syntax">,
  73             </span><span class="jsdoc-var">autoScroll</span><span class="jsdoc-syntax">:</span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
  74             </span><span class="jsdoc-var">closeOnTab</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
  75             </span><span class="jsdoc-var">titlebar</span><span class="jsdoc-syntax">:</span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
  76             </span><span class="jsdoc-var">margins</span><span class="jsdoc-syntax">:{</span><span class="jsdoc-var">left</span><span class="jsdoc-syntax">:</span><span class="jsdoc-var">c.west</span><span class="jsdoc-syntax">!==</span><span class="jsdoc-keyword">false </span><span class="jsdoc-syntax">? 0 : 5,</span><span class="jsdoc-var">right</span><span class="jsdoc-syntax">:</span><span class="jsdoc-var">c.east</span><span class="jsdoc-syntax">!==</span><span class="jsdoc-keyword">false </span><span class="jsdoc-syntax">? 0 : 5,</span><span class="jsdoc-var">bottom</span><span class="jsdoc-syntax">:5,</span><span class="jsdoc-var">top</span><span class="jsdoc-syntax">:2}
  77         }, </span><span class="jsdoc-var">c.center</span><span class="jsdoc-syntax">)
  78     });
  79
  80     </span><span class="jsdoc-var">this.el.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'x-reader'</span><span class="jsdoc-syntax">);
  81
  82     </span><span class="jsdoc-var">this.beginUpdate</span><span class="jsdoc-syntax">();
  83
  84     </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">inner </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">Roo.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">document.body</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.createChild</span><span class="jsdoc-syntax">(), {
  85         </span><span class="jsdoc-var">south</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">c.preview </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-keyword">false </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">Roo.apply</span><span class="jsdoc-syntax">({
  86             </span><span class="jsdoc-var">split</span><span class="jsdoc-syntax">:</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
  87             </span><span class="jsdoc-var">initialSize</span><span class="jsdoc-syntax">: 200,
  88             </span><span class="jsdoc-var">minSize</span><span class="jsdoc-syntax">: 100,
  89             </span><span class="jsdoc-var">autoScroll</span><span class="jsdoc-syntax">:</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
  90             </span><span class="jsdoc-var">collapsible</span><span class="jsdoc-syntax">:</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
  91             </span><span class="jsdoc-var">titlebar</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
  92             </span><span class="jsdoc-var">cmargins</span><span class="jsdoc-syntax">:{</span><span class="jsdoc-var">top</span><span class="jsdoc-syntax">:5,</span><span class="jsdoc-var">left</span><span class="jsdoc-syntax">:0, </span><span class="jsdoc-var">right</span><span class="jsdoc-syntax">:0, </span><span class="jsdoc-var">bottom</span><span class="jsdoc-syntax">:0}
  93         }, </span><span class="jsdoc-var">c.preview</span><span class="jsdoc-syntax">) : </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
  94         </span><span class="jsdoc-var">center</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">Roo.apply</span><span class="jsdoc-syntax">({
  95             </span><span class="jsdoc-var">autoScroll</span><span class="jsdoc-syntax">:</span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
  96             </span><span class="jsdoc-var">titlebar</span><span class="jsdoc-syntax">:</span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
  97             </span><span class="jsdoc-var">minHeight</span><span class="jsdoc-syntax">:200
  98         }, </span><span class="jsdoc-var">c.listView</span><span class="jsdoc-syntax">)
  99     });
 100     </span><span class="jsdoc-var">this.add</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'center'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo.NestedLayoutPanel</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">inner</span><span class="jsdoc-syntax">,
 101             </span><span class="jsdoc-var">Roo.apply</span><span class="jsdoc-syntax">({</span><span class="jsdoc-var">title</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">c.mainTitle </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">,</span><span class="jsdoc-var">tabTip</span><span class="jsdoc-syntax">:</span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">},</span><span class="jsdoc-var">c.innerPanelCfg</span><span class="jsdoc-syntax">)));
 102
 103     </span><span class="jsdoc-var">this.endUpdate</span><span class="jsdoc-syntax">();
 104
 105     </span><span class="jsdoc-var">this.regions.preview </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">inner.getRegion</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'south'</span><span class="jsdoc-syntax">);
 106     </span><span class="jsdoc-var">this.regions.listView </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">inner.getRegion</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'center'</span><span class="jsdoc-syntax">);
 107 };
 108
 109 </span><span class="jsdoc-var">Roo.extend</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.ReaderLayout</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">Roo.BorderLayout</span><span class="jsdoc-syntax">);</span></code></body></html>