无废话ExtJs 入门教程九[数字字段：NumberField、隐藏字段Hidden、日期字段：DataFiedl]

来源：互联网发布：英伟达超频软件编辑：程序博客网时间：2024/05/21 19:45
继上第六节内容，我们在表单里加了个一个数字字段，隐藏字段，日期字段。如下代码所:
1.代码如下：
  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  2 <html xmlns="http://www.w3.org/1999/xhtml">  3 <head>  4     <title></title>  5     <!--ExtJs框架开始-->  6     <script type="text/javascript" src="/Ext/adapter/ext/ext-base.js"></script>  7     <script type="text/javascript" src="/Ext/ext-all.js"></script>  8     <script src="/Ext/src/locale/ext-lang-zh_CN.js" type="text/javascript"></script><!--中文翻译js-->  9     <link rel="stylesheet" type="text/css" href="/Ext/resources/css/ext-all.css" /> 10     <!--ExtJs框架结束--> 11     <style type="text/css"> 12         .x-form-unit 13         { 14             height: 22px; 15             line-height: 22px; 16             padding-left: 2px; 17             display: inline-block; 18             display: inline; 19         } 20     </style> 21     <script type="text/javascript"> 22         //----------------------重写文本框开始----------------------// 23         Ext.override(Ext.form.TextField, { 24             unitText: '', 25             onRender: function (ct, position) { 26                 Ext.form.TextField.superclass.onRender.call(this, ct, position); 27                 // 如果单位字符串已定义 则在后方增加单位对象    28                 if (this.unitText != '') { 29                     this.unitEl = ct.createChild({ 30                         tag: 'div', 31                         html: this.unitText 32                     }); 33                     this.unitEl.addClass('x-form-unit'); 34                     // 增加单位名称的同时 按单位名称大小减少文本框的长度 初步考虑了中英文混排 未考虑为负的情况    35                     this.width = this.width - (this.unitText.replace(/[^\x00-\xff]/g, "xx").length * 6 + 2); 36                     // 同时修改错误提示图标的位置    37                     this.alignErrorIcon = function () { 38                         this.errorIcon.alignTo(this.unitEl, 'tl-tr', [2, 0]); 39                     }; 40                 } 41             } 42         }); 43         //----------------------重写文本框结束----------------------// 44  45         Ext.onReady(function () { 46             //初始化标签中的Ext:Qtip属性。 47             Ext.QuickTips.init(); 48             Ext.form.Field.prototype.msgTarget = 'side'; 49  50             //提交按钮处理方法 51             var btnsubmitclick = function () { 52                 Ext.MessageBox.alert('提示', '你点了确定按钮!'); 53             } 54             //重置按钮"点击时"处理方法 55             var btnresetclick = function () { 56                 Ext.MessageBox.alert('提示', '你点了重置按钮!'); 57             } 58             //重置按钮"鼠标悬停"处理方法 59             var btnresetmouseover = function () { 60                 Ext.MessageBox.alert('提示', '你鼠标悬停在重置按钮之上!'); 61             } 62             //提交按钮 63             var btnsubmit = new Ext.Button({ 64                 text: '提交', 65                 handler: btnsubmitclick 66             }); 67             //重置按钮 68             var btnreset = new Ext.Button({ 69                 text: '重置', 70                 listeners: { 71                     'mouseover': btnresetmouseover, 72                     'click': btnresetclick 73                 } 74             }); 75             //用户名input 76             var txtusername = new Ext.form.TextField({ 77                 width: 140, 78                 allowBlank: false, 79                 maxLength: 20, 80                 name: 'username', 81                 fieldLabel: '用户名称', 82                 blankText: '请输入用户名', 83                 maxLengthText: '用户名不能超过20个字符' 84             }); 85             //密码input 86             var txtpassword = new Ext.form.TextField({ 87                 width: 140, 88                 allowBlank: false, 89                 maxLength: 20, 90                 inputType: 'password', 91                 name: 'password', 92                 fieldLabel: '密码', 93                 blankText: '请输入密码', 94                 maxLengthText: '密码不能超过20个字符' 95             }); 96             //----------------------数字字段开始----------------------// 97             var numberfield = new Ext.form.NumberField({ 98                 fieldLabel: '身高', 99                 width: 80,100                 decimalPrecision: 1,101                 minValue: 0.01,102                 maxValue: 200,103                 unitText: ' cm',104                 allowBlank: false,105                 blankText: '请输入身高'106             });107             //----------------------数字字段结束----------------------//108             //----------------------隐藏域字段开始----------------------//109             var hiddenfield = new Ext.form.Hidden({110                 name: 'userid',111                 value: '1'112             });113             //----------------------隐藏域字段结束----------------------//114             //----------------------日期字段开始----------------------//115             var datefield = new Ext.form.DateField({116                 fieldLabel: '出生日期',117                 format: 'Y-m-d',118                 editable: false,119                 allowBlank: false,120                 blankText: '请选择日期'121             });122             //----------------------日期字段结束----------------------//123             //表单124             var form = new Ext.form.FormPanel({125                 frame: true,126                 title: '表单标题',127                 style: 'margin:10px',128                 html: '<div style="padding:10px">这里表单内容</div>',129                 items: [txtusername, txtpassword, numberfield, hiddenfield, datefield],130                 buttons: [btnsubmit, btnreset]131             });132             //窗体133             var win = new Ext.Window({134                 title: '窗口',135                 width: 476,136                 height: 374,137                 html: '<div>这里是窗体内容</div>',138                 resizable: true,139                 modal: true,140                 closable: true,141                 maximizable: true,142                 minimizable: true,143                 buttonAlign: 'center',144                 items: form145             });146             win.show();147         });148     </script>149 </head>150 <body>151 <!--152 说明：153 (1)var numberfield = new Ext.form.NumberField():创建一个新的NumberField数字文本框对象。154 (2)99行，decimalPrecision: 1：设置小数点后面的位数，当位数超过时系统会自动截断。155 (3)100行，minValue: 0.01：设置数字文本框最小值。156 (4)101行，maxValue: 200:设置最大值。157 (5)102行，unitText: ' cm'：注意，这个属性并非 Extjs文本框自带的属性，因为我们要在“身高”的后面加上158           单位，所以在23行---43行对文本框进行了重写，重写时添加了属性"unitText"，并且在样式表中加了样式"x-form-unit"。159 (6)var hiddenfield = new Ext.form.Hidden()：创建一个新的Hidden对象，隐藏字段用作参数占位符，160           一般用来保存一些不希望用户直接看到的参数，并发送到服务器，例如：用户ID等。161 (7)109行，name: 'userid'：Hidden对象的名称，这个名称是在服务端接收值的名称。发送参数格式如下：userid:1。162 (8)110行，value: '1'：发送的值。163 (9)var datefield = new Ext.form.DateField()：创建一个新的Datefield日期对象,Extjs的日期为英文类型，              所以要加入翻译成中文的js，代码第8行位置。164 (10)116行，format: 'Y-m-d'：日期格式。165 (11)117行，editable: false：设置为不可编辑。166 -->167 </body>168 </html>
2.效果如下：
阅读全文
0 0