Re: [fw-general] Zend Dojo Dijit layout issue using Zend_Dojo_View_Helper

Tue, 11 Aug 2009 16:19:18 -0700 

Hi, dijit.form.button displays properly, but none of the dijit.layout.xxx
widgets display anything.

my layout.phtml file looks like this:
<?php echo $this->doctype(); ?>
<html xmlns="http://www.w3.org/1999/xhtml";> 
<head>  
<?php
        echo $this->headMeta();
        echo $this->headTitle();
        echo $this->headLink()/*->appendStylesheet('/css/global.css')*/;
        echo $this->headStyle();

//      $layoutBody = $this->action('masterlayout', 'layout');
        
        if ($this->dojo()->isEnabled()) {
                $this->dojo()
                        ->setLocalPath('/js/dojo/dojo.js')
                        ->addStyleSheetModule('dijit.themes.tundra')
                        ->registerDojoStylesheet(true);
                echo $this->dojo();
        }

        echo $this->headScript();
?>
</head>
<body class="tundra">
<?php
//      echo $layoutBody;
        echo $this->layout()->content;
        echo $this->inlineScript();
?>
</body>
</html>

and my index.phtml file looks like this:
<?php $this->headTitle('Main Page');

//$this->borderContainer()
//      ->captureStart('masterLayout',
//      array('design' => 'headline'),
//      array('style' => 'width: 100%; height: 100%;'));
//
//echo $this->contentPane('titlePane',
//      'This is the title pane...'/*$this->action('titlepane', 'layout')*/,
//      array('region' => 'top'));
//
//echo $this->contentPane('navPane',
//      $this->action('navpane', 'layout'),
//      array('region' => 'left', 'splitter' => true, 'orientation' =>
'vertical'),
//      array());
//
//echo $this->contentPane('statusPane',
//      $this->action('statuspane', 'layout'),
//      array('region' => 'bottom'),
//      array());
//
//echo $this->contentPane('contentPane',
//      'This is the content pane...<br>' . $this->button('helloButton', 'Hello
World')/*$this->layout()->content*/,
//      array('region' => 'center'));
//
//echo $this->borderContainer()->captureEnd('masterLayout');


$this->borderContainer()->captureStart('masterLayout',
                                       array('design' => 'headline'),
                                       array('style' => 'width: 100%;
height: 100%;'));

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 is the main content pane area',
    array('region' => 'center'),
    array('style' => 'background-color: white;')
);

echo $this->contentPane(
    'statusPane',
    'Status area',
    array('region' => 'bottom'),
    array('style' => 'background-color: lightgray;')
);

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

But when I view the page, nothing displays and no errors are recorded in the
logs.

My page source looks like this from the browser:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd";><html
xmlns="http://www.w3.org/1999/xhtml";> 
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Language" content="en-US" /><title>OpenEMR - Main
Page</title><style type="text/css">
<!--
    @import "/js/dijit/themes/tundra/tundra.css";
    @import "/js/dojo/resources/dojo.css";
-->
</style>

<script type="text/javascript" src="/js/dojo/dojo.js"></script>

<script type="text/javascript">
//<![CDATA[
dojo.require("dijit.layout.ContentPane");
    dojo.require("dijit.layout.BorderContainer");
    dojo.require("dojo.parser");
dojo.addOnLoad(function() {
    dojo.forEach(zendDijits, function(info) {
        var n = dojo.byId(info.id);
        if (null != n) {
            dojo.attr(n, dojo.mixin({ id: info.id }, info.params));
        }
    });
    dojo.parser.parse();
});
var zendDijits =
[{"id":"menuPane","params":{"region":"top","dojoType":"dijit.layout.ContentPane"}},{"id":"navPane","params":{"region":"left","dojoType":"dijit.layout.ContentPane"}},{"id":"mainPane","params":{"region":"center","dojoType":"dijit.layout.ContentPane"}},{"id":"statusPane","params":{"region":"bottom","dojoType":"dijit.layout.ContentPane"}},{"id":"masterLayout","params":{"design":"headline","dojoType":"dijit.layout.BorderContainer"}}];
//]]>

</script></head>
<body class="tundra">
<div style="width: 100%; height: 100%;" id="masterLayout"><div
style="background-color: darkblue;" id="menuPane">This is the menu
pane</div>
<div style="width: 200px; background-color: lightblue;" id="navPane">This is
the navigation pane</div>

<div style="background-color: white;" id="mainPane">This is the main content
pane area</div>
<div style="background-color: lightgray;" id="statusPane">Status area</div>
</div>
</body>
</html>

I'm beating my head on this problem and have not been able to find an answer
yet.

If I do:

   <?php echo $this->button('helloButton', 'Hello World'); ?>

then the dojo button displays just fine...

Any ideas?
-- 
View this message in context: 
http://www.nabble.com/Zend-Dojo-Dijit-layout-issue-using-Zend_Dojo_View_Helper-tp24596067p24927443.html
Sent from the Zend Framework mailing list archive at Nabble.com.

Reply via email to