logo
搜索
我的图书馆

发文章

发文工具

其他工具

留言交流
搜索
分享

无废话ExtJs[单选组：RadioGroup、复选组：CheckBoxGroup]

 yan的图书41 2014-04-25
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2.  <html xmlns="http://www./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>  
  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.          Ext.onReady(function () {  
  45.              //初始化标签中的Ext:Qtip属性。  
  46.              Ext.QuickTips.init();  
  47.              Ext.form.Field.prototype.msgTarget = 'side';  
  48.    
  49.              //提交按钮处理方法  
  50.              var btnsubmitclick = function () {  
  51.                  Ext.MessageBox.alert('提示', '你点了确定按钮!');  
  52.              }  
  53.              //重置按钮"点击时"处理方法  
  54.              var btnresetclick = function () {  
  55.                  Ext.MessageBox.alert('提示', '你点了重置按钮!');  
  56.              }  
  57.              //重置按钮"鼠标悬停"处理方法  
  58.              var btnresetmouseover = function () {  
  59.                  Ext.MessageBox.alert('提示', '你鼠标悬停在重置按钮之上!');  
  60.              }  
  61.              //提交按钮  
  62.              var btnsubmit = new Ext.Button({  
  63.                  text: '提交',  
  64.                  handler: btnsubmitclick  
  65.              });  
  66.              //重置按钮  
  67.              var btnreset = new Ext.Button({  
  68.                  text: '重置',  
  69.                  listeners: {  
  70.                      'mouseover': btnresetmouseover,  
  71.                      'click': btnresetclick  
  72.                  }  
  73.              });  
  74.              //用户名input  
  75.              var txtusername = new Ext.form.TextField({  
  76.                  width: 140,  
  77.                  allowBlank: false,  
  78.                  maxLength: 20,  
  79.                  name: 'username',  
  80.                  fieldLabel: '用户名称',  
  81.                  blankText: '请输入用户名',  
  82.                  maxLengthText: '用户名不能超过20个字符'  
  83.              });  
  84.              //密码input  
  85.              var txtpassword = new Ext.form.TextField({  
  86.                  width: 140,  
  87.                  allowBlank: false,  
  88.                  maxLength: 20,  
  89.                  inputType: 'password',  
  90.                  name: 'password',  
  91.                  fieldLabel: '密码',  
  92.                  blankText: '请输入密码',  
  93.                  maxLengthText: '密码不能超过20个字符'  
  94.              });  
  95.              var numberfield = new Ext.form.NumberField({  
  96.                  fieldLabel: '身高',  
  97.                  width: 80,  
  98.                  decimalPrecision: 1,  
  99.                  minValue: 0.01,  
  100.                  maxValue: 200,  
  101.                  unitText: ' cm',  
  102.                  allowBlank: false,  
  103.                  blankText: '请输入身高'  
  104.              });  
  105.    
  106.              var hiddenfield = new Ext.form.Hidden({  
  107.                  name: 'userid',  
  108.                  value: '1'  
  109.              });  
  110.    
  111.              var datefield = new Ext.form.DateField({  
  112.                  fieldLabel: '出生日期',  
  113.                  format: 'Y-m-d',  
  114.                  editable: false,  
  115.                  allowBlank: false,  
  116.                  blankText: '请选择日期'  
  117.              });  
  118.              //----------------------单选组开始----------------------//  
  119.              var radiogroup = new Ext.form.RadioGroup({  
  120.                  fieldLabel: '性别',  
  121.                  width: 100,  
  122.                  items: [{  
  123.                      name: 'sex',  
  124.                      inputValue: '0',  
  125.                      boxLabel: '男',  
  126.                      checked: true  
  127.                  }, {  
  128.                      name: 'sex',  
  129.                      inputValue: '1',  
  130.                      boxLabel: '女'  
  131.                  }]  
  132.              });  
  133.              //获取单选组的值  
  134.              radiogroup.on('change', function (rdgroup, checked) {  
  135.                  alert(checked.getRawValue());  
  136.              });  
  137.              //----------------------单选组结束----------------------//  
  138.              //----------------------复选组开始----------------------//  
  139.              var checkboxgroup = new Ext.form.CheckboxGroup({  
  140.                  fieldLabel: '兴趣爱好',  
  141.                  width: 170,  
  142.                  items: [{  
  143.                      boxLabel: '看书',  
  144.                      inputValue: '0'  
  145.                  }, {  
  146.                      boxLabel: '上网',  
  147.                      inputValue: '1'  
  148.                  }, {  
  149.                      boxLabel: '听音乐',  
  150.                      inputValue: '2'  
  151.                  }]  
  152.              });  
  153.              //获取复选组的值  
  154.              checkboxgroup.on('change', function (cbgroup, checked) {  
  155.                  for (var i = 0; i < checked.length; i++) {  
  156.                      alert(checked[i].getRawValue());  
  157.                  }  
  158.              });  
  159.              //----------------------复选组结束----------------------//  
  160.              //表单  
  161.              var form = new Ext.form.FormPanel({  
  162.                  frame: true,  
  163.                  title: '表单标题',  
  164.                  style: 'margin:10px',  
  165.                  html: '<div style="padding:10px">这里表单内容</div>',  
  166.                  items: [txtusername, txtpassword, numberfield, hiddenfield, datefield, radiogroup, checkboxgroup],  
  167.                  buttons: [btnsubmit, btnreset]  
  168.              });  
  169.              //窗体  
  170.              var win = new Ext.Window({  
  171.                  title: '窗口',  
  172.                  width: 476,  
  173.                  height: 374,  
  174.                  html: '<div>这里是窗体内容</div>',  
  175.                  resizable: true,  
  176.                  modal: true,  
  177.                  closable: true,  
  178.                  maximizable: true,  
  179.                  minimizable: true,  
  180.                  buttonAlign: 'center',  
  181.                  items: form  
  182.              });  
  183.              win.show();  
  184.          });  
  185.      </script>  
  186.  </head>  
  187.  <body>  
  188.      <!--  
  189.  说明：  
  190.  (1)var radiogroup = new Ext.form.RadioGroup():创建一个新的单选按钮组。  
  191.  (2)name: 'sex'：单选按钮组是按照 name 属性来区分的，同一组中的单选按钮才能单选，  
  192.          如果name属性设置错误，该按钮将会被认为是其他组。  
  193.  (3)inputValue: '0'：选择框的值。  
  194.  (4)boxLabel: '男':选择框后面的文字说明。  
  195.  (5)checked.getRawValue()：获取选择框的选中值，由于单选框只有一个选中值，可以直接获取，  
  196.          而复选框可以多选，所以要循环取出。  
  197.  -->  
  198.  </body>  
  199.  </html>  

