- 2008-04-29 (火) 7:00
- Zend_Form
intro
AjaxによるZend Formでのオートコンプリートを行います。Dojoを使用しています。
デモサイトより動作を確認できます。
デモサイトより動作を確認できます。
1.コントローラの作成
以下のように
application/constorllers/LocaleController.phpファイルを作成します。
<?php require_once 'Zend/Controller/Action.php'; require_once 'Zend/Form.php'; require_once 'Zend/Locale.php'; class LocaleController extends Zend_Controller_Action { public function getForm() { $form = new Zend_Form(); $form->setName('localeForm') ->setAction($this->_request->getBaseUrl() . '/locale/index') ->setMethod('post'); $decorators = array( 'ViewHelper', array('HtmlTag', array('tag' => 'dt', 'class' => 'submit')) ); $element = $form->createElement('text', 'element'); $element->setLabel('Locale') ->setAttrib('dojoType', array('dijit.form.ComboBox')) ->setAttrib('store', 'localeStore') ->setAttrib('autoComplete', 'true') ->setAttrib('hasDownArrow', 'true') ->setRequired(true) ->addFilter('stringTrim') ->addValidator('stringLength', false, array(1,10)); $submit = $form->createElement('submit', 'submit'); $submit->setLabel('Send') ->setDecorators($decorators); $form->addElements(array( $element, $submit )); return $form; } public function indexAction() { $form = $this->getForm(); if ($this->getRequest()->isPost()) { if ($form->isValid($_POST)) { $values = $form->getValues(); $this->view->values = $values; } } $this->view->form = $form; } public function processAction() { $data = Zend_Locale::getLocaleList(); $this->_helper->autoCompleteDojo(array_keys($data)); } }
2.ビューの作成
以下のように
application/views/scripts/locale/index.phtmlファイルを作成します。
<h1><?= $this->translate('Your Locale'); ?></h1> <?php if($this->values) : ?> <h3><?= $this->translate('You just submitted the following values'); ?>:</h3> <ul> <?php foreach ($this->values as $value) :?> <li> <?= $this->escape($value); ?> </li> <?php endforeach; ?> </ul> <?php else : ?> <?= $this->form; ?> <?php endif; ?> <style type="text/css"> @import "<?= $this->baseUrl ?>/js/dijit/themes/tundra/tundra.css"; @import "<?= $this->baseUrl ?>/js/dojo/resources/dojo.css"; </style> <script type="text/javascript"> var djConfig = { isDebug:true, parseOnLoad:true }; </script> <script type="text/javascript" src="<?= $this->baseUrl . '/js/dojo/dojo.js'?>"> </script> <script type="text/javascript"> dojo.require("dojo.parser"); dojo.require("dojox.data.QueryReadStore"); dojo.require("dijit.form.ComboBox"); dojo.require("dojo.data.ItemFileReadStore"); var localeStore = new dojo.data.ItemFileReadStore({ url:"<?=$this->url(array('action'=>'process'))?>" }); </script>
また以下のようにbodyタグのスタイルクラスを指定します。
<body class="tundra">
3.確認
Webサーバにアクセスし、オートコンプリートが行われていることを確認してください。
履歴
| 日付 | 内容 |
|---|---|
| 2008/4/29 | 公開 |
| 2008/4/29 | bodyタグのクラス指定を追記しました。 |
- Newer: Zend_FormでのDojoウィジェットの使用
- Older: Zend_Formのバリデーション(Ajax版)
Comments:0
Trackbacks:0
- Trackback URL for this entry
- http://www.oplabo.jp/article/37/trackback
- Listed below are links to weblogs that reference
- Zend_Formでのオートコンプリートの使用 from Open Programming Laboratory