[Sencha Touch/ExtJS6] 仅生成单个 dom 元素的 hiddenfield 扩展组件

为什么

为什么要写个 “仅生成单个 dom 元素的 hiddenfield”？

因为 Sencha Touch/ExtJS6
1、自带的 hiddenfield 生成 dom 元素太多，比如会生成 label 的 dom 节点。而一般我们用 hiddenfield 作为隐藏控件，并不需要 label。单个 dom 元素可以提升性能。
2、自带的 hiddenfield 默认 hidden: true。如果设置成 false，hiddenfield 居然显示出来了，这不是我们想要的。

由于框架不同，Sencha Touch、ExtJS Classic 和 Modern 实现 “单个 dom 元素的 hiddenfield” 代码不一样。

Sencha Touch & ExtJS 6.0.2 Modern

//原本的HiddenField继承自TextField，dom元素一堆，所以做了这个仅一个dom元素的HiddenField
//可以引用这个js文件，原本的Ext.field.Hidden无需引用
Ext.define('UX.field.Hidden', {
    extend:  'Ext.field.Field' ,
    xtype: 'ux_hiddenfield',

    isDecorator: false,
    config: {
        labelAlign: null,
        labelWidth: null,
        labelWrap: null,
        component: null
    },
    getElementConfig: function() {
        return {
            reference: 'element',
            tag: 'input',
            type: 'hidden'
        };
    },
    onChange: function(me, value, startValue) {
        this.fireEvent('change', me, value, startValue);
    },

    setValue: function(newValue) {
        var oldValue = this._value;

        this.updateValue(this.applyValue(newValue));

        newValue = this.getValue();

        if (String(newValue) != String(oldValue) && this.initialized) {
            this.onChange(this, newValue, oldValue);
        }

        return this;
    },

    // @private
    applyValue: function(value) {
        return (Ext.isEmpty(value)) ? '' : value;
    },

    // @private
    updateValue: function(newValue) {
        this.element.dom.value = newValue;
    },

    getValue: function() {
        this._value = this.element.dom.value;
        return this._value;
    },
    updateLabel: Ext.emptyFn,
    updateLabelAlign: Ext.emptyFn,
    updateLabelCls: Ext.emptyFn,
    updateLabelWidth: Ext.emptyFn,
    updateLabelWrap: Ext.emptyFn,

    updateFieldAttribute: function(attribute, newValue) {
        var input = this.element;

        if (!Ext.isEmpty(newValue, true)) {
            input.dom.setAttribute(attribute, newValue);
        } else {
            input.dom.removeAttribute(attribute);
        }
    },
    // @private
    updateName: function(newName) {
        this.updateFieldAttribute('name', newName);
    },
    setDisabled: function(disabled) {
        this.element.dom.disabled = disabled;
    },

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

使用方法

{
    xtype: 'ux_hiddenfield',
    name: 'xxxx'
}

ExtJS 6.5+ Modern

/**
 * 原本的 hiddenfield 继承自 Ext.field.Input，dom 元素一堆，所以做了这个仅一个dom元素的 hiddenfield
 * 可以引用这个js文件，原本的 Ext.field.Hidden 无需引用
 */
Ext.define('MX.field.Hidden', {
    extend: 'Ext.field.Field',
    xtype: 'mx_hiddenfield',

    config: {
        labelAlign: null,
        labelWrap: null,
        placeholder: null
    },

    element: {
        reference: 'element',
        tag: 'input',
        type: 'hidden'
    },

    getTemplate() {
        this.inputElement = this.element;

        return null;
    },

    // @private
    applyValue(value) {
        value = Ext.isEmpty(value) ? '' : `${value}`;

        return this.callParent([value]);
    },

    // @private
    updateValue(newValue, oldValue) {
        const me = this;
        me.element.dom.value = newValue;
        if (!me.isConfiguring && newValue != oldValue) {
            me.fireEvent('change', me, newValue, oldValue);
        }
    },

    updateFieldAttribute(attribute, newValue) {
        const input = this.element;

        if (!Ext.isEmpty(newValue, true)) {
            input.dom.setAttribute(attribute, newValue);
        } else {
            input.dom.removeAttribute(attribute);
        }
    },
    // @private
    updateName(newName) {
        this.callParent(arguments);
        this.updateFieldAttribute('name', newName);
    },

    updateLabelWidth: Ext.emptyFn,
    updateLabelMinWidth: Ext.emptyFn,
    updateLabel: Ext.emptyFn,
    updateLabelCls: Ext.emptyFn
});

使用方法

{
    xtype: 'mx_hiddenfield',
    name: 'xxxx'
}

ExtJS 6.5+ Classic

/**
 * 只有一个 input 元素的、不受 hidden 配置项影响的 hiddenfield
 */
Ext.define('CX.form.field.Hidden', {
    extend: 'Ext.form.field.Base',
    xtype: 'cx_hiddenfield',

    focusable: false,

    autoEl: {
        tag: 'input',
        type: 'hidden'
    },

    inputType: 'hidden',

    isTextInput: false,

    initComponent: function() {
        var me = this;
        // me.inputEl = me.el;

        me.callParent(arguments);
        // me.inputEl.dom.name = me.name;
    },

    getElConfig: function() {
        var me = this;

        var config = me.callParent(arguments);

        config.name = me.name || me.getInputId();
        config.value = me.getRawValue();

        return config;
    },

    privates: {
        applyRenderSelectors() {
            var me = this;
            me.callParent(arguments);
            if (!me.inputEl) {
                me.inputEl = me.el;
            }
        }
    },

    getSubTplMarkup: function(fieldData) {
        return '';
    },
    setFieldLabel: function(label) {
        label = label || '';
        var me = this;
        me.fieldLabel = label;
    }
});

使用方法

{
    xtype: 'cx_hiddenfield',
    name: 'xxxx'
}

注意

因为只有一个 <input type="hidden"> 元素，除了 name 配置项有效，其它比如 hidden, label, fieldLabel, labelWidth, disabled, readOnly 等配置项都没有效果。