任何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;

   }

});

Created with the Personal Edition of HelpNDoc: Full-featured multi-format Help generator