Dojo in Zend_Layout

**Risratorn** · 02-11-2009 12:15 AM

Does anyone have an idea why this doesn't work.
I'm trying to render a Dojo borderContainer in my Zend_Layout that is used across my whole CMS backend. The bizare thing is that when i move the whole code to the view it works like a charm, but when i try to use the Dojo helpers in the Zend_layout nothing happens.

For one or another reason the classes and dojotype attributes don't get rendered on the generated divs, they are just outputted without the right attributes for dojo to transform them into the desired layout.

[PHP]<?php

$this->headLink()->appendStylesheet($this->autover('/admin/css/style.css'));
$this->headTitle()->setSeparator(' :: ');
$this->headTitle()->append('Skyrocket Admin');

echo $this->doctype() ?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<?= $this->headTitle() ?>
<?= $this->headLink() ?>
<?= $this->headStyle() ?>
<?= $this->headScript() ?>

<?
$this->dojo()->setLocalPath('/admin/scripts/dojo/dojo.js')
->addStyleSheetModule('dijit.themes.tundra');
echo $this->dojo();
?>
</head>
<body class="tundra">

<?
/**
* The page layout is a borderContainer, the views
* get rendered in the Center pane
*/
$this->borderContainer()->captureStart('masterLayout',
array('design' => 'headline'),
array('style' => 'width: 100%; height: 100%'));

/**
* The Top panel with the module list
*/
$this->contentPane()->captureStart('topPane',
array('region' => 'left', 'splitter' => true),
array('style' => 'width: 200px'));
// {{{
?>
<ul id="navigation" style="margin: 0">
<li><a href="/admin/pages">Pages</a></li>
<li><a href="/admin/auth/logout">Logout</a></li>
</ul>
<?
// }}}
echo $this->contentPane()->captureEnd('topPane');

/**
* The Center panel with the module list
*/
$this->contentPane()->captureStart('contentPane',
array('region' => 'center'),
array());
// {{{
if(isset($this->flashMessages) && sizeof($this->flashMessages) > 0): foreach($this->flashMessages as $flashMessage):
echo "<p>$flashMessage</p><hr />";
endforeach; endif;

echo $this->layout()->content;
// }}}
echo $this->contentPane()->captureEnd('contentPane');

echo $this->borderContainer()->captureEnd('masterLayout');
?>

</body>
</html>
[/PHP]

**Eugen** · 02-11-2009 07:12 AM

are the dijit.layout.ContentPane and dijit.layout.BorderContainer included in html?

**Risratorn** · 02-11-2009 08:23 AM

Originally Posted by Eugen

are the dijit.layout.ContentPane and dijit.layout.BorderContainer included in html?

Yes, dojo loads fine. the problem is the attributes don't get added to the elements the echo statements produce. Tonight maybe digg a little deeper into the dojo helpers, unless someone else knows what is going on.

**kdeberna** · 02-11-2009 03:38 PM

I am experiencing a very similar problem using Dojo, Zend_Dojo_Form, and a Dijit Dialog (my form is echoed out from the Controller). The Dojo-ized form (a TabContainer) renders correctly from a view script, but when placed in a Dijit Dialog all the elements are rendered but none of the interaction or functionality. I have also successfully created a TabContainer in the Dijit Dialog, but that was from the .js file and was not utilizing Zend_Dojo_Form.

My confusion is why the same form renders correctly in the view script, but not in the Dijit Dialog.

I've attached a screenshot in which you can see 1) the form rendered correctly behind the Dialog, and 2) the exact same form rendered incorrectly in the Dialog.

**Risratorn** · 02-11-2009 07:33 PM

Allright, i found the solution.

The problem lies in the fact that the helpers that create the dijits insert JS code in the <head> of your page using <?= $this->dojo() ?>. This causes a problem because everything Dojo or Dijit related should be executed before this line since this outputs the required code to generate dijits.

When the <?= $this->dojo() ?> line is outputted you CANNOT add more dijits to your layout, be sure to create them before you output <?= $this->dojo() ?>

When i moved all my dijit creation related code to the top of my Layout and later echoed the output at the right location the dijits work like a charm!

**kdeberna** · 02-14-2009 09:51 PM

Risratorn, can you post some of code you are referring to? The problem I am having is that without <?= $this->dojo() ?> I can't add dijits (since dojo.js hasn't been included) but when I add them after <?= $this->dojo() ?> they aren't rendered.

