-- gordonk66 <[email protected]> wrote
(on Tuesday, 21 July 2009, 02:19 PM -0700):
>
> Hello,
> I'm new to ZF and am trying to build a simple project using the ZEND_DOJO.
> I started by completing the quickstart and all is working as expected.
> I've gone over several different pages that describe how to setup dojo but I
> can't seem to make it display the dijits as expected. Basically I'm trying
> to setup a layout using the dijit BorderContainer and ContentPane. firebug
> tells me that dojo is being loaded, but the created elements are just
> regular div and not dojoized (for lack of a better term). The only way I've
> been able to get dojo widgets is to use the HTML declaration. This proved
> that dojo is loading correctly and it must be something about my php code.
> Here is my code
<snip -- bootstrap -- looks fine>
> application/layouts/scripts/layout.phtml
Your problem is right here. When you use the view helpers in the layout
script, you have a "chicken and the egg" type of problem. On the one
hand, you want to use the dijits; on the other hand, you need to render
the dojo() view helper before any of the Dijit view helpers have been
rendered. In this particular case, the chicken (dojo() view helper)
wins, and renders nothing -- because it hasn't yet been informed of its
children (the dijits).
(In view scripts, this is never an issue, as the layout script is
rendered *after* they have rendered, and thus all has been aggregated.)
The way to get around this in your layout scripts is to move the Dijit
generation to another view script, and render and capture those contents
first.
For instance, I might create this script:
<?php
// application/layouts/scripts/_body.phtml
$this->borderContainer()->captureStart('masterLayout',
array('design' => 'headline'));
echo $this->contentPane(
'menuPane',
'This is the menu pane',
array('region' => 'top'),
array('style' => 'background-color: darkblue;')
);
echo $this->contentPane(
'navPane',
'This is the navigation pane',
array('region' => 'left'),
array('style' => 'width: 200px; background-color: lightblue;')
);
echo $this->contentPane(
'mainPane',
$this->layout()->content ,
array('region' => 'center'),
array('style' => 'background-color: white;')
);
echo $this->contentPane(
'statusPane',
'This is the status pane',
array('region' => 'bottom'),
array('style' => 'background-color: lightgray;')
);
echo $this->borderContainer()->captureEnd('masterLayout');
Then, my layout script would look like this:
<?php
// This is where we render and capture the dijits:
$body = $this->render('_body.phtml');
echo $this->doctype() ?>
<html xmlns="http://www.w3.org/1999/xhtml";>
<head>
<?php echo $this->headMeta() ?>
<?php echo $this->headTitle() ?>
<?php echo $this->headStyle() ?>
<?php echo $this->dojo() ?>
</head>
<body class="tundra">
<?php echo $body ?>
</body>
</html>
Two other notes: When using a BorderContainer, make sure you use a
Strict doctype (not transitional or loose); also, make sure you define
either in the Dijit declaration or a CSS declaration that the
BorderContainer's height and width are 100%.
--
Matthew Weier O'Phinney
Project Lead | [email protected]
Zend Framework | http://framework.zend.com/
