くだらないことのないExtJs入門チュートリアル10[ラジオグループ:RadioGroup、チェックグループ:CheckBox Group]
26684 ワード
extjs技術交流、歓迎加群(338456177):
前のセクションに続いて、フォームにラジオ・グループとチェック・グループを追加しました.
1.コードは次のとおりです.
2.効果は以下の通りです.
前のセクションに続いて、フォームにラジオ・グループとチェック・グループを追加しました.
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.効果は以下の通りです.