<html xmlns="http://www./1999/xhtml">
<head>
     <title></title>
     <!--ExtJs框架开始-->
     <script type="text/javascript" src="/Ext/adapter/ext/ext-base.js"></script>
     <script type="text/javascript" src="/Ext/ext-all.js"></script>
     <script src="/Ext/src/locale/ext-lang-zh_CN.js" type="text/javascript"></script>
     <link rel="stylesheet" type="text/css" href="/Ext/resources/css/ext-all.css" />
     <!--ExtJs框架结束-->
     <style type="text/css">
         .x-form-unit
         {
             height: 22px;
             line-height: 22px;
             padding-left: 2px;
             display: inline-block;
             display: inline;
         }
     </style>
     <script type="text/javascript">

         Ext.override(Ext.form.TextField, {
             unitText: '',
             onRender: function (ct, position) {
                 Ext.form.TextField.superclass.onRender.call(this, ct, position);
                 // 如果单位字符串已定义 则在后方增加单位对象  
                 if (this.unitText != '') {
                     this.unitEl = ct.createChild({
                         tag: 'div',
                         html: this.unitText
                     });
                     this.unitEl.addClass('x-form-unit');
                     // 增加单位名称的同时 按单位名称大小减少文本框的长度 初步考虑了中英文混排 未考虑为负的情况  
                     this.width = this.width - (this.unitText.replace(/[^\x00-\xff]/g, "xx").length * 6 + 2);
                     // 同时修改错误提示图标的位置  
                     this.alignErrorIcon = function () {
                         this.errorIcon.alignTo(this.unitEl, 'tl-tr', [2, 0]);
                     };
                 }
             }
         });

         Ext.onReady(function () {
             //初始化标签中的Ext:Qtip属性。
             Ext.QuickTips.init();
             Ext.form.Field.prototype.msgTarget = 'side';

             //提交按钮处理方法
             var btnsubmitclick = function () {
                 Ext.MessageBox.alert('提示', '你点了确定按钮!');
             }
             //重置按钮"点击时"处理方法
             var btnresetclick = function () {
                 Ext.MessageBox.alert('提示', '你点了重置按钮!');
             }
             //重置按钮"鼠标悬停"处理方法
             var btnresetmouseover = function () {
                 Ext.MessageBox.alert('提示', '你鼠标悬停在重置按钮之上!');
             }
             //提交按钮
             var btnsubmit = new Ext.Button({
                 text: '提交',
                 handler: btnsubmitclick
             });
             //重置按钮
             var btnreset = new Ext.Button({
                 text: '重置',
                 listeners: {
                     'mouseover': btnresetmouseover,
                     'click': btnresetclick
                 }
             });
             //用户名input
             var txtusername = new Ext.form.TextField({
                 width: 140,
                 allowBlank: false,
                 maxLength: 20,
                 name: 'username',
                 fieldLabel: '用户名称',
                 blankText: '请输入用户名',
                 maxLengthText: '用户名不能超过20个字符'
             });
             //密码input
             var txtpassword = new Ext.form.TextField({
                 width: 140,
                 allowBlank: false,
                 maxLength: 20,
                 inputType: 'password',
                 name: 'password',
                 fieldLabel: '密码',
                 blankText: '请输入密码',
                 maxLengthText: '密码不能超过20个字符'
             });
             var numberfield = new Ext.form.NumberField({
                 fieldLabel: '身高',
                 width: 80,
                 decimalPrecision: 1,
                 minValue: 0.01,
                 maxValue: 200,
                 unitText: ' cm',
                 allowBlank: false,
                 blankText: '请输入身高'
             });

             var hiddenfield = new Ext.form.Hidden({
                 name: 'userid',
                 value: '1'
             });

             var datefield = new Ext.form.DateField({
                 fieldLabel: '出生日期',
                 format: 'Y-m-d',
                 editable: false,
                 allowBlank: false,
                 blankText: '请选择日期'
             });
             //----------------------单选组开始----------------------//
             var radiogroup = new Ext.form.RadioGroup({
                 fieldLabel: '性别',
                 width: 100,
                 items: [{
                     name: 'sex',
                     inputValue: '0',
                     boxLabel: '男',
                     checked: true
                 }, {
                     name: 'sex',
                     inputValue: '1',
                     boxLabel: '女'
                 }]
             });
             //获取单选组的值
             radiogroup.on('change', function (rdgroup, checked) {
                 alert(checked.getRawValue());
             });
             //----------------------单选组结束----------------------//
             //----------------------复选组开始----------------------//
             var checkboxgroup = new Ext.form.CheckboxGroup({
                 fieldLabel: '兴趣爱好',
                 width: 170,
                 items: [{
                     boxLabel: '看书',
                     inputValue: '0'
                 }, {
                     boxLabel: '上网',
                     inputValue: '1'
                 }, {
                     boxLabel: '听音乐',
                     inputValue: '2'
                 }]
             });
             //获取复选组的值
             checkboxgroup.on('change', function (cbgroup, checked) {
                 for (var i = 0; i < checked.length; i++) {
                     alert(checked[i].getRawValue());
                 }
             });
             //----------------------复选组结束----------------------//
             //表单
             var form = new Ext.form.FormPanel({
                 frame: true,
                 title: '表单标题',
                 style: 'margin:10px',
                 html: '<div style="padding:10px">这里表单内容</div>',
                 items: [txtusername, txtpassword, numberfield, hiddenfield, datefield, radiogroup, checkboxgroup],
                 buttons: [btnsubmit, btnreset]
             });
             //窗体
             var win = new Ext.Window({
                 title: '窗口',
                 width: 476,
                 height: 374,
                 html: '<div>这里是窗体内容</div>',
                 resizable: true,
                 modal: true,
                 closable: true,
                 maximizable: true,
                 minimizable: true,
                 buttonAlign: 'center',
                 items: form
             });
             win.show();
         });
     </script>
</head>
<body>
     <!--
说明：
(1)var radiogroup = new Ext.form.RadioGroup():创建一个新的单选按钮组。
(2)name: 'sex'：单选按钮组是按照 name 属性来区分的，同一组中的单选按钮才能单选，
         如果name属性设置错误，该按钮将会被认为是其他组。
(3)inputValue: '0'：选择框的值。
(4)boxLabel: '男':选择框后面的文字说明。
(5)checked.getRawValue()：获取选择框的选中值，由于单选框只有一个选中值，可以直接获取，
         而复选框可以多选，所以要循环取出。
-->
</body>
</html>
2.效果如下：

    本站是提供个人知识管理的网络存储空间，所有内容均由用户发布，不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息，谨防诈骗。如发现有害或侵权内容，请点击一键举报。
    转藏 分享 献花（0）

    来自： yan的图书41 > 《Extjs》

    举报/认领

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多