Mar 10
3
Tab Container Enabled Forms
Nathan Garlington wrote a nice solution for Tab based forms; Yes, it is possible to display a form in a tabContainer. I do it all the time, including using other dijit containers as well. keep in mind that this is just my solution…there are probably other ways to do this. Feel free to customize it according to your needs. Also, you may notice that I don’t include an action attrib or method attrib declaration to the form node itself…this is because I handle form submitting via xhr. Example code below:
class My_Form extends Zend_Dojo_Form
{
public function init()
{
$this->setDisableLoadDefaultDecorators(true);
// setup the our default decorators
$this->setDecorators(array(
’FormElements’,
array(‘TabContainer’, array(
‘id’ => ‘myTabContainer’,
‘style’ => ‘width: 950px; height: 420px;’,
‘dijitParams’ => array(‘tabPosition’ => ‘top’),
)),
’DijitForm’,
));
$this->setName(‘myAddTrailerForm’);
$this->setElementDecorators(array(
array(‘DijitElement’),
array(‘Description’),
array(‘HtmlTag’, array(‘tag’ => ‘dd’)),
array(‘Label’, array(‘tag’ => ‘dt’)),
));
//call custom class methods to add form members
$this->_addElements()
->_addDisplayGroups();
}
private function _addElements()
{
$this->addElements(array(
// general information display group elements
new Zend_Dojo_Form_Element_FilteringSelect(‘field1’, array(
’label’ => ‘First Field:’,
’multiOptions’ =>(array(
’option1’ => ‘option1’,
’option2’ => ‘option2’
)),
’required’ => true,
)),
new Zend_Dojo_Form_Element_CheckBox(‘cb1’, array(
’label’ => ‘Are you sure?:’,
)),
new Zend_Dojo_Form_Element_FilteringSelect(‘year’, array(
’label’ => ‘Year:’,
’multiOptions’ => array(/*.…*/),
’required’ => true,
)),
new Zend_Dojo_Form_Element_ComboBox(‘comboBox1’, array(
’label’ => ‘ComboBox1:’,
’multiOptions’ => array(/*.…*/),
’required’ => true,
’autocomplete’ => false,
’attribs’ => (array(‘propercase’ => true, ‘trim’ =>true)),
)),
new Zend_Dojo_Form_Element_ValidationTextBox(‘validationBox1’, array(
’label’ => ‘ValidationBox1:’,
’required’ => true,
’attribs’ => array(‘uppercase’ => true, ‘trim’ =>true),
)),
new Zend_Dojo_Form_Element_ValidationTextBox(‘validationBox2’, array(
’label’ => ‘ValidationBox2:’,
’required’ => true,
’invalidMessage’ => “Please enter a value”,
’attribs’ => array(‘maxlength’ => 17, ‘uppercase’ => true, ‘trim’ =>true),
’filters’ => array(‘StringToUpper’),
’validators’ => array(‘Alnum’),
)),
)); // end $this->addElements
return $this;
} // end _addElements()
/**
* Create the tabbed container layout
*/
private function _addDisplayGroups()
{
// add the display groups
$this->addDisplayGroup(
array( // elements in the displayGroup
’field1’,
‘cb1’
),
’generalInformation’ // displayGroupName
);
$this->generalInformation->setDecorators(array(
’FormElements’,
array(‘HtmlTag’, array(‘tag’ => ‘dl’)),
array(
’ContentPane’, array(
’title’ => ‘General Information’
)
)
));
$this->addDisplayGroup(
array(
’year’,
‘comboBox1’,
),
’tab2’
);
$this->tab2->setDecorators(array(
‘FormElements’,
array(‘HtmlTag’, array(‘tag’ => ‘dl’),
array(
‘ContentPane’, array(
‘title’ => ‘Tab 2′
)
)
));
$this->addDisplayGroup(
array(
’validationBox1’,
’validationBox2’,
),
’tab2’
);
$this->tab2->setDecorators(array(
‘FormElements’,
array(‘HtmlTag’, array(‘tag’ => ‘dl’, ‘class’ => ‘addTrailer’)),
array(
‘ContentPane’, array(
‘title’ => ‘Axles’
)
)
));
return $this;
} // end _addDisplayGroups();
public function buttonsSubForm()
{
$subForm = new Zend_Dojo_Form_SubForm();
$subForm->setDecorators(array(
’FormElements’,
array(‘HtmlTag’, array(‘tag’ => ‘div’, ‘id’ => ‘buttonsSubForm’, ‘class’ => ‘span-7 push-3 prepend-top’)),
))
->setElementDecorators(array(
array(‘DijitElement’),
))
->addElements(array(
new Zend_Dojo_Form_Element_Button(‘submit’, array(
’type’ => ‘button’,
’label’ => ‘Submit it!’,
’attribs’ => array(‘disabled’ => ‘disabled’),
)),
new Zend_Dojo_Form_Element_Button(‘cancel’, array(
’label’ => ‘Cancel’,
)),
));
$subForm->submit->removeDecorator(‘DtDdWrapper’);
$subForm->cancel->removeDecorator(‘DtDdWrapper’);
return $subForm;
} // end buttonsSubForm();
} // end class
That’s it. There may be some errors in there, but the idea is there. As you can see, once you see you how it goes together, it’s actually trivial to add dijit layout containers to a zend form. Be sure that you are in fact extending Zend_Dojo_Form, or using one of the other methods shown in the docs for dojo-enabling your form. You may or may not like the buttons subForm I use here either…I do this because otherwise the submit buttons have to be in their own tab, and that makes it confusing for some of my users…they don’t know where the buttons are to submit the form. So I display them in a div that renders outside the tab container, disable the submit button, and using dojo’s methods, I enable the button on the onValidStateChange dojo event. Let me know if you have any questions!
regards,
Nathan Garlington
