任何HTML標籤預設就是YZSoft.Forms.Field.Element控制項，支援xdatabind、hiddenexpress等屬性，具有控制項的基本功能。
為HTML新增xclass屬性，可以使該HTML取得 xclass所應具有的能力，取得任何想要的輸入效果。
控制項成為xclass
只需設定xclass屬性即可，如：
<span class="yz-xform-barcode" xclass="YZSoft.Forms.Field.Barcode" barcodeformat="CODE_128" express="Purchase.SN" ></span>
實現XClass
以barcode控制項為例：
程式碼如下：
Ext.define('YZSoft.Forms.Field.Barcode', {
extend: 'YZSoft.Forms.Field.Element',
getEleTypeConfig: function () {
var me = this,
config = me.callParent(arguments);
Ext.apply(config, {
sDataBind: me.getDataBind(),
Express: me.getExp(),
HiddenExpress: me.getHiddenExp(),
barcodeFormat: me.getAttribute('BarcodeFormat'),
pureBarcode: me.getAttributeBool('PureBarcode')
});
return config;
},
getValue: function () {
return this.value || '';
},
setValue: function (value) {
var me = this,
et = me.getEleType(),
imgEl, url;
me.value = value;
imgEl = me.down('.yz-barcode-image', false);
if (!imgEl)
imgEl = Ext.dom.Helper.append(me.dom, '<img class="yz-barcode-image" />', true);
if (value) {
url = Ext.String.urlAppend(YZSoft.$url('YZSoft.Services.REST/util/Barcode.ashx'),
Ext.Object.toQueryString({
method: 'Encode',
format: et.barcodeFormat,
pureBarcode: et.pureBarcode,
text: value,
width: me.getWidth(),
height: me.getHeight(true)
}));
}
else {
url = '';
}
imgEl.dom.src = url;
}
});