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


    extjs技术交流,欢迎加群(201926085)程序员俱乐部-ExtJs(5群)

    继上第六节内容,我们在表单里加了个一个数字字段,隐藏字段,日期字段。如下代码所:

    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                  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                  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                  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                  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: form
    145             });
    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.效果如下:

    活到老,学到老,练到老...
  • 相关阅读:
    注释总结
    C# Notes
    坑爹的Honor10开热点
    用热得快烧洗澡水
    跳转语句
    台湾书籍代购网址——2013-08-25 16
    【转】cocos2d-x 模仿计时器效果,动态增加分数——2013-08-25 16
    【转】C/C++中的日期和时间 TIME_T与STRUCT TM转换——2013-08-25 16
    【转】Cocos2d-x 2.0 拖尾效果深入分析
    cocos2d-x之CCMotionStreak类——2013-08-25 16
  • 原文地址:https://www.cnblogs.com/husam/p/5584510.html
Copyright © 2020-2023  润新知