Caution: The documentation you are viewing is
for an older version of Zend Framework.
You can find the documentation of the current version at docs.zendframework.com
ZendX_JQuery Form Elements and Decorators - ZendX_JQuery
All View Helpers are pressed into Zend_Form elements or decorators also. They can even be
easily integrated into your already existing forms. To enable a Form for Zend_JQuery support
you can use two ways: Init your form as
$form = new ZendX_JQuery_Form(); or
use the static method ZendX_JQuery::enableForm($form) to enable jQuery element support.
Both elements and decorators of the Zend jQuery Form set can be initialized with
the option key
jQueryParams to set certain jQuery object related parameters.
This jQueryParams array of options matches to the $params variable
of the corresponding view helpers. For example:
Additionally elements jQuery options can be customized by the following methods:
setJQueryParam($name, $value): Set the jQuery option $name to the given value.
setJQueryParams($params): Set key value pairs of jQuery options and merge them with the already set options.
getJQueryParam($name): Return the jQuery option with the given name.
getJQueryParams(): Return an array of all currently set jQuery options.
Each jQuery related Decorator also owns a getJQueryParams() method, to set options you have to use the setDecorators(), addDecorator() or addDecorators() functionality of a form element and set the jQueryParams key as option:
The Zend Framework jQuery Extras Extension comes with the following Form Elements:
ZendX_JQuery_Form_Element_AutoComplete: Proxy to AutoComplete View Helper
ZendX_JQuery_Form_Element_ColorPicker: Proxy to ColorPicker View Helper
ZendX_JQuery_Form_Element_DatePicker: Proxy to DatePicker View Helper
ZendX_JQuery_Form_Element_Slider: Proxy to Slider View Helper
ZendX_JQuery_Form_Element_Spinner: Proxy to Spinner View Helper
Note: jQuery Decorators: Beware the Marker Interface for UiWidgetElements
By default all the jQuery Form elements use the
ZendX_JQuery_Form_Decorator_UiWidgetElementdecorator for rendering the jQuery element with its specific view helper. This decorator is inheritly different from the ViewHelper decorator that is used for most of the default form elements in Zend_Form. To ensure that rendering works correctly for jQuery form elements at least one decorator has to implement the
ZendX_JQuery_Form_Decorator_UiWidgetElementMarkerinterface, which the default decorator does. If no marker interface is found an exception is thrown. Use the marker interface if you want to implement your own decorator for the jQuery form element specific rendering.
The following Decorators come with the Zend Framework jQuery Extension:
ZendX_JQuery_Form_Decorator_AccordionContainer: Proxy to AccordionContainer View Helper
ZendX_JQuery_Form_Decorator_AccordionPane: Proxy to AccordionPane View Helper
ZendX_JQuery_Form_Decorator_DialogContainer: Proxy to DialogContainer View Helper
ZendX_JQuery_Form_Decorator_TabContainer: Proxy to TabContainer View Helper
ZendX_JQuery_Form_Decorator_TabPane: Proxy to TabPane View Helper
ZendX_JQuery_Form_Decorator_UiWidgetElement: Decorator to Display jQuery Form Elements
Utilizing the Container elements is a bit more complicated, the following example builds a Form with 2 SubForms in a TabContainer:
Example #1 SubForms with TabContainer Decorator
The following example makes use of all Form elements and wraps them into 2 subforms that are decorated with a tab container. First
we build the basic
Setting the Form Id (in this case to 'mainForm') is an important step for the TabContainer. It is needed that the subforms can relate
to the Container Id in a later form building stage. We now initialize two SubForms that will be decorated with the
In this stage it is important that the
'containerId' option is set in each SubForm TabPane, or the subforms
cannot relate back to the tab Container and would not be displayed. To enforce this setting, an exception of the type
is thrown if the option is not set. We can now add all the desired elements to the subforms:
Three additional lines are missing to put it all together and we have a jQuery animated form:
Example #2 Wrapping a Form into the Dialog Container
The only use for the Dialog Container in Zend Form context is to wrap itself around a form and display it in a dialog. Its important to remember that the order of the decorators has to be different than in the Accordion and Tab Container examples.