javascript 扩展父类的方法 Ext.js 2.1

Usage:

假设子类有个方法foo, 与父类相同，希望先调用父类的方法，然后再执行自己的代码,

而不是直接覆盖掉父类的方法

子类.prototype.foo = function(参数1, 参数2, ...) {

  父类.prototype.foo.call(this, 参数1, 参数2, ...);

  // do something else

}

 

* Sample:

new Ext.form.TextField({
                value: record[0].data["parentId"],
                name: "pi",
                fieldLabel: "父栏目编号",
                allowBlank: true,
                maxLength: 32,
                maxLengthText: "父栏目编号长度不能超过32",
                onRender: function(ct, position) {
                    Ext.form.Field.prototype.onRender.call(this, ct, position);
                    var input = this.el.dom;
                    input.setAttribute("autocomplete", "on");
                }
            })

new Ext.FormPanel({
		id: "editSectionForm",
		width: 400,
		autoHeight: true,
		frame: true,
		title: "修改栏目信息",
		bodyStyle: "padding:10px 10px 0 0",
		baseParams: {"do": "updatebase"},
		items: [{
			xtype: "fieldset",
			autoWidth: true,
			autoHeight: true,
			title: "栏目信息",
			defaults: { width: 210 },
			defaultType: "textfield",
			items: [{   	
				readOnly: true,
				fieldLabel: "栏目编号",
				value: section_id,
				name: 'id'
			}, {
				fieldLabel: "栏目名称",
				value: record[0].data["name"],
				name: 'sn',
				emptyText: "请栏目名称……",
				blankText: "栏目名称为空",			
				allowBlank: false,
				maxLength: 120,
				maxLengthText: "栏目名称长度不能超过120",
			}, new Ext.form.TextField({
				value: record[0].data["parentId"],
				name: "pi",
				fieldLabel: "父栏目编号",
				allowBlank: true,
				maxLength: 32,
				maxLengthText: "父栏目编号长度不能超过32",
                onRender: function(ct, position) {
                    Ext.form.Field.prototype.onRender.call(this, ct, position);
					var input = this.el.dom;
					input.setAttribute("autocomplete", "on");
                }
			}), {
				value: record[0].data["uri"],
				name: "su",
				fieldLabel: "栏目地址",
				allowBlank: true,
				maxLength: 1024,
				maxLengthText: "栏目地址长度不能超过1024"
			}]
		}],
		buttons: [{
			text: "更新",
			handler: function (target, e) {			
				sectionFormPanel.getForm().submit({
					url: service_url,
					waitMsg: '正在修改信息......',
					waitTitle: "请等待",
					success: function (form, action) {
						Ext.MessageBox.show({
							title: "提示",
								msg: "修改成功",
								buttons: Ext.MessageBox.OK,
								icon: Ext.MessageBox.INFO,
								fn: function () {
									location.href = './';
								}
						});					
					},
					failure: ET_Main.failureHander
				});
			}
		}]
	});

 

* Ext.form.TextField 从Ext.form.Field继承

Ext.form.TextField = Ext.extend(Ext.form.Field,  {
    grow : false,
    growMin : 30,
    growMax : 800,
    vtype : null,
    maskRe : null,
    disableKeyFilter : false,
    allowBlank : true,
    minLength : 0,
    maxLength : Number.MAX_VALUE,
    minLengthText : "The minimum length for this field is {0}",
    maxLengthText : "The maximum length for this field is {0}",
    selectOnFocus : false,
    blankText : "This field is required",
    validator : null,
    regex : null,
    regexText : "",
    emptyText : null,
    emptyClass : 'x-form-empty-field',

    initComponent : function(){
        Ext.form.TextField.superclass.initComponent.call(this);
        this.addEvents(
            'autosize',
            'keydown',
            'keyup',
            'keypress'
        );
    },
    // ...
});

* Ext.form.Field

