logo头像

学如逆水行舟,不进则退!!!

文章目录

谈谈我对Ext的认识,元芳,你怎么看

本文于780天之前发表,文中内容可能已经过时。

实用Ext第一步当然是引用jar包啦。

  • 实用Ext第一步当然是引用jar包啦。 下载地址

    在页面上加上div用于显示这也是必须的

    <div id='loginpanel' ></div>
    

    在js中我们肯定需要将Ext进行初始化,我们的Ext初始化仅需两步

  Ext.QuickTips.init();
Ext.state.Manager.setProvider(newExt.state.CookieProvider());

初始化Ext状态管理器,在Cookie中记录用户的操作状态,如果不启用,象刷新时就不会保存当前的状态,而是重新加载

象如果窗口中有用可拖动面板的话,你在拖动后如果启动了Ext.state.Manager.setProvider(new Ext.state.CookieProvider()),就算刷新后面板仍然会在你拖动后的位置。如果不启用的话是不是就会按照默认的排列方式排列


  • Ext的特点就是不需要jsp,我们所有的空间都在js中借助Ext来创建。现在我们来创建几个空间来看看效果吧
  var loginNames = new Ext.form.TextField({
            name        : 'userName',
            width:140,
            allowBlank : false,
            maxLength : 16,
            fieldLabel  : Label_Login.loginName,
            listeners : {
                'specialkey' : function(f, e) {
                    if (e.getKey() == Ext.EventObject.ENTER) {
                        loginForm.form.findField('password').focus(
                                true, false);
                    }
                }
            },
            blankText : Label_Login.loginNameBlank // '用户名不能为空'
            // regex:/^[0-9a-zA-Z]{2,20}$/,
            // regexText:'只能为两到二十位的大小写字母。',
        });

###【脚注】
上面代码详解点这里[^footnote]

