新公司的extjs框架(三)：对话框页面

同样的，首先定义这个页面即将显示的数据源，因为这个对话框页面是以选项卡的形式，而且是两个选项卡，所以首先指定的是两个数据源。

 

View Code

hsjwebgis.datasource.dangerportdetailstore =  function(){

     var record=[
        {name: 'fireharm'},
        {name: 'fireprev'},
        {name: 'firecontl'},
        {name: 'expdharm'},
        {name: 'expdprev'},
        {name: 'expdcontl'},
        {name: 'touchharm'},
        {name: 'touchprev'},
        {name: 'touchcontl'},
        {name: 'skinharm'},
        {name: 'skinprev'},
        {name: 'eyeharm'},
        {name: 'eyecontl'},
        {name: 'breaharm'},
        {name: 'breaprev'},
        {name: 'breacontl'},
        {name: 'eatharm'},
        {name: 'eatprev'},
        {name: 'eatcontl'},
        {name: 'safenotice'},
        {name: 'physchar'},
        {name: 'chemchar'},            
        {name: 'touclimit'},
        {name: 'contappro'},
        {name: 'evapdagr'},
        {name: 'sligheffec'},
        {name: 'serioeffec'}        
    ];


     return { datastore: new Ext.data.Store({
            proxy: new Ext.data.HttpProxy({
                url:"aspx/DangerProt/DangerProtAction.aspx"
            }),
            reader: new Ext.data.JsonReader({
                totalProperty: 'totalCount',
                root: 'data'
            },record)})
        }
};

hsjwebgis.datasource.dangerinfodetailstore =  function(){

     var record=[
        {name: 'fid',mapping:'dangerid'},
        {name: 'intldgrid'},
        {name: 'chname'},
        {name: 'enname'},
        {name: 'intlstno'},
        {name: 'waterno'},
        {name: 'cargono'},
        {name: 'intlmdgr'},
        {name: 'hommdgr'},
        {name: 'secdgr'},
        {name: 'packtype'},
        {name: 'transtyp'},
        {name: 'dockbeen'},
        {name: 'limit'},
        {name: 'loadneed'},
        {name: 'injchname'},
        {name: 'injenname'},
        {name: 'moformula'},
        {name: 'gasflashpnt'},
        {name: 'gassteamden'},
        {name: 'gasboil'},
        {name: 'gasburntem'},
        {name: 'gasexplode'},            
        {name: 'liqflashpnt'},
        {name: 'liqboil'},
        {name: 'liqmelt'},
        {name: 'liqdensity'},
        {name: 'liqsoluble'},
        {name: 'liqpress'},
        {name: 'liqsteamden'},
        {name: 'liqburntem'},
        {name: 'liqexplode'},
        {name: 'liqph'},
        {name: 'solboil'},
        {name: 'solmelt'},
        {name: 'solden'},
        {name: 'solsoluble'},
        {name: 'conddata'},
        {name: 'mainuse'},
        {name: 'accidinfo'},
        {name: 'tecrefno'},
        {name: 'casno'},
        {name: 'ecno'},
        {name: 'rtecsno'},
        {name: 'creator'},
        {name: 'modiuser'},
        {name: 'ld50'},
        {name: 'lc50'}
    ];


     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)})
        }
};

 

同样的，数据源定义完毕后，扩展Container容器。

hsjwebgis.cheminfodlg = Ext.extend(Ext.Container, {});

同时定义页面显示的内容以及页面的相关操作方法与事件，所有内容都会写在上面一条语句的{}内，因为这个页面涉及到数据保存并提交后台的操作，所以比列表页面要复杂，我们逐个来分析:

1.首先定义一些内部的变量:

View Code

dlgparams : '', // 对话框参数组
    inuse : '', // 使用状态
    icon : '', // 图标
    window : '', // 窗体
    closeAction : 'close', // 关闭动作
    formStore1 : '', // 前台表单数据源1
    formStore2 : '', // 前台表单数据源2
    detailstore1 : '', // 后台数据源1
    detailstore2 : '', // 后台数据源1
    myparams1 : '', // 数据参数组1
    myparams2 : '', // 数据参数组2

2.然后定义一个初始化组件的方法，这个方法应该是继承了父类hsjwebgis：

initComponent :  function() {}

3.来看一下初始化组件有哪些内容:

View Code

// 首先定义和初始化参数组、后台数据源、表单数据源
this.myparams1 = {};
         this.myparams2 = {};
         this.detailstore1 = hsjwebgis.datasource.dangerinfodetailstore();
         this.detailstore2 = hsjwebgis.datasource.dangerportdetailstore();
         this.formStore1 =  new Ext.data.Store();
         this.formStore2 =  new Ext.data.Store();
// 这里是验证页面的Session状态，每个页面都有，应该写在父类方法里面
        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.cheminfodlg.superclass.initComponent.call(this);

所有的准备工作都做好了，现在是主体方法:

dlg : function() {}

在主体方法中，首先定义一个选项卡的面板：

var tabpanle =  new Ext.TabPanel({
            plain: true,                    
            activeTab: 0,
            region : 'center',
            autoScroll :  true,
            items : [ this.cheminfo().panel, this.dangerprot().panel]
        }); // 选项卡面板里面包含了cheminfo和dangerprot两个选项卡