一般htmlページformフォームコントロールExtJsフォームコントロールスタイル参照

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
      }
      );

   }
   );
}
);