PDA

View Full Version : Printing Panels in Portal/Portlet using Ext.ux.Printer - Blank printouts



Tumac
12 Feb 2011, 11:39 AM
I have a "dashboard" that has several portlets containing various grids. I want to use the built in tools (http://dev.sencha.com/deploy/dev/docs/source/Panel.html#cfg-Ext.Panel-tools) configuration for printing the contents of the portlet.

I used Ed Spencer's code for the printing function. http://edspencer.net/2009/07/extuxprinter-printing-for-any-ext.html (http://edspencer.net/2009/07/extuxprinter-printing-for-any-ext.html)

When I press the print button rendered on the panel tbar, the new window opens up as expected and my Windows print dialog comes up to choose my printer, but nothing prints.

I assume that the print function is not grabbing my grid properly and rendering it in the new window.

Any help is mucho appreciated.



,buildPortal : function() {
Ext.state.Manager.setProvider(new Ext.state.CookieProvider())
var tools =
[{
id:'print',
handler: function(e, target, panel,tc){
Ext.ux.Printer.BaseRenderer.prototype.stylesheetPath = '/assets/js/extjs/print.css';
Ext.ux.Printer.PanelRenderer = Ext.extend(Ext.ux.Printer.BaseRenderer, {
generateBody: function(panel) {
return String.format("<div class='x-panel-print'>{0}</div>", panel.body.dom.innerHTML);
}
});
Ext.ux.Printer.registerRenderer("panel", Ext.ux.Printer.PanelRenderer);

Ext.ux.Printer.print(panel);
}
}];

return {
items:[{
xtype: 'portal'
,title: 'Tracking Dashboard'
,items:[{
columnWidth:.33
,style:'padding:5px 0 5px 5px'
,items:[{
xtype : 'label'
,style : 'padding: 5px 5px 5px 5px;margin-left:35%;font-size:16px;text-alignment:center;font-weight:bolder;color:white;background:#467158'
,text : 'On Order'
},{
style: 'font-weight:bolder;padding-top: 10px'
,title : 'Purchase Orders On Order'
,tools: tools
,items : [{
xtype:'widgetpoorder' <----This is the grid

Tumac
12 Feb 2011, 7:06 PM
I did a console.log(panel.body.dom.innerHTML);

and it returns this HTML which when I save and display in web browser, is the grid data so it looks like it is getting the information but is still printing blanks.


<div class=" x-panel x-grid-panel" id="poOrd"><div id="ext-gen112" class="x-panel-bwrap"><div style="height: 250px;" id="ext-gen113" class="x-panel-body x-panel-body-noheader"><div style="width: 413px; height: 250px;" id="ext-gen115" class="x-grid3" hidefocus="true"><div id="ext-gen116" class="x-grid3-viewport"><div id="ext-gen117" class="x-grid3-header"><div style="width: 413px;" id="ext-gen119" class="x-grid3-header-inner"><div class="x-grid3-header-offset" style="width: 413px;"><table style="width: 394px;" border="0" cellpadding="0" cellspacing="0"><thead><tr class="x-grid3-hd-row"><td class="x-grid3-hd x-grid3-cell x-grid3-td-0 x-grid3-cell-first sort-asc" style="width: 195px;"><div class="x-grid3-hd-inner x-grid3-hd-0" unselectable="on" style=""><a class="x-grid3-hd-btn" href="#"></a>PO<img alt="" class="x-grid3-sort-icon" src="assets/img/tp/s.gif"></div></td><td class="x-grid3-hd x-grid3-cell x-grid3-td-1" style="width: 195px;"><div class="x-grid3-hd-inner x-grid3-hd-1" unselectable="on" style=""><a style="height: 22px;" id="ext-gen1471" class="x-grid3-hd-btn" href="#"></a>Ship Date<img alt="" class="x-grid3-sort-icon" src="assets/img/tp/s.gif"></div></td><td class="x-grid3-hd x-grid3-cell x-grid3-td-2 x-grid3-cell-last" style="width: 195px; display: none;"><div class="x-grid3-hd-inner x-grid3-hd-2" unselectable="on" style=""><a class="x-grid3-hd-btn" href="#"></a>Customer<img alt="" class="x-grid3-sort-icon" src="assets/img/tp/s.gif"></div></td></tr></thead></table></div></div><div class="x-clear"></div></div><div style="overflow-x: hidden; width: 413px; height: 226px;" id="ext-gen118" class="x-grid3-scroller"><div id="ext-gen120" class="x-grid3-body" style="width: 394px;"><div id="ext-gen113-gp-cusShort-PPW" class="x-grid-group "><div id="ext-gen113-gp-cusShort-PPW-hd" class="x-grid-group-hd" style="width: 394px;"><div class="x-grid-group-title">PPW (3 PO's)</div></div><div id="ext-gen113-gp-cusShort-PPW-bd" class="x-grid-group-body"><div class="x-grid3-row x-grid3-row-first" style="width: 394px;"><table class="x-grid3-row-table" style="width: 394px;" border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="x-grid3-col x-grid3-cell x-grid3-td-0 x-grid3-cell-first " style="width: 195px;" tabindex="0"><div class="x-grid3-cell-inner x-grid3-col-0" unselectable="on">42797.00</div></td><td class="x-grid3-col x-grid3-cell x-grid3-td-1 " style="width: 195px;" tabindex="0"><div class="x-grid3-cell-inner x-grid3-col-1" unselectable="on">10-15-2010</div></td><td class="x-grid3-col x-grid3-cell x-grid3-td-2 x-grid3-cell-last " style="width: 195px; display: none;" tabindex="0"><div class="x-grid3-cell-inner x-grid3-col-2" unselectable="on">PPW</div></td></tr></tbody></table></div><div class="x-grid3-row" style="width: 394px;"><table class="x-grid3-row-table" style="width: 394px;" border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="x-grid3-col x-grid3-cell x-grid3-td-0 x-grid3-cell-first " style="width: 195px;" tabindex="0"><div class="x-grid3-cell-inner x-grid3-col-0" unselectable="on">42798.00</div></td><td class="x-grid3-col x-grid3-cell x-grid3-td-1 " style="width: 195px;" tabindex="0"><div class="x-grid3-cell-inner x-grid3-col-1" unselectable="on">10-31-2010</div></td><td class="x-grid3-col x-grid3-cell x-grid3-td-2 x-grid3-cell-last " style="width: 195px; display: none;" tabindex="0"><div class="x-grid3-cell-inner x-grid3-col-2" unselectable="on">PPW</div></td></tr></tbody></table></div><div class="x-grid3-row x-grid3-row-last" style="width: 394px;"><table class="x-grid3-row-table" style="width: 394px;" border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="x-grid3-col x-grid3-cell x-grid3-td-0 x-grid3-cell-first " style="width: 195px;" tabindex="0"><div class="x-grid3-cell-inner x-grid3-col-0" unselectable="on">42905.00</div></td><td class="x-grid3-col x-grid3-cell x-grid3-td-1 " style="width: 195px;" tabindex="0"><div class="x-grid3-cell-inner x-grid3-col-1" unselectable="on">12-31-2010</div></td><td class="x-grid3-col x-grid3-cell x-grid3-td-2 x-grid3-cell-last " style="width: 195px; display: none;" tabindex="0"><div class="x-grid3-cell-inner x-grid3-col-2" unselectable="on">PPW</div></td></tr></tbody></table></div></div></div></div><a style="left: 1px; top: 33px;" id="ext-gen121" href="#" class="x-grid3-focus" tabindex="-1"></a></div></div><div id="ext-gen122" class="x-grid3-resize-marker">&nbsp;</div><div id="ext-gen123" class="x-grid3-resize-proxy">&nbsp;</div></div></div></div></div>

Tumac
8 Mar 2011, 6:30 PM
is my question convoluted or???? There used to be good feedback on this forum but it seems to have disappeared.

Can someone who has implemented this successfully tell a schlep like me what I am doing wrong?

Can this extension only print EXTJS defined xtypes and not user defined xtypes (user defined = my registered classes)? At least start there?

I have a portal page so each "tool" is defined the same for each portlet. I have a print button on each portlet and I want to simply print each portlets contents.

If I cannot use Ed's extension because it can only understand pre-defined xtypes, then I think what I need to do is determine which portlet is being called and then render the MySQL query in FPDF.....

Anyone just tell me if I am barking up the wrong tree??????

osnem2
30 Mar 2011, 5:41 AM
Hi Tumac,

I had the same error , i solved by :

1. Include the "Printer-all.js" and "PanelRenderer.js" scripts :

<script type="text/javascript" src="edspencer-Ext.ux.Printer-19e5250/Printer-all.js"></script>
<script type="text/javascript" src="edspencer-Ext.ux.Printer-19e5250/renderers/PanelRenderer.js"></script>

2. Create the print button

{
text: "Print",
icon: 'images/printer.png',
scope: this,
handler : function() {

var myPanel = Ext.getCmp(myPanelId);
Ext.ux.Printer.print( myPanel );
}
}

3. End