From 493a940e5d6b9e6d8856a779c0ad22a9ce04a3c8 Mon Sep 17 00:00:00 2001 From: Alan Knowles Date: Thu, 29 Jul 2021 13:40:20 +0800 Subject: [PATCH] Roo/LayoutDialog.js --- Roo/LayoutDialog.js | 160 ++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 160 insertions(+) create mode 100644 Roo/LayoutDialog.js diff --git a/Roo/LayoutDialog.js b/Roo/LayoutDialog.js new file mode 100644 index 0000000000..8433c54b9d --- /dev/null +++ b/Roo/LayoutDialog.js @@ -0,0 +1,160 @@ + +/** + * @class Roo.LayoutDialog + * @extends Roo.BasicDialog + * @children Roo.ContentPanel + * @builder-top + * Dialog which provides adjustments for working with a layout in a Dialog. + * Add your necessary layout config options to the dialog's config.
+ * Example usage (including a nested layout): + *

+if(!dialog){
+    dialog = new Roo.LayoutDialog("download-dlg", {
+        modal: true,
+        width:600,
+        height:450,
+        shadow:true,
+        minWidth:500,
+        minHeight:350,
+        autoTabs:true,
+        proxyDrag:true,
+        // layout config merges with the dialog config
+        center:{
+            tabPosition: "top",
+            alwaysShowTabs: true
+        }
+    });
+    dialog.addKeyListener(27, dialog.hide, dialog);
+    dialog.setDefaultButton(dialog.addButton("Close", dialog.hide, dialog));
+    dialog.addButton("Build It!", this.getDownload, this);
+
+    // we can even add nested layouts
+    var innerLayout = new Roo.BorderLayout("dl-inner", {
+        east: {
+            initialSize: 200,
+            autoScroll:true,
+            split:true
+        },
+        center: {
+            autoScroll:true
+        }
+    });
+    innerLayout.beginUpdate();
+    innerLayout.add("east", new Roo.ContentPanel("dl-details"));
+    innerLayout.add("center", new Roo.ContentPanel("selection-panel"));
+    innerLayout.endUpdate(true);
+
+    var layout = dialog.getLayout();
+    layout.beginUpdate();
+    layout.add("center", new Roo.ContentPanel("standard-panel",
+                        {title: "Download the Source", fitToFrame:true}));
+    layout.add("center", new Roo.NestedLayoutPanel(innerLayout,
+               {title: "Build your own roo.js"}));
+    layout.getRegion("center").showPanel(sp);
+    layout.endUpdate();
+}
+
+ * @constructor + * @param {String/HTMLElement/Roo.Element} el The id of or container element, or config + * @param {Object} config configuration options + */ +Roo.LayoutDialog = function(el, cfg){ + + var config= cfg; + if (typeof(cfg) == 'undefined') { + config = Roo.apply({}, el); + // not sure why we use documentElement here.. - it should always be body. + // IE7 borks horribly if we use documentElement. + // webkit also does not like documentElement - it creates a body element... + el = Roo.get( document.body || document.documentElement ).createChild(); + //config.autoCreate = true; + } + + + config.autoTabs = false; + Roo.LayoutDialog.superclass.constructor.call(this, el, config); + this.body.setStyle({overflow:"hidden", position:"relative"}); + this.layout = new Roo.BorderLayout(this.body.dom, config); + this.layout.monitorWindowResize = false; + this.el.addClass("x-dlg-auto-layout"); + // fix case when center region overwrites center function + this.center = Roo.BasicDialog.prototype.center; + this.on("show", this.layout.layout, this.layout, true); + if (config.items) { + var xitems = config.items; + delete config.items; + Roo.each(xitems, this.addxtype, this); + } + + +}; +Roo.extend(Roo.LayoutDialog, Roo.BasicDialog, { + + + /** + * @cfg {Roo.LayoutRegion} east + */ + /** + * @cfg {Roo.LayoutRegion} west + */ + /** + * @cfg {Roo.LayoutRegion} south + */ + /** + * @cfg {Roo.LayoutRegion} north + */ + /** + * @cfg {Roo.LayoutRegion} center + */ + /** + * @cfg {Roo.Button} buttons[] Bottom buttons.. + */ + + + /** + * Ends update of the layout and resets display to none. Use standard beginUpdate/endUpdate on the layout. + * @deprecated + */ + endUpdate : function(){ + this.layout.endUpdate(); + }, + + /** + * Begins an update of the layout and sets display to block and visibility to hidden. Use standard beginUpdate/endUpdate on the layout. + * @deprecated + */ + beginUpdate : function(){ + this.layout.beginUpdate(); + }, + + /** + * Get the BorderLayout for this dialog + * @return {Roo.BorderLayout} + */ + getLayout : function(){ + return this.layout; + }, + + showEl : function(){ + Roo.LayoutDialog.superclass.showEl.apply(this, arguments); + if(Roo.isIE7){ + this.layout.layout(); + } + }, + + // private + // Use the syncHeightBeforeShow config option to control this automatically + syncBodyHeight : function(){ + Roo.LayoutDialog.superclass.syncBodyHeight.call(this); + if(this.layout){this.layout.layout();} + }, + + /** + * Add an xtype element (actually adds to the layout.) + * @return {Object} xdata xtype object data. + */ + + addxtype : function(c) { + return this.layout.addxtype(c); + } +}); \ No newline at end of file -- 2.39.2