首页 > 代码库 > 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如何实现鼠标点击统计图时弹出窗口来展示统计的具体列表信息
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。