新公司的extjs框架(一):主体框架

刚加盟一家新公司，交给本人一个mis项目，项目前台采用extjs,本人研究了2天，总结一下：

1.extjs应用程序注册,创建于初始化

function load(){
    var viewportpanel;
   var params;
    Ext.onReady(hsjwebgis.init, hsjwebgis);
}

function onUnload(){
    viewportpanel.destroy();
    
}
dlgcloseAction = 'close';
var g_curObject;
hsjdelay = function()
{
    var items = g_curObject.layout();
                   
    var viewport = new Ext.Viewport({
        layout: 'border',
        items: items
    });
    viewportpanel = viewport;

    viewport.on('beforedestroy', function(){        
        params = null;
        items.destroy();
    })
}
hsjwebgis = function(){
    
    return {
        init: function(){
              var url = location.href;
                   var i = url.lastIndexOf("?"); 
                   if (i != -1) {
                  document.getElementById("loading").style.display = "none";
                params = url.substring(i+1, url.length);
                  
                params = Ext.urlDecode(params);
                //alert(params.toSource());
                var nodeid = params.nodeid;
//                alert("var object = new "+params.functionAction+"({nodeid:"+nodeid+",params: params})");
                eval("var object = new "+params.functionAction+"({nodeid:"+nodeid+",params: params})");
                
                ///设定延时~~
                g_curObject=object;                
                setTimeout("hsjdelay()",1200);                    

            }
        }
        
        
    };
}
();

 Ext.onReady()是extjs应用程序的入口，相当于控制台的main(),如果只是一个简单的程序，如下extjs的hello World! 

Ext.OnReady(function(){alert('Hello World!')});

 

2.主框架布局

登陆对话框也放在里面 

/*主框架
 * */
 
hsjwebgis.interval
 
