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

   1
   2 /**
   3  * @class Roo.LayoutDialog
   4  * @extends Roo.BasicDialog
   5  * @children Roo.ContentPanel
   6  * @parent builder none
   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>
  11 if(!dialog){
  12     dialog = new Roo.LayoutDialog("download-dlg", {
  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: "top",
  24             alwaysShowTabs: true
  25         }
  26     });
  27     dialog.addKeyListener(27, dialog.hide, dialog);
  28     dialog.setDefaultButton(dialog.addButton("Close", dialog.hide, dialog));
  29     dialog.addButton("Build It!", this.getDownload, this);
  30
  31     // we can even add nested layouts
  32     var innerLayout = new Roo.BorderLayout("dl-inner", {
  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("east", new Roo.ContentPanel("dl-details"));
  44     innerLayout.add("center", new Roo.ContentPanel("selection-panel"));
  45     innerLayout.endUpdate(true);
  46
  47     var layout = dialog.getLayout();
  48     layout.beginUpdate();
  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);
  54     layout.endUpdate();
  55 }
  56 </code></pre>
  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 Roo.LayoutDialog = function(el, cfg){
  62
  63     var config=  cfg;
  64     if (typeof(cfg) == 'undefined') {
  65         config = Roo.apply({}, el);
  66         // 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         el = Roo.get( document.body || document.documentElement ).createChild();
  70         //config.autoCreate = true;
  71     }
  72
  73
  74     config.autoTabs = false;
  75     Roo.LayoutDialog.superclass.constructor.call(this, el, config);
  76     this.body.setStyle({overflow:"hidden", position:"relative"});
  77     this.layout = new Roo.BorderLayout(this.body.dom, config);
  78     this.layout.monitorWindowResize = false;
  79     this.el.addClass("x-dlg-auto-layout");
  80     // fix case when center region overwrites center function
  81     this.center = Roo.BasicDialog.prototype.center;
  82     this.on("show", this.layout.layout, this.layout, true);
  83     if (config.items) {
  84         var xitems = config.items;
  85         delete config.items;
  86         Roo.each(xitems, this.addxtype, this);
  87     }
  88
  89
  90 };
  91 Roo.extend(Roo.LayoutDialog, Roo.BasicDialog, {
  92
  93
  94     /**
  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 <strike>and resets display to none</strike>. Use standard beginUpdate/endUpdate on the layout.
 116      * @deprecated
 117      */
 118     endUpdate : function(){
 119         this.layout.endUpdate();
 120     },
 121
 122     /**
 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.
 124      *  @deprecated
 125      */
 126     beginUpdate : function(){
 127         this.layout.beginUpdate();
 128     },
 129
 130     /**
 131      * Get the BorderLayout for this dialog
 132      * @return {Roo.BorderLayout}
 133      */
 134     getLayout : function(){
 135         return this.layout;
 136     },
 137
 138     showEl : function(){
 139         Roo.LayoutDialog.superclass.showEl.apply(this, arguments);
 140         if(Roo.isIE7){
 141             this.layout.layout();
 142         }
 143     },
 144
 145     // private
 146     // Use the syncHeightBeforeShow config option to control this automatically
 147     syncBodyHeight : function(){
 148         Roo.LayoutDialog.superclass.syncBodyHeight.call(this);
 149         if(this.layout){this.layout.layout();}
 150     },
 151
 152       /**
 153      * Add an xtype element (actually adds to the layout.)
 154      * @return {Object} xdata xtype object data.
 155      */
 156
 157     addxtype : function(c) {
 158         return this.layout.addxtype(c);
 159     }
 160 });