|
此页面为extjs-form基础完整示例,所需页面如下,需修改extjs引用文件的位置,复制粘贴即可使用 本页面可能存在","多一个少一个的问题,在ie不能正确运行,在firefox可以正常运行 页面显示效果如下:       1.显示页面:form.html ------------------------------------------------------------------------------------------------------------------------------- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www./1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <link rel="stylesheet" type="text/css" href="../../../resources/css/ext-all.css"/> <script type="text/javascript" src="../../../adapter/ext/ext-base.js"></script> <script type="text/javascript" src="../../../ext-all.js"></script> <script type="text/javascript" src="../Adapter.js"></script> <script type="text/javascript"> //问题:1.如何到后台读取comboBox的选项值 // 2.如何将时间设置为出去中午外的时间 Ext.onReady(function(){ //======================修改错误提示方式======================= Ext.QuickTips.init(); //====================基本的表单元素开始)======================= //=====================文本输入控件========================= var textField=new Ext.form.TextField({ fieldLabel:'文本',//父类panel的属性 xtype:'textfield',//父类panel的属性 name:'textField', id:'textField', width:506,//父类panel的属性 height:30,//父类panel的属性 maxLength:20,//textfield自己的属性 minLength:2,//textfield自己的属性 emptyText:'可输入任意文本',////textfield自己的属性 allowBlank:false,//textfield自己的属性 msgTarget:'qtip'//textfield自己的属性 }); //=====================数字输入框===================== var numberField=new Ext.form.NumberField({ fieldLabel:'数字', xtype:'numberfield', name:'numberField', id:'numberField', allowNegative:false,//是否允许输入负数 allowDecimals:false,//是否E允许输入小数 allowBlank:false, emptyText:'只能输入数字,不能输入小数和负数', width:506, height:30, maxValue:99,//最大值 minValue:1,//最小值 msgTarget:'title' }); //=========================日期控件========================== var dateField=new Ext.form.DateField({ xtype:'datefield', fieldLabel:'日期', name:'dateField', id:'dateField', format:'y-/-m-/-d',//DateField自己的属性,日期显示的格式 disabledDays:[0,6],//DateField特有的属性,无效日期 emptyText:'请输入出周末外的日期', allowBlank:false, width:506, //height:30,//没有height属性 msgTarger:'under' }); //=====================时间控件======================== var timerField=new Ext.form.TimeField({ xtype:'timefield', fieldLabel:'时间', name:'timerField', id:'timerField', allowBlank:false, emptyText:'请选择非中午时间', minValue:'8:00', maxValue:'20:00', increment:40, msgTarger:'side', width:506, //height:30,//没有height属性 handleHeight:100,//同resizable一起使用,控制下拉面板的大小 resizable :true }); //=========================输入电子邮件========================== var emailField=new Ext.form.TextField({ fieldLabel:'电子邮件', vtype:'email', name:'emailField', id:'emailField', width:506, height:30, emptyText:'必须输入正确的电子邮件格式', allowBlank:false, msgTarget:'side' }); //========================只能输入字母和数字======================== var alphaNumField=new Ext.form.TextField({ fieldLabel:'用户名', vtype:'alphanum',//重点是设置vtype为alphanum,只能输入字母数字 name:'alphaNumField', id:'alphaNumField', width:506, height:30, emptyText:'//只能输入字母和数字', allowBlank:false, msgTarget:'side' }); //=================只能输入网址=========================== var urlField=new Ext.form.TextField({ fieldLabel:'网址', vtype:'url',//重点是设置vtype为url,只能输入网址 name:'urlField', id:'urlField', width:506, height:30, emptyText:'只能输入网址', allowBlank:false, msgTarget:'side' }); //======================自定义校验规则=================== var autoField=new Ext.form.TextField({ fieldLabel:'自定义校验', name:'autoField', id:'autoField', width:506, height:30, emptyText:'只能输入汉字', allowBlank:false, msgTarget:'side', regex:/^[\u4E00-\u9FA5]+$/, regexText:'只能输入汉字' }); //===================复选框(从本地读取数据)=================== var comboLocalData=[//定义comboBox要显示的数据 ['0','一月'], ['1','二月'], ['2','三月'], ['3','四月'], ['4','五月'], ['5','六月'], ['6','七月'], ['7','八月'], ['8','九月'], ['9','十月'], ['10','十一月'], ['11','十二月'], ]; var comboLocalStore=new Ext.data.SimpleStore({ //读取数据的方式 fields:['value','text'], //读取哪里的数据 data:comboLocalData//如何动态读取数据? }); var comboLocalField=new Ext.form.ComboBox({ //applyTo:'combo'//通常作为一个容器的子类对象,所以适用applyTo,而不用renderTo,注意:combo只能在input上渲染,不能在div上 fieldLabel:'静态数据下拉框', store:comboLocalStore, name:'comboLocalField', id:'comboLocalField', emptyText:'复选框(从本地读取数据)', allowBlank:false, valueField:'value',//选中某一项后传递到后台的值 displayField:'text',//下来时显示的值 mode:'local',//告诉comboBox,store需要的数据已经读取到本地,不需要到后台去读取 //value:'中餐',//默认选中的值 triggerAction:'all',//query是默认的, width:506, height:30, hiddenName:'comboLocalName',//这个属性很重要,通过它,我们可以向后台传递fields中的value值,如果不设置hiddenName,则只能接收到fields中的text值.注意:hiddenName不能与id重0复. //readOnly:true, editable:false }); comboLocalField.on('select',function(comboBox){ Ext.Msg.alert('提示','value:'+comboBox.getValue()+"------------"+'text:'+comboBox.getRawValue()); }); //=================复选框(远程读取数据)================ //定义动态读取数据的store,同grid var comboRemoteStore=new Ext.data.Store({ proxy:new Ext.data.HttpProxy({url:'comboBoxData.txt'}), reader:new Ext.data.ArrayReader({},[ {name:'value'}, {name:'text'}, {name:'status'} ]) }); //store.load();//手动加载数据,可以决定何时对combo初始化 var comboRemoteField=new Ext.form.ComboBox({ fieldLabel:'动态数据下拉框', store:comboRemoteStore, id:'comboRemoteField', name:'comboRemoteField', emptyText:'复选框(远程读取数据)', allowBlank:false, mote:'remote',//重点是mote,设置为远程读取数据,第一次点击'选择'按钮时加载数据.在这里不定义mote:remote也可以,手动调用store.load()加载数据 valueField:'value', displayField:'text', triggerAction:'all', width:506, height:30, hiddenName:'comboRemote', //下面这两个属性用来设置分页 minListWidth:50,//下拉列表的宽度,如果不设置她,可能看不到完整的下拉分页条 pageSize:3,//决定每次显示多少条记录,ext内部自动计算并设置分页.注意:mode必须为'remote',如果为local分页条将无法显示 resizeable:true }); //动态comboBox问题:数据很多的时候,在页面并不能加载成功,但数据确实是读取到了 //解决方案1：只要把combo的readOnly:true改成editable:false就可以了，属于版本问题。 //解决方案2：在火狐中查看控制台/响应 里的totalCount是多少,看看是不是为0 comboRemoteField.on('select',function(comboBox){ alert(comboBox.getValue()+'===='+comboBox.getRawValue()); ///获取存储在ComboBox的Store中的状态值 alert(comboBox.getStore().getAt(comboBox.selectedIndex).data.status); }); //================下拉输入框TriggerField============== //=============注意:在triggerGrid中,如果使用SimpleStore则store是自动加载,如果使用store,则必须要手动进行加载,否则数据将现实不出来 var griggerColumn=new Ext.grid.ColumnModel([ {header:'姓名',dataIndex:'name'}, {header:'性别',dataIndex:'sex'}, {header:'描述',dataIndex:'descn'} ]); var triggerStore=new Ext.data.Store({ proxy:new Ext.data.HttpProxy({url:'triggerData.txt'}), reader:new Ext.data.ArrayReader({},[ {name:'name'}, {name:'sex'}, {name:'descn'} ]) }); triggerStore.load(); //定义一个grid var triggerGrid=new Ext.grid.GridPanel({ //读取静态,本地data文件 //store:new Ext.data.SimpleStore({ //data:[ // ['name1','sex1','descn1'], // ['name2','sex2','descn2'], // ['name3','sex3','descn3'], // ['name4','sex4','descn4'], // ['name5','sex5','descn5'] //], //fields:['name','sex','descn'] //}), store:triggerStore,//动态读取数据 cm:griggerColumn, width:506, height:230, title:'grid', viewConfig:{ forceFit:true } }); var selectMenu=new Ext.menu.Menu({ items:[new Ext.menu.Adapter(triggerGrid)] }); var triggerField=new Ext.form.TriggerField({ xtype:'triggerfield', fieldLabel:'选择', name:'triggerField', id:'triggerField', emptyText:'请在表格中选择', allowBlank:false, onSelect:function(record){}, onTriggerClick:function(){ if(this.menu==null){ this.menu = selectMenu; } this.menu.show(this.el,"tl-bl?"); }, width:506, height:30 }); triggerGrid.on('rowclick',function(grid,rowIndex,e){ selectMenu.hide(); triggerField.setValue(rowIndex); }); //===================文本域 textArea================ var textAreaField=new Ext.form.TextArea({ fieldLabel:'文本域', xtype:'textareafield', emptyText:'grow 和preventScrollbars是textarea的特有属性', allowBlank:false, width:506, height:100, grow:false,//textarea会根据输入的内容自动修改高度 preventScrollbars:true//防止自动出现滚动条,如果内容超出现实范围,则隐藏 }); //===================htmlEditor==================== var htmlEditorField=new Ext.form.HtmlEditor({ fieldLabel:'文本编辑器', allowBlank:true, emptyText:'请输入内容', enableAlignments:true, enableColors:true, enableFont:true, enableFontSize:true, enableFormat:true, enableLinks:true, enableLists:true, enableSourceEdit:true, width:506, height:150 }); var form=new Ext.form.FormPanel({ renderTo:'form', frame:true, labelAlign:'right', labelWidth:100, buttonAlign:'center', title:'表单控件', width:800, autoHeight:true, items:[alphaNumField, urlField, textField, numberField, dateField, timerField, emailField, autoField, comboLocalField, comboRemoteField, triggerField, textAreaField, htmlEditorField, { fileUpload:true, url:'', width:506, xtype:'textfield', name:'file', fieldLabel:'文件上传', inputType:'file' }, { layout:'column', bodyStyle:'margin-left:30px;', style:{marginLeft:30}, items:[ { layout:'form', columnWidth:.4, xtype:'fieldset', title:'多选', defaultType:'checkbox', hideLabels:true,//这个非常重要,否则就会出现前面空出label的weidth bodyStyle:'margin-left:20px;', checkboxToggle:true, items:[ { boxLabel:'注意boxLabel和hideLabels这两个属性', inputValue:1, checked:true }, { boxLabel:'这两个属性石checkbox和radio特有的', inputValue:2 }, { boxLabel:'boxLabel会将文字显示在复选框的右侧', inputValue:3 }, { boxLabel:'喜欢吃猕猴桃的小孩不会的癌症,不信你可以试一试', inputValue:4 } ] }, { layout:'form', columnWidth:.05, items:[ { xtype:'textfield' } ] }, { layout:'form', xtype:'fieldset', title:'单选框', checkboxToggle:true, columnWidth:.4, hideLabels:true, defaultType:'radio', bodyStyle:'margin-left:30px;', items:[ { boxLabel:'注意boxLabel和hideLabels这两个属性', name:'radio', inputValue:1, checked:true }, { boxLabel:'这两个属性石checkbox和radio特有的', name:'radio', inputValue:2 }, { boxLabel:'boxLabel会将文字显示在复选框的右侧', name:'radio', inputValue:3 }, { boxLabel:'name相同的radio为一组', name:'radio', inputValue:4 } ] } ] } ], buttons:[{ text:'提交', handler:function(){ var textField=form.getForm().findField('textField'); alert("textField:"+textField); Ext.Ajax.request({//使用ajax方式进行校验 url:'success.jsp', method:'post', root:'data', totalProperty:'totalCount', success:function(response,opts){ var content=Ext.decode(response.responseText); Ext.Msg.alert('提示',content.msg); //var content=response.data[0].success; /*if(content=='1') { Ext.Msg.alert('提示',content.msg); } else { Ext.Msg.alert('提示','读取数据失败'); } */ }, failure:function(){ Ext.Msg.alert('提示','操作失败'); }, params:{ alphaNumField:alphaNumField.getValue(), urlField:urlField.getValue(), textField:textField.getValue(), numberField:numberField.getValue(), dateField:dateField.getValue(), timerField:timerField.getValue(), emailField:emailField.getValue() } }); } }] }); //注意:这里的提交方式是ajax请求 //当前布局方式为:默认布局 //====================================基本的表单元素(结束)=============================================== //=========================================表单布局(开始)=================================================== //==================1.横向分裂式布局================= var form1=new Ext.form.FormPanel({ renderTo:'form1', title:'布局', labelAlign:'right', labelWidth:100, buttonAlign:'center', frame:true, width:800, height:100, url:'success.jsp', items:[{ layout:'column', items:[{ //columnWidth:.33,//父类panel的属性 width:250, layout:'form', items:[{ xtype:'textfield', fieldLabel:'两字', width:150 }] },{ //columnWidth:.33, width:250, layout:'form', items:[{ xtype:'textfield', fieldLabel:'三个字', width:100 }] },{ //columnWidth:.33, width:200, layout:'form', items:[{ xtype:'textfield', fieldLabel:'三个字', width:70 }] }] }], buttons:[{ text:'提交', handler:function(){ form1.getForm().submit({ success:function(form,action){ alert("----"); Ext.Msg.alert('提示',action.result.msg); }, failure:function(){ Ext.Msg.alert('提示','操作失败!'); }, params:{aaa:'aaa'} }); } }] }); //注意:这里使用的是自动提交方式,调用了form本身的submit方法提交. // 提交路径:url:'success.jsp', // 提交方法form1.getForm().submit({....}) //重点:1.layout:'column',在items指定的每列中使用clumnWidth指定梅列所占宽度百分比 // 2.如果使用分列布局,就不能使用defaultType指定的默认的xtype了, // 3.每一列必须手动指定layout:'form' // 4.用width自定义每列的宽度 //当前布局方式为:分裂布局 //=================2.横向多行分裂式布局================ var form2=new Ext.form.FormPanel({ renderTo:'form2', title:'布局', labelAlign:'right', labelWidth:100, buttonAlign:'center', frame:true, width:800, height:200, items:[{ layout:'column', items:[{ //columnWidth:.33,//父类panel的属性 width:250, layout:'form', items:[{ xtype:'textfield', fieldLabel:'两字', width:150 }, { xtype:'textfield', fieldLabel:'两字', width:150 }, { xtype:'textfield', fieldLabel:'两字', width:150 }] },{ //columnWidth:.33, width:250, layout:'form', items:[{ xtype:'textfield', fieldLabel:'三个字', width:100 }, { xtype:'textfield', fieldLabel:'三个字', width:100 }] },{ //columnWidth:.33, width:200, layout:'form', items:[{ xtype:'textfield', fieldLabel:'四个字', width:70 }, { xtype:'textfield', fieldLabel:'四个字', width:70 }, { xtype:'textfield', fieldLabel:'四个字', width:70 }, { xtype:'textfield', fieldLabel:'四个字', width:70 }] }] }], buttons:[{ text:'提交', handler:function(){ form2.getForm().getEl().dom.action="success.jsp"; form2.getForm().getEl().dom.submit(); } }] }); //注意:这里使用的是:html原始提交方式 // 提交路径:form2.getForm().getEl().dom.action="success.jsp"; // 提交方法form2.getForm().getEl().dom.submit(); //重点:1.layout:'column',在items指定的每列中使用clumnWidth指定梅列所占宽度百分比 // 2.如果使用分列布局,就不能使用defaultType指定的默认的xtype了, // 3.每一列必须手动指定layout:'form' // 4.用width自定义每列的宽度 //当前布局方式为分裂布局 //===============3.横向多行分裂式布局================= var form3=new Ext.form.FormPanel({ renderTo:'form3', title:'布局', labelAlign:'right', labelWidth:100, buttonAlign:'center', frame:true, width:800, height:400, items:[{ layout:'column', items:[{ //columnWidth:.33,//父类panel的属性 width:250, layout:'form', items:[{ xtype:'textfield', fieldLabel:'两字', width:150 }, { xtype:'textfield', fieldLabel:'两字', width:150 }, { xtype:'textfield', fieldLabel:'两字', width:150 }] },{ //columnWidth:.33, width:250, layout:'form', items:[{ xtype:'textfield', fieldLabel:'三个字', width:100 }, { xtype:'textfield', fieldLabel:'三个字', width:100 }] },{ //columnWidth:.33, width:200, layout:'form', items:[{ xtype:'textfield', fieldLabel:'四个字', width:70 }, { xtype:'textfield', fieldLabel:'四个字', width:70 }, { xtype:'textfield', fieldLabel:'四个字', width:70 }, { xtype:'textfield', fieldLabel:'四个字', width:70 }] }] },{ fieldLabel :'文本域', xtype:'textarea', width:570, height:100 }], buttons:[{ text:'提交', handler:function(){ var textField=form3.getForm().findField('textField'); alert("textField:"+textField); Ext.Ajax.request({//使用ajax方式进行校验 url:'success.jsp', method:'post', root:'data', totalProperty:'totalCount', success:function(response,opts){ var content=Ext.decode(response.responseText); Ext.Msg.alert('提示',content.msg); //var content=response.data[0].success; /*if(content=='1') { Ext.Msg.alert('提示',content.msg); } else { Ext.Msg.alert('提示','读取数据失败'); } */ }, failure:function(){ Ext.Msg.alert('提示','操作失败'); }, params:{ alphaNumField:'aaaa' } }); } }] }); //注意:这里使用的是:html原始提交方式 // 提交路径:form2.getForm().getEl().dom.action="success.jsp"; // 提交方法form2.getForm().getEl().dom.submit(); //重点:1.layout:'column',在items指定的每列中使用clumnWidth指定梅列所占宽度百分比 // 2.如果使用分列布局,就不能使用defaultType指定的默认的xtype了, // 3.每一列必须手动指定layout:'form' // 4.用width自定义每列的宽度 //当前布局方式为分裂布局和默认布局混合 //================4.横向多行分裂式布局============== var form4=new Ext.form.FormPanel({ renderTo:'form4', title:'布局', labelAlign:'right', labelWidth:100, buttonAlign:'center', frame:true, width:800, height:400, items:[{ layout:'column', xtype:'fieldset', title:'几个字', checkboxToggle:true,//折叠效果 title: 'User Information', autoHeight:true, items:[{ //columnWidth:.33,//父类panel的属性 width:250, layout:'form', items:[{ xtype:'textfield', fieldLabel:'两字', width:150 }, { xtype:'textfield', fieldLabel:'两字', width:150 }, { xtype:'textfield', fieldLabel:'两字', width:150 }] },{ //columnWidth:.33, width:250, layout:'form', items:[{ xtype:'textfield', fieldLabel:'三个字', width:100 }, { xtype:'textfield', fieldLabel:'三个字', width:100 }] },{ //columnWidth:.33, width:200, layout:'form', items:[{ xtype:'textfield', fieldLabel:'四个字', width:70 }, { xtype:'textfield', fieldLabel:'四个字', width:70 }, { xtype:'textfield', fieldLabel:'四个字', width:70 }, { xtype:'textfield', fieldLabel:'四个字', width:70 }] }] },{ fieldLabel :'文本域', xtype:'textarea', width:570, height:100 }], buttons:[{ text:'提交', handler:function(){ var textField=form4.getForm().findField('textField'); alert("textField:"+textField); Ext.Ajax.request({//使用ajax方式进行校验 url:'success.jsp', method:'post', root:'data', totalProperty:'totalCount', success:function(response,opts){ var content=Ext.decode(response.responseText); Ext.Msg.alert('提示',content.msg); //var content=response.data[0].success; /*if(content=='1') { Ext.Msg.alert('提示',content.msg); } else { Ext.Msg.alert('提示','读取数据失败'); } */ }, failure:function(){ Ext.Msg.alert('提示','操作失败'); }, params:{ alphaNumField:'aaaa' } }); } }] }); //注意:这里使用的是:fieldSet布局 //当前布局方式为分裂布局和默认布局混合,fieldSet框架 //==============5.横向多行分裂式布局================ var form5=new Ext.form.FormPanel({ renderTo:'form5', title:'布局', labelAlign:'right', labelWidth:60, buttonAlign:'center', frame:true, width:800, height:400, items:[{ layout:'column', xtype:'fieldset',//设置xtype为fieldset title:'几个字', collapsible: true, autoHeight:true, items:[{ //columnWidth:.33,//父类panel的属性 width:300, layout:'form', xtype:'fieldset', title:'两个字', autoHeight:true, collapsible: true, items:[{ xtype:'textfield', fieldLabel:'两字', width:180 }, { xtype:'textfield', fieldLabel:'两字', width:180 }, { xtype:'textfield', fieldLabel:'两字', width:180 }] },{ //columnWidth:.33, width:250, layout:'form', xtype:'fieldset', title:'弎个字', collapsible: true, items:[{ xtype:'textfield', fieldLabel:'三个字', width:100 }, { xtype:'textfield', fieldLabel:'三个字', width:100 }] },{ //columnWidth:.33, width:200, layout:'form', xtype:'fieldset', title:'四个字', collapsible: true, items:[{ xtype:'textfield', fieldLabel:'四个字', width:70 }, { xtype:'textfield', fieldLabel:'四个字', width:70 }, { xtype:'textfield', fieldLabel:'四个字', width:70 }, { xtype:'textfield', fieldLabel:'四个字', width:70 }] }] },{ xtype:'fieldset', title:'文本域', items:[ { fieldLabel :'文本域', xtype:'textarea', width:570, height:100 } ] }], buttons:[{ text:'提交', handler:function(){ var textField=form5.getForm().findField('textField'); alert("textField:"+textField); Ext.Ajax.request({//使用ajax方式进行校验 url:'success.jsp', method:'post', root:'data', totalProperty:'totalCount', success:function(response,opts){ var content=Ext.decode(response.responseText); Ext.Msg.alert('提示',content.msg); //var content=response.data[0].success; /*if(content=='1') { Ext.Msg.alert('提示',content.msg); } else { Ext.Msg.alert('提示','读取数据失败'); } */ }, failure:function(){ Ext.Msg.alert('提示','操作失败'); }, params:{ alphaNumField:'aaaa' } }); } }] }); //注意:这里使用的是:fieldSet布局 //当前布局方式为分裂布局和默认布局混合,fieldSet框架 //fieldset也是一个框架,所以在添加fieldset时,则添加一个items,将文本域作为其中的一个子属性 //====================================表单布局(结束)=============================================== }); </script> </head> <body> <div id="form" style="margin-top:50px; margin-left:150px;"></div> <div id="form1" style="margin-top:100px; margin-left:150px;"></div> <div id="form2" style="margin-top:100px; margin-left:150px;"></div> <div id="form3" style="margin-top:100px; margin-left:150px;"></div> <div id="form4" style="margin-top:100px; margin-left:150px;"></div> <div id="form5" style="margin-top:100px; margin-left:150px;"></div> </body> </html> --------------------------------------------------------------------------------------------------------------------------------- 2.comboBoxData.txt ------------------------------------------------------------------------------------------------------------------------------- [ ['1','排球'], ['2','篮球'], ['3','足球'], ['4','皮球'], ['5','气球'], ['6','橄榄球'], ['7','乒乓球'] ] ------------------------------------------------------------------------------------------------------------------------------ 3.triggerData.txt ------------------------------------------------------------------------------------------------------------------------------- [ ['name1','sex1','descn1'], ['name2','sex2','descn2'], ['name3','sex3','descn3'], ['name4','sex4','descn4'], ['name5','sex5','descn5'], ['name6','sex6','descn6'] ] ------------------------------------------------------------------------------------------------------------------------------ 4.success.jsp ------------------------------------------------------------------------------------------------------------------------------- <%@ page contentType="text/html; charset=utf-8" language="java" import="java.sql.*" errorPage="" %> <% request.setCharacterEncoding("utf-8"); response.setCharacterEncoding("utf-8"); response.getWriter().print("{success:true,msg:'成功'}"); %> |
|
|
