ExtJS笔记----FormPanel的使用

最新推荐文章于 2025-08-15 09:01:53 发布
zuoanlove
最新推荐文章于 2025-08-15 09:01:53 发布
阅读量427
点赞数
分类专栏： ext js 2.2 文章标签： extjs function textbox javascript layout 日历
ext js 2.2 专栏收录该内容
12 篇文章
订阅专栏
本文提供了一段使用EXTjs实现的表单控件与在线编辑器的代码示例，包括文本框、下拉框、日历、单选、复选等常用控件，以及在线编辑器的基本使用方法。
摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >
转载自：http://lucky16.iteye.com/blog/1490278
一、效果图
　　　　先用美图勾引那些驻足观望之人：

二、代码讲解
注意代码中的EXT js引入路径，需要根据你的实际情况进行引入，否者可能出现错误
    Javascript代码  
   
  
 <html>  
     <head>  
         <title>系统登录</title>  
         <meta charset="UTF-8" />  
         <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />  
         <style>  
         </style>  
         <script type="text/javascript" src="extjs/ext-base.js"></script>  
         <script type="text/javascript" src="extjs/ext-all.js"></script>  
         <script type="text/javascript" src="extjs/ext-lang-zh_CN.js"></script>  
     </head>  
     <body>  
         <form id="form1" runat="server">  
             <script type="text/javascript">  
                 Ext.onReady(function() {  
   
                     Ext.QuickTips.init();  
                     Ext.form.Field.prototype.msgTarget = 'side';  
   
                     var form1 = new Ext.FormPanel({  
                         layout : 'form',  
                         collapsible : true,  
                         autoHeight : true,  
                         frame : true,  
                         renderTo : Ext.getBody(),  
                         title : '<center style="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 : new Ext.data.SimpleStore({  
                                 fields : ['Id', 'Name'],  
                                 data : [[1, '男'], [0, '女']]  
                             })  
                         }, {  
                             fieldLabel : '日历控件',  
                             xtype : 'datefield',  
                             name : 'DateControl',  
                             format : "Y-m-d",  
                             editable : false  
                             //, 默认当前日期  
                             //value:new Date().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:i A"  
                             //"g:ia|g:iA|g:i a|g:i A|h:i|g:i|H:i|ga|ha|gA|h a|g a|g A|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();  
                             }  
                         }]  
                     });  
   
                     function MsgInfo(str_msg) {  
                         Ext.MessageBox.show({  
                             title : '提示',  
                             msg : str_msg,  
                             width : 400,  
                             icon : Ext.MessageBox.INFO,  
                             buttons : Ext.MessageBox.OK  
                         });  
                     }  
   
                 });  
   
             </script>  
         </form>  
     </body>  
 </html>  