新公司的extjs框架(二):列表页面

列表页面又定义了自己的数据源，并对Container容器作了扩展：

 

View Code

hsjwebgis.datasource.dangerinfodetailstore =  function(){

     var record=[
        {name: 'fid',       label:'危险品编号',ctrllayout:'west', ctrltype:'TextField',mapping:'dangerid'},
        {name: 'intldgrid', label:'国际编号',ctrllayout:'west', ctrltype:'TextField'},
        {name: 'chname',    label:'中文名称',ctrllayout:'west', ctrltype:'TextField'},
        {name: 'enname',    label:'英文名称',ctrllayout:'west', ctrltype:'TextField'},
        {name: 'intlstno',  label:'国际危规',ctrllayout:'east', ctrltype:'TextField'},
        {name: 'waterno',   label:'水路编号',ctrllayout:'east', ctrltype:'TextField'},
        {name: 'cargono',   label:'散货规则',ctrllayout:'center', ctrltype:'TextField'},
        {name: 'intlmdgr',  label:'国际主危险',ctrllayout:'center', ctrltype:'TextField'},
        {name: 'hommdgr',   label:'国内主危险',ctrllayout:'center', ctrltype:'TextField'},
        {name: 'secdgr',    label:'副危险类别',ctrllayout:'center', ctrltype:'TextField'},
        {name: 'packtype',  label:'包装类别',ctrllayout:'center', ctrltype:'TextField'},
        {name: 'transtyp',  label:'运输方式',ctrllayout:'center', ctrltype:'TextField'},
        {name: 'dockbeen',  label:'曾到港口',ctrllayout:'center', ctrltype:'TextField'},
        {name: 'limit',     label:'限量',ctrllayout:'east', ctrltype:'TextField'},
        {name: 'loadneed',  label:'载运要求',ctrllayout:'west', ctrltype:'TextField'},
        {name: 'injchname', label:'有害物名称',ctrllayout:'center', ctrltype:'TextField'},
        {name: 'injenname', label:'有害物英文',ctrllayout:'center', ctrltype:'TextField'},
        {name: 'moformula', label:'分子式',ctrllayout:'west', ctrltype:'TextField'},
        {name: 'gasflashpnt',label:'气态闪点',ctrllayout:'west', ctrltype:'TextField'},
        {name: 'gassteamden',label:'蒸汽密度',ctrllayout:'west', ctrltype:'TextField'},
        {name: 'gasboil',   label:'气态沸点',ctrllayout:'west', ctrltype:'TextField'},
        {name: 'gasburntem', label:'气态自燃度',ctrllayout:'west', ctrltype:'TextField'},
        {name: 'gasexplode', label:'气态爆炸极',ctrllayout:'west', ctrltype:'TextField'},            
        {name: 'liqflashpnt',label:'液态闪点',ctrllayout:'east', ctrltype:'TextField'},
        {name: 'liqboil', label:'液态沸点',ctrllayout:'east', ctrltype:'TextField'},
        {name: 'liqmelt', label:'液态熔点',ctrllayout:'east', ctrltype:'TextField'},
        {name: 'liqdensity', label:'液态密度',ctrllayout:'east', ctrltype:'TextField'},
        {name: 'liqsoluble', label:'溶解度',ctrllayout:'east', ctrltype:'TextField'},
        {name: 'liqpress', label:'蒸汽压',ctrllayout:'east', ctrltype:'TextField'},
        {name: 'liqsteamden', label:'液态蒸汽密',ctrllayout:'east', ctrltype:'TextField'},
        {name: 'liqburntem', label:'液态自然温',ctrllayout:'east', ctrltype:'TextField'},
        {name: 'liqexplode', label:'液态爆炸极',ctrllayout:'east', ctrltype:'TextField'},
        {name: 'liqph', label:'液态PH值',ctrllayout:'west', ctrltype:'TextField'},
        {name: 'solboil', label:'固态沸点',ctrllayout:'center', ctrltype:'TextField'},
        {name: 'solmelt', label:'固态熔点',ctrllayout:'center', ctrltype:'TextField'},
        {name: 'solden', label:'固态密度',ctrllayout:'center', ctrltype:'TextField'},
        {name: 'solsoluble', label:'固态溶解',ctrllayout:'center', ctrltype:'TextField'},
        {name: 'conddata', label:'环境数据',ctrllayout:'south', ctrltype:'TextArea'},
        {name: 'mainuse', label:'主要用途',ctrllayout:'south', ctrltype:'TextArea'},
        {name: 'accidinfo', label:'事故信息',ctrllayout:'south', ctrltype:'TextArea'},
        {name: 'tecrefno', label:'技术规范编',ctrllayout:'east', ctrltype:'TextField'},
        {name: 'casno', label:'CAS编号',ctrllayout:'center', ctrltype:'TextField'},
        {name: 'ecno', label:'EC编号',ctrllayout:'west', ctrltype:'TextField'},
        {name: 'rtecsno', label:'RTECS编号',ctrllayout:'east', ctrltype:'TextField'},
        {name: 'creator', label:'创建者',ctrllayout:'west', ctrltype:'TextField'},
        {name: 'ld50', label:'半数致死量',ctrllayout:'east', ctrltype:'TextField'},
        {name: 'lc50', label:'致死浓度',ctrllayout:'west', ctrltype:'TextField'},
        {name: 'modiuser', label:'修改者',ctrllayout:'east', ctrltype:'TextField'}
        

    ];


     return { datastore: new Ext.data.Store({
                proxy: new Ext.data.HttpProxy({
                    url:"aspx/DangerInfo/DangerInfoAction.aspx"
                }),
                reader: new Ext.data.JsonReader({
                    totalProperty: 'totalCount',
                    root: 'data',
                    id: 'dangerid'
                },record)}),
                cfgfields : record,
                dlgheigth : 700,
                 dlgwidth : 800,
                 title    : "危险品具体信息"
        }
};


