大家好，我想实现一个打印grid数据的功能，通过工具中的按钮触发打印函数。现在的问题是，我是通过grid的id来获取grid组件，然后打印，这样不利于代码共用。我现在想怎样在grid里面把这个grid的引用传给这个printGrid函数，不知道该怎么传递grid这个参数，然后这样调用printGrid(grid)[size=medium][/size]
Java代码
var stat1_grid = new Ext.grid.GridPanel({
cm : cm,
store : store,
id:'stat1_grid',
border : false,
loadMask : {
msg : '正在加载数据,请稍后...'
},
bbar : [{
xtype : 'button',
iconCls : 'pdf-icon',
text : '导出'
}, '-', {
xtype : 'button',
iconCls : 'print-icon',
text : '打印',
handler:printGrid
}]
});
var stat1_grid = new Ext.grid.GridPanel({
cm : cm,
store : store,
id:'stat1_grid',
border : false,
loadMask : {
msg : '正在加载数据,请稍后...'
},
bbar : [{
xtype : 'button',
iconCls : 'pdf-icon',
text : '导出'
}, '-', {
xtype : 'button',
iconCls : 'print-icon',
text : '打印',
handler:printGrid
}]
});
这是printGrid函数
Java代码
//打印报表
function printGrid() {
var grid =Ext.getCmp('stat1_grid');
var tableStr = '<table width="100%" border=1>';
var cm = grid.getColumnModel();
var colCount = cm.getColumnCount();
var temp_obj = new Array();
// 只下载没有隐藏的列(isHidden()为true表示隐藏,其他都为显示)
// 临时数组,存放所有当前显示列的下标
for (var i = 1; i < colCount; i++) {//从第三列开始，因为我的第1、2列是分别是rownumber和selectmodel。
if (cm.isHidden(i) == true) {
} else {
temp_obj.push(i);
}
}
// tableStr = tableStr + '<tr><td>序号</td>';
for (var i = 0; i < temp_obj.length; i++) {
// 显示列的列标题
tableStr = tableStr + '<td>' + cm.getColumnHeader(temp_obj[i])
+ '</td>';
}
tableStr = tableStr + '</tr>';
var store = grid.getStore();
var recordCount = store.getCount();
for (var i = 0; i < recordCount; i++) {
var r = store.getAt(i);
// tableStr = tableStr + '<tr><td>' + (i + 1) + '</td>';
for (var j = 0; j < temp_obj.length; j++) {
var dataIndex = cm.getDataIndex(temp_obj[j]);
var tdValue = r.get(dataIndex);
var rendererFunc = cm.getRenderer(temp_obj[j]);
if (rendererFunc != null) {
tdValue = rendererFunc(tdValue);
}
if (tdValue == null) {
tdValue = '';
}
tableStr = tableStr + '<td>' + tdValue + '</td>';
}
tableStr = tableStr + '</tr>';
}
tableStr = tableStr + '</table>';
var titleHTML = tableStr;// document.getElementById("printGridfff").innerHTML;
var newwin = window.open('printer.jsp', '', '');
newwin.document.write(titleHTML);
newwin.document.location.reload();
newwin.print();
newwin.close();
}
//打印报表
function printGrid() {
var grid =Ext.getCmp('stat1_grid');
var tableStr = '<table width="100%" border=1>';
var cm = grid.getColumnModel();
var colCount = cm.getColumnCount();
var temp_obj = new Array();
// 只下载没有隐藏的列(isHidden()为true表示隐藏,其他都为显示)
// 临时数组,存放所有当前显示列的下标
for (var i = 1; i < colCount; i++) {//从第三列开始，因为我的第1、2列是分别是rownumber和selectmodel。
if (cm.isHidden(i) == true) {
} else {
temp_obj.push(i);
}
}
// tableStr = tableStr + '<tr><td>序号</td>';
for (var i = 0; i < temp_obj.length; i++) {
// 显示列的列标题
tableStr = tableStr + '<td>' + cm.getColumnHeader(temp_obj[i])
+ '</td>';
}
tableStr = tableStr + '</tr>';
var store = grid.getStore();
var recordCount = store.getCount();
for (var i = 0; i < recordCount; i++) {
var r = store.getAt(i);
// tableStr = tableStr + '<tr><td>' + (i + 1) + '</td>';
for (var j = 0; j < temp_obj.length; j++) {
var dataIndex = cm.getDataIndex(temp_obj[j]);
var tdValue = r.get(dataIndex);
var rendererFunc = cm.getRenderer(temp_obj[j]);
if (rendererFunc != null) {
tdValue = rendererFunc(tdValue);
}
if (tdValue == null) {
tdValue = '';
}
tableStr = tableStr + '<td>' + tdValue + '</td>';
}
tableStr = tableStr + '</tr>';
}
tableStr = tableStr + '</table>';
var titleHTML = tableStr;// document.getElementById("printGridfff").innerHTML;
var newwin = window.open('printer.jsp', '', '');
newwin.document.write(titleHTML);
newwin.document.location.reload();
newwin.print();
newwin.close();
}
采纳的答案
2010-07-30 sl166543210 (中级程序员)
根据你上面写的代码，在button的handler里是可以直接获取到该grid的，那么你的代码可以稍微修改下，即:
{
xtype : 'button',
iconCls : 'print-icon',
text : '打印',
handler:function(){
printGrid(stat1_grid);
}
}
--------------------------------------------
提问者对于答案的评价：
非常感谢给我帮助的朋友
问题答案可能在这里 → 寻找更多解答
JSP+Ext实现CURD, 更简洁明了
Ext 实现 更新列标题和数据,同时满足分组等现实问题
TreeTable的简单实现
关于asp中通过button提交表单的一个简单的问题
table宽度定位问题??
模态页面传值 不知道哪错了 帮我看下
其他回答
给出两种实现方法作参考
1. 利用匿名函数形成闭包封装一下
Js代码
var stat1_grid = new Ext.grid.GridPanel({
// ...
}, '-', {
xtype : 'button',
iconCls : 'print-icon',
text : '打印',
handler:function(){
printGrid(stat1_grid);
}
}]
});
var stat1_grid = new Ext.grid.GridPanel({
// ...
}, '-', {
xtype : 'button',
iconCls : 'print-icon',
text : '打印',
handler:function(){
printGrid(stat1_grid);
}
}]
});
2. 通过ownerCt访问
Js代码
function printGrid(btn, e) { // Button的handler调用时会传递button引用及浏览器事件
// 这里的this默认也是指向button
//var grid = btn.ownerCt.ownerCt;
var grid = this.ownerCt.ownerCt; // button.ownerCt指向toolbar，toolbar.ownerCt指向panel/grid
// ...
}