原来用extjs 3做过登录框,但是extjs 4对与键盘事件有些不大一样了,在旧版本中通过“keys”实现按“Enter”登录,在extjs 4中就不可以这样子做了。习惯性贴出代码:
1 Ext.onReady(function () {
2 Ext.tip.QuickTipManager.init();
3 var loginForm = Ext.widget('form', {
4 title: '用户登录',
5 labelWidth: 60,
6 monitorValid: true,
7 frame: true,
8 bodyStyle: 'padding:5px 5px 0',
9 300,
10 url: '/account/logon',
11 defaults: {
12 anchor: '100%',
13 allowBlank: false,
14 msgTarget: 'side',
15 labelWidth: 60
16 },
17 defaultType: 'textfield',
18 renderTo: 'login',
19 items: [{
20 fieldLabel: '用户名',
21 name: 'userName',
22 allowBlank: false
23 }, {
24 fieldLabel: '密码',
25 inputType: 'password',
26 name: 'password',
27 allowBlank: false,
28 enableKeyEvents: true,
29 listeners: {
30 specialkey: function (fied, e) {
31 if (e.getKey() == e.ENTER) {
32 loginForm.onLogin();
33 }
34 }
35 }
36 }],
37 buttons: [{
38 text: '登录',
39 formBind: true,
40 handler: function () {
41 loginForm.onLogin();
42 }
43 }, {
44 text: '重置',
45 handler: function () {
46 this.up('form').getForm().reset();
47 }
48 }],
49 onLogin: function () {
50 var form = loginForm.getForm();
51
52 if (form.isValid()) {
53 form.submit({
54 waitTitle: '用户登录',
55 waitMsg: '正在登录',
56 success: function (form, action) {
57 loginForm.setVisible(false);
58 window.location = '@ViewBag.ReturnUrl';
59 },
60 failure: function (form, action) {
61 Ext.Msg.alert('用户登录', '登录失败');
62 }
63 });
64 }
65 }
66 });
67 });
2 Ext.tip.QuickTipManager.init();
3 var loginForm = Ext.widget('form', {
4 title: '用户登录',
5 labelWidth: 60,
6 monitorValid: true,
7 frame: true,
8 bodyStyle: 'padding:5px 5px 0',
9 300,
10 url: '/account/logon',
11 defaults: {
12 anchor: '100%',
13 allowBlank: false,
14 msgTarget: 'side',
15 labelWidth: 60
16 },
17 defaultType: 'textfield',
18 renderTo: 'login',
19 items: [{
20 fieldLabel: '用户名',
21 name: 'userName',
22 allowBlank: false
23 }, {
24 fieldLabel: '密码',
25 inputType: 'password',
26 name: 'password',
27 allowBlank: false,
28 enableKeyEvents: true,
29 listeners: {
30 specialkey: function (fied, e) {
31 if (e.getKey() == e.ENTER) {
32 loginForm.onLogin();
33 }
34 }
35 }
36 }],
37 buttons: [{
38 text: '登录',
39 formBind: true,
40 handler: function () {
41 loginForm.onLogin();
42 }
43 }, {
44 text: '重置',
45 handler: function () {
46 this.up('form').getForm().reset();
47 }
48 }],
49 onLogin: function () {
50 var form = loginForm.getForm();
51
52 if (form.isValid()) {
53 form.submit({
54 waitTitle: '用户登录',
55 waitMsg: '正在登录',
56 success: function (form, action) {
57 loginForm.setVisible(false);
58 window.location = '@ViewBag.ReturnUrl';
59 },
60 failure: function (form, action) {
61 Ext.Msg.alert('用户登录', '登录失败');
62 }
63 });
64 }
65 }
66 });
67 });