hsjwebgis.mainlayout = function(){
    var Ajax = Ext.Ajax;
    var west;
    var loginwindow;
    var loginsuccess = false;
    var center;
    var height;
    var beforeroeindex;
    return{
        /*
         * 主框架
         * */
        mainlayout:function(){
        var south = new Ext.BoxComponent({
             region:'south',
             el: 'south',
             
              height : 20
        });
        
        
        
      west = new Ext.Panel({
            region:'west',
            title:'数 据 维 护',
            split:true,
            width: 200,
            minSize: 175,
            maxSize: 400,
//            autoScroll: true, 
            collapsible: true,
            margins:'0 0 0 5',
            layout:'accordion',
            layoutConfig:{
                animate:false
            }
        });
        
        center = new Ext.TabPanel({
            region:'center',
            id:'acc',
            enableTabScroll:true,
            activeTab:0
        });

        var viewport = new Ext.Viewport({
            layout:'border',
            items:[
                 south, west, center
            ]
        });
        viewport.on('resize',function(){
            //alert(south.getSize().height);
            if(south.getSize().height>25)
                south.setHeight(25);
            viewport.doLayout();
        });
        return{
            viewport: viewport,
            viewCenter:center,
            viewWest:west,
            //viewNorth: north,
            viewSouth: south
            }
        },
        /*
         * 登陆对话框
         * */
        //begin
        loginwindow:function(){
        
        var chk = new Ext.form.Checkbox({
            boxLabel:'记住用户名',            
            hideLabel : true 
            
        });
        var form = new Ext.form.FormPanel({
               baseCls: 'x-plain',
            labelWidth: 70,
            bodyStyle:'padding:15px 15px 0',
            //defaultType: 'textfield',
            defaults: {width: 150},
        items: [{
            xtype: 'textfield',
            fieldLabel: '用户名',
            regexText:"用户名必须为0~9,a~z或下划线组成的字符",
            regex:/^[A-Za-z0-9_]+$/,
            name: 'loginname',            
            anchor:'100%' 
        },{
            xtype: 'textfield',
            fieldLabel: '密  码',
            regex:/^[A-Za-z0-9_]+$/,
            regexText:"密码必须为0~9,a~z或下划线组成的字符",
            name: 'password',
            inputType:'password',
            anchor:'100%'
        },chk]
        });
        
        ///响应enter事件
        var nav = new Ext.KeyNav("login", {
            "enter" : function(e){
                hsjwebgis.mainlayout.login(form);
            },
            scope : this
        });
        //框体
        
        loginwindow = new Ext.Window({
            el:'login',
            title: '登 录 Login',
            width: 300,
            height:180,
              layout: 'fit',
              closable : false,
            plain:true,
            bodyStyle:'padding:5px;',
            buttonAlign:'center',
            items: form,
            modal:true,
            resizable:false,
            buttons: [{
                text: '登 录',
                handler: function(){
                    var n = 0;
                    var text = "";
                    if (!form.form.findField("loginname").isValid())
                    {
                        n++;
                        text = text + "<div>" + n + ':'+ form.form.findField("loginname").regexText + '\n</div>';
                    }
                    if (!form.form.findField("password").isValid())
                    {
                        n++;
                        text = text + "<div>" + n + ':'+ form.form.findField("password").regexText + '\n</div>';
                    }
                    
                    
                    if (n>0) 
                    {
                        Ext.MessageBox.alert
                        (
                            '提示', '<div>填写数据错误,可能存在以下错误:\n</div>' + text,
                            function() 
                            {}
                        );
                    } 
                    if(chk.getValue())
                        saveLoginName(form.form.findField("loginname").getValue());
                    else
                        saveLoginName('');
                    if(n==0)
                        hsjwebgis.mainlayout.login(form);
                
                }
            },{
                text: '取 消',
                handler: function(){
      
                    hsjwebgis.mainlayout.close();
                
                }
            }]
        });
        
        
        loginwindow.on('beforeshow',function(){            
            form.form.findField("loginname").setValue(getLoginName());
            chk.setValue(isCheck());
        });
        loginwindow.on({
            
            'close':function() {
                hsjwebgis.mainlayout.close();
            }
        });
        loginwindow.show(this);
        Ext.get('x-form-el-ext-comp-1005').setStyle("text-align","right");    
        },
        //end
        close:function(){            
            if(loginsuccess == false){
                window.close();
                if(Ext.isGecko)
                    alert("此操作被浏览器拒绝！\n 请在浏览器地址栏输入“about:config”并回车\n然后将[dom.allow_scripts_to_close_windows]设置为'true'");
                    
            }
        },
        //begin
        /**
         登陆连接
         * servlet/Login
         * 参数{
         *     loginname，
         *     password
         * }
         * */
        login:function(form){
            //设置登录按钮为不可用状态
            loginwindow.buttons[0].disable();
            
            var index = 0;
            if(form.form.findField("loginname").getValue() == ""||form.form.findField("password").getValue() == "")
            {
                
                Ext.MessageBox.show({
                    title: '提 示',
                    msg: '对不起，用户名或密码不能为空！',
                    buttons: Ext.MessageBox.OK,
                    icon: Ext.MessageBox.INFO
                });
                loginwindow.buttons[0].enable();
            }
            if(form.form.findField("loginname").getValue() != ""&&form.form.findField("password").getValue() != ""){
                    
                        if(index == 0){
                            index ++;
                    Ajax.request({
                        url: 'aspx/Login.aspx',
                           success: function(response){                               
                               if(response.responseText=="false"){
                                   loginwindow.buttons[0].disable();
                                   loginsuccess = false;
                                   Ext.MessageBox.show({
                                       title: '提 示',
                                       msg: '错误的用户名或密码',
                                       buttons: Ext.MessageBox.OK,
                                       icon: Ext.MessageBox.ERROR
                                   });
                                   loginwindow.buttons[0].enable();
                                   
                               }
                               else if(response.responseText=="false2")
                               {
                                   loginsuccess = false;
                                   Ext.MessageBox.show({
                                       title: '提 示',
                                       msg: '对不起，您的账户已被锁定！',
                                       buttons: Ext.MessageBox.OK,
                                       icon: Ext.MessageBox.INFO
                                   });
                                   loginwindow.buttons[0].enable();
                               }
                               
                               else{
                                   //登陆成功但是并非web权限用户
                                   
                                   if(response.responseText=="[]")
                                   {
                                       location.href = "error.htm";
                                   }                                   
                                   else
                                   {                                
                                       Ext.get("loginName").dom.innerHTML = form.form.findField("loginname").getValue();   
                                       utils.monitorSession();
                                       hsjwebgis.mainlayout.loginSuccess(response);                                       
                                   }
                                   
                               }
                           },
                           failure: function(){
                               Ext.MessageBox.show({
                                   title: '警 告',
                                   msg: '服务器连接异常',
                                   buttons: Ext.MessageBox.OK,
                                   icon: Ext.MessageBox.WARNING
                               });
                               loginwindow.buttons[0].enable();
                           },
                   
                           params: { 
                               loginname:form.form.findField("loginname").getValue(),
                               password:form.form.findField("password").getValue()
                               }
                    });
                        }
                    
                    
                    
                }
        },
        //end
        /*加载accordion
         *ext/extends/FeedTree.js 
        **/
        loginSuccess:function(response){
         //alert(response);
          permission = response.responseText;
            eval("var permission = " + permission);
            for (var n = 0; n < permission.length; n++) {
                eval("var feed"
                        + permission[n].nodeid
                        + " = new FeedTree({title:'"+permission[n].name+"',id:"
                        + permission[n].nodeid
                        + ",root: new Ext.tree.TreeNode(),baseon:center,action:'"
                        + permission[n].action + "',description:'"
                        + permission[n].description + "'})")
                for (var m = 0; m < permission[n].node.length; m++) {
                    eval("var node = feed" + permission[n].nodeid
                            + ".addNode('" + permission[n].node[m].name
                            + "','feeds-node',true,"
                            + permission[n].node[m].nodeid
                            + ",' ')");
                    for (var k = 0; k < permission[n].node[m].node.length; k++) {
                        eval("var feedNode = feed" + permission[n].nodeid
                                + ".addfeed('"
                                + permission[n].node[m].node[k].name + "',"
                                + permission[n].node[m].node[k].nodeid
                                + ",node,center,'"
                                + permission[n].node[m].node[k].description
                                + "','" + permission[n].node[m].node[k].action
                                + "','" + permission[n].node[m].node[k].permission
                                + "')");
                    }
                }
                eval("west.add(feed" + permission[n].nodeid + ")");
                west.doLayout();
            }
            
            if(loginwindow!=null){
                loginsuccess = true;
                loginwindow.close();
            }
        }
    };
}();

 