This is the head section of my layout file:
[HTML]<head>
<?php echo $this->headMeta()."\n"; ?>
<?php echo $this->headTitle()."\n"; ?>
<?php echo $this->headLink()."\n"; ?>
<?php
if($this->dojo()->isEnabled()){
$this->dojo()->setLocalPath('/scripts/dojo/dojo.js')
->addStyleSheetModule('dijit.themes.tundra');
echo $this->dojo();
}
?>
<?php echo $this->headScript()."\n"; ?>
</head>[/HTML]

This is a portion of my index.phtml script:
[PHP]<?php $this->dojo()->enable()
->requireModule('dijit.Dialog')
->requireModule('dijit.form.Button')
->requireModule('dijit.layout.TabContainer'); ?>
<?php $this->headScript()->appendFile('addPiece.js'); ?>

<div id="ButtonHolder"><a href="#" id="AddPiece">Add piece</a></div><br /><br />

<p>Filter the results to narrow down to a specific piece.</p>[/PHP]

And this is the included js file, addPiece.js:

Code:

dojo.addOnLoad( function() {
	new dijit.form.Button({label: "Add Piece", id: "Add"}, dojo.byId('ButtonHolder'));
	dojo.connect(dojo.byId("Add"), "onclick", doAdd);
	loadWindow();
});

function loadWindow() {
	var addPieceDialog = new dijit.Dialog({
		title: "Add New Piece",
		href: "/xxxxx/pieces/popup/",
		draggable: false,
		autofocus: false,
		preload: true,
		parseOnLoad: true,
		style: "width: 600px; height: 450px"
	});
	addPieceDialog.startup();
	addPieceDialog.hide();
	doAdd.piece = addPieceDialog;
}

function doAdd(event) {
	dojo.stopEvent(event);
	doAdd.piece.show();
}

The js get's the form from a controller action called popupAction() and is as follows:
[PHP]public function popupAction() {
$this->_helper->layout->disableLayout();
$this->_helper->viewRenderer->setNoRender();
echo new My_TabbedForm;
}[/PHP]

And finally, the actual form is coming from this library file (truncated):
[PHP]<?php

class My_TabbedForm extends Zend_Dojo_Form
{

public function init() {

$this->setDecorators(array(
'FormElements',
array('TabContainer', array(
'id' => 'tabContainer',
'style' => 'width: 525px; height: 300px;',
'dijitParams' => array(
'tabPosition' => 'top'
)
)),
'DijitForm'
));

$subForm1 = new Zend_Dojo_Form_SubForm();
$subForm1->setAttribs(array(
'name' => 'attributesTab',
'legend' => 'Attributes',
'dijitParams' => array(
'title' => 'Attributes'
)
));

$subForm1->addElement('TextBox', 'title', array(
'label' => 'Title:'
));

$subForm1->addElement('Editor', 'description', array(
'label' => 'Description:'
));

$subForm2 = new Zend_Dojo_Form_SubForm();
$subForm2->setAttribs(array(
'name' => 'imagesTab',
'legend' => 'Images',
'dijitParams' => array(
'title' => 'Images'
)
));

$subForm2->addElement('Textarea', 'holder', array(
'label' => 'Holder:'
));

$this->addSubForm($subForm1, 'attributesTab')
->addSubForm($subForm2, 'imagesTab');
}
} ?>[/PHP]

The results should be a dijit dialog (which renders and functions correctly) populated with a two tab TabContainer. The TabContainer is not rendered correctly though. All the form elements appear, but are not styled or dojo enabled.

Any thoughts? Thanks.

**mapes911** · 02-22-2009 07:23 PM

Hey guys,

I too would love to see code on how you solved this problem. Looks like it could help me with my problem.

Loading a dojo form in a div using xhrGet

Thanks!!

**Risratorn** · 02-23-2009 07:03 AM

Well i posted on my blog about it, maybe this could help you guys out?

Dojo Dijits in Zend_Layout | Skyrocket.be

**Venimus** · 06-24-2009 01:30 PM

i had the same problem but fixed it by setting decorators for each subform

[PHP]
$subForm1->setDecorators(array(
'DijitForm',
'FormElements',
'ContentPane',
));
[/PHP]

**mikle19** · 01-18-2010 09:52 PM

I had a problem that dijit BorderContainer wasnt working. Was playing around.
I had to put this string

Code:

<link id="themeStyles" rel="stylesheet" href="/js/dojo/dijit/themes/tundra/tundra.css">

And this only wasnt working

Code:

@import "/js/dojo/dijit/themes/tundra/tundra.css";

Thread: Dojo in Zend_Layout

LinkBack

Thread Tools

Search Thread

Display

Dojo in Zend_Layout

Similar Threads

Zend_Layout issues

Zend_Layout

How to use Zend_Layout ?

zend_layout

Zend_Layout with Zend_View_Smarty

Posting Permissions