Extjs 登录界面源码

17ext.com上的，本来有很多，我精简了一部分，把其他国家的精简掉了，很多朋友说不显示中文，中文显示为乱码，我修改的这个好像没有乱码

此代码仅供新手学习，老鸟请绕道

效果图如下

Ext.ux.form.IconCombo.js

//JS脚本
2

Ext.namespace('Ext.ux.form');
3

Ext.ux.form.IconCombo = Ext.extend(Ext.form.ComboBox, {
5

initComponent:function() {
6

var css = '.ux-icon-combo-icon {background-repeat: no-repeat;background-position: 0 50%;width: 18px;height: 14px;}'
7

+ '.ux-icon-combo-input {padding-left: 25px;}'
8

+ '.x-form-field-wrap .ux-icon-combo-icon {top: 4px;left: 5px;}'
9

+ '.ux-icon-combo-item {background-repeat: no-repeat ! important;background-position: 3px 50% ! important;padding-left: 24px ! important;}'
10

+ ".ux-flag-br {background-image:url(img/186.gif) !important;}"
11

+ ".ux-flag-us {background-image:url(img/186.gif) !important;}"
12

;
13

Ext.util.CSS.createStyleSheet(css, this._cssId);
15

Ext.apply(this, {
17

tpl: '<tpl for=".">'
18

+ '<div class="x-combo-list-item ux-icon-combo-item '
19

+ '{' + this.iconClsField + '}">'
20

+ '{' + this.displayField + '}'
21

+ '</div></tpl>'
22

});
23

Ext.ux.form.IconCombo.superclass.initComponent.apply(this, arguments);
25

} // 初始化控件
27

,onRender:function(ct, position) {
29

// 回调父组件onrender
30

Ext.ux.form.IconCombo.superclass.onRender.apply(this, arguments);
31

// adjust styles
33

this.wrap.applyStyles({position:'relative'});
34

this.el.addClass('ux-icon-combo-input');
35

// 给icon加div
37

this.icon = Ext.DomHelper.append(this.el.up('div.x-form-field-wrap'), {
38

tag: 'div', style:'position:absolute'
39

});
40

} // onRender函数
41

,afterRender:function() {
43

Ext.ux.form.IconCombo.superclass.afterRender.apply(this, arguments);
44

if(undefined !== this.value) {
45

this.setValue(this.value);
46

}
47

} // afterRender函数
48

,setIconCls:function() {
49

var rec = this.store.query(this.valueField, this.getValue()).itemAt(0);
50

if(rec && this.icon) {
51

this.icon.className = 'ux-icon-combo-icon ' + rec.get(this.iconClsField);
52

}
53

} //函数样式
54

,setValue: function(value) {
56

Ext.ux.form.IconCombo.superclass.setValue.call(this, value);
57

this.setIconCls();
58

} // 设置值
59

,_cssId : 'ux-IconCombo-css'
61

});
63

// 注册xtype
65

Ext.reg('iconcombo', Ext.ux.form.IconCombo);

Ext.ux.LoginWindow.js

//JS脚本
2

