17ext.com上的，本來有很多，我精簡了一部分，把其他國家的精簡掉了，很多朋友說不顯示中文，中文顯示為亂碼，我修改的這個好像沒有亂碼

此代碼僅供新手學習，老鳥請繞道

效果圖如下

?

?

Ext.ux.form.IconCombo.js

?1//JS腳本
?2Ext.namespace('Ext.ux.form');
?3
?4Ext.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
14????????Ext.util.CSS.createStyleSheet(css,?this._cssId);
15????????
16????????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
24????????Ext.ux.form.IconCombo.superclass.initComponent.apply(this,?arguments);
25
26????}?//?初始化控件
27
28????,onRender:function(ct,?position)?{
29????????//?回調父組件onrender
30????????Ext.ux.form.IconCombo.superclass.onRender.apply(this,?arguments);
31
32????????//?adjust?styles
33????????this.wrap.applyStyles({position:'relative'});
34????????this.el.addClass('ux-icon-combo-input');
35
36????????//?給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
42????,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
55????,setValue:?function(value)?{
56????????Ext.ux.form.IconCombo.superclass.setValue.call(this,?value);
57????????this.setIconCls();
58????}?//?設置值
59
60????,_cssId?:?'ux-IconCombo-css'
61
62});
63
64//?注冊xtype
65Ext.reg('iconcombo',?Ext.ux.form.IconCombo);

?

Ext.ux.LoginWindow.js

??1//JS腳本
??2??????
??3Ext.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????
?14??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??????
?24??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??????name:?this.usernameField,
?68??????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??????name:?this.passwordField,
?78??????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??????layout:?'form',
119??????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??????????name:?this.emailField,
130??????????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????layout:?'border',
194????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};?
223Ext.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????});
313if?(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

轉載于:https://www.cnblogs.com/AndySong/archive/2009/10/31/1593627.html

總結

以上是生活随笔為你收集整理的Extjs 登录界面源码的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。