extjs4.2 打印功能的实现

应需求，要把结算单直接在网页中打印出来。应显示效果如下所示：

使用extjs4.2，将上述信息显示在grid中，效果如下：

在实现打印功能的过程中存在以下想法：

1.初次实现时，是借助extjs的打印插件printer，引入js加以改善 ,将整个grid表格打印出来，效果如下：

问题：效果显然不对，由于数据过多过长，导致在当前页面下，无法显示完全，所以打印当前页面的grid只会打印部分内容。

2.第二想法，导入到excel后完成打印。excel表格中内容如下：

问题：存在一定的格式问题，且数据在表格中仍然过长，打印时会换行，导致数据与标题栏信息不对应，打印效果不对

3.第三想法，在js中重新编辑html，引入新的div及对应样式，使完成单子所显示效果。

效果如客户提供单子显示。

附关键代码：

{
					text: '打印',
					tooltip: 'print',
					iconCls: 'print',
					/*handler:printGrid,*/
					listeners:{
						'click':function(){
							
							
							var record = grid.getSelectionModel().getSelection();
							var group = [];
							$.each(record, function(index) {
								var lj = record[index].get("payList.payCustomerid")
								+record[index].get("payList.payDepartment")
								+record[index].get("payList.payReciever");
								if (group.indexOf(lj)<0) {
									group.push(lj);
								} 
								
							});
							var dayinc = '';
							$.each(group, function(item) {
								var key = group[item];
								var filterarray = $.grep(record,function(value){
					            return key==value.get("payList.payCustomerid")
											+value.get("payList.payDepartment")
											+value.get("payList.payReciever");
					       	 					});
					        	dayinc += '<div style="width:1000px;">';
								dayinc+='<style>';
								dayinc+='table {table-layout:fixed;}';
								dayinc+='td {padding-top:5px; padding-bottom:5px;word-wrap:break-word;}';     
								dayinc+='</style>';
								dayinc+='<div style="margin: 10px auto;  width:410px; font-size:20px;">';
								dayinc+='中 煤 新 集 能 源 股 份 有 限 公 司 结 算 清 单</div>';
								dayinc+='<div style=" clear:both; margin:15px auto;">';
								dayinc+='<span style="float:left;">结算单位：'+filterarray[0].get("payList.payCustomerid")+'</span>';
								dayinc+='                                                      ';
								dayinc+='<span>结算日期：'+filterarray[0].get("jiesuanDate")+'</span>';
								dayinc+='<span style="float:right;">发运矿别：'+filterarray[0].get("payList.payDepartment")+'</span>';
								dayinc+='</div>';       
								dayinc+='<div style="clear:both; margin:15px auto;">';
								dayinc+='<span style="float:left;">收货单位：'+filterarray[0].get("payList.payReciever")+'</span>';
								dayinc+='<span style="float:right;">编号：'+filterarray[0].get("payList.payBianhao")+'  </span>';
								dayinc+='</div>';
		dayinc+='<div style=" clear:both;">';
			dayinc+='<table border="1" style="border-collapse:collapse; width:750px;">';
				dayinc+='<tr>';
					dayinc+='<td style="width: 80px">发运日期</td>';                
					dayinc+='<td style="width: 35px">批号</td>';                
					dayinc+='<td style="width: 35px">车数</td>';                
					dayinc+='<td style="width: 70px">矿发吨位</td>';               
					dayinc+='<td style="width: 70px">出矿热值(卡/克)</td>';
					dayinc+='<td style="width: 100px">单价(元/吨)</td>';
					dayinc+='<td style="width: 85px">金额(元)</td>'; 
					dayinc+='<td style="width: 120px">专用线费用(元)</td>'; 
					dayinc+='<td style="width: 100px">小计(元)</td>'; 
					dayinc+='<td style="width: 120px">机车运费(元)</td>';          
					dayinc+='<td style="width: 100px">运费总额(元)</td>';                
					dayinc+='<td style="width: 110px">合计</td>'; 
				dayinc+='</tr>';  
				var gpayCount=0.0,gpayWeight=0.0,gpayTotal=0.0,gpayDedicated=0.0,
				gpaySubtotal=0.0,gpayTrain=0.0,gpayTransport=0.0,gpaySummation=0.0;
				
				
				$.each(filterarray, function(index) {							
					dayinc+='<tr>';
					dayinc+='<td style="width:80px">'+filterarray[index].get("fayunDate")+'</td>';
					dayinc+='<td style="width:35px">'+filterarray[index].get("payList.payPihao")+'</td>';
					dayinc+='<td style="width:35px">'+filterarray[index].get("payList.payCount")+'</td>';
					dayinc+='<td style="width:70px">'+filterarray[index].get("payList.payWeight")+'</td>';
					dayinc+='<td style="width:70px">'+filterarray[index].get("payList.payCalorific")+'</td>';
					dayinc+='<td style="width:100px">'+filterarray[index].get("payList.payPrice")+'</td>';
					dayinc+='<td style="width:85px">'+filterarray[index].get("payList.payTotal")+'</td>';
					dayinc+='<td style="width:120px">'+filterarray[index].get("payList.payDedicated")+'</td>';
					dayinc+='<td style="width:100px">'+filterarray[index].get("payList.paySubtotal")+'</td>';
					dayinc+='<td style="width:120px">'+filterarray[index].get("payList.payTrain")+'</td>';
					dayinc+='<td style="width:100px">'+filterarray[index].get("payList.payTransport")+'</td>';
					dayinc+='<td style="width:110px">'+filterarray[index].get("payList.paySummation")+'</td>';
					dayinc+='</tr>';
					gpayCount += filterarray[index].get("payList.payCount");
					gpayWeight += filterarray[index].get("payList.payWeight");
					gpayTotal += filterarray[index].get("payList.payTotal");
					gpayDedicated += filterarray[index].get("payList.payDedicated");
					gpaySubtotal += filterarray[index].get("payList.paySubtotal");
					gpayTrain += filterarray[index].get("payList.payTrain");
					gpayTransport += filterarray[index].get("payList.payTransport");
					gpaySummation += filterarray[index].get("payList.paySummation");
				});
				
				
				dayinc+='<tr>';
					dayinc+='<td style="width: 70px">合计</td>';
					dayinc+='<td style="width:35px"></td>';
					dayinc+='<td style="width:35px">'+gpayCount+'</td>';
					dayinc+='<td style="width:70px">'+gpayWeight+'</td>';
					dayinc+='<td style="width:70px"></td>';
					dayinc+='<td style="width:100px"></td>';
					dayinc+='<td style="width:85px">'+gpayTotal+'</td>';
					dayinc+='<td style="width:120px">'+gpayDedicated+'</td>';
					dayinc+='<td style="width:100px">'+gpaySubtotal+'</td>';
					dayinc+='<td style="width:120px">'+gpayTrain+'</td>';
					dayinc+='<td style="width:100px">'+gpayTransport+'</td>';
					dayinc+='<td style="width:110px">'+gpaySummation+'</td>';
				dayinc+='</tr>';
			dayinc+='</table>';
		dayinc+='</div>';
		dayinc+='<div style=" clear:both;">';
		dayinc+='<div style="float:left; margin-top:20px;">'; 
		dayinc+='审批人：';
		dayinc+='                                                      ';
		dayinc+='审核人：';
		dayinc+='                                                      ';
		dayinc+='制表人：';
		dayinc+='                                                      ';
		dayinc+='</div>';
		dayinc+='</div>';   
		dayinc+='</div><br><br><br>';
							});
							
							var doc = document.getElementById("iframe").contentDocument || document.frames["iframe"].document;  
						var ii=document.getElementById("iframe")|| document.frames["iframe"];
				        doc.body.innerHTML = dayinc;  
				        ii.focus();
				        
				        ii.contentWindow.print();
						}
					}
				}