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):
12 dialog = new Roo.LayoutDialog("download-dlg", {
21 // layout config merges with the dialog config
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);
58 * @param {String/HTMLElement/Roo.Element} el The id of or container element, or config
59 * @param {Object} config configuration options
61 Roo.LayoutDialog = function(el, 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;
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);
84 var xitems = config.items;
86 Roo.each(xitems, this.addxtype, this);
91 Roo.extend(Roo.LayoutDialog, Roo.BasicDialog, {
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 endUpdate : function(){
119 this.layout.endUpdate();
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 beginUpdate : function(){
127 this.layout.beginUpdate();
131 * Get the BorderLayout for this dialog
132 * @return {Roo.BorderLayout}
134 getLayout : function(){
139 Roo.LayoutDialog.superclass.showEl.apply(this, arguments);
141 this.layout.layout();
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();}
153 * Add an xtype element (actually adds to the layout.)
154 * @return {Object} xdata xtype object data.
157 addxtype : function(c) {
158 return this.layout.addxtype(c);