无废话ExtJs 入门教程十[单选组：RadioGroup、复选组：CheckBoxGroup]
生活随笔
收集整理的這篇文章主要介紹了
无废话ExtJs 入门教程十[单选组：RadioGroup、复选组：CheckBoxGroup]
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
繼上一節內容，我們在表單里加了個一個單選組，一個復選組:
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> 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>2.效果如下：
轉載于:https://www.cnblogs.com/iamlilinfeng/archive/2012/06/23/2559234.html
總結
以上是生活随笔為你收集整理的无废话ExtJs 入门教程十[单选组：RadioGroup、复选组：CheckBoxGroup]的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 解决安装Weblogic domain卡
- 下一篇： [Unity][AssetStore][