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

 var pageSize = 20;//初始化每页数据条数
 var winTitle = '';//初始化窗口标题

 /**
  *点击统计图时，弹出一个窗口，显示统计的详情列表信息，
  *该方法为项目中所有的统计图共享，参数type是一个字符串，用于区分是哪个统计图调用的
  */
 function showDetails(type){

     setWindowTitle(type);//设置窗口标题

     var panel;
     if (type.split("_")[0] == "stdMngStatistics") {
         var gridStore = createStore("gridStore", type);//获取数据
         loadGridStoreByOrgCodeAndIncludeSubOrgs(gridStore);
         gridStore.load(function(){
             panel = createGrid(gridStore);//创建面板
             showWindow(panel);//显示窗口
         });
     }
 }

 //设置窗口标题
 function setWindowTitle(type){
     if(type == "stdMngStatistics"){
         winTitle = "规范管理人员";
     }
 }        

 //设置参数
 function loadGridStoreByOrgCodeAndIncludeSubOrgs(gridStore){
     var proxy = gridStore.getProxy();
     proxy.setExtraParam("orgCode",selectedOrgCode);// 管理机构编码
     proxy.setExtraParam("includeSubOrgs",selectedIncludeSubOrgs);// 是否包含下级机构
 }

 //获取数据
 function createStore(storeId, type){
     return new Ext.data.JsonStore({
         storeId: storeId,
         remoteSort : true,
         pageSize : pageSize,
         proxy: {
             type: 'ajax',
             url : baseUrl + '/app/report/statisticsDetails/' + encodeURI(encodeURI(type)),
             actionMethods: {
                 read : 'POST'
             },
             reader: {
                  type: 'json',
                  totalProperty : 'totalElements',
                  root: 'content'
             },
             extraParams:{
                 limit : pageSize
             },
             batchActions : false
         },
         fields : ['id' , 'ehrId' , 'personName', 'gender', 'birthDate', 'innerCode', 'svcFlwMental' , 'svcFlwCommonDto' ,
             'family', 'idNumber', 'homeTel', 'ehrIntegrity' , 'hasAsmYear', 'hasAsmOldS' , 'hasAsmOldA' , 'hasSvcExam1', 'mngOrgName' ,
             'dateCreated', 'ehrDetails' , 'hasFirstSoap' , 'hasFlwChronic' , 'hasAsmYear' , 'svcAsmOldS' , 'svcChronicList' , 'svcChronic','hasVSvcFlwChronicWf',
             'grHealth', 'grHighRisk' , 'grChronicDisease' , 'grOld' , 'grMaternity' ,
             'grChildren','grMentalDisorder','grHandicapped','cdHypertension','cdDiabetesMellitus',
             'cdCoronaryDisease','cdCerebralApoplexy','cdOther', 'curContract']
     });
 }

 //创建面板
 function createGrid(gridStore){
     var sm = new Ext.selection.RowModel();
     return Ext.create('Ext.grid.Panel', {
           border : false,
         xtype : 'grid',
         store : gridStore,
         loadMask : true,
         stripeRows : true,
         viewConfig: {
             forceFit : true
         },
         listeners : {
             itemdblclick : function(a, b, c, rowindex, e){
                 e.preventDefault();
                 openModalDialog(baseUrl+'/app/ehr/index/'+gridStore.getAt(rowindex).get('id'));
                 gridStore.reload();
             }
         } ,
         selModel : sm,
         columns:[
             new Ext.grid.RowNumberer({
                     header: '序号',
                     width: 45,        //序号列宽
                     align: 'center'    //序号居中
                 }),
             {text : '姓名',dataIndex : 'personName', sortable:true },
             {text : '性别',dataIndex : 'gender', renderer : genderRenderer ,maxWidth : 60 , sortable:true },
             {text : '出生日期',dataIndex : 'birthDate', sortable:true },
             {text : '健康分类',dataIndex : 'ehrClassify', renderer : ehrClassifyHealthRenderer, sortable:false},
             {text : '人群分类',dataIndex : 'ehrClassify', renderer : ehrClassifyGrRenderer, sortable:false},
             {text : '慢病分类',dataIndex : 'ehrClassify', renderer : ehrClassifyCdRenderer, sortable:false},
             {text : '签约',dataIndex : 'curContract', maxWidth : 60, renderer : curContractRenderer, sortable:false},
             {text : '建档日期',dataIndex : 'dateCreated', sortable:true },
             {text : '档案完整度',dataIndex : 'ehrIntegrity', renderer : ehrIntegrityRenderer, sortable:true },
             {text : '证件类型' , dataIndex : 'ehrDetails' , hidden : true , renderer : idTypeRenderer, sortable:false},
             {text : '证件号码' , dataIndex : 'idNumber' , hidden : true, sortable:false},
             {text : '内部建档号',dataIndex : 'innerCode' , hidden : true , sortable:true },
             {text : '联系电话',dataIndex : 'homeTel', hidden : true, sortable:false},
             {text : '管理机构' , dataIndex : 'mngOrgName' , hidden : true, sortable:false}
         ],
         bbar : new Ext.PagingToolbar({
             store : gridStore,
             displayInfo : true,
             showUerItemsBeforeDisplayInfo: true,
             displayMsg : "第 {0} - {1} 条  共 {2}条",
             emptyMsg : "没有符合条件的记录"
         })
     });
 }

 //显示统计列表窗口
 function showWindow(panel){
     Ext.create('Ext.window.Window', {
         modal :true,    //弹出窗口后,不能对非本窗口内容进行操作
         title: winTitle,
         constrainHeader:true,    //所有查询统计中弹窗的拖动范围限定
         height: 620,
         width: 880,
         layout : 'fit',
         items : [panel]
     }).show();
 }