首页 > 代码库 > Extjs4.2如何实现鼠标点击统计图时弹出窗口来展示统计的具体列表信息

Extjs4.2如何实现鼠标点击统计图时弹出窗口来展示统计的具体列表信息

  1 var pageSize = 20;//初始化每页数据条数  2 var winTitle = ‘‘;//初始化窗口标题  3   4 /**  5  *点击统计图时,弹出一个窗口,显示统计的详情列表信息,  6  *该方法为项目中所有的统计图共享,参数type是一个字符串,用于区分是哪个统计图调用的  7  */  8 function showDetails(type){  9      10     setWindowTitle(type);//设置窗口标题 11      12     var panel; 13     if (type.split("_")[0] == "stdMngStatistics") { 14         var gridStore = createStore("gridStore", type);//获取数据 15         loadGridStoreByOrgCodeAndIncludeSubOrgs(gridStore); 16         gridStore.load(function(){ 17             panel = createGrid(gridStore);//创建面板 18             showWindow(panel);//显示窗口 19         });     20     } 21 } 22  23 //设置窗口标题 24 function setWindowTitle(type){ 25     if(type == "stdMngStatistics"){ 26         winTitle = "规范管理人员"; 27     } 28 }         29  30 //设置参数 31 function loadGridStoreByOrgCodeAndIncludeSubOrgs(gridStore){ 32     var proxy = gridStore.getProxy(); 33     proxy.setExtraParam("orgCode",selectedOrgCode);// 管理机构编码 34     proxy.setExtraParam("includeSubOrgs",selectedIncludeSubOrgs);// 是否包含下级机构 35 } 36  37 //获取数据 38 function createStore(storeId, type){ 39     return new Ext.data.JsonStore({ 40         storeId: storeId, 41         remoteSort : true, 42         pageSize : pageSize, 43         proxy: { 44             type: ‘ajax‘, 45             url : baseUrl + ‘/app/report/statisticsDetails/‘ + encodeURI(encodeURI(type)), 46             actionMethods: { 47                 read : ‘POST‘ 48             }, 49             reader: { 50                  type: ‘json‘, 51                  totalProperty : ‘totalElements‘, 52                  root: ‘content‘ 53             }, 54             extraParams:{ 55                 limit : pageSize 56             }, 57             batchActions : false 58         }, 59         fields : [‘id‘ , ‘ehrId‘ , ‘personName‘, ‘gender‘, ‘birthDate‘, ‘innerCode‘, ‘svcFlwMental‘ , ‘svcFlwCommonDto‘ , 60             ‘family‘, ‘idNumber‘, ‘homeTel‘, ‘ehrIntegrity‘ , ‘hasAsmYear‘, ‘hasAsmOldS‘ , ‘hasAsmOldA‘ , ‘hasSvcExam1‘, ‘mngOrgName‘ , 61             ‘dateCreated‘, ‘ehrDetails‘ , ‘hasFirstSoap‘ , ‘hasFlwChronic‘ , ‘hasAsmYear‘ , ‘svcAsmOldS‘ , ‘svcChronicList‘ , ‘svcChronic‘,‘hasVSvcFlwChronicWf‘, 62             ‘grHealth‘, ‘grHighRisk‘ , ‘grChronicDisease‘ , ‘grOld‘ , ‘grMaternity‘ , 63             ‘grChildren‘,‘grMentalDisorder‘,‘grHandicapped‘,‘cdHypertension‘,‘cdDiabetesMellitus‘, 64             ‘cdCoronaryDisease‘,‘cdCerebralApoplexy‘,‘cdOther‘, ‘curContract‘] 65     }); 66 } 67  68 //创建面板 69 function createGrid(gridStore){ 70     var sm = new Ext.selection.RowModel(); 71     return Ext.create(‘Ext.grid.Panel‘, { 72           border : false, 73         xtype : ‘grid‘, 74         store : gridStore, 75         loadMask : true,  76         stripeRows : true,  77         viewConfig: { 78             forceFit : true 79         }, 80         listeners : { 81             itemdblclick : function(a, b, c, rowindex, e){ 82                 e.preventDefault(); 83                 openModalDialog(baseUrl+‘/app/ehr/index/‘+gridStore.getAt(rowindex).get(‘id‘)); 84                 gridStore.reload(); 85             } 86         } , 87         selModel : sm, 88         columns:[ 89             new Ext.grid.RowNumberer({ 90                     header: ‘序号‘, 91                     width: 45,        //序号列宽 92                     align: ‘center‘    //序号居中 93                 }), 94             {text : ‘姓名‘,dataIndex : ‘personName‘, sortable:true }, 95             {text : ‘性别‘,dataIndex : ‘gender‘, renderer : genderRenderer ,maxWidth : 60 , sortable:true }, 96             {text : ‘出生日期‘,dataIndex : ‘birthDate‘, sortable:true }, 97             {text : ‘健康分类‘,dataIndex : ‘ehrClassify‘, renderer : ehrClassifyHealthRenderer, sortable:false}, 98             {text : ‘人群分类‘,dataIndex : ‘ehrClassify‘, renderer : ehrClassifyGrRenderer, sortable:false}, 99             {text : ‘慢病分类‘,dataIndex : ‘ehrClassify‘, renderer : ehrClassifyCdRenderer, sortable:false},100             {text : ‘签约‘,dataIndex : ‘curContract‘, maxWidth : 60, renderer : curContractRenderer, sortable:false},101             {text : ‘建档日期‘,dataIndex : ‘dateCreated‘, sortable:true },102             {text : ‘档案完整度‘,dataIndex : ‘ehrIntegrity‘, renderer : ehrIntegrityRenderer, sortable:true },103             {text : ‘证件类型‘ , dataIndex : ‘ehrDetails‘ , hidden : true , renderer : idTypeRenderer, sortable:false},104             {text : ‘证件号码‘ , dataIndex : ‘idNumber‘ , hidden : true, sortable:false},105             {text : ‘内部建档号‘,dataIndex : ‘innerCode‘ , hidden : true , sortable:true },106             {text : ‘联系电话‘,dataIndex : ‘homeTel‘, hidden : true, sortable:false},107             {text : ‘管理机构‘ , dataIndex : ‘mngOrgName‘ , hidden : true, sortable:false}108         ],109         bbar : new Ext.PagingToolbar({110             store : gridStore,  111             displayInfo : true,112             showUerItemsBeforeDisplayInfo: true,113             displayMsg : "第 {0} - {1} 条  共 {2}条",114             emptyMsg : "没有符合条件的记录"115         })116     });117 }118 119 //显示统计列表窗口120 function showWindow(panel){121     Ext.create(‘Ext.window.Window‘, {122         modal :true,    //弹出窗口后,不能对非本窗口内容进行操作123         title: winTitle,124         constrainHeader:true,    //所有查询统计中弹窗的拖动范围限定125         height: 620,126         width: 880,127         layout : ‘fit‘,128         items : [panel]129     }).show();130 }

 

Extjs4.2如何实现鼠标点击统计图时弹出窗口来展示统计的具体列表信息