var loginPasswords = new Ext.form.TextField({
        name        : 'password',
        allowBlank : false,
        width:140,
        maxLength : 16,
        inputType : 'password',
        fieldLabel  : Label_Login.loginPassword,
        listeners : {
            'specialkey' : function(f, e) {
                if (e.getKey() == Ext.EventObject.ENTER) {
                    loginFunc();
                }
            }
        },
        blankText : Label_Login.loginPasswordBlank // 密码不能为空
        // regex:/^.{1,}$/,
        // regexText:'长度不能少于1位'
    });

    // '登陆',
    var loginBtn = new Ext.Button({ 
        name    : 'loginBtn',
        anchor  : '100%',
        style     : 'margin-left:25px;',
        text    : Label_Button.login,
        handler : function(){
                    loginFunc();
        }
    });

     // '取消'
    var resetButton = new Ext.Button({ 
        style     : 'margin-left:25px;',
        anchor  : '100%',
        text    :  Label_Button.reset,
        handler : function(){
                //loginForm.getForm().reset();
                loginForm.form.findField('userName').setValue('请输入用户名');
                loginForm.form.findField('password').setValue('请输入密码');
        }
    });

    // 定义loginForm panel
    var loginForm = new Ext.FormPanel( {
        //defaultType : 'textfield',
        id           : 'login',
        labelWidth : 70,
        style : 'background:#ffffff;padding:25px 35px 30px 16px;',
        region : "center",
        defaults : {
            border : false,
            allowBlank : false,
            msgTarget : 'side'
            //blankText : '该字段不允许为空'
        },
        waitMsgTarget : true,
        items : [loginNames,loginPasswords,{
                 layout     :'column',
                border     : false,
                width  :  '100%',
                items : [  {
                            columnWidth : 0.73,
                            border : false,
                            layout : 'form',
                            items : [ remPwdCheckBox ]
                          }, {
                            columnWidth : 0.27,
                            border : false,
                            layout : 'form',
                            style : 'margin-top:3px;',
                            html   : '<a href=\"javascript:void(0);return false;\" onclick=\"getForgetPassword();\" style=\"font-size:11px;\">忘记密码?</a>'
                          }
                      ]
        },{
             layout     :'column',
            border     : false,
            width  :  '100%',
            items : [  {
                        columnWidth : 0.5,
                        border : false,
                        layout : 'form',
                        items : [ loginBtn ]
                      }, {
                        columnWidth : 0.5,
                        border : false,
                        layout : 'form',
                        items : [ resetButton ]
                      }
                  ]
            }]

    });

    // cookie中有值,设置记住密码选中状态
    // 并赋值给用户名与密码
    if ((uName != null && uName!='')
            && (uPwd!=null && uPwd!='')) {
        remPwdCheckBox.checked = true;
        isRememberPwd = true;
        loginForm.form.findField('userName').setValue(uName);
        loginForm.form.findField('password').setValue(uPwd);
    }

    var loginFunc = function() {
              if(loginForm.form.isValid()){
                  loginForm.getForm().submit( {
                      url : path + '/SysLogin/login.json?isRememberPwd='+isRememberPwd,
                      success : function(form, action) {            
                         var result = action.result; 
                         if (result.success) { 
                             document.location=path+action.result.url;
                         } else { 
                             Ext.Msg.alert(message.info,action.result.msg); 
                             loginForm.getForm().reset();
                         } 
                      },

                      failure : function(form, action) {
                         if (action.failureType == 'server') {
                             obj = Ext.util.JSON.decode(action.response.responseText);
                             Ext.Msg.alert( message.loginFailure, obj.msg);
                         } else {
                             Ext.Msg.alert( message.warning, message.loginError);//'认证服务器无法连接 '
                         }
                        loginForm.getForm().reset();
                      },
                      waitMsg : Label_Login.waitMsg //'正在登录,请稍候...'
                  });
              }
    };

    // 展示到登陆页面body中的面板
    var panel = new Ext.Panel( {
        renderTo : 'loginpanel',
        layout : "border",
        width : 525,
        height : 290,
        defaults : {
            border : false
        },
        items : [ {
            region : "north",
            height : 56,
            html : '<img src="'+path+'/resources/common/images/head.gif"/>'
        }, {
            region : "south",
            height : 56,
            html : '<img src="'+path+'/resources/common/images/foot.gif"/>'
        }, {
            region : "west",
            width : 253,
            html : '<img src="'+path+'/resources/common/images/left.gif"/>'
        }, loginForm]
    });

    Ext.get('loginpanel').setStyle('position', 'absolute').center(Ext.getBody());
    loginForm.form.findField('userName').focus(true,false);
};
Ext.onReady(login);
function getForgetPassword(){
    var userName = Ext.getCmp('login').form.findField("userName").getValue();

    if(userName != null && userName != "" && userName != "请输入用户名" ){
        Ext.Ajax.request({  
            url:path + '/SysLogin/getForgetPassword.json',  
            params:{userName:userName},
            success:function(response){  

                var responseArray = Ext.util.JSON.decode(response.responseText); 
                Ext.Msg.alert('警示',"请你联系"+responseArray.Affiliation+"下的管理员找回密码!");
            },  
            failure:function(){  
                Ext.Msg.alert('错误','服务器出现错误请稍后再试!');  
            }  
        });
    }else{
        Ext.Msg.alert('错误','请确认账户是否存在!');  
    }

}

  • 效果图

    这里写图片描述

  • 创建store
    var tab2store = new Ext.data.Store( {
        url : path + '/SysKhyz/getKHyzInstallList.json?id=' + id,
        reader : new Ext.data.JsonReader( {
            fields : [ 'ID', 'NAME', 'MODEL', 'TONS', 'NUM', 'PLACE',
                    'LINE_STATUS' ],
            root : 'rows',
            totalProperty : 'total'
        })
    // autoLoad : true
            });
    tab2store.load( {
        params : {
            start : 0,
            limit : pagesize
        }
    });

  • 加载grid

      var tab2_grid = new Ext.grid.GridPanel( {
        id : 'KhyzInstall',
        // title :'站线信息',
        height : 500,
        trackMouseOver : true,
        region : "center",
        layout : 'fit',
        anchor : '100%',
        frame : false,
        stripeRows : true,
        loadMask : {
            msg : '正在加载数据,请稍后.....'
        },
        ds : tab2store,
        sm : new Ext.grid.CheckboxSelectionModel( {
            singleSelect : false
        }),
        viewConfig : {
            forceFit : true
        },
        columns : [ new Ext.grid.CheckboxSelectionModel(),
                new Ext.grid.RowNumberer(), {
                    header : '设备名称',
                    sortable : true,
                    width : 220,
                    dataIndex : 'NAME'
                }, {
                    header : '设备型号',
                    sortable : true,
                    width : 220,
                    dataIndex : 'MODEL'
                }, {
                    header : '吨位(t)',
                    width : 220,
                    sortable : true,
                    dataIndex : 'TONS'
                }, {
                    header : '数量',
                    width : 220,
                    sortable : true,
                    dataIndex : 'NUM'
                }, {
                    header : '配置地点',
                    width : 220,
                    sortable : true,
                    dataIndex : 'PLACE'
                }, {
                    header : '状态',
                    width : 220,
                    sortable : true,
                    dataIndex : '',
                    renderer : function(v, p, r, i) {
                        var s = r.get('LINE_STATUS');
                        if (s == '0' || s == 0) {
                            return '待提交';
                        } else if (s == '1' || s == 1) {
                            return '审批中';
                        } else if (s == '2' || s == 2) {
                            return '已通过';
                        } else if (s == '3' || s == 3) {
                            return '已驳回';
                        } else {
                            return '';
                        }
    
                    }
                }
    
        ],
        bbar : new Ext.PagingToolbar( {
            pageSize : pagesize,
            store : tab2store,
            displayInfo : true,
            displayMsg : '显示第{0}条到{1}条记录,一共{2}条',
            emptyMsg : '没有发现记录'
        })
    });
    

  • 按钮事件
    var addWin = new Ext.Window(
            {
                layout : 'fit',
                width : 1000,
                height : 400,
                plain : true,
                border : false,
                maximizable : true,
                title : '新增',
                items : [ add_formpanel ],
                modal : true,
                shadow : true,
                resizable : false,
                closeAction : 'hide',
                maximizable : true,
                buttons : [
                        {
                            id : 'SaveBtn5',
                            text : '保存',
                            iconCls : 'save',
                            disabled : false,
                            handler : function() {
                                Ext.getCmp('SaveBtn5').setDisabled(true);
                                if (add_formpanel.form.isValid()) {

                                    add_formpanel
                                            .getForm()
                                            .submit(
                                                    {
                                                        url : path
                                                                + '/SysKhyz/savaKHyzInstall.json?TKHYZ_BASE_ID='
                                                                + id
                                                                + '&LINE_STATUS=0',
                                                        method : 'POST',
                                                        success : function(
                                                                form, action) {
                                                            Ext.MessageBox
                                                                    .alert(
                                                                            "提示信息",
                                                                            "信息保存成功!");
                                                            tab2store
                                                                    .load( {
                                                                        params : {
                                                                            start : 0,
                                                                            limit : pagesize
                                                                        }
                                                                    });
                                                            addWin.hide();
                                                            Ext
                                                                    .getCmp(
                                                                            'SaveBtn5')
                                                                    .setDisabled(
                                                                            false);
                                                        },
                                                        failure : function(
                                                                form, action) {
                                                            Ext.MessageBox
                                                                    .alert(
                                                                            "提示信息",
                                                                            "服务器错误,请重试!");
                                                            Ext
                                                                    .getCmp(
                                                                            'SaveBtn5')
                                                                    .setDisabled(
                                                                            false);
                                                        }
                                                    });
                                } else {
                                    Ext.getCmp('SaveBtn5').setDisabled(false);
                                }

                            }
                        },
                        {
                            text : '提报',
                            iconCls : 'taskSend',
                            handler : function() {

                                if (add_formpanel.form.isValid()) {

                                    add_formpanel
                                            .getForm()
                                            .submit(
                                                    {
                                                        url : path
                                                                + '/SysKhyz/savaKHyzInstall.json?TKHYZ_BASE_ID='
                                                                + id
                                                                + '&LINE_STATUS=1',
                                                        method : 'POST',
                                                        success : function(
                                                                form, action) {
                                                            if (action.result.flag) {
                                                                Ext.MessageBox
                                                                        .alert(
                                                                                "提示信息",
                                                                                "信息提报成功!");

                                                            } else {
                                                                Ext.MessageBox
                                                                        .alert(
                                                                                "提示信息",
                                                                                "提报流程出错,数据已保存!");
                                                            }

                                                            tab2store
                                                                    .load( {
                                                                        params : {
                                                                            start : 0,
                                                                            limit : pagesize
                                                                        }
                                                                    });
                                                            addWin.hide();
                                                        },
                                                        failure : function(
                                                                form, action) {
                                                            Ext.MessageBox
                                                                    .alert(
                                                                            "提示信息",
                                                                            "服务器错误,请重试!");
                                                        }
                                                    });
                                }

                            }

                        }, {
                            text : '关闭',
                            iconCls : 'clear',
                            handler : function() {
                                addWin.hide();

                            }

                        } ]
            });



每天进步一点

[^footnote]:

Label_Login.loginName系统字段,读者可以改成自己的文字
listeners注册的监听,按下键盘回车就把屏幕焦点放到密码框
blankText是右边错误提示信息

上一篇
坚持原创技术分享,您的支持将鼓励我继续创作!