Ext.ux.LoginWindow = function(config) {
4

Ext.apply(this, config);
5

var css = "#login-logo .x-plain-body {background:#f9f9f9 url('" + this.basePath + "/" + this.winBanner + "') no-repeat;}"
6

+ "#login-form {background: " + this.formBgcolor + " none;}"
7

+ ".ux-auth-header-icon {background: url('"
8

+ this.basePath
9

+ "/locked.gif') 0 4px no-repeat !important;}"
10

+ ".ux-auth-form {padding:10px;}"+ ".ux-auth-login {background-image: url('" +
11

this.basePath + "/key.gif') !important}"
12

+ ".ux-auth-close {background-image: url('" + this.basePath + "/close.gif') !important}";
13

Ext.util.CSS.createStyleSheet(css, this._cssId);
15

// 给登录窗体加事件
16

this.addEvents({
17

'show': true,
18

'reset': true,
19

'submit': true,
20

'submitpass': true
21

});
22

Ext.ux.LoginWindow.superclass.constructor.call(this, config);
23

this._logoPanel = new Ext.Panel({
25

baseCls: 'x-plain',
26

id: 'login-logo',
27

region: 'center'
28

});
29

//给元素添加参数
30

this.usernameId = Ext.id();
31

this.passwordId = Ext.id();
32

this.emailId = Ext.id();
33

this.emailFieldsetId = Ext.id();
34

this.languageId = Ext.id();
35

this._loginButtonId = Ext.id();
36

this._resetButtonId = Ext.id();
37

this._passwordButtonId = Ext.id();
38

this._WinPasswordButtonId = Ext.id();
39

this._formPanel = new Ext.form.FormPanel({
40

region: 'south',
41

border: false,
42

bodyStyle: "padding: 5px;",
43

baseCls: 'x-plain',
44

id: 'login-form',
45

waitMsgTarget: true,
46

labelWidth: 80,
47

defaults: {
48

width: 300
49

},
50

baseParams: {
51

task: 'login'
52

},
53

listeners: {
54

'actioncomplete': {
55

fn: this.onSuccess,
56

scope: this
57

},
58

'actionfailed': {
59

fn: this.onFailure,
60

scope: this
61

}
62

},
63

height: 110,
64

items: [{
65

xtype: 'textfield',
66

id: this.usernameId,
67

fieldLabel: this.usernameLabel,
69

vtype: this.usernameVtype,
70

validateOnBlur: false,
71

allowBlank: false
72

},
73

{
74

xtype: 'textfield',
75

inputType: 'password',
76

id: this.passwordId,
77

fieldLabel: this.passwordLabel,
79

vtype: this.passwordVtype,
80

validateOnBlur: false,
81

allowBlank: false
82

},
83

{
84

xtype: 'iconcombo',
85

id: this.languageId,
86

hiddenName: this.languageField,
87

fieldLabel: this.languageLabel,
88

store: new Ext.data.SimpleStore({
89

fields: ['languageCode', 'languageName', 'countryFlag'],
90

data: [['enus', '中文 - 中华人民共和国', 'ux-flag-us']]
91

}),
92

valueField: 'languageCode',
93

value: this.defaultLanguage,
94

displayField: 'languageName',
95

iconClsField: 'countryFlag',
96

triggerAction: 'all',
97

editable: false,
98

mode: 'local'
99

}]
100

});
101

Ext.getCmp(this.languageId).on('select',
102

function() {
103

this.defaultLanguage = Ext.getCmp(this.languageId).getValue(); //var lang = this.defaultLanguage;
104

this.setlanguage();
105

},
106

this);
107

this._formPasswordPanel = new Ext.form.FormPanel({
108

bodyStyle: "padding: 5px;",
109

id: 'password-form',
110

waitMsgTarget: true,
111

labelWidth: 50,
112

autoHeight: true,
113

buttonAlign: 'center',
114

baseParams: {
115

task: 'forgotPassword'
116

},
117

items: [{
118

border: false,
120

items: [{
121

xtype: 'fieldset',
122

title: this.emailFieldset,
123

id: this.emailFieldsetId,
124

autoHeight: true,
125

items: [{
126

xtype: 'textfield',
127

vtype: this.emailVtype,
128

id: this.emailId,
129

fieldLabel: this.emailLabel,
131

vtype: this.emailVtype,
132

validateOnBlur: false,
133

anchor: '98%',
134

allowBlank: false
135

}]
136

}]
137

}],
138

buttons: [{
139

text: this.passwordButton,
140

id: this._WinPasswordButtonId,
141

width: 100,
142

handler : this.Passwordsubmit,
143

scope: this
144

}]
145

});
146

var buttons = [{
147

id: this._loginButtonId,
148

text: this.loginButton,
149

handler: this.submit,
150

scale: 'medium',
151

scope: this
152

}];
153

var keys = [{
154

key: [10, 13],
155

//按Enter键确定
156

handler: this.submit,
157

scope: this
158

}];
159

if (typeof this.passwordButton == 'string') {
160

buttons.push({
161

id: this._passwordButtonId,
162

text: this.passwordButton,
163

handler: this.password,
164

scale: 'medium',
165

scope: this
166

});
167

}
168

if (typeof this.resetButton == 'string') {
169

buttons.push({
170

id: this._resetButtonId,
171

text: this.resetButton,
172

handler: this.reset,
173

scale: 'medium',
174

scope: this
175

});
176

keys.push({
177

key: [27],
178

//ESC键重置
179

handler: this.reset,
180

scope: this
181

});
182

}
183

//Login窗体
184

this._window = new Ext.Window({
185

width: 429,
186

height: 280,
187

closable: false,
188

resizable: false,
189

draggable: true,
190

modal: this.modal,
191

iconCls: 'ux-auth-header-icon',
192

title: this.title,
193

bodyStyle: 'padding:5px;',
195

buttons: buttons,
196

buttonAlign: 'center',
197

keys: keys,
198

plain: false,
199

items: [this._logoPanel, this._formPanel]
200

});
201

this._windowPassword = new Ext.Window({
202

width: 350,
203

height: 160,
204

closable: true,
205

resizable: false,
206

draggable: true,
207

modal: this.modal,
208

iconCls: 'ux-auth-header-icon',
209

title: this.Passwordtitle,
210

bodyStyle: 'padding:5px;',
211

keys: keys,
212

closeAction: 'hide',
213

items: [this._formPasswordPanel]
214

});
215

this._window.on('show',
216

function() {
217

this.setlanguage();
218

Ext.getCmp(this.usernameId).focus(false, true);
219

this.fireEvent('show', this);
220

},
221

this);
222

};
223

