[Commits] r1712 - in sandbox/ahocevar/playground/ux/Printing: . examples resources resources/css ux ux/data ux/widgets ux/widgets/form

commits at geoext.org commits at geoext.org
Mon Jan 11 15:23:14 CET 2010


Author: ahocevar
Date: 2010-01-11 15:23:14 +0100 (Mon, 11 Jan 2010)
New Revision: 1712

Added:
   sandbox/ahocevar/playground/ux/Printing/resources/
   sandbox/ahocevar/playground/ux/Printing/resources/css/
   sandbox/ahocevar/playground/ux/Printing/resources/css/printpreview.css
   sandbox/ahocevar/playground/ux/Printing/resources/images/
   sandbox/ahocevar/playground/ux/Printing/ux/widgets/PrintPreview.js
Modified:
   sandbox/ahocevar/playground/ux/Printing/examples/PrintMapPanel.html
   sandbox/ahocevar/playground/ux/Printing/examples/PrintMapPanel.js
   sandbox/ahocevar/playground/ux/Printing/ux/Printing.js
   sandbox/ahocevar/playground/ux/Printing/ux/data/PrintPage.js
   sandbox/ahocevar/playground/ux/Printing/ux/data/PrintProvider.js
   sandbox/ahocevar/playground/ux/Printing/ux/widgets/PrintMapPanel.js
   sandbox/ahocevar/playground/ux/Printing/ux/widgets/form/SimplePrint.js
Log:
first version of PrintPreview widget

Modified: sandbox/ahocevar/playground/ux/Printing/examples/PrintMapPanel.html
===================================================================
--- sandbox/ahocevar/playground/ux/Printing/examples/PrintMapPanel.html	2010-01-11 13:06:08 UTC (rev 1711)
+++ sandbox/ahocevar/playground/ux/Printing/examples/PrintMapPanel.html	2010-01-11 14:23:14 UTC (rev 1712)
@@ -10,6 +10,7 @@
         <script type="text/javascript" src="../../../trunk/geoext/lib/GeoExt.js"></script>
         
         <script type="text/javascript" src="../ux/Printing.js"></script>
+        <link rel="stylesheet" type="text/css" href="../resources/css/printpreview.css" />
         
         <script type="text/javascript" src="PrintMapPanel.js"></script>
 

