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