【ExtJs4.2】为GriidPanel 的记录添加双击查看详情事件 

 1 //gridId gripPanel 的ID,record GridPanel的数据 ,height_ 窗口高度，widht_ 窗口宽度
 2 function showDetailInfo(gridId,record,height_,width_){
 3     var columns = Ext.getCmp(gridId).columns;
 4     var data = record.data;
 5     var tr ='';
 6     var total=0;
 7     Object.getOwnPropertyNames(data).forEach(function(val, idx, array) {
 8         console.log(idx);
 9         //当gridPanel启动 记录的序号 时，columns会多一列
10         if(idx!=(columns.length-1)){
11               if (idx % 2 == 0) {
12                   tr += '<tr bgcolor=d2e5ff><td align="right" width="35%" height="34px">&nbsp;&nbsp;&nbsp;' + columns[idx+1].text + '&nbsp;&nbsp;</td>';
13             } else {
14                 tr += '<tr bgcolor=ecf4fd><td align="right" width="35%" height="34px">&nbsp;&nbsp;&nbsp;' + columns[idx+1].text + '&nbsp;&nbsp;</td>';
15             }
16             var value = data[val] == null ? '' : data[val];
17             tr += '<td width="65%">&nbsp;&nbsp;&nbsp;' + value + '&nbsp;&nbsp;&nbsp;</td></tr>';
18             total++;
19         }
20     });
21     var ctn = '<center>';
22 //    ctn += '<div class=div_list_at_green style=height:' + ctnHeight + 'px;>';
23     ctn += '        <table class=table_at_green width="100%" height="100%">';
24     ctn += '              <tbody>';
25     ctn += tr;
26     ctn += '              </tbody>';
27     ctn += '        </table>';
28 //    ctn += '</div>';
29     ctn += '</center>';
30     var detailInfo = new Ext.Window( {
31         title : '详细信息',
32         width : width_,
33         height : height_,
34         bodyStyle : 'padding:5px;',
35         buttonAlign : 'center',
36         items : [{
37             xtype : 'panel',
38             bodyBorder : 0,
39             border : 0,
40             autoScroll : true,
41             html : ctn
42         }]
43     /*
44      * ,buttons: [{ text: '关闭', handler: function(){ dlg.hide(); } }]
45      */
46     });
47     detailInfo.show();
48 }

 

调用方法：在GridPanel中添加itemdblclick事件
1 listeners : {
2                 itemdblclick : function(view,record,item,index,e,opts){
3                     showDetailInfo('wtGrid',record,550,400);
4                 }
5             }

 

posted @ 2016-11-10 10:52  Desperador  阅读(307)  评论(0)  编辑  收藏  举报