Modified: sandbox/ahocevar/playground/ux/Printing/examples/PrintMapPanel.js
===================================================================
--- sandbox/ahocevar/playground/ux/Printing/examples/PrintMapPanel.js	2010-01-11 13:06:08 UTC (rev 1711)
+++ sandbox/ahocevar/playground/ux/Printing/examples/PrintMapPanel.js	2010-01-11 14:23:14 UTC (rev 1712)
@@ -24,7 +24,8 @@
         width: 200,
         region: "west",
         defaults: {
-            style: "padding:5px"
+            style: "padding:5px",
+            imageFormat: "image/png"
         }
     });
     new Ext.Panel({
@@ -37,156 +38,25 @@
 });
 
 function showPrintWindow() {
-    var printLegend = false;
-    
-    function updateSize() {
-        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({
-        sourceMap: mapPanel,
-        printProvider: {
-            // using get for remote service access without same origin
-            // restriction. For async requests, we would set method to "POST".
-            method: "GET",
-            //method: "POST",
-            
-            // capabilities from script tag in Printing.html.
-            capabilities: printCapabilities
-        },
-        listeners: {
-            "resize": updateSize
-        }
-    });
-
-    var printPreview = new Ext.Panel({
-        bodyStyle: "padding: 5px;",
-        bodyBorder: false,
-        bodyCfg: {
-            tag: "center",
-            cls: "x-panel-body"
-        },
-        items: [{
-            autoHeight: true,
-            xtype: "form",
-            border: false,
-            defaults: {
-                anchor: "100%"
-            },
-            items: [{
-                xtype: "container",
-                layout: "column",
-                items: [{
-                    xtype: "container",
-                    layout: "form",
-                    columnWidth: 1,
-                    items: {
-                        xtype: "textfield",
-                        name: "mapTitle",
-                        emptyText: "Enter map title here.",
-                        anchor: "100%",
-                        hideLabel: true,
-                        plugins: new GeoExt.ux.plugins.PrintProviderField({
-                            printProvider: printMapPanel.printProvider
-                        })
-                    }
-                }, {
-                    xtype: "container",
-                    layout: "form",
-                    style: "padding-left:8px",
-                    items: {
-                        xtype: "checkbox",
-                        name: "legend",
-                        boxLabel: "Include legend?",
-                        anchor: "100%",
-                        hideLabel: true,
-                        listeners: {
-                            "check": function(field, checked) {
-                                printLegend = checked;
-                            }
-                        }
-                    }
-                }]
-            }, {
-                xtype: "textarea",
-                name: "comment",
-                emptyText: "Enter comments here.",
-                hideLabel: true,
-                plugins: new GeoExt.ux.plugins.PrintProviderField({
-                    printProvider: printMapPanel.printProvider
-                })
-            }]
-        }, printMapPanel],
-        tbar: [
-            "Paper Size:", {
-                xtype: "combo",
-                width: 98,
-                plugins: new GeoExt.ux.plugins.PrintProviderField({
-                    printProvider: printMapPanel.printProvider
-                }),
-                store: printMapPanel.printProvider.layouts,
-                displayField: "name",
-                typeAhead: true,
-                mode: "local",
-                forceSelection: true,
-                triggerAction: "all",
-                selectOnFocus: true
-            }, "&nbsp;Resolution:", {
-                xtype: "combo",
-                width: 62,
-                plugins: new GeoExt.ux.plugins.PrintProviderField({
-                    printProvider: printMapPanel.printProvider
-                }),
-                store: printMapPanel.printProvider.dpis,
-                displayField: "name",
-                tpl: '<tpl for="."><div class="x-combo-list-item">{name} dpi</div></tpl>',
-                typeAhead: true,
-                mode: "local",
-                forceSelection: true,
-                triggerAction: "all",
-                selectOnFocus: true,
-                setValue: function(v) {
-                    v = parseInt(v) + " dpi";
-                    Ext.form.ComboBox.prototype.setValue.apply(this, arguments);
-                }
-            }, "->", {
-                text: "Print",
-                handler: function(){
-                    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({
+    var printWindow = new Ext.Window({
         title: "Print",
         modal: true,
         width: 360,
-        items: printPreview,
+        items: new GeoExt.ux.PrintPreview({
+            printProvider: {
+                // using get for remote service access without same origin
+                // restriction. For async requests, we would set method to "POST".
+                //method: "GET",
+                method: "POST",
+                
+                // capabilities from script tag in Printing.html.
+                capabilities: printCapabilities
+            },
+            bodyStyle: "padding:5px",
+            sourceMap: mapPanel,
+            legend: legendPanel
+        }),
         border: false,
         resizable: false
-    }).show();
-    win.center();
+    }).show().center();
 }

Added: sandbox/ahocevar/playground/ux/Printing/resources/css/printpreview.css
===================================================================
--- sandbox/ahocevar/playground/ux/Printing/resources/css/printpreview.css	                        (rev 0)
+++ sandbox/ahocevar/playground/ux/Printing/resources/css/printpreview.css	2010-01-11 14:23:14 UTC (rev 1712)
@@ -0,0 +1,3 @@
+.x-btn .icon-print { 
+    background-image: url(../images/silk/printer.png);
+}
\ No newline at end of file

Modified: sandbox/ahocevar/playground/ux/Printing/ux/Printing.js
===================================================================
--- sandbox/ahocevar/playground/ux/Printing/ux/Printing.js	2010-01-11 13:06:08 UTC (rev 1711)
+++ sandbox/ahocevar/playground/ux/Printing/ux/Printing.js	2010-01-11 14:23:14 UTC (rev 1712)
@@ -58,7 +58,8 @@
         "plugins/PrintProviderField.js",
         "widgets/PrintMapPanel.js",
         "widgets/form/PrintForm.js",
-        "widgets/form/SimplePrint.js"
+        "widgets/form/SimplePrint.js",
+        "widgets/PrintPreview.js"
     );
 
     var agent = navigator.userAgent;

Modified: sandbox/ahocevar/playground/ux/Printing/ux/data/PrintPage.js
===================================================================
--- sandbox/ahocevar/playground/ux/Printing/ux/data/PrintPage.js	2010-01-11 13:06:08 UTC (rev 1711)
+++ sandbox/ahocevar/playground/ux/Printing/ux/data/PrintPage.js	2010-01-11 14:23:14 UTC (rev 1712)
@@ -84,7 +84,7 @@
             this.customParams = {};
         }
         
-        this.addEvents([
+        this.addEvents(
             /** api: events[change]
              *  Triggered when any of the page properties have changed
              *  
@@ -92,7 +92,7 @@
              *  * printPage - :class:`GeoExt.ux.data.PrintPage` this printPage
              */
             "change"
-        ]);
+        );
 
         this.feature = new OpenLayers.Feature.Vector(
             OpenLayers.Geometry.fromWKT("POLYGON((-1 -1,1 -1,1 1,-1 1,-1 -1))"));

Modified: sandbox/ahocevar/playground/ux/Printing/ux/data/PrintProvider.js
===================================================================
--- sandbox/ahocevar/playground/ux/Printing/ux/data/PrintProvider.js	2010-01-11 13:06:08 UTC (rev 1711)
+++ sandbox/ahocevar/playground/ux/Printing/ux/data/PrintProvider.js	2010-01-11 14:23:14 UTC (rev 1712)
@@ -156,7 +156,7 @@
             this.customParams = {};
         }
 
-        this.addEvents([
+        this.addEvents(
             /** api: events[loadcapabilities]
              *  Triggered when the capabilities have finished loading. This
              *  event will only fire when
@@ -212,7 +212,7 @@
              *  * url - ``String`` the url of the print document
              */
             "print"
-        ]);
+        );
         
         this.scales = new Ext.data.JsonStore({
             root: "scales",

Modified: sandbox/ahocevar/playground/ux/Printing/ux/widgets/PrintMapPanel.js
===================================================================
--- sandbox/ahocevar/playground/ux/Printing/ux/widgets/PrintMapPanel.js	2010-01-11 13:06:08 UTC (rev 1711)
+++ sandbox/ahocevar/playground/ux/Printing/ux/widgets/PrintMapPanel.js	2010-01-11 14:23:14 UTC (rev 1712)
@@ -31,7 +31,12 @@
     
     /** api: config[map]
      *  ``Object`` Optional configuration for the ``OpenLayers.Map`` object
-     *  that this PrintMapPanel uses.
+     *  that this PrintMapPanel uses. Useful e.g. to configure a map with a
+     *  custom set of controls.
+     *  
+     *  .. note:: ``numZoomLevels`` and ``resolutions`` of the map will be set
+     *      by this PrintMapPanel, and the layers will be copied from
+     *      :ref:`GeoExt.ux.PrintMapPanel.sourceMap`.
      */
     
     /** api: config[sourceMap]

Added: sandbox/ahocevar/playground/ux/Printing/ux/widgets/PrintPreview.js
===================================================================
--- sandbox/ahocevar/playground/ux/Printing/ux/widgets/PrintPreview.js	                        (rev 0)
+++ sandbox/ahocevar/playground/ux/Printing/ux/widgets/PrintPreview.js	2010-01-11 14:23:14 UTC (rev 1712)
@@ -0,0 +1,208 @@
+Ext.namespace("GeoExt.ux");
+
+GeoExt.ux.PrintPreview = Ext.extend(Ext.Panel, {
+    
+    /* begin i18n */
+    /** api: config[paperSizeText] ``String`` i18n */
+    paperSizeText: "Paper size:",
+    /** api: config[resolutionText] ``String`` i18n */
+    resolutionText: "Resolution:",
+    /** api: config[printText] ``String`` i18n */
+    printText: "Print",
+    /** api: config[emptyTitleText] ``String`` i18n */
+    emptyTitleText: "Enter map title here.",
+    /** api: config[includeLegendText] ``String`` i18n */
+    includeLegendText: "Include legend?",
+    /** api: config[emptyCommentText] ``String`` i18n */
+    emptyCommentText: "Enter comments here.",
+    /** api: config[creatingPdfText] ``String`` i18n */
+    creatingPdfText: "Creating PDF...",
+    /* end i18n */
+    
+    printProvider: null,
+    
+    sourceMap: null,
+    
+    legend: null,
+    
+    mapOptions: null,
+    
+    /** api: config[busyMask]
+     *  ``Ext.LoadMask`` A LoadMask to use while the print document is
+     *  prepared. Optional, will be auto-created with ``creatingPdfText` if
+     *  not provided.
+     */
+    
+    /** private: property[busyMask]
+     *  ``Ext.LoadMask``
+     */
+    busyMask: null,
+
+    printMapPanel: null,
+    form: null,
+    
+    initComponent: function() {
+        
+        this.bodyCfg = Ext.applyIf({
+            tag: "center",
+            cls: "x-panel-body"
+        }, this.bodyCfg);
+        
+        this.printMapPanel = new GeoExt.ux.PrintMapPanel({
+            map: this.mapOptions,
+            sourceMap: this.sourceMap,
+            printProvider: this.printProvider,
+            listeners: {
+                "resize": this.updateSize,
+                scope: this
+            }
+        });
+        this.printProvider = this.printMapPanel.printProvider;
+        
+        var titleField = new Ext.form.TextField({
+            name: "mapTitle",
+            emptyText: this.emptyTitleText,
+            anchor: "100%",
+            hideLabel: true,
+            plugins: new GeoExt.ux.plugins.PrintProviderField({
+                printProvider: this.printProvider
+            })
+        });
+        
+        var legendCheckbox = null;
+        if(this.legend) {
+            legendCheckbox = new Ext.form.Checkbox({
+                name: "legend",
+                boxLabel: this.includeLegendText,
+                anchor: "100%",
+                hideLabel: true
+            });
+        }
+
+        this.form = new Ext.form.FormPanel({
+            autoHeight: true,
+            border: false,
+            defaults: {
+                anchor: "100%"
+            },
+            items: [
+                this.legend ? {
+                    xtype: "container",
+                    layout: "column",
+                    items: [{
+                        xtype: "container",
+                        layout: "form",
+                        columnWidth: 1,
+                        items: titleField
+                    }, {
+                        xtype: "container",
+                        layout: "form",
+                        style: "padding-left:8px",
+                        items: legendCheckbox
+                    }]
+                } : titleField, {
+                    xtype: "textarea",
+                    name: "comment",
+                    emptyText: this.emptyCommentText,
+                    hideLabel: true,
+                    plugins: new GeoExt.ux.plugins.PrintProviderField({
+                        printProvider: this.printProvider
+                    })
+                }
+            ]
+        });
+        
+        this.tbar = [this.paperSizeText, {
+            xtype: "combo",
+            width: 98,
+            plugins: new GeoExt.ux.plugins.PrintProviderField({
+                printProvider: this.printProvider
+            }),
+            store: this.printProvider.layouts,
+            displayField: "name",
+            typeAhead: true,
+            mode: "local",
+            forceSelection: true,
+            triggerAction: "all",
+            selectOnFocus: true
+        }, "&nbsp;" + this.resolutionText, {
+            xtype: "combo",
+            width: 62,
+            plugins: new GeoExt.ux.plugins.PrintProviderField({
+                printProvider: this.printProvider
+            }),
+            store: this.printProvider.dpis,
+            displayField: "name",
+            tpl: '<tpl for="."><div class="x-combo-list-item">{name} dpi</div></tpl>',
+            typeAhead: true,
+            mode: "local",
+            forceSelection: true,
+            triggerAction: "all",
+            selectOnFocus: true,
+            setValue: function(v){
+                v = parseInt(v) + " dpi";
+                Ext.form.ComboBox.prototype.setValue.apply(this, arguments);
+            }
+        }, "->", {
+            text: this.printText,
+            iconCls: "icon-print",
+            handler: function(){
+                this.printMapPanel.print(legendCheckbox.getValue() &&
+                    {legend: this.legend});
+            },
+            scope: this
+        }];
+
+        GeoExt.ux.PrintPreview.superclass.initComponent.call(this);
+        
+        this.add(this.form);
+        this.add(this.printMapPanel);
+        
+        var onCfg = {
+            scope: this,
+            "render": function() {
+                if (!this.busyMask) {
+                    this.busyMask = new Ext.LoadMask(this.getEl(), {
+                        msg: this.creatingPdfText
+                    });
+                }
+                this.printProvider.on({
+                    "beforeprint": this.busyMask.show,
+                    "print": this.busyMask.hide,
+                    scope: this.busyMask
+                });
+            }
+        };
+        if(this.legend && Ext.isIE) {
+            onCfg["afterlayout"] = function(){
+                // fix for IE which has ColumnLayout problems when some
+                // components don't have a size 
+                var ct = legendCheckbox.ownerCt;
+                ct.setWidth(Ext.util.TextMetrics.measure(legendCheckbox.getEl(),
+                    this.includeLegendText).width + 34);
+            };
+        }
+        this.on(onCfg);
+    },
+
+    updateSize: function() {
+        this.suspendEvents();
+        var mapWidth = this.printMapPanel.getWidth();
+        // sync form width with map width
+        this.form.setWidth(mapWidth);
+        this.doLayout();
+        // shadow does not sync, so do it manually
+        var parent = this.ownerCt;
+        if (parent && typeof parent.syncShadow == "function") {
+            this.ownerCt.syncShadow();
+        }
+        this.resumeEvents();
+    },
+    
+    beforeDestroy: function() {
+        this.printProvider.un("beforeprint", this.busyMask.show, this.busyMask);
+        this.printProvider.un("print", this.busyMask.hide, this.busyMask);
+        GeoExt.ux.PrintPreview.superclass.beforeDestroy.apply(this, arguments);
+    }
+    
+});

Modified: sandbox/ahocevar/playground/ux/Printing/ux/widgets/form/SimplePrint.js
===================================================================
--- sandbox/ahocevar/playground/ux/Printing/ux/widgets/form/SimplePrint.js	2010-01-11 13:06:08 UTC (rev 1711)
+++ sandbox/ahocevar/playground/ux/Printing/ux/widgets/form/SimplePrint.js	2010-01-11 14:23:14 UTC (rev 1712)
@@ -31,17 +31,17 @@
 GeoExt.ux.form.SimplePrint = Ext.extend(GeoExt.ux.form.PrintForm, {
     
     /* begin i18n */
-    /** api: property[layoutText] ``String`` i18n */
+    /** api: config[layoutText] ``String`` i18n */
     layoutText: "Layout",
-    /** api: property[dpiText] ``String`` i18n */
+    /** api: config[dpiText] ``String`` i18n */
     dpiText: "DPI",
-    /** api: property[scaleText] ``String`` i18n */
+    /** api: config[scaleText] ``String`` i18n */
     scaleText: "Scale",
-    /** api: property[rotationText] ``String`` i18n */
+    /** api: config[rotationText] ``String`` i18n */
     rotationText: "Rotation",
-    /** api: property[printText] ``String`` i18n */
+    /** api: config[printText] ``String`` i18n */
     printText: "Print",
-    /** api: property[creatingPdfText] ``String`` i18n */
+    /** api: config[creatingPdfText] ``String`` i18n */
     creatingPdfText: "Creating PDF...",
     /* end i18n */
    



More information about the Commits mailing list