extjs打印（转载，因为不能链接，所以复制）

zhyg81

浏览: 5344 次
性别:
来自: 云南

最近访客更多访客>>

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

extjs

EXT JSP J#ASP 浏览器

大家好，我想实现一个打印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
    // ...
}

分享到：