I am trying to import the print plugin within an application built using the Opengeo Suite sdk and I have run into issues as is described in the following thread https://getsatisfaction.com/opengeo/topics/doubts_about_the_use_of_print_from_openlayers_ready_gxp

After having followed all the instructions provided, I still cannot get the print plugin the work. The print button appears but I get the message

Uncaught TypeError: undefined is not a function 

This seems to be on the following line: 
var scaleLine = new OpenLayers.Control.ScaleLine({ ... 

I have also tried using an alternate approach wherein I have a handler for the print button as is shown below:

    var app = new gxp.Viewer({
    portalConfig: {
        layout: "border",
        region: "center",
    // layer sources
    sources: {
        local: {
            ptype: "gxp_wmscsource",
            url: "/geoserver/wms",
            version: "1.1.1"
        osm: {
            ptype: "gxp_osmsource"
        geonetwork: {
            ptype: "gxp_cataloguesource",
            url: "/geonetwork/srv/en/csw",
            title: "Geonetwork"
        ol: {
            ptype: "gxp_olsource"

    // map and layers
    map: {
        id: "mymap", // id needed to reference map in portalConfig above
        title: "Map",
        //projection: "EPSG:900913",
        //center: [-10764594.758211, 4523072.3184791],
        projection: "EPSG:4326",
        center: [-97, 38],
        zoom: 3,
        layers: [{
            source: "ol",
            type: "OpenLayers.Layer.WMS",
            args: ["World map", "http://vmap0.tiles.osgeo.org/wms/vmap0", {layers: 'basic'}],
            group: "background"
        }, {
            source: "ol",
            type: "OpenLayers.Layer",
            args: ["Blank"],
            visibility: false,
            group: "background"

            //source: "osm",
            //name: "mapnik",
            //group: "background"
        }//, {
            //source: "local",
            //name: "usa:states",
            //selected: true
        //}//, {
            //source: "google",
            //name: "ROADMAP",
            //group: "background"
        bbar: [{
            text: "Print...",
            handler: showPrintWindow
        items: [{
            xtype: "gx_zoomslider",
            vertical: true,
            height: 100


function showPrintWindow() {
    var printWindow = new Ext.Window({
        title: "Print",
        modal: true,
        border: false,
        resizable: false,
        width: 360,
        autoHeight: true,
        items: new GeoExt.ux.PrintPreview({
            autoHeight: true,
            printMapPanel: {
                // limit scales to those that can be previewed
                limitScales: true,
                // no zooming on the map
                map: {controls: [
                    new OpenLayers.Control.Navigation({
                        zoomBoxEnabled: false,
                        zoomWheelEnabled: false
                    new OpenLayers.Control.PanPanel()
            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: {
                    "print": function() {printWindow.close();}
            includeLegend: true,
            mapTitle: "PrintMapPanel Demo",
            sourceMap: app.map

From within the showPrintWindow function the sourceMap is set to app.map. However, when I click on the print button now, I get the error message:

Uncaught TypeError: Object #<Object> has no method 'getProjection' PrintMapPanel.js:176
GeoExt.PrintMapPanel.Ext.extend.initComponent PrintMapPanel.js:176
Ext.Component ext-all.js:7
L ext-base.js:7
L ext-base.js:7
L ext-base.js:7
L ext-base.js:7
L ext-base.js:7
GeoExt.ux.PrintPreview.Ext.extend.initComponent PrintPreview.js:156
Ext.Component ext-all.js:7
L ext-base.js:7
L ext-base.js:7
L ext-base.js:7
showPrintWindow app.js:185
Ext.Button.Ext.extend.onClick ext-all.js:7

I am not entirely sure how I can get this working and any help is greatly appreciated.

1 Answer 1

  1. In the app.js:

include at the beginning:

 * @require plugins/Print.js
 * @require GeoExt.ux/PrintPreview.js
 * @require GeoExt/widgets/PrintMapPanel.js
 * @require GeoExt/plugins/PrintProviderField.js
 * @require GeoExt/plugins/PrintPageField.js
 * @require OpenLayers/Control/ScaleLine.js

under the tools section also insert:

   ptype: "gxp_print",
   customParams: {outputFilename: 'GeoExplorer-print'},
   printService: "/geoserver/pdf/",
   actionTarget: "map.tbar",
   showButtonText: true
  1. Download and extract from github the printpreview.css, GeoExt.ux etc. as outlined here:

  2. Embed the css into the index.html

<link rel="stylesheet" type="text/css" href="src/geoext/resources/css/printpreview.css">

That's it. I followed these steps and it worked. (Suite 3.0.1), All the best!

  • :( there are changes in opengeo suite 4.6. does any have new example ? Commented May 26, 2015 at 4:49

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.