3. 定义数据源

/*
 * 数据集合，返回所有为store
 * 
 */
Ext.namespace('hsjwebgis.datasource');

hsjwebgis.datasource.sex = [[1,'男'],[2,'女']];

hsjwebgis.datasource.staff = function(){
    return new Ext.data.Store({
        proxy:new Ext.data.HttpProxy({
            url:"http://www.cnblogs.com/action/salor_jn/Staff_jn.ashx",
           timeout : 60000
        }),
    reader:hsjwebgis.reader.staff
})};

hsjwebgis.datasource.ship = function(){
    return new Ext.data.Store({
        proxy:new Ext.data.HttpProxy({
            url:"http://www.cnblogs.com/action/ship_jn/Ship_jn.ashx",
           timeout : 60000
        }),
    reader:hsjwebgis.reader.ship
})};

hsjwebgis.datasource.stafflicence = function(){
    return new Ext.data.Store({
        proxy:new Ext.data.HttpProxy({
            url:"http://www.cnblogs.com/action/salor_jn/StaffLicence_jn.ashx",
           timeout : 60000
        }),
    reader:hsjwebgis.reader.stafflicence
})};

hsjwebgis.datasource.stafftrain = function(){
    return new Ext.data.Store({
        proxy:new Ext.data.HttpProxy({
            url:"http://www.cnblogs.com/action/salor_jn/StaffTrain_jn.ashx",
           timeout : 60000
        }),
    reader:hsjwebgis.reader.stafftrain
})};

