git.roojs.org Git - roojs1/blob - Roo/ReaderLayout.js

   1 /*
   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  * <script type="text/javascript">
  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  <pre><code>
  23 var reader = new Roo.ReaderLayout();
  24 var CP = Roo.ContentPanel;  // shortcut for adding
  25
  26 reader.beginUpdate();
  27 reader.add("north", new CP("north", "North"));
  28 reader.add("west", new CP("west", {title: "West"}));
  29 reader.add("east", new CP("east", {title: "East"}));
  30
  31 reader.regions.listView.add(new CP("listView", "List"));
  32 reader.regions.preview.add(new CP("preview", "Preview"));
  33 reader.endUpdate();
  34 </code></pre>
  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 Roo.ReaderLayout = function(config, renderTo){
  42     var c = config || {size:{}};
  43     Roo.ReaderLayout.superclass.constructor.call(this, renderTo || document.body, {
  44         north: c.north !== false ? Roo.apply({
  45             split:false,
  46             initialSize: 32,
  47             titlebar: false
  48         }, c.north) : false,
  49         west: c.west !== false ? Roo.apply({
  50             split:true,
  51             initialSize: 200,
  52             minSize: 175,
  53             maxSize: 400,
  54             titlebar: true,
  55             collapsible: true,
  56             animate: true,
  57             margins:{left:5,right:0,bottom:5,top:5},
  58             cmargins:{left:5,right:5,bottom:5,top:5}
  59         }, c.west) : false,
  60         east: c.east !== false ? Roo.apply({
  61             split:true,
  62             initialSize: 200,
  63             minSize: 175,
  64             maxSize: 400,
  65             titlebar: true,
  66             collapsible: true,
  67             animate: true,
  68             margins:{left:0,right:5,bottom:5,top:5},
  69             cmargins:{left:5,right:5,bottom:5,top:5}
  70         }, c.east) : false,
  71         center: Roo.apply({
  72             tabPosition: 'top',
  73             autoScroll:false,
  74             closeOnTab: true,
  75             titlebar:false,
  76             margins:{left:c.west!==false ? 0 : 5,right:c.east!==false ? 0 : 5,bottom:5,top:2}
  77         }, c.center)
  78     });
  79
  80     this.el.addClass('x-reader');
  81
  82     this.beginUpdate();
  83
  84     var inner = new Roo.BorderLayout(Roo.get(document.body).createChild(), {
  85         south: c.preview !== false ? Roo.apply({
  86             split:true,
  87             initialSize: 200,
  88             minSize: 100,
  89             autoScroll:true,
  90             collapsible:true,
  91             titlebar: true,
  92             cmargins:{top:5,left:0, right:0, bottom:0}
  93         }, c.preview) : false,
  94         center: Roo.apply({
  95             autoScroll:false,
  96             titlebar:false,
  97             minHeight:200
  98         }, c.listView)
  99     });
 100     this.add('center', new Roo.NestedLayoutPanel(inner,
 101             Roo.apply({title: c.mainTitle || '',tabTip:''},c.innerPanelCfg)));
 102
 103     this.endUpdate();
 104
 105     this.regions.preview = inner.getRegion('south');
 106     this.regions.listView = inner.getRegion('center');
 107 };
 108
 109 Roo.extend(Roo.ReaderLayout, Roo.BorderLayout);