Ext.extend(Ext.ux.LoginWindow, Ext.util.Observable, {
224

225

title: '',
226

227

Passwordtitle: '',
228

229

emailFieldset: '',
230

231

waitMessage: '',
232

233

loginButton: '',
234

235

passwordButton: '',
236

237

resetButton: '',
238

239

usernameLabel: '',
240

241

usernameField: 'username',
242

243

usernameVtype: 'alphanum',
244

245

emailLabel: '',
246

247

emailField: 'email',
248

249

emailVtype: 'email',
250

251

passwordLabel: '',
252

253

passwordField: 'password',
254

255

passwordVtype: 'alphanum',
256

257

languageField: 'lang',
258

259

languageLabel: '',
260

261

url: '',
262

263

emailUrl: '',
264

265

locationUrl: '',
266

267

basePath: 'img',
268

269

winBanner: '',
270

271

formBgcolor: '',
272

273

method: 'post',
274

275

modal: false,
276

277

_cssId: 'ux-LoginWindow-css',
278

279

_logoPanel: null,
280

281

_formPanel: null,
282

283

_window: null,
284

285

_windowPassword: null,
286

287

show: function(el) {
288

this._window.show(el);
289

},
290

291

password: function(el) {
292

this._windowPassword.show(el);
293

},
294

295

reset: function() {
296

if (this.fireEvent('reset', this)) {
297

this._formPanel.getForm().reset();
298

}
299

},
300

301

defaultLanguage: 'enus ',
302

303

setlanguage: function() {
304

Ext.override(Ext.form.Field, {
305

setFieldLabel: function(text) {
306

if (this.rendered) {
307

this.el.up('.x-form-item', 10, true).child('.x-form-item-label').update(text);
308

} else {
309

this.fieldLabel = text;
310

}
311

}
312

});
313

if (this.defaultLanguage == 'enus') {
314

this._window.setTitle('授权登录 v1.1.2.3');
315

this._windowPassword.setTitle('忘记密码');
316

Ext.getCmp(this._loginButtonId).setText('登录');
317

Ext.getCmp(this._passwordButtonId).setText('恢复密码');
318

Ext.getCmp(this._resetButtonId).setText('重置');
319

Ext.getCmp(this._WinPasswordButtonId).setText('发送');
320

Ext.getCmp(this.emailId).setFieldLabel('Email');
321

Ext.getCmp(this.emailFieldsetId).setTitle('输入Email');
322

Ext.getCmp(this.usernameId).setFieldLabel('用户名:');
323

Ext.getCmp(this.passwordId).setFieldLabel('密码:');
324

Ext.getCmp(this.languageId).setFieldLabel('语言:');
325

this.waitMessage = '正在登录

';
326

}
327

},
328

329

330

submit : function () {
331

var form = this._formPanel.getForm();
332

333

if (form.isValid())
334

{
335

Ext.getCmp(this._loginButtonId).disable();
336

if(Ext.getCmp(this._cancelButtonId)) {
337

Ext.getCmp(this._cancelButtonId).disable();
338

}
339

if (this.fireEvent('submit', this, form.getValues()))
340

{
341

form.submit ({
342

url : this.url,
343

method : this.method,
344

waitMsg : this.waitMessage,
345

success : this.onSuccess,
346

failure : this.onFailure,
347

scope : this
348

});
349

}
350

}
351

},
352

353

354

Passwordsubmit : function () {
355

var form = this._formPasswordPanel.getForm();
356

357

if (form.isValid())
358

{
359

Ext.getCmp(this._WinPasswordButtonId).disable();
360

if (this.fireEvent('submitpass', this, form.getValues()))
361

{
362

form.submit ({
363

url : this.emailUrl,
364

method : this.method,
365

waitMsg : this.waitMessage,
366

success : this.onEmailSuccess,
367

failure : this.onEmailFailure,
368

scope : this
369

});
370

}
371

}
372

},
373

374

//登录成功事件
375

onSuccess: function(form, action) {
376

if (action && action.result) {
377

window.location = this.locationUrl;
378

}
379

},
380

381

onFailure: function(form, action) {
382

// enable buttons
383

Ext.getCmp(this._loginButtonId).enable();
384

if (Ext.getCmp(this._resetButtonId)) {
385

Ext.getCmp(this._resetButtonId).enable();
386

}
387

},
388

389

onEmailSuccess: function(form, action) {
390

if (action && action.result) {
391

Ext.MessageBox.show({
392

title: '消息',
393

msg: '处理失败',
394

buttons: Ext.MessageBox.OK,
395

icon: Ext.MessageBox.INFO
396

});
397

}
398

},
399

400

onEmailFailure: function(form, action) {
401

Ext.getCmp(this._WinPasswordButtonId).enable();
402

Ext.MessageBox.show({
403

title: '消息',
404

msg: '处理失败',
405

buttons: Ext.MessageBox.OK,
406

icon: Ext.MessageBox.INFO
407

});
408

}
409

});
410

以上代码并非完整修改，只是实现了中文显示和一个登录过程，代码并非原创，请关注17ext

posted @ 2009-10-31 19:18 Andy 阅读(1373) 评论(0) 收藏举报

刷新页面返回顶部