hr_PrintPreview.js

Ext.namespace("GeoExt.ux");
GeoExt.ux.PrintPreview = Ext.extend(Ext.Container, {
    paperSizeText: "Format:",
    resolutionText: "Resolution:",
    printText: "Print",
    emptyTitleText: "Enter map title here.",
    emptyCommentText: "Enter comments here.",
    emptyFooterText: "Enter map footer here.",
    creatingPdfText: "Creating PDF...",
    includeLegendText: "Include legend?",
    rotationText: "Rotation",
    printProvider: null,
    sourceMap: null,
    printMapPanel: null,
    showTitle: true,
    mapTitle: null,
    mapTitleYAML: "mapTitle",
    showComment: true,
    mapComment: null,
    mapCommentYAML: "mapComment",
    showFooter: true,
    mapFooter: null,
    mapFooterYAML: "mapFooter",
    showLegend: true,
    mapLegend: null,
    showLegendChecked: false,
    showRotation: true,
    printRotationPage: null,
    printRotationExtent: null,
    printRotationExtentOptions: null,
    addMapOverlay: true,
    busyMask: null,
    form: null,
    autoEl: "center",
    cls: "x-panel-body x-panel-body-noheader",
    initComponent: function () {
        var printMapPanelOptions = {
            sourceMap: this.sourceMap,
            printProvider: this.printProvider
        };
        if (this.printMapPanel) {
            if (!(this.printMapPanel instanceof GeoExt.PrintMapPanel)) {
                printMapPanelOptions.xtype = "gx_printmappanel";
                this.printMapPanel = new GeoExt.PrintMapPanel(Ext.applyIf(this.printMapPanel, printMapPanelOptions));
            }
        } else {
            this.printMapPanel = new GeoExt.PrintMapPanel(printMapPanelOptions);
        }
        this.sourceMap = this.printMapPanel.sourceMap;
        this.printProvider = this.printMapPanel.printProvider;
  	
		if (this.mapLegend) {
            this.printProvider.encoders.legends.gx_vectorlegend = function (legend) {
                return [{
                    name: '',
                    classes: []
                }];
            }
        }
		
        if (this.showRotation) {
            this.printRotationPage = new GeoExt.data.PrintPage({
                printProvider: this.printProvider
            });
            this.printRotationExtent = new GeoExt.plugins.PrintExtent(Ext.applyIf({
                pages: [this.printRotationPage],
                layer: this.initialConfig.layer
            }, this.printRotationExtentOptions));
        }
        this.form = this.createForm();
        if (!this.items) {
            this.items = [];
        }
        this.items.push(this.createToolbar(), {
            xtype: "container",
            cls: "gx-printpreview",
            autoHeight: this.autoHeight,
            autoWidth: this.autoWidth,
            items: [this.form, this.printMapPanel]
        });
        GeoExt.ux.PrintPreview.superclass.initComponent.call(this);
        this.addMapOverlay && this.printMapPanel.add(this.createMapOverlay());
        if (this.showRotation) {
            this.printMapPanel.initPlugin(this.printRotationExtent);
        }
        this.printMapPanel.on({
            "resize": this.updateSize,
            scope: this
        });
        this.on({
            "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,
                    "printexception": this.busyMask.hide,
                    scope: this.busyMask
                });
            },
            scope: this
        });
    },
    createToolbar: function () {
        var items = [];
        this.printProvider.layouts.getCount() > 1 && items.push(this.paperSizeText, {
            xtype: "combo",
            width: 100,
            plugins: new GeoExt.plugins.PrintProviderField({
                printProvider: this.printProvider
            }),
            store: this.printProvider.layouts,
            displayField: "name",
            typeAhead: true,
            mode: "local",
            forceSelection: true,
            triggerAction: "all",
            selectOnFocus: true
        }, " ");
        this.printProvider.dpis.getCount() > 1 && items.push(this.resolutionText, {
            xtype: "combo",
            width: 65,
            plugins: new GeoExt.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);
            }
        }, "&nbsp;");
        items.push("->", {
            text: "&nbsp;" + this.printText,
            iconCls: "icon-print",
            handler: function () {
                if (!this.showRotation) {
                    this.printMapPanel.print(this.showLegendChecked && {
                        legend: this.mapLegend
                    });
                } else {
                    this.printRotationExtent.print(this.showLegendChecked && {
                        legend: this.mapLegend
                    });
                }
            },
            scope: this
        });
        return {
            xtype: "toolbar",
            enableOverflow: true,
            items: items
        };
    },
    createForm: function () {
        var titleCfg = {
            xtype: "textfield",
            name: this.mapTitleYAML,
            value: this.mapTitle,
            emptyText: this.emptyTitleText,
            hideLabel: true,
            cls: "x-form-item",
            hidden: !this.showTitle,
            plugins: new GeoExt.plugins.PrintProviderField({
                printProvider: this.printProvider
            })
        };
        var commentCfg = {
            xtype: "textarea",
            name: this.mapCommentYAML,
            value: this.mapComment,
            emptyText: this.emptyCommentText,
            hideLabel: true,
            cls: "x-form-item",
            hidden: !this.showComment,
            plugins: new GeoExt.plugins.PrintProviderField({
                printProvider: this.printProvider
            })
        };
        var footerCfg = {
            xtype: "textfield",
            name: this.mapFooterYAML,
            value: this.mapFooter,
            emptyText: this.emptyFooterText,
            hideLabel: true,
            cls: "x-form-item",
            hidden: !this.showFooter,
            plugins: new GeoExt.plugins.PrintProviderField({
                printProvider: this.printProvider
            })
        };
        if (this.mapLegend) {
            var legendCheckbox = new Ext.form.Checkbox({
                name: "mapLegend",
                checked: this.showLegendChecked,
                boxLabel: this.includeLegendText,
                hideLabel: true,
                ctCls: "gx-item-nowrap",
                hidden: !this.showLegend,
                handler: function (cb, checked) {
                    this.showLegendChecked = checked;
                },
                scope: this
            });
        }
        if (this.showRotation) {
            var rotationNum = {
                xtype: "numberfield",
                name: "rotation",
                value: 0,
                hideLabel: true,
                width: 40,
                allowBlank: false,
                allowNegative: false,
                allowDecimals: false,
                decimalPrecision: 0,
                minValue: -360,
                maxValue: 360,
                enableKeyEvents: true,
                plugins: new GeoExt.plugins.PrintPageField({
                    printPage: this.printRotationPage
                })
            }
        }
        return new Ext.form.FormPanel({
            autoHeight: true,
            border: false,
            defaults: {
                anchor: "100%"
            },
            items: [titleCfg, commentCfg, footerCfg, ((this.mapLegend) || (this.showRotation)) ? {
                xtype: "container",
                layout: "hbox",
                anchor: "100%",
                cls: "x-form-item",
                items: [(this.showRotation) ? {
                    xtype: 'label',
                    html: this.rotationText + ":",
                    margins: "3 5 0 0"
                } : {
                    xtype: 'label',
                    html: '&nbsp;',
                    hidden: true
                }, (this.showRotation) ? rotationNum : {
                    xtype: 'label',
                    html: '&nbsp;',
                    hidden: true
                }, {
                    xtype: 'label',
                    html: '',
                    flex: 1
                }, (this.mapLegend) ? legendCheckbox : {
                    xtype: 'label',
                    html: '&nbsp;',
                    hidden: true
                }]
            } : {
                xtype: 'label',
                html: '&nbsp;',
                hidden: true
            }]
        });
    },
    createMapOverlay: function () {
        var map = this.printMapPanel.map;
        var scaleLine = new OpenLayers.Control.ScaleLine({
            geodesic: !(map.getProjectionObject() || new OpenLayers.Projection(map.projection || "EPSG:4326")).equals("EPSG:4326")
        });
        map.addControl(scaleLine);
        scaleLine.activate();
        return new Ext.Panel({
            cls: "gx-map-overlay",
            layout: "column",
            width: 235,
            bodyStyle: "padding:5px",
            items: [{
                xtype: "box",
                el: scaleLine.div,
                width: scaleLine.maxWidth
            }, {
                xtype: "container",
                layout: "form",
                style: "padding: .2em 5px 0 0;",
                columnWidth: 1,
                cls: "x-small-editor x-form-item",
                items: {
                    xtype: "combo",
                    name: "scale",
                    anchor: "100%",
                    hideLabel: true,
                    store: this.printMapPanel.previewScales,
                    displayField: "name",
                    typeAhead: true,
                    mode: "local",
                    forceSelection: true,
                    triggerAction: "all",
                    selectOnFocus: true,
                    getListParent: function () {
                        return this.el.up(".x-window") || document.body;
                    },
                    plugins: (!this.showRotation) ? new GeoExt.plugins.PrintPageField({
                        printPage: this.printMapPanel.printPage
                    }) : new GeoExt.plugins.PrintPageField({
                        printPage: this.printRotationPage
                    })
                }
            }, {
                xtype: "box",
                autoEl: {
                    tag: "div",
                    cls: "gx-northarrow"
                }
            }],
            listeners: {
                "render": function () {
                    function stop(evt) {
                        evt.stopPropagation();
                    }
                    this.getEl().on({
                        "click": stop,
                        "dblclick": stop,
                        "mousedown": stop
                    });
                }
            }
        });
    },
    updateSize: function () {
        this.suspendEvents();
        var mapWidth = this.printMapPanel.getWidth();
        this.form.setWidth(mapWidth);
        this.form.items.get(0).setWidth(mapWidth);
        var minWidth = this.initialConfig.minWidth || 0;
        this.items.get(0).setWidth(this.form.ownerCt.el.getPadding("lr") + Math.max(mapWidth, minWidth));
        var parent = this.ownerCt;
        if (parent && parent instanceof Ext.Window) {
            this.ownerCt.syncShadow();
        }
        this.resumeEvents();
    },
    beforeDestroy: function () {
        if (this.busyMask) {
            this.printProvider.un("beforeprint", this.busyMask.show, this.busyMask);
            this.printProvider.un("print", this.busyMask.hide, this.busyMask);
        }
        this.printMapPanel.un("resize", this.updateSize, this);
        GeoExt.ux.PrintPreview.superclass.beforeDestroy.apply(this, arguments);
    }
});
Ext.reg("gxux_printpreview", GeoExt.ux.PrintPreview);