实用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', 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:'只能为两到二十位的大小写字母。', });
【脚注】
上面代码详解点这里1
var loginPasswords = new Ext.form.TextField({
name : 'password',
allowBlank : false,
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(); } } ] });
每天进步一点
Label_Login.loginName系统字段，读者可以改成自己的文字
↩
listeners注册的监听，按下键盘回车就把屏幕焦点放到密码框
blankText是右边错误提示信息