[Commits] r1704 - sandbox/ahocevar/playground/ux/Printing/examples

[commits at geoext.org]

Author: ahocevar
Date: 2010-01-11 00:13:17 +0100 (Mon, 11 Jan 2010)
New Revision: 1704

Modified:
   sandbox/ahocevar/playground/ux/Printing/examples/PrintMapPanel.js
Log:
example now works fine in all browsers - after spending too much time making it work in IE, with workarounds as usual.

Modified: sandbox/ahocevar/playground/ux/Printing/examples/PrintMapPanel.js
===================================================================
--- sandbox/ahocevar/playground/ux/Printing/examples/PrintMapPanel.js	2010-01-10 20:16:41 UTC (rev 1703)
+++ sandbox/ahocevar/playground/ux/Printing/examples/PrintMapPanel.js	2010-01-10 23:13:17 UTC (rev 1704)
@@ -40,14 +40,17 @@
     var printLegend = false;
     
     function updateSize() {
-        if(win) {
-            // sync form width with map width
-            win.items.get(0).setWidth(printMapPanel.getWidth());
-            // sync window width with map width
-            var newWidth = win.getWidth() - win.body.getWidth() + 10 + 
-                Math.max(320, printMapPanel.getWidth());
-            newWidth > win.getWidth() && win.setWidth(newWidth);
-        } 
+        printPreview.suspendEvents();
+        var mapWidth = printMapPanel.getWidth();
+        // sync form width with map width
+        printPreview.items.get(0).setWidth(mapWidth);
+        printPreview.doLayout();
+        // shadow does not sync, so do it manually
+        var parent = printPreview.ownerCt;
+        if(parent && typeof parent.syncShadow == "function") {
+            printPreview.ownerCt.syncShadow();
+        }
+        printPreview.resumeEvents();
     };
     
     printMapPanel = new GeoExt.ux.PrintMapPanel({
@@ -65,17 +68,16 @@
             "resize": updateSize
         }
     });
-    
-    var win = new Ext.Window({
-        title: "Print",
-        modal: true,
-        bodyStyle: "padding: 5px; border: none",
+
+    var printPreview = new Ext.Panel({
+        bodyStyle: "padding: 5px;",
         bodyBorder: false,
         bodyCfg: {
-            tag: 'center',
-            cls: 'x-panel-body'
+            tag: "center",
+            cls: "x-panel-body"
         },
         items: [{
+            autoHeight: true,
             xtype: "form",
             border: false,
             defaults: {
@@ -92,8 +94,8 @@
                         xtype: "textfield",
                         name: "mapTitle",
                         emptyText: "Enter map title here.",
+                        anchor: "100%",
                         hideLabel: true,
-                        anchor: "100%",
                         plugins: new GeoExt.ux.plugins.PrintProviderField({
                             printProvider: printMapPanel.printProvider
                         })
@@ -101,11 +103,13 @@
                 }, {
                     xtype: "container",
                     layout: "form",
-                    labelWidth: 5, // some space from mapTitle
+                    style: "padding-left:8px",
                     items: {
                         xtype: "checkbox",
                         name: "legend",
                         boxLabel: "Include legend?",
+                        anchor: "100%",
+                        hideLabel: true,
                         listeners: {
                             "check": function(field, checked) {
                                 printLegend = checked;
@@ -161,7 +165,28 @@
                     printMapPanel.print(printLegend && {legend: legendPanel});
                 }
             }
-        ]
+        ],
+        listeners: {
+            "afterlayout": function() {
+                if(Ext.isIE) {
+                    // fix for IE which has ColumnLayout problems when some
+                    // components don't have a size 
+                    var ct = this.items.get(0).items.get(0).items.get(1);
+                    var cb = ct.items.get(0);
+                    ct.setWidth(Ext.util.TextMetrics.measure(
+                        cb.getEl(), "Include legend?").width + 34);
+                }
+            }
+        }
+    });
+    
+    var win = new Ext.Window({
+        title: "Print",
+        modal: true,
+        width: 360,
+        items: printPreview,
+        border: false,
+        resizable: false
     }).show();
-    updateSize();
+    win.center();
 }