普通html页面form表单控件引用ExtJs form表单控件样式

版权声明：本文为博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。 本文链接：https://blog.csdn.net/unixtux/article/details/84267194 ExtJs日期控件：

//ExtJs代码
Ext.onReady(function() {
	// 使用表单提示
	Ext.QuickTips.init();
	Ext.form.Field.prototype.msgTarget = 'side';// 提示显示方式
        // 日期
	var _kssj = new Ext.form.DateField({
	      applyTo : 'kssj',//节点的id
	      width : 185,
	      editable : false,
	      format : 'Y-m-d',
	      emptyText : ''
	});

});

<input id="kssj" name="kssj" type="text"/>

ExtJs下拉列表控件：

Ext.onReady(function() {
	// 使用表单提示
	Ext.QuickTips.init();
	Ext.form.Field.prototype.msgTarget = 'side';// 提示显示方式

// 把已有的下拉框改变为Ext样式select or comboBox
	var objArray = Ext.DomQuery.select("select");
	Ext.each(objArray, function(obj) {
				var btn = new Ext.form.ComboBox({
							typeAhead : true,
							triggerAction : 'all',
							transform : obj,
							forceSelection : true
						});
			});

var mzComboBox = new Ext.form.ComboBox({
				applyTo : 'mzmc',
				width : 185,
				listWidth : 250,// 设置下拉框的宽度，默认和comboBoxTree的宽度相等
				// maxHeight:'300',//combobox下拉列表框的高度
				fieldLabel : '',
				name : 'mz',
				triggerAction : 'all',
				forceSelection : true,
				editable : false,
				pageSize : 10,
				emptyText : '',
				hiddenName : 'code',
				displayField : 'text',// 名称
				valueField : 'code',// 值
				store : new Ext.data.JsonStore({
							autoLoad : true,
							url : 'Util/mzList.action?format=json',
							root : 'mzList',
							baseParams : {
								limit : 10,
								start : 0
							},
							totalProperty : 'mzCount',
							fields : ['id', 'code', 'text']
						}),
				listeners : {
					select : function(_combo) {
						document.getElementById('mz').value = _combo.getValue();
					}
				}
			});

});

<input id="mz" name="mz" type="hidden" value="" />
<input name="mzmc" id="mzmc" type="text" />

ExtJs复选框控件：

Ext.onReady(function() {

	// 使用表单提示
	Ext.QuickTips.init();
	Ext.form.Field.prototype.msgTarget = 'side';// 提示显示方式

        //把已有的复选框改变为Ext样式
        var objArray = Ext.DomQuery.select("input[type=checkbox]");
	Ext.each(objArray, function(obj) {
				var checkbox = new Ext.form.Checkbox({
							applyTo : obj
						});
			});

});

<input name="bjfs" id="bjfs1" type="radio" value="0" />

ExtJs文本框控件：

Ext.onReady(function() {

	// 使用表单提示
	Ext.QuickTips.init();
	Ext.form.Field.prototype.msgTarget = 'side';// 提示显示方式
	var xm = new Ext.form.TextField({
				width : '185',
				applyTo : 'xm'
			});
});

<input id="xm" name="xm" type="text" />

ExtJs其他form表单控件：

Ext.onReady(function()
{
   // 使用表单提示
   Ext.QuickTips.init();
   Ext.form.Field.prototype.msgTarget = 'side'; // 提示显示方式

   Ext.override(Ext.form.ComboBox,
   {
      onViewClick : function(doFocus)
      {
         var index = this.view.getSelectedIndexes()[0], s = this.store, r = s
         .getAt(index);
         if (r)
         {
            this.onSelect(r, index);
         }
         else if (s.getCount() === 0)
         {
            this.collapse();
         }
         if (doFocus !== false)
         {
            this.el.focus();
         }
      }
   }
   );

   //把普通html form 表单元素样式 改变为Ext样式
   // button
   var objArray = Ext.DomQuery.select("input[type=submit]");
   Ext.each(objArray, function(obj)
   {
      var btn = new Ext.Button(
      {
         text :
         obj.value, applyTo : obj, handler : obj.onclick, type : obj.type
      }
      );
      btn.getEl().replace(Ext.get(obj));

   }
   );


   // select or comboBox
   var objArray = Ext.DomQuery.select("select");
   Ext.each(objArray, function(obj)
   {
      var btn = new Ext.form.ComboBox(
      {
         typeAhead : true,
         triggerAction : 'all',
         transform : obj,
         forceSelection : true
      }
      );
   }
   );

   // text

   var objArray = Ext.DomQuery.select("input[type=text]");
   Ext.each(objArray, function(obj)
   {
      var txtField = new
      Ext.form.TextField(
      {
         applyTo : obj
      }
      );

   }
   );


   // textarea
   var objArray = Ext.DomQuery.select("textarea");
   Ext.each(objArray, function(obj)
   {
      var txtArea = new Ext.form.TextArea(
      {
         applyTo : obj
      }
      );
   }
   );

   // checkbox and radio

   var objArray = Ext.DomQuery.select("input[type=checkbox]");
   Ext.each(objArray, function(obj)
   {
      var checkbox = new Ext.form.Checkbox(
      {
         applyTo : obj
      }
      );
   }
   );

   var objArray = Ext.DomQuery.select("input[type=radio]");
   Ext.each(objArray, function(obj)
   {
      var radio = new Ext.form.Radio(
      {
         applyTo : obj
      }
      );

   }
   );
}
);