当前位置: 老葡京网站娱乐 > web开发 > Extjs > 正文

Extjs登录界面源码

时间:2010-04-21

老葡京网站娱乐 www.sdguanhua.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:  ''
18                + '
' 20 + '{' + this.displayField + '}' 21 + '
' 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);