Dojo in Zend_Layout

Risratorn · #1 (**permalink**) 02-11-2009, 01: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 · #2 (**permalink**) 02-11-2009, 08:12 AM

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

Risratorn · #3 (**permalink**) 02-11-2009, 09:23 AM

Quote:

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 · #4 (**permalink**) 02-11-2009, 04: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 · #5 (**permalink**) 02-11-2009, 08: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 · #6 (**permalink**) 02-14-2009, 10: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 · #7 (**permalink**) 02-22-2009, 08: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 · #8 (**permalink**) 02-23-2009, 08: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 · #9 (**permalink**) 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 · #10 (**permalink**) 01-18-2010, 10: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 Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode