ExtJS笔记----FormPanel的使用-优快云博客

本文通过实例详细介绍了如何使用 EXTjs 实现多种表单控件，包括文本框、数字输入框、下拉菜单、日历选择器等，并提供了完整的 HTML 和 JavaScript 代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

转载自：http://lucky16.iteye.com/blog/1490278

一、效果图
　　　　先用美图勾引那些驻足观望之人：

二、代码讲解
注意代码中的EXT js引入路径，需要根据你的实际情况进行引入，否者可能出现错误

    Javascript代码
    
  
 <html> 
 <head> 
 <title>系统登录</title> 
 <metacharset="UTF-8"/> 
 <linkrel="stylesheet"type="text/css"href="extjs/resources/css/ext-all.css"/> 
 <style> 
 </style> 
 <scripttype="text/javascript"src="extjs/ext-base.js"></script> 
 <scripttype="text/javascript"src="extjs/ext-all.js"></script> 
 <scripttype="text/javascript"src="extjs/ext-lang-zh_CN.js"></script> 
 </head> 
 <body> 
 <formid="form1"runat="server"> 
 <scripttype="text/javascript"> 
 Ext.onReady(function(){ 
  
 Ext.QuickTips.init(); 
 Ext.form.Field.prototype.msgTarget='side'; 
  
 varform1=newExt.FormPanel({ 
 layout:'form', 
 collapsible:true, 
 autoHeight:true, 
 frame:true, 
 renderTo:Ext.getBody(), 
 title:'<centerstyle="curor:hand"onclick="window.location.reload();">表单控件</center>', 
 style:'margin-left:auto;margin-right:auto;width:500px;margin-top:8px;', 
 //设置标签对齐方式 
 labelAlign:'right', 
 //设置标签宽 
 labelWidth:170, 
 //设置按钮的对齐方式 
 buttonAlign:'center', 
 //默认元素属性设置 
 defaults:{ 
 width:180 
 }, 
 items:[{ 
 fieldLabel:'文本框控件', 
 name:'TextBox', 
 xtype:'textfield' 
 //,readOnly:true//只读 
 //,emptyText:'请输入数据'//为空时显示的文本，注意不是value 
 },{ 
 fieldLabel:'只允许输入数字', 
 name:'TextBoxNumber', 
 xtype:'numberfield' 
 //,allowDecimals:false//允许小数点 
 //,allowNegative:false,//允许负数 
 //,maxValue:1000//最大值 
 //,minValue:0//最小值 
 },{ 
 fieldLabel:'下拉框控件', 
 name:'DropDownList', 
 xtype:'combo', 
 //mode:'local', 
 displayField:"Name", 
 //设置为选项的value的字段 
 valueField:"Id", 
 //是否可以输入，还是只能选择下拉框中的选项 
 editable:false, 
 typeAhead:true, 
 //必须选择一项 
 //forceSelection:true, 
 //输入部分选项内容匹配的时候显示所有的选项 
 triggerAction:'all', 
 //selectOnFocus:true, 
 //数据 
 store:newExt.data.SimpleStore({ 
 fields:['Id','Name'], 
 data:[[1,'男'],[0,'女']] 
 }) 
 },{ 
 fieldLabel:'日历控件', 
 xtype:'datefield', 
 name:'DateControl', 
 format:"Y-m-d", 
 editable:false 
 //,默认当前日期 
 //value:newDate().dateFormat('Y-m-d') 
 },{ 
 fieldLabel:'单选控件', 
 xtype:'radiogroup', 
 name:'Radios', 
 items:[{ 
 name:'RadioItems', 
 boxLabel:'选我', 
 inputValue:'1', 
 checked:true 
 },{ 
 name:'RadioItems', 
 boxLabel:'选我吧', 
 inputValue:'0' 
 }] 
 },{ 
 fieldLabel:'复选控件', 
 xtype:'checkboxgroup', 
 name:'Checkboxs' 
 //columns属性表示用2行来显示数据 
 , 
 columns:2, 
 items:[{ 
 name:'CheckboxItems', 
 boxLabel:'香蕉', 
 inputValue:'A' 
 },{ 
 name:'CheckboxItems', 
 boxLabel:'苹果', 
 inputValue:'B' 
 },{ 
 name:'CheckboxItems', 
 boxLabel:'橘子', 
 inputValue:'C' 
 },{ 
 name:'CheckboxItems', 
 boxLabel:'桃子', 
 inputValue:'D' 
 }] 
 },{ 
 fieldLabel:'文本域控件', 
 xtype:'textarea', 
 value:'可以输好多字！', 
 height:50 
 },{ 
 fieldLabel:'时间控件', 
 xtype:'timefield' 
 //格式化输出默认为"g:iA" 
 //"g:ia|g:iA|g:ia|g:iA|h:i|g:i|H:i|ga|ha|gA|ha|ga|gA|gi|hi|gia|hia|g|H" 
 , 
 format:'H:i' 
 //时间间隔(分钟) 
 , 
 increment:60 
 },{ 
 fieldLabel:'标签页', 
 xtype:'fieldset', 
 title:'标签页', 
 autoHeight:true, 
 items:[{ 
 xtype:'panel', 
 title:'标签页中的面板', 
 frame:true, 
 height:50 
 }] 
 },{ 
 fieldLabel:'在线编辑器', 
 xtype:'htmleditor', 
 width:260, 
 height:100 
 //以下为默认选项，其他请参照源代码 
 //,enableColors:false 
 //,enableFormat:true 
 //,enableFontSize:true 
 //,enableAlignments:true 
 //,enableLists:true 
 //,enableSourceEdit:true 
 //,enableLinks:true 
 //,enableFont:true 
 }], 
 buttons:[{ 
 text:"保存", 
 handler:function(){ 
 MsgInfo('保存'); 
 } 
 },{ 
 text:"取消", 
 handler:function(){ 
 form1.form.reset(); 
 } 
 }] 
 }); 
  
 functionMsgInfo(str_msg){ 
 Ext.MessageBox.show({ 
 title:'提示', 
 msg:str_msg, 
 width:400, 
 icon:Ext.MessageBox.INFO, 
 buttons:Ext.MessageBox.OK 
 }); 
 } 
  
 }); 
  
 </script> 
 </form> 
 </body> 
 </html>  