Extjs form表单combo的扩展

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

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

效果图如下

 

 

Ext.ux.form.IconCombo.js

 1 // JS脚本
 2 Ext.namespace( ' Ext.ux.form ' );
 3
 4 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
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
65 Ext.reg( ' iconcombo ' , Ext.ux.form.IconCombo);

 

Ext.ux.LoginWindow.js

  1 // JS脚本
  2       
  3 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    
 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} ; 
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    });
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