hsjwebgis.datasource.empwork = function(){
    return new Ext.data.Store({
        proxy:new Ext.data.HttpProxy({
            url:"http://www.cnblogs.com/action/salor_jn/EmpWork_jn.ashx",
           timeout : 60000
        }),
    reader:hsjwebgis.reader.empwork
})};

 

4.读取对象定义(Json格式定义) 

Ext.namespace('hsjwebgis.reader');

hsjwebgis.reader.staff = new Ext.data.JsonReader({
    totalProperty : 'totalCount',
    root : 'rows',
    id : 'staffid'
}, [{
    name : 'staffid',
    mapping : 'staffid'
}, {
    name : 'shipid',
    mapping : 'shipid'
}, {
    name : 'name',
    mapping : 'name'
}, {
    name : 'shipname',
    mapping : 'shipname'
}, {
    name : 'sex',
    mapping : 'sex'
}, {
    name : 'position',
    mapping : 'position'
}, {
    name : 'cardid',
    mapping : 'cardid'
}, {
    name : 'baddress',
    mapping : 'baddress'
}, {
    name : 'birthday',
    mapping : 'birthday'
}, {
    name : 'edulevel',
    mapping : 'edulevel'
}, {
    name : 'serverid',
    mapping : 'serverid'
}]);

hsjwebgis.reader.ship = new Ext.data.JsonReader({
    totalProperty : 'totalCount',
    root : 'rows',
    id : 'shipid'
}, [{
    name : 'shipid',
    mapping : 'shipid'
}, {
    name : 'name',
    mapping : 'name'
}]);

hsjwebgis.reader.stafflicence = new Ext.data.JsonReader({
    totalProperty : 'totalCount',
    root : 'rows',
    id : 'licenceid'
}, [{
    name : 'licenceid',
    mapping : 'licenceid'
}, {
    name : 'name',
    mapping : 'name'
}, {
    name : 'grantcom',
    mapping : 'grantcom'
}, {
    name : 'endtime',
    mapping : 'endtime'
}, {
    name : 'granttime',
    mapping : 'granttime'
}, {
    name : 'code',
    mapping : 'code'
}, {
    name : 'grade',
    mapping : 'grade'
}]);

hsjwebgis.reader.stafftrain = new Ext.data.JsonReader({
    totalProperty : 'totalCount',
    root : 'rows',
    id : 'trainid'
}, [{
    name : 'trainid',
    mapping : 'trainid'
}, {
    name : 'name',
    mapping : 'name'
}, {
    name : 'content',
    mapping : 'content'
}, {
    name : 'traincom',
    mapping : 'traincom'
}, {
    name : 'starttime',
    mapping : 'starttime'
}, {
    name : 'endtime',
    mapping : 'endtime'
}, {
    name : 'result',
    mapping : 'result'
}]);

hsjwebgis.reader.empwork = new Ext.data.JsonReader({
    totalProperty : 'totalCount',
    root : 'rows',
    id : 'workid'
}, [{
    name : 'workid',
    mapping : 'workid'
}, {
    name : 'unitname',
    mapping : 'unitname'
}, {
    name : 'duty',
    mapping : 'duty'
}, {
    name : 'startdt',
    mapping : 'startdt'
}, {
    name : 'enddt',
    mapping : 'enddt'
}]);

 以上只是代码片段，主体框架的脉络已经清晰了...

 登陆效果:

 登陆后的效果: