無廢話ExtJs[單選組：RadioGroup、復選組：CheckBoxGroup]

yan的圖書41 2014-04-25

展開全文

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www./1999/xhtml">
<head>
<title></title>
<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" />
<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());
});
//----------------------單選組結(jié)束----------------------//
//----------------------復選組開始----------------------//
var checkboxgroup = new Ext.form.CheckboxGroup({
fieldLabel: '興趣愛好',
width: 170,
items: [{
boxLabel: '看書',
inputValue: '0'
}, {
boxLabel: '上網(wǎng)',
inputValue: '1'
}, {
boxLabel: '聽音樂',
inputValue: '2'
}]
});
//獲取復選組的值
checkboxgroup.on('change', function (cbgroup, checked) {
for (var i = 0; i < checked.length; i++) {
alert(checked[i].getRawValue());
}
});
//----------------------復選組結(jié)束----------------------//
//表單
var form = new Ext.form.FormPanel({
frame: true,
title: '表單標題',
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>
<!--
說明：
(1)var radiogroup = new Ext.form.RadioGroup():創(chuàng)建一個新的單選按鈕組。
(2)name: 'sex'：單選按鈕組是按照 name 屬性來區(qū)分的，同一組中的單選按鈕才能單選，
如果name屬性設置錯誤，該按鈕將會被認為是其他組。
(3)inputValue: '0'：選擇框的值。
(4)boxLabel: '男':選擇框后面的文字說明。
(5)checked.getRawValue()：獲取選擇框的選中值，由于單選框只有一個選中值，可以直接獲取，
而復選框可以多選，所以要循環(huán)取出。
-->
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www./1999/xhtml">
<head>
     <title></title>
     
     <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" />
     
     <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());
             });
             //----------------------單選組結(jié)束----------------------//
             //----------------------復選組開始----------------------//
             var checkboxgroup = new Ext.form.CheckboxGroup({
                 fieldLabel: '興趣愛好',
                 width: 170,
                 items: [{
                     boxLabel: '看書',
                     inputValue: '0'
                 }, {
                     boxLabel: '上網(wǎng)',
                     inputValue: '1'
                 }, {
                     boxLabel: '聽音樂',
                     inputValue: '2'
                 }]
             });
             //獲取復選組的值
             checkboxgroup.on('change', function (cbgroup, checked) {
                 for (var i = 0; i < checked.length; i++) {
                     alert(checked[i].getRawValue());
                 }
             });
             //----------------------復選組結(jié)束----------------------//
             //表單
             var form = new Ext.form.FormPanel({
                 frame: true,
                 title: '表單標題',
                 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>
     
</body>
</html>
2.效果如下：