为什么
为什么要写个 “仅生成单个 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
等配置项都没有效果。