[fw-general] a Dojo tab container inherits forbidden attributes from the form

[Guillaume ORIOL]

Hi,

The mailing list was not very active on monday...
May be I will be more lucky today with the following question:

-------- Message original --------
Sujet:  a Dojo tab container inherits forbidden attributes from the form
Date :  Mon, 04 Jan 2010 13:22:27 +0100
De :    Guillaume ORIOL <gor...@technema.fr>
Pour :  fw-general@lists.zend.com


Hi,

While using tabs in Dojo forms (as explained in ZF doc), I encountered an issue:
the tab container inherits forbidden attributes from the form itself (name, 
method, action).

Likewise, would someone explain me how to get the submit button outside of the 
tab container?
(See below the way I tried.)

Thanks,
--
Guillaume

Here is the form class:
class Form_Customer extends Zend_Dojo_Form
{
    public function init()
    {
        $this->setName(get_class($this))->setMethod('post');
        $this->setDecorators(array(
            'FormElements',
            array('TabContainer', array(
                'id'          =>  'tabContainer',
                'style'       =>  'width: 100%; height: 450px;',
                'dijitParams' =>  array('tabPosition' =>  'top'),
            )),
            'DijitForm',
        ));

        $tab1 = new Zend_Dojo_Form_SubForm();
        $tab1->setAttribs(array(
            'name'   =>  'firsttab',
            'legend' =>  'Legend 1',
            'dijitParams' =>  array('title' =>  'Title 1')));

        $el = new Zend_Dojo_Form_Element_TextBox('first_name');
        $el->setLabel('first name');
        $tab1->addElement($el);

        $tab2 = new Zend_Dojo_Form_SubForm();
        $tab2->setAttribs(array(
            'name'   =>  'secondtab',
            'legend' =>  'Legend 2',
            'dijitParams' =>  array('title' =>  'Title 2')));

        $el = new Zend_Dojo_Form_Element_TextBox('last_name');
        $el->setLabel('last name');
        $tab2->addElement($el);

        $this->addSubForm($tab1, 'firsttab')
             ->addSubForm($tab2, 'secondtab')
             ->addElement('Button', 'foo', array('label' =>  'Button
Label'));
    }
}

And the generated HTML code:

<form  id="Form_Customer"method="post"action="/customer/add">
  <div  
name="Form_Customer"method="post"action="/customer/add"id="Form_Customer-TabContainer"style="width:
 100%; height: 450px;">
    <div  name="firsttab"id="firsttab-ContentPane"><dl>
      <dt  id="first_name-label"><label  for="firsttab-first_name"class="optional">first 
name</label></dt>
      <dd><input  
id="firsttab-first_name"name="firsttab[first_name]"value=""type="text"/></dd>
    </dl></div>

    <div  name="secondtab"id="secondtab-ContentPane"><dl>
      <dt  id="last_name-label"><label  for="secondtab-last_name"class="optional">last 
name</label></dt>
      <dd><input  
id="secondtab-last_name"name="secondtab[last_name]"value=""type="text"/></dd>
    </dl></div>

    <dt  id="foo-label">&nbsp;</dt>
    <dd  id="foo-element"><button  name="foo"id="foo"type="button">Button 
Label</button></dd>
  </div>
</form>

--
Guillaume ORIOL