Extjs控件之 grid打印功能

   今天上午折腾了一上午，终于把grid控件的打印功能做完了，代码如下所示：

View Code

  1 var record;
  2 function viewScore(){
  3     var selections=Ext.getCmp('projectGrid').getSelectionModel().getSelections();
  4     if(selections.length>0){
  5         record=selections[0];
  6         var viewScoreWin=Ext.getCmp('viewScoreWin');
  7         if(!viewScoreWin){
  8             viewScoreWin = new Ext.Window({
  9                 id: 'viewScoreWin',
 10                 title: '查看项目评分',
 11                 width: 1000,
 12                 height: 350,
 13                 closable: true,
 14                 layout: 'fit',
 15                 closeAction: 'close',
 16                 plain: true,
 17                 modal: true,
 18                 iconCls: 'vcard_update',
 19                 bodyStyle: 'padding:5px;',
 20                 buttonAlign: 'center',
 21                 buttons: [{
 22                     text: '刷新',
 23                     handler: function() {
 24                         getProjectScoreStore(record.data.Id).reload();
 25                     }
 26                 },
 27                 {
 28                     text:'打印',
 29                     handler:printGrid
 30                 }
 31                 ],
 32                     items: {
 33                         xtype: 'panel',
 34                         border: false,
 35                         frame: false,
 36                         baseCls: 'x-plain',
 37                         items: [{
 38                             xtype: 'box',
 39                             autoEl: {
 40                                 tag: 'div',
 41                                 height: 20,
 42                                 id: 'averageScore' + record.data.Id,
 43                                 html: '平均价: ' + round2(getProjectScoreStore(record.data.Id).averageScore, 4),
 44                                 style: 'text-align:center;font-size:16px;font-weight:bold;line-height:20px;'
 45                             }
 46                         }, {
 47                             xtype: 'grid',
 48                             height: 250,
 49                             border: false,
 50                             viewConfig: { forceFit: true },
 51                             autoFill: true,
 52                             id: 'projectScoreGrid',
 53                             viewConfig:{forceFit:true},
 54                             store: getProjectScoreStore(record.data.Id),
 55                             cm: new Ext.grid.ColumnModel({
 56                                 columns: [
 57                                 new Ext.grid.RowNumberer(),
 58                                 { header: '专家', dataIndex: 'UserName' },
 59                                 {
 60                                     header: '评分',
 61                                     dataIndex: 'Score',
 62                                     renderer: function(v) {
 63                                         if (v) {
 64                                             return round2(v, 4)
 65                                         } else {
 66                                             return ''
 67                                         }
 68                                     }
 69                                 },
 70                                 { header: '日期', dataIndex: 'Date', renderer: Ext.util.Format.dateRenderer('Y-n-j') },
 71                                 { header: '土地级别', dataIndex: 'LandLevel' },
 72                                 { header: '土地用途', dataIndex: 'LandUse' },
 73                                 { header: '区段地价', dataIndex: 'DistrictLandPrice' },
 74                                 { header: '用途修正', dataIndex: 'UseAmend' },
 75                                 { header: '期日修正', dataIndex: 'DateAmend' },
 76                                 { header: '容积率修正', dataIndex: 'PlotRatioAmend' },
 77                                 { header: '年期修正', dataIndex: 'YearAmend' },
 78                                 { header: '个别因素修正', dataIndex: 'SingleAmend' },
 79                                 
 80                                 { header: '开发程度修正', dataIndex: 'DeveloperLevelAmend'}
 81                             ]
 82                             }),
 83                             sm: new Ext.grid.RowSelectionModel({ singleSelect: true })
 84                         }]
 85                         }
 86                     });
 87         }
 88         viewScoreWin.show();
 89     }else{
 90         Ext.MessageBox.alert('提示','请选择一个要查看的项目');
 91     }
 92 }
 93 function printGrid() {
 94     var gridcontrol = Ext.getCmp('projectScoreGrid');
 95     var tableStr = '<table  style="border:1 black solid; width:100%;"cellpadding=0 cellspacing=0><tr><td colspan=12 align=center style="border:1px black solid;">';
 96     var cm = gridcontrol.getColumnModel();
 97     var colCount = cm.getColumnCount();
 98     var temp_obj = new Array();
 99     for (var i = 1; i < colCount; i++) {
100         if (cm.isHidden(i) ==
101          true) {
102 
103         }
104         else {
105             temp_obj.push(i);
106         }
107     }
108     tableStr = tableStr + '平均价:' + round2(getProjectScoreStore(record.data.Id).averageScore, 4)+'</td><tr>';
109     for (var i = 0; i < temp_obj.length; i++) {
110         tableStr = tableStr + '<td style="border:1 black solid;">' + cm.getColumnHeader(temp_obj[i]) + '</td>';
111     }
112     tableStr = tableStr + '</tr>';
113     var store = gridcontrol.getStore();
114     var recordCount = store.getCount();
115     for (var i = 0; i < recordCount; i++) {
116         var r = store.getAt(i);
117         for (var j = 0; j < temp_obj.length; j++) {
118             var dateIndex = cm.getDataIndex(temp_obj[j]);
119             var tdvalue = r.get(dateIndex);
120             var renderFunc = cm.getRenderer(temp_obj[j]);
121             if (renderFunc != null) {
122                 tdvalue = renderFunc(tdvalue);
123             }
124             if (tdvalue == null) {
125                 tdvalue = '';
126             }
127             tableStr = tableStr + '<td style="border:1 black solid;">' + tdvalue + '</td>';
128         }
129         tableStr = tableStr + '</tr>';
130     }
131     tableStr = tableStr + '</table>';
132     var titleHtml = tableStr;
133     var newwin = window.open('printer.html', '', '');
134     newwin.document.write(titleHtml);
135     newwin.document.location.reload();
136     newwin.print();
137     newwin.close();
138     
139 }

转载于:https://www.cnblogs.com/Peter-Luo/archive/2011/10/23/extjs_grid_print.html