Ext.form.Field = Ext.extend(Ext.BoxComponent,  {

    invalidClass : "x-form-invalid",

    invalidText : "The value in this field is invalid",

    focusClass : "x-form-focus",

    validationEvent : "keyup",

    validateOnBlur : true,

    validationDelay : 250,

    defaultAutoCreate : {tag: "input", type: "text", size: "20", autocomplete: "off"},

    fieldClass : "x-form-field",

    msgTarget : 'qtip',

    msgFx : 'normal',

    readOnly : false,

    disabled : false,

    isFormField : true,

    hasFocus : false,

    initComponent : function(){
        Ext.form.Field.superclass.initComponent.call(this);
        this.addEvents(

            'focus',

            'blur',

            'specialkey',

            'change',

            'invalid',

            'valid'
        );
    },


    getName: function(){
        return this.rendered && this.el.dom.name ? this.el.dom.name : (this.hiddenName || '');
    },

    onRender : function(ct, position){
        Ext.form.Field.superclass.onRender.call(this, ct, position);
        if(!this.el){
            var cfg = this.getAutoCreate();
            if(!cfg.name){
                cfg.name = this.name || this.id;
            }
            if(this.inputType){
                cfg.type = this.inputType;
            }
            this.el = ct.createChild(cfg, position);
        }
        var type = this.el.dom.type;
        if(type){
            if(type == 'password'){
                type = 'text';
            }
            this.el.addClass('x-form-'+type);
        }
        if(this.readOnly){
            this.el.dom.readOnly = true;
        }
        if(this.tabIndex !== undefined){
            this.el.dom.setAttribute('tabIndex', this.tabIndex);
        }

        this.el.addClass([this.fieldClass, this.cls]);
        this.initValue();
    },

    initValue : function(){
        if(this.value !== undefined){
            this.setValue(this.value);
        }else if(this.el.dom.value.length > 0){
            this.setValue(this.el.dom.value);
        }
    },


    isDirty : function() {
        if(this.disabled) {
            return false;
        }
        return String(this.getValue()) !== String(this.originalValue);
    },

    afterRender : function(){
        Ext.form.Field.superclass.afterRender.call(this);
        this.initEvents();
    },

    fireKey : function(e){
        if(e.isSpecialKey()){
            this.fireEvent("specialkey", this, e);
        }
    },


    reset : function(){
        this.setValue(this.originalValue);
        this.clearInvalid();
    },

    initEvents : function(){
        this.el.on(Ext.isIE || Ext.isSafari3 ? "keydown" : "keypress", this.fireKey,  this);
        this.el.on("focus", this.onFocus,  this);
        this.el.on("blur", this.onBlur,  this);

        this.originalValue = this.getValue();
    },

    onFocus : function(){
        if(!Ext.isOpera && this.focusClass){             this.el.addClass(this.focusClass);
        }
        if(!this.hasFocus){
            this.hasFocus = true;
            this.startValue = this.getValue();
            this.fireEvent("focus", this);
        }
    },

    beforeBlur : Ext.emptyFn,

    onBlur : function(){
        this.beforeBlur();
        if(!Ext.isOpera && this.focusClass){             this.el.removeClass(this.focusClass);
        }
        this.hasFocus = false;
        if(this.validationEvent !== false && this.validateOnBlur && this.validationEvent != "blur"){
            this.validate();
        }
        var v = this.getValue();
        if(String(v) !== String(this.startValue)){
            this.fireEvent('change', this, v, this.startValue);
        }
        this.fireEvent("blur", this);
    },


    isValid : function(preventMark){
        if(this.disabled){
            return true;
        }
        var restore = this.preventMark;
        this.preventMark = preventMark === true;
        var v = this.validateValue(this.processValue(this.getRawValue()));
        this.preventMark = restore;
        return v;
    },


    validate : function(){
        if(this.disabled || this.validateValue(this.processValue(this.getRawValue()))){
            this.clearInvalid();
            return true;
        }
        return false;
    },

    processValue : function(value){
        return value;
    },

    validateValue : function(value){
        return true;
    },


    markInvalid : function(msg){
        if(!this.rendered || this.preventMark){             return;
        }
        this.el.addClass(this.invalidClass);
        msg = msg || this.invalidText;
        switch(this.msgTarget){
            case 'qtip':
                this.el.dom.qtip = msg;
                this.el.dom.qclass = 'x-form-invalid-tip';
                if(Ext.QuickTips){                     Ext.QuickTips.enable();
                }
                break;
            case 'title':
                this.el.dom.title = msg;
                break;
            case 'under':
                if(!this.errorEl){
                    var elp = this.getErrorCt();
                    this.errorEl = elp.createChild({cls:'x-form-invalid-msg'});
                    this.errorEl.setWidth(elp.getWidth(true)-20);
                }
                this.errorEl.update(msg);
                Ext.form.Field.msgFx[this.msgFx].show(this.errorEl, this);
                break;
            case 'side':
                if(!this.errorIcon){
                    var elp = this.getErrorCt();
                    this.errorIcon = elp.createChild({cls:'x-form-invalid-icon'});
                }
                this.alignErrorIcon();
                this.errorIcon.dom.qtip = msg;
                this.errorIcon.dom.qclass = 'x-form-invalid-tip';
                this.errorIcon.show();
                this.on('resize', this.alignErrorIcon, this);
                break;
            default:
                var t = Ext.getDom(this.msgTarget);
                t.innerHTML = msg;
                t.style.display = this.msgDisplay;
                break;
        }
        this.fireEvent('invalid', this, msg);
    },

    getErrorCt : function(){
        return this.el.findParent('.x-form-element', 5, true) ||             this.el.findParent('.x-form-field-wrap', 5, true);       },

    alignErrorIcon : function(){
        this.errorIcon.alignTo(this.el, 'tl-tr', [2, 0]);
    },


    clearInvalid : function(){
        if(!this.rendered || this.preventMark){             return;
        }
        this.el.removeClass(this.invalidClass);
        switch(this.msgTarget){
            case 'qtip':
                this.el.dom.qtip = '';
                break;
            case 'title':
                this.el.dom.title = '';
                break;
            case 'under':
                if(this.errorEl){
                    Ext.form.Field.msgFx[this.msgFx].hide(this.errorEl, this);
                }
                break;
            case 'side':
                if(this.errorIcon){
                    this.errorIcon.dom.qtip = '';
                    this.errorIcon.hide();
                    this.un('resize', this.alignErrorIcon, this);
                }
                break;
            default:
                var t = Ext.getDom(this.msgTarget);
                t.innerHTML = '';
                t.style.display = 'none';
                break;
        }
        this.fireEvent('valid', this);
    },


    getRawValue : function(){
        var v = this.rendered ? this.el.getValue() : Ext.value(this.value, '');
        if(v === this.emptyText){
            v = '';
        }
        return v;
    },


    getValue : function(){
        if(!this.rendered) {
            return this.value;
        }
        var v = this.el.getValue();
        if(v === this.emptyText || v === undefined){
            v = '';
        }
        return v;
    },


    setRawValue : function(v){
        return this.el.dom.value = (v === null || v === undefined ? '' : v);
    },


    setValue : function(v){
        this.value = v;
        if(this.rendered){
            this.el.dom.value = (v === null || v === undefined ? '' : v);
            this.validate();
        }
    },

    adjustSize : function(w, h){
        var s = Ext.form.Field.superclass.adjustSize.call(this, w, h);
        s.width = this.adjustWidth(this.el.dom.tagName, s.width);
        return s;
    },

    adjustWidth : function(tag, w){
        tag = tag.toLowerCase();
        if(typeof w == 'number' && !Ext.isSafari){
            if(Ext.isIE && (tag == 'input' || tag == 'textarea')){
                if(tag == 'input' && !Ext.isStrict){
                    return this.inEditor ? w : w - 3;
                }
                if(tag == 'input' && Ext.isStrict){
                    return w - (Ext.isIE6 ? 4 : 1);
                }
                if(tag == 'textarea' && Ext.isStrict){
                    return w-2;
                }
            }else if(Ext.isOpera && Ext.isStrict){
                if(tag == 'input'){
                    return w + 2;
                }
                if(tag == 'textarea'){
                    return w-2;
                }
            }
        }
        return w;
    }

});