| blob | c98f448fc7750982c01f078583a3dad6249f508b |
1 <sect2 id="zend.dojo.form.examples">
2 <title>Dojo 表单范例</title>
4 <example id="zend.dojo.form.examples.dojoform">
5 <title>使用 Zend_Dojo_Form</title>
7 <para>
8 和 <code>Zend_Form</code> 一起使用 Dojo的最容易的办法是利用 <code>Zend_Dojo_Form</code>，
9 直接使用或继承都可以。这个范例继承 Zend_Dojo_Form，并示范了所有 dijit 元素的用法。
10 它生成了四个子表单，并装饰了表单来使用 TabContainer，把每个子表单显示在它自己的 tab 上。
11 </para>
13 <programlisting role="php"><![CDATA[
14 class My_Form_Test extends Zend_Dojo_Form
15 {
16 /**
17 * Options to use with select elements
18 */
19 protected $_selectOptions = array(
20 'red' => 'Rouge',
21 'blue' => 'Bleu',
22 'white' => 'Blanc',
23 'orange' => 'Orange',
24 'black' => 'Noir',
25 'green' => 'Vert',
26 );
28 /**
29 * Form initialization
30 *
31 * @return void
32 */
33 public function init()
34 {
35 $this->setMethod('post');
36 $this->setAttribs(array(
37 'name' => 'masterForm',
38 ));
39 $this->setDecorators(array(
40 'FormElements',
41 array('TabContainer', array(
42 'id' => 'tabContainer',
43 'style' => 'width: 600px; height: 500px;',
44 'dijitParams' => array(
45 'tabPosition' => 'top'
46 ),
47 )),
48 'DijitForm',
49 ));
50 $textForm = new Zend_Dojo_Form_SubForm();
51 $textForm->setAttribs(array(
52 'name' => 'textboxtab',
53 'legend' => 'Text Elements',
54 'dijitParams' => array(
55 'title' => 'Text Elements',
56 ),
57 ));
58 $textForm->addElement(
59 'TextBox',
60 'textbox',
61 array(
62 'value' => 'some text',
63 'label' => 'TextBox',
64 'trim' => true,
65 'propercase' => true,
66 )
67 )
68 ->addElement(
69 'DateTextBox',
70 'datebox',
71 array(
72 'value' => '2008-07-05',
73 'label' => 'DateTextBox',
74 'required' => true,
75 )
76 )
77 ->addElement(
78 'TimeTextBox',
79 'timebox',
80 array(
81 'label' => 'TimeTextBox',
82 'required' => true,
83 )
84 )
85 ->addElement(
86 'CurrencyTextBox',
87 'currencybox',
88 array(
89 'label' => 'CurrencyTextBox',
90 'required' => true,
91 // 'currency' => 'USD',
92 'invalidMessage' => 'Invalid amount. Include dollar sign, commas, and cents.',
93 // 'fractional' => true,
94 // 'symbol' => 'USD',
95 // 'type' => 'currency',
96 )
97 )
98 ->addElement(
99 'NumberTextBox',
100 'numberbox',
101 array(
102 'label' => 'NumberTextBox',
103 'required' => true,
104 'invalidMessage' => 'Invalid elevation.',
105 'constraints' => array(
106 'min' => -20000,
107 'max' => 20000,
108 'places' => 0,
109 )
110 )
111 )
112 ->addElement(
113 'ValidationTextBox',
114 'validationbox',
115 array(
116 'label' => 'ValidationTextBox',
117 'required' => true,
118 'regExp' => '[\w]+',
119 'invalidMessage' => 'Invalid non-space text.',
120 )
121 )
122 ->addElement(
123 'Textarea',
124 'textarea',
125 array(
126 'label' => 'Textarea',
127 'required' => true,
128 'style' => 'width: 200px;',
129 )
130 );
131 $toggleForm = new Zend_Dojo_Form_SubForm();
132 $toggleForm->setAttribs(array(
133 'name' => 'toggletab',
134 'legend' => 'Toggle Elements',
135 ));
136 $toggleForm->addElement(
137 'NumberSpinner',
138 'ns',
139 array(
140 'value' => '7',
141 'label' => 'NumberSpinner',
142 'smallDelta' => 5,
143 'largeDelta' => 25,
144 'defaultTimeout' => 1000,
145 'timeoutChangeRate' => 100,
146 'min' => 9,
147 'max' => 1550,
148 'places' => 0,
149 'maxlength' => 20,
150 )
151 )
152 ->addElement(
153 'Button',
154 'dijitButton',
155 array(
156 'label' => 'Button',
157 )
158 )
159 ->addElement(
160 'CheckBox',
161 'checkbox',
162 array(
163 'label' => 'CheckBox',
164 'checkedValue' => 'foo',
165 'uncheckedValue' => 'bar',
166 'checked' => true,
167 )
168 )
169 ->addElement(
170 'RadioButton',
171 'radiobutton',
172 array(
173 'label' => 'RadioButton',
174 'multiOptions' => array(
175 'foo' => 'Foo',
176 'bar' => 'Bar',
177 'baz' => 'Baz',
178 ),
179 'value' => 'bar',
180 )
181 );
182 $selectForm = new Zend_Dojo_Form_SubForm();
183 $selectForm->setAttribs(array(
184 'name' => 'selecttab',
185 'legend' => 'Select Elements',
186 ));
187 $selectForm->addElement(
188 'ComboBox',
189 'comboboxselect',
190 array(
191 'label' => 'ComboBox (select)',
192 'value' => 'blue',
193 'autocomplete' => false,
194 'multiOptions' => $this->_selectOptions,
195 )
196 )
197 ->addElement(
198 'ComboBox',
199 'comboboxremote',
200 array(
201 'label' => 'ComboBox (remoter)',
202 'storeId' => 'stateStore',
203 'storeType' => 'dojo.data.ItemFileReadStore',
204 'storeParams' => array(
205 'url' => '/js/states.txt',
206 ),
207 'dijitParams' => array(
208 'searchAttr' => 'name',
209 ),
210 )
211 )
212 ->addElement(
213 'FilteringSelect',
214 'filterselect',
215 array(
216 'label' => 'FilteringSelect (select)',
217 'value' => 'blue',
218 'autocomplete' => false,
219 'multiOptions' => $this->_selectOptions,
220 )
221 )
222 ->addElement(
223 'FilteringSelect',
224 'filterselectremote',
225 array(
226 'label' => 'FilteringSelect (remoter)',
227 'storeId' => 'stateStore',
228 'storeType' => 'dojo.data.ItemFileReadStore',
229 'storeParams' => array(
230 'url' => '/js/states.txt',
231 ),
232 'dijitParams' => array(
233 'searchAttr' => 'name',
234 ),
235 )
236 );
237 $sliderForm = new Zend_Dojo_Form_SubForm();
238 $sliderForm->setAttribs(array(
239 'name' => 'slidertab',
240 'legend' => 'Slider Elements',
241 ));
242 $sliderForm->addElement(
243 'HorizontalSlider',
244 'horizontal',
245 array(
246 'label' => 'HorizontalSlider',
247 'value' => 5,
248 'minimum' => -10,
249 'maximum' => 10,
250 'discreteValues' => 11,
251 'intermediateChanges' => true,
252 'showButtons' => true,
253 'topDecorationDijit' => 'HorizontalRuleLabels',
254 'topDecorationContainer' => 'topContainer',
255 'topDecorationLabels' => array(
256 ' ',
257 '20%',
258 '40%',
259 '60%',
260 '80%',
261 ' ',
262 ),
263 'topDecorationParams' => array(
264 'container' => array(
265 'style' => 'height:1.2em; font-size=75%;color:gray;',
266 ),
267 'list' => array(
268 'style' => 'height:1em; font-size=75%;color:gray;',
269 ),
270 ),
271 'bottomDecorationDijit' => 'HorizontalRule',
272 'bottomDecorationContainer' => 'bottomContainer',
273 'bottomDecorationLabels' => array(
274 '0%',
275 '50%',
276 '100%',
277 ),
278 'bottomDecorationParams' => array(
279 'list' => array(
280 'style' => 'height:1em; font-size=75%;color:gray;',
281 ),
282 ),
283 )
284 )
285 ->addElement(
286 'VerticalSlider',
287 'vertical',
288 array(
289 'label' => 'VerticalSlider',
290 'value' => 5,
291 'style' => 'height: 200px; width: 3em;',
292 'minimum' => -10,
293 'maximum' => 10,
294 'discreteValues' => 11,
295 'intermediateChanges' => true,
296 'showButtons' => true,
297 'leftDecorationDijit' => 'VerticalRuleLabels',
298 'leftDecorationContainer' => 'leftContainer',
299 'leftDecorationLabels' => array(
300 ' ',
301 '20%',
302 '40%',
303 '60%',
304 '80%',
305 ' ',
306 ),
307 'rightDecorationDijit' => 'VerticalRule',
308 'rightDecorationContainer' => 'rightContainer',
309 'rightDecorationLabels' => array(
310 '0%',
311 '50%',
312 '100%',
313 ),
314 )
315 );
317 $this->addSubForm($textForm, 'textboxtab')
318 ->addSubForm($toggleForm, 'toggletab')
319 ->addSubForm($selectForm, 'selecttab')
320 ->addSubForm($sliderForm, 'slidertab');
321 }
322 }
323 ]]></programlisting>
324 </example>
326 <example id="zend.dojo.form.examples.decorating">
327 <title> 修改已存在的表单来使用 Dojo </title>
329 <para>
330 通过使用 <code>Zend_Dojo::enableForm()</code> 静态方法，已存在的表单也可以使用 Dojo。
331 </para>
333 <para>
334 第一个范例示范装饰已存在的表单实例：
335 </para>
337 <programlisting role="php"><![CDATA[
338 $form = new My_Custom_Form();
339 Zend_Dojo::enableForm($form);
340 $form->addElement(
341 'ComboBox',
342 'query',
343 array(
344 'label' => 'Color:',
345 'value' => 'blue',
346 'autocomplete' => false,
347 'multiOptions' => array(
348 'red' => 'Rouge',
349 'blue' => 'Bleu',
350 'white' => 'Blanc',
351 'orange' => 'Orange',
352 'black' => 'Noir',
353 'green' => 'Vert',
354 ),
355 )
356 );
357 ]]></programlisting>
359 <para>
360 另外，你可以在表单初始化上做点小文章：
361 </para>
363 <programlisting role="php"><![CDATA[
364 class My_Custom_Form extends Zend_Form
365 {
366 public function init()
367 {
368 Zend_Dojo::enableForm($this);
370 // ...
371 }
372 }
373 ]]></programlisting>
375 <para>
376 当然，如果你可以那样做 ... 你可以并应该简单地修改类来继承 Zend_Dojo_Form，
377 它可以随时替换已经 Dojo-enabled 的 Zend_Form ...
378 </para>
379 </example>
380 </sect2>
381 <!--
382 vim:se ts=4 sw=4 et:
383 -->