hsjwebgis.datasource.dangerinfodirectstore =  function(){
     return  new Ext.data.Store({
        proxy: new Ext.data.HttpProxy({
            url:"aspx/DangerInfo/DangerInfoAction.aspx"
        }),
        reader: new Ext.data.JsonReader({
            totalProperty: 'totalCount',
            root: 'data'
            
        },[
            {name: 'dangerid'},
            {name: 'chname'},
            {name: 'moformula'},
            {name: 'hommdgr'},
            {name: 'loadneed'},
            {name: 'injchname'},
            {name: 'creadate'},
            {name: 'creator'}
        ])
})};

hsjwebgis.cheminfo = Ext.extend(Ext.Container, {

    params : {},
    pageSize : 16,
    pagingToolbar : '',
    directstore : '',
    proxydlgmap : '',
    dlgposition : '',

    initComponent :  function() {
         var scope =  this;
         this.dlgposition = {};        
         this.proxydlgmap =  new Ext.data.Store();
         this.directstore = hsjwebgis.datasource.dangerinfodirectstore();
         this.directstore.on('load', function(){
             if(scope.directstore.getTotalCount()==-1)
                Ext.MessageBox.alert('提示',"您离开页面时间太长，请重新登陆！",utils.logOut);
        });            
        
        Ext.Ajax.request({
            url:"aspx/Dictionary/SessionState.aspx",
            method:"GET",
            success: function(response)
            {
                 if(response.responseText == "权限不足！")
                {
                    Ext.MessageBox.alert('提示',"您离开页面时间太长，请重新登陆！",utils.logOut);
                }
            },
            failure: function()
            {
                
                Ext.MessageBox.alert('提示',"您离开页面时间太长，请重新登陆！",utils.logOut);
                
            }
        });
        
        hsjwebgis.cheminfo.superclass.initComponent.call( this);
    },

    grid :  function() {
         this.pagingToolbar =  new Ext.PagingToolbar({
            pageSize :  this.pageSize,
            store :  this.directstore,
            displayInfo :  true,
            displayMsg : '显示 {0} - {1} 条 共 {2} 条',
            emptyMsg : "对不起，查无此信息",
            items : [],
            params:{action:"getdirect"}
        });
         var cm =  new Ext.grid.ColumnModel([{
            header : "危险品编号",
            dataIndex : 'dangerid',
            sortable :  true,
            width : 80
        },{
            header : "分子式",
            dataIndex : 'moformula',
            sortable :  true,
            width : 80
        }, {
            header : "中文名",
            dataIndex : 'chname',
            sortable :  true,
            width : 80
        }, {
            header : "运载要求",
            dataIndex : 'loadneed',
            sortable :  true,
            width : 80
        },{
            header : "有害物名称",
            dataIndex : 'injchname',
            sortable :  true,
            width : 80
        }, {
            header : "创建者",
            dataIndex : 'creator',
            sortable :  true,
            width : 80
        }, {
            header : "国内主要危险类别",
            dataIndex : 'hommdgr',
            sortable :  true,
            width : 80
        }]);
         var grid =  new Ext.grid.GridPanel({
            border :  false,
            region : 'center',
            store :  this.directstore,
            cm : cm,
            trackMouseOver :  true,
            sm :  this.SelectionModel,
            enableColumnHide :  false,
            loadMask :  true,
            viewConfig : {
                forceFit :  true,
                enableRowBody :  true,
                showPreview :  true
            },
            bbar :  this.pagingToolbar
        });

         /*
                * 触发行双击事件，弹出编辑窗口。
                *  */
        grid.on('rowdblclick',  this.Edit_EventHandler,  this);

         this.directstore.load({
            params:{
                start : 0,
                limit :  this.pageSize,
                action:"getdirect"
            }
        });
         return {
            grid : grid,
            ds :  this.directstore
        };
    },
    SelectionModel :  new Ext.grid.RowSelectionModel({
        singleSelect : selectionModel_singleSelect
    }),
    Edit_EventHandler :  function(grid, rowIndex) {
         var id =  this.directstore.getAt(rowIndex).data["dangerid"];
         var dlgparams = {};
        dlgparams.id = id;
        dlgparams.action = 'edit';
        dlgparams.directstore =  this.directstore;
         // dlgparams.datastore = hsjwebgis.datasource.dangerinfodetailstore;
         var dlgActionName = "hsjwebgis.cheminfodlg";
        dlg = opendlg(dlgparams, dlgActionName,  this.proxydlgmap,
                 this.dlgposition, editObject);
         if (dlg !=  null) {
             this.dlgposition = dlg.dlgposition;
        }
    },

    layout :  function() {
        
         var scope =  this;
         var newObject =  new Ext.Button({
            text : '新建',
            iconCls: 'new-btn',
             // tooltip : '<b>新建危险化学品信息</b><br />新建所选中危险化学品信息.',
            cls : 'x-btn-text-icon blist'
        });
             /*
                * 触发单击事件，弹出新建窗口。
                *  */
        newObject.on('click',  function() {
             var dlgparams = {};
            dlgparams.id = -1;
            dlgparams.action = 'new';
            dlgparams.directstore = scope.directstore;
             // dlgparams.datastore = hsjwebgis.datasource.dangerinfodetailstore;
             var dlgActionName = "hsjwebgis.cheminfodlg";
            dlg = opendlg(dlgparams, dlgActionName, scope.proxydlgmap,
            scope.dlgposition, editObject);
             if (dlg !=  null) {
                 this.dlgposition = dlg.dlgposition;
            }

        });
        
        editObject =  new Ext.Button({
            text : '编辑',
            scope : scope,
            iconCls : 'edit-btn',
            cls : 'x-btn-text-icon blist',
             // tooltip : '<b>编辑危险化学品信息</b><br />编辑所选中危险化学品信息.',
            handler :  function() {
                 var selected = scope.SelectionModel.getSelections();
                 if (selected == "") {
                    Ext.MessageBox.alert('提示', '请选择一条记录.');
                }  else {
                     var id = selected[0].get("dangerid");                    
                     var dlgparams = {};
                    dlgparams.id = id;
                    dlgparams.action = 'edit';
                    dlgparams.directstore =  this.directstore;
                     // dlgparams.datastore = hsjwebgis.datasource.dangerinfodetailstore;
                     var dlgActionName = "hsjwebgis.cheminfodlg";
                    dlg = opendlg(dlgparams, dlgActionName,  this.proxydlgmap,
                             this.dlgposition, editObject);
                     if (dlg !=  null) {
                         this.dlgposition = dlg.dlgposition;
                    }                
                }
            }
        });
        
         var scope =  this;
         var delObject =  new Ext.Action({
            text : '删除',
            iconCls : 'del-btn',
            scope : scope,
            cls : 'x-btn-text-icon blist',
             // tooltip : '<b>删除危险化学品信息</b><br />删除所选中危险化学品信息.',
            handler :  function() {
                 var selected = scope.SelectionModel.getSelections();
                 if (selected == "") {
                    Ext.MessageBox.alert('提示', '请选择一条记录.');
                }  else {
                     // var id = selected[0].get("dangerid");
                     var action = 'del';
                     var myparams = {};
                     // myparams.id = id;
                    myparams.id = '';
                     for( var n = 0;n<selected.length;n++){
                                myparams.id +=  selected[n].get("dangerid") + ",";
                            }
                            myparams.id = myparams.id.toString().substring(0,myparams.id.length-1);
                    myparams.action = action;
                     // utils.delAction('aspx/DangerInfo/DangerInfoAction.aspx',{id:id,action:action},scope)
                    Ext.MessageBox.confirm('提示', '是否要删除编码为' + myparams.id + '的记录?',  function(bt) {
                         if (bt == 'yes') 
                        {
                            Ext.Ajax.request({
                                url : 'aspx/DangerInfo/DangerInfoAction.aspx',
                                scope : scope,
                                success :  function(response) {
                                    eval("var rtnobj = " + response.responseText + ";");
                                    Ext.MessageBox.alert('提示',
                                            rtnobj.success?rtnobj.actionInfo:rtnobj.error,
                                             function() {
                                                scope.directstore.reload();
                                            });
                                },
                                failure :  function() {
                                    Ext.MessageBox.alert('提示',
                                            '连接服务器异常.',  function() {
                                                scope.directstore.reload();
                                            });
                                },
                                params : myparams
                            })
                        }

                     })                    
                }

            }
        });
        
         var logout =  new Ext.Action({
            text : '注销',
            scope : scope,
            iconCls: 'logout-btn',
            cls : 'x-btn-text-icon blist',
             // tooltip : '<b>注销系统</b><br />注销登录状态.',
            handler :  function() {
                        Ext.MessageBox.confirm('提示', '是否要注销系统？'
                                ,  function(bt) {
                             if(bt=='yes')
                                utils.logOut();

                        })

            }
        });
        
         var searchObject =  new Ext.Button({
            text : '详细查询',
            iconCls : 'search-btn',
            cls : 'x-btn-text-icon blist'
             // tooltip : '<b>查询预警信息</b><br />详细查询预警信息.'
        });
        searchObject.on('click',  function() {
             this.searchDlg();
        },  this);

         // /权限
         // alert(params.permission);
         switch(params.permission)
        {    
             case '1':
                newObject.disable();
                delObject.disable();
                editObject.disable();
                 break;
             case '2':
                delObject.disable();                
                 break;
             case '3':                
                 break;
        }


         var panel =  new Ext.Panel({
            border :  false,
            region : 'center',
            layout : 'border',

            tbar : ['-', newObject, '-',editObject,'-', delObject,'-',searchObject,'-',logout,'-'],
            items : [ this.grid().grid]
        });
         return panel;

    },
    
    searchDlg :  function() {
         var fid =  new Ext.form.TextField({
            fieldLabel : '危险品编号',
            name : 'fid',
            anchor : '90%',
            maskRe:reg_input
        });
        
         var ChName =  new Ext.form.TextField({
            fieldLabel : '中文名称',
            name : 'ChName',
            anchor : '90%',
            maskRe:reg_input
        });
        
         var EnName =  new Ext.form.TextField({
            fieldLabel : '英文名称',
            name : 'EnName',
            anchor : '90%',
            maskRe:reg_input
        });
        
         var IntlStNo =  new Ext.form.TextField({
            fieldLabel : '国际危规编号',
            name : 'IntlStNo',
            anchor : '90%',
            maskRe:reg_input
        });
        
         var WaterNo =  new Ext.form.TextField({
            fieldLabel : '水路编号',
            name : 'WaterNo',
            anchor : '90%',
            maskRe:reg_input
        });
        
         var CargoNo =  new Ext.form.TextField({
            fieldLabel : '散货编号',
            name : 'CargoNo',
            anchor : '90%',
            maskRe:reg_input
        });
        
         var MoFormule =  new Ext.form.TextField({
            fieldLabel : '分子式',
            name : 'MoFormule',
            anchor : '90%',
            maskRe:reg_input
        });
        
         var TecRefNo =  new Ext.form.TextField({
            fieldLabel : '技术规范编号',
            name : 'TecRefNo',
            anchor : '90%',
            maskRe:reg_input
        });
        
         var CASNo =  new Ext.form.TextField({
            fieldLabel : 'CAS编号',
            name : 'CASNo',
            anchor : '90%',
            maskRe:reg_input
        });
        
         var RTRCSNo =  new Ext.form.TextField({
            fieldLabel : 'RTECS编号',
            name : 'RTECSNo',
            anchor : '90%',
            maskRe:reg_input
        });
        
         var ECNo =  new Ext.form.TextField({
            fieldLabel : 'EC编号',
            name : 'ECNo',
            anchor : '90%',
            maskRe:reg_input
        });
        
         var form =  new Ext.Panel({
            region : 'center',
            frame :  true,
            border :  false,
            labelWidth : 80,
            layout : 'form',
            bodyStyle : 'padding:0,10px',
            items : [fid, ChName, EnName, IntlStNo,WaterNo,CargoNo,MoFormule,TecRefNo,CASNo,ECNo,RTRCSNo]
        });
         var scope =  this;
         var searchDlg =  new Ext.Window({
            title : '详细查询',
            layout : 'border',

             //  baseCls: 'x-panel',
            width : 340,
            border :  false,
            height : 365,
            plain :  true,
            bodyStyle : 'padding:5px;',
            buttonAlign : 'center',
             //  modal:true,
            resizable :  false,
            items : form,
            buttons : [{
                text : '查询',
                scope : scope,
                handler :  function() {
                
                     var params = {
                        action : 'particularsearch',
                        start : 0,
                        limit :  this.pageSize,
                        fid : fid.getValue(),
                        ChName : ChName.getValue(),
                        EnName : EnName.getValue(),
                        IntlStNo : IntlStNo.getValue(),
                        WaterNo : WaterNo.getValue(),
                        CargoNo : CargoNo.getValue(),
                        MoFormule : MoFormule.getValue(),
                        TecRefNo : TecRefNo.getValue(),
                        CASNo : CASNo.getValue(),
                        ECNo : ECNo.getValue(),
                        RTRCSNo : RTRCSNo.getValue()
                    };
                    scope.pagingToolbar.params = params;
                    scope.directstore.load({
                        params : params
                    });
                    searchDlg.close();
                }
            }, {
                text : '取消',
                handler :  function() {
                    searchDlg.close();
                }
            }]
        });
        searchDlg.show( true);
    },
    
    onActivate :  function() {

    },
    onDestroy :  function() {
         this.proxydlgmap.each( function(e) {

            e.data.destroy();
        },  this)
         this.proxydlgmap.removeAll();
         this.proxydlgmap1.each( function(e) {

            e.data.destroy();
        },  this)
         this.proxydlgmap1.removeAll();
    }

})

 列表页面效果: