<html xmlns="http://www./1999/xhtml"> <head> <title></title> <!--ExtJs框架開(kāi)始--> <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框架結(jié)束--> <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); // 如果單位字符串已定義 則在后方增加單位對(duì)象 if (this.unitText != '') { this.unitEl = ct.createChild({ tag: 'div', html: this.unitText }); this.unitEl.addClass('x-form-unit'); // 增加單位名稱的同時(shí) 按單位名稱大小減少文本框的長(zhǎng)度 初步考慮了中英文混排 未考慮為負(fù)的情況 this.width = this.width - (this.unitText.replace(/[^\x00-\xff]/g, "xx").length * 6 + 2); // 同時(shí)修改錯(cuò)誤提示圖標(biāo)的位置 this.alignErrorIcon = function () { this.errorIcon.alignTo(this.unitEl, 'tl-tr', [2, 0]); }; } } }); Ext.onReady(function () { //初始化標(biāo)簽中的Ext:Qtip屬性。 Ext.QuickTips.init(); Ext.form.Field.prototype.msgTarget = 'side'; //提交按鈕處理方法 var btnsubmitclick = function () { Ext.MessageBox.alert('提示', '你點(diǎn)了確定按鈕!'); } //重置按鈕"點(diǎn)擊時(shí)"處理方法 var btnresetclick = function () { Ext.MessageBox.alert('提示', '你點(diǎn)了重置按鈕!'); } //重置按鈕"鼠標(biāo)懸停"處理方法 var btnresetmouseover = function () { Ext.MessageBox.alert('提示', '你鼠標(biāo)懸停在重置按鈕之上!'); } //提交按鈕 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: '請(qǐng)輸入用戶名', maxLengthText: '用戶名不能超過(guò)20個(gè)字符' }); //密碼input var txtpassword = new Ext.form.TextField({ width: 140, allowBlank: false, maxLength: 20, inputType: 'password', name: 'password', fieldLabel: '密碼', blankText: '請(qǐng)輸入密碼', maxLengthText: '密碼不能超過(guò)20個(gè)字符' }); var numberfield = new Ext.form.NumberField({ fieldLabel: '身高', width: 80, decimalPrecision: 1, minValue: 0.01, maxValue: 200, unitText: ' cm', allowBlank: false, blankText: '請(qǐng)輸入身高' }); 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: '請(qǐng)選擇日期' }); //----------------------單選組開(kāi)始----------------------// 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()); }); //----------------------單選組結(jié)束----------------------// //----------------------復(fù)選組開(kāi)始----------------------// var checkboxgroup = new Ext.form.CheckboxGroup({ fieldLabel: '興趣愛(ài)好', width: 170, items: [{ boxLabel: '看書(shū)', inputValue: '0' }, { boxLabel: '上網(wǎng)', inputValue: '1' }, { boxLabel: '聽(tīng)音樂(lè)', inputValue: '2' }] }); //獲取復(fù)選組的值 checkboxgroup.on('change', function (cbgroup, checked) { for (var i = 0; i < checked.length; i++) { alert(checked[i].getRawValue()); } }); //----------------------復(fù)選組結(jié)束----------------------// //表單 var form = new Ext.form.FormPanel({ frame: true, title: '表單標(biāo)題', style: 'margin:10px', html: '<div style="padding:10px">這里表單內(nèi)容</div>', items: [txtusername, txtpassword, numberfield, hiddenfield, datefield, radiogroup, checkboxgroup], buttons: [btnsubmit, btnreset] }); //窗體 var win = new Ext.Window({ title: '窗口', width: 476, height: 374, html: '<div>這里是窗體內(nèi)容</div>', resizable: true, modal: true, closable: true, maximizable: true, minimizable: true, buttonAlign: 'center', items: form }); win.show(); }); </script> </head> <body> <!-- 說(shuō)明： (1)var radiogroup = new Ext.form.RadioGroup():創(chuàng)建一個(gè)新的單選按鈕組。 (2)name: 'sex'：?jiǎn)芜x按鈕組是按照 name 屬性來(lái)區(qū)分的，同一組中的單選按鈕才能單選， 如果name屬性設(shè)置錯(cuò)誤，該按鈕將會(huì)被認(rèn)為是其他組。 (3)inputValue: '0'：選擇框的值。 (4)boxLabel: '男':選擇框后面的文字說(shuō)明。 (5)checked.getRawValue()：獲取選擇框的選中值，由于單選框只有一個(gè)選中值，可以直接獲取， 而復(fù)選框可以多選，所以要循環(huán)取出。 --> </body> </html> 2.效果如下：
|
|
|
來(lái)自： yan的圖書(shū)41 > 《Extjs》
