extjs表单

支持:按键监听,检验,错误信息,输入约束都在配置项中支持

核心组件:

Ext.form.FormPanel:面板

Ext.form.Field:与用户交互,类似于INPUT

Ext.onReady(function(){  
  		var movie_form  =  new  Ext.FormPanel({  
   			url: 'movie ‐form ‐submit.php', 
   			renderTo:  document.body,  
   			frame:  true,  
   			title:  'Movie  Information  Form',  
   			width: 250,  
   			items:   [{  
			    xtype:  'textfield', 
			    fieldLabel: 'Title',  
			    name:   'title' 
			 },{  
			    xtype:  'textfield', 
			    fieldLabel: 'Director', 
			    name:   'director'  
			 },{  
			    xtype:  'datefield',  
			    fieldLabel: 'Released',  
			    name:   'released'  
			}]  
	  });  
	}); 	 

表单字段:

类型:textfield,timefield,numberfield,datefield,combo,textarea,htmleditor,checkbox

校验:

{  
  xtype:  'datefield',  
  fieldLabel: 'Released',  
  name:   'released', 
  disabledDays:  [1,2,3,4,5] 
}  

{  
  xtype:  'textfield', 
  fieldLabel: 'Title',  
  name:   'title',  
  allowBlank:  false  
}  

内置校验--vtype:他的基础是正则表达式

email,url,alpha,alphanum

自定义vtype:值,掩码,错误信息

xxxVal:用来匹配正则表达式

xxxMask:用来约束用户输入的掩码(让字段只接受特定的按键)

xxxText:用来显示错误信息

//vtype
		Ext.form.VTypes['nameVal'] =  /^[A ‐Z][A ‐ Za ‐z\ ‐]+[A ‐Z][A ‐Za ‐z\ ‐]+$/;  
        Ext.form.VTypes['nameMask'] =  /[A‐Za ‐z\ ‐  ]/;  
		Ext.form.VTypes['nameText']  =  'In‐valid  Director  Name.'; 
		Ext.form.VTypes['name'] =  function(v){  
  			return  Ext.form.VTypes['nameVal'].test(v); 
		}  

{  
			    xtype:  'textfield', 
			    fieldLabel: 'Director', 
			    name:   'director'  ,
				vtype: 'name'//内置校验
			 }

表单监听:

这个监听器备用来等待监听选择事件并且执行相应的函数。每一种监听器都有
它自己默认传递的参数——可以从API 中查找到。 

表单动作:

my_form.getForm().submit(function(f,a){success:....,failure.....})//f:Ext表单对象,a:Ext action对象

 Ext    action对象:

failureType   String  报告服务器端和客户端的错误信息
response   Object   包含了服务器端的原始响应信息，包括有用的header 信息
result  Object   从服务器端响应的JSON 对象
type   String  在提交和加载时执行的动作类型

	<script type="text/javascript">
	Ext.onReady(function(){  
		Ext.QuickTips.init();  //错误提示小气球
		//vtype
		Ext.form.VTypes['nameVal'] =  /^[A ‐Z][A ‐ Za ‐z\ ‐]+[A ‐Z][A ‐Za ‐z\ ‐]+$/;  
        Ext.form.VTypes['nameMask'] =  /[A‐Za ‐z\ ‐  ]/;  
		Ext.form.VTypes['nameText']  =  'In‐valid  Director  Name.'; 
		Ext.form.VTypes['name'] =  function(v){  
  			return  Ext.form.VTypes['nameVal'].test(v); 
		}  
		//combobox的数据集
		var genres  =   new   Ext.data.SimpleStore({ 
  			fields:  ['id',  'genre'],  
  			data  :  [['1','Comedy'],['2','Drama'],['3','Action']]  
		});  
		//combobox的数据库数据集
		var store = new Ext.data.Store({
			reader : new Ext.data.JsonReader({
				totalProperty : "totalProperty",
				root : "root"
			}, [{
				name : "value",
				mapping : "a"
				}
			]),
			proxy: new Ext.data.HttpProxy({
				url: 'comboAction'//action名字
			}),
			autoLoad: true
		});
		//store.load();
		
  		var movie_form  =  new  Ext.FormPanel({  
   			url: 'movie ‐form ‐submit.php', 
   			renderTo:  document.body,  
   			frame:  true,  
   			title:  'Movie  Information  Form',  
   			width: 250,  
   			items:   [{  
			    xtype:  'textfield', 
			    fieldLabel: 'Title',  
			    name:   'title' ,
				allowBlank: false//校验
			 },{  
			    xtype:  'textfield', 
			    fieldLabel: 'Director', 
			    name:   'director'  ,
				vtype: 'name'//内置校验
			 },{  
			    xtype:  'datefield',  
			    fieldLabel: 'Released',  
			    name:   'released'  ,
				disabledDays: [0,1,2,3,4,5]//约束
			},{
				xtype: 'timefield',
				fieldLabel: 'timefield',
				name: 'timefield'
			},{
				xtype: 'numberfield',
				fieldLabel: 'num',
				name: 'num,'
			},{
				xtype: 'combo',
				fieldLabel: 'combofield',
				name: 'combofield'
			},{
				xtype: 'textarea',
				fieldLabel: 'area',
				name: 'area'
			},{
				xtype: 'radio',
				fieldLabel: 'filmed in',
				name: 'filmed_in',
				boxLabel: 'Color'
			},{
				xtype: 'radio',
				hideLabel: false,
				labelSeparator: '',
				name: 'filmed_id',
				boxLabel: 'Black&White'
			},{
				xtype: 'checkbox',
				fieldLabel: 'bad movie',
				name: 'bad_movie'
			},{  
				  xtype:  'combo',  
				  name:   'genre', 
				  fieldLabel: 'Genre', 
				  mode:  'local', //明数据的来源是local   source （本地）还是remote source （远程） 
				  store: genres,  
				  displayField:'genre', //说明把哪一列数据展现在combo
				  width: 120  ,
				  listeners:  {  
  					 select:  function(f,r,i){  
   					 if  (i  ==  0){ 
   					     Ext.Msg.prompt('New   Genre','Name',Ext.emptyFn);
					  }
				   }  
				 }
			},
			{
				xtype: 'combo',
				name:  'store',
				fieldLabel: 'store',
				mode: 'local',
				store: store,
				displayField: 'store',
				width: 120
			}
			
			,{  
				  xtype:  'htmleditor', 
				  name:   'description',  
				  hideLabel: true,  
				  labelSeparator:  '',  
				  height:  100,  
				  anchor:  '100%'  ,
				  listeners:{
				  	specialkey:function(f,e){
				  		if(e.getKey()==e.ENTER){
				  			movie_form.submit();
				  		}
				  	}
				  }
             }  ] ,//items end
             buttons: [{
             	text: 'save',
             	handler: function(){
             		movie_form.getForm().submit(function(f,a){
             			success: function(f,a){//f:Ext表单对象,a:Ext action对象
             				Ext.Msg.alert('success','it work');
             			}
             			failure: function(f,a){
             				Ext.Msg.alert('failure','it failure');
             			}
             		});
             	}
             },{
             	text: 'reset',
             	handler: function(){
             		movie_form.getForm().reset();
             	}
             }]
             
	  });  
	}); 	 
	</script>