當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

无废话ExtJs 入门教程十[单选组：RadioGroup、复选组：CheckBoxGroup]

發布時間：2023/12/9 编程问答 34 豆豆

生活随笔收集整理的這篇文章主要介紹了无废话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  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  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  198 </body> 199 </html>

2.效果如下：

轉載于:https://www.cnblogs.com/iamlilinfeng/archive/2012/06/23/2559234.html

總結

以上是生活随笔為你收集整理的无废话ExtJs 入门教程十[单选组：RadioGroup、复选组：CheckBoxGroup]的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：解决安装Weblogic domain卡
下一篇： [Unity][AssetStore][