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                      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          880,
127         layout : 'fit',
128         items : [panel]
129     }).show();
130 }