extjs grid 打印

来源:互联网 发布:icp域名备案如何办理 编辑:程序博客网 时间:2024/05/29 04:52
大家好,我想实现一个打印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  
    // ...  

原创粉丝点击