Adding print function to GeoExt MapPanel?

Question

I´m trying to add a print function to my GeoExt MapPanel, using the following code:

bbar: ["->", {
                    text: "Print...",
                    handler: function() { 
                        var printDialog = new Ext.Window({
                                items: [new GeoExt.PrintMapPanel({
                                    sourceMap: mapPanel,
                                    printProvider: new GeoExt.data.PrintProvider({
                                        method: "GET", 
                                        url: "/geoserver/pdf", 

                                        listeners: {
                                        "loadcapabilities": function() {
                                        var printPage = new GeoExt.data.PrintPage();
                                            printPage.fit(mapPanel, true);
                                            printProvider.print(mapPanel, printPage);
                                        }
                                        },
                                            customParams: {
                                                mapTitle: "LVR WebGIS",
                                                comment: "created with GeoExt"
                                            }
                                    })
                                })],
                                bbar: [{
                                    text: "Create PDF",
                                    handler: function() {
                                        printDialog.items.get(0).print();
                                    }
                                }]
                        });
                    printDialog.show();
                    }
                }]

Using this code, I get the firebug error message

this.printProvider.layout is null

in line 240 of the PrintMapPanel.js

239  adjustSize: function(width, height) {
240  var printSize = this.printProvider.layout.get("size");
241  var ratio = printSize.width / printSize.height; 

when trying to print the MapPanel.

Do I have to add a size/layout definition somewhere in the code or in the config.yaml of the print provider?

Answer 1

The map definitions should be in the YAML file. These are then accessed through the print web service via the info.json page.

http://www.mapfish.org/doc/print/protocol.html

For testing you can always hardcode these parameters by creating a JSON object:

var printCapabilities = {
    "scales":[
        {"name":"25000"},
        {"name":"50000"},
        {"name":"100000"}
    ],
    "dpis":[
        {"name":"190"},
        {"name":"254"}
    ],
    "outputFormats":[
        {"name":"pdf"},
        {"name":"png"}
    ],
    "layouts":[
        {
            "name":"A4 portrait",
            "map":{
                "width":440,
                "height":483
            }
        }
    ],
    "printURL":"http:\/\/localhost:5000\/print\/print.pdf",
    "createURL":"http:\/\/localhost:5000\/print\/create.json"
}

You can try this with the GeoExt example at http://api.geoext.org/1.0/examples/print-page.js Replace the printCapabilities with a hard-coded JSON object like above. Once this is working then get the JSON dynamically from the web service.

// The printProvider that connects us to the print service
var printProvider = new GeoExt.data.PrintProvider({
    method: "GET", // "POST" recommended for production use
    capabilities: printCapabilities // from the info.json script in the html
});
// Our print page. Tells the PrintProvider about the scale and center of
// our page.
printPage = new GeoExt.data.PrintPage({
    printProvider: printProvider,
    customParams: {
        mapTitle: "Printing Demo",
        comment: "This is a simple map printed from GeoExt."
    }
});