ext form的组件用法，以及提交返回数据的注意事项

来源：互联网发布：淘宝商城巴拉巴拉编辑：程序博客网时间：2024/06/15 14:45

extjs中form的用法，效果图：

上代码：

var form =new Ext.FormPanel({url : 'xxx.do',renderTo :document.body,frame : true,title : '表单',width : 500,x:300,items : [{xtype : 'textfield',//相当于html中<input type="text" />fieldLabel : '姓名',name : 'username',allowBlank : false,value : '',readonly : 'readonly'},{fieldLabel : '密码',//相当于html中<input type="password" />name : 'password',xtype : 'textfield',inputType : 'password',allowBlank : false},{//时间插件fieldLabel : '时间',name : 'released',xtype : 'datefield',format:'Y-m-d'//disabledDays: [0,6]},{//radioxtype:'fieldset',title:'颜色',autoHeight:true,defaultType:'radio',hideLabels: true,items: [{ boxLabel: '彩色', name: 'color', inputValue: '1', checked: true},{ boxLabel: '白色', name: 'color', inputValue: '2' },{ boxLabel: '黑色', name: 'color', inputValue: '3' }]},{//checkboxtitle:'食物',xtype:'fieldset',autoHeight:true,items: [{ boxLabel: '馒头', name: 'food', inputValue: '1',xtype:'checkbox', checked: true},{ boxLabel: '面包', name: 'food', inputValue: '2' ,xtype:'checkbox'},{ boxLabel: '米饭', name: 'food', inputValue: '3' ,xtype:'checkbox'}]},{xtype : 'htmleditor',name : 'description',anchor: '100%'}],buttons : [{text : '确定',handler:function(){//var pass=form.getForm().findField('sex');//alert( pass.getValue());//alert( pass.getGroupValue ( ));form.form.submit({success:function(form,action){alert('succ'+action.response.responseText);//responseText后台返回的全部数据},failure:function(form,action){alert('error'+action.response.responseText);}});}},{text : '取消',handler:function(){alert('取消');}}]});

后台servlet处理提交上来的数据，获取的时候跟正常的html的获取方式是一样的，代码：

String username=request.getParameter("username");String password=request.getParameter("password");String released=request.getParameter("released");String color=request.getParameter("color");String[] food=request.getParameterValues("food");//取多选框的值String description=request.getParameter("description");

后台返回的时候一定要注意，返回的是json格式的字符串，而且一定要有success：true，不然前台的ext定义的回调函数就会走failure的方法，正确的代码如下：

PrintWriter out=response.getWriter();result="{success:true , msg:'form',xxxx:'xxxxx'}";out.write(result);out.close();

0 0