-- jollyblume <[email protected]> wrote
(on Tuesday, 11 August 2009, 04:19 PM -0700):
>
> Hi, dijit.form.button displays properly, but none of the dijit.layout.xxx
> widgets display anything.
When you have a BorderContainer that is directly under the <body>
element, as you are doing, you either need to specify inline styles or
styles in your stylesheet for *both* the BorderContainer and the body.
In both cases, you need to specify both a height and width of 100% (as
you already did for the BorderContainer in your example below).
I'd add the following to your /css/global.css file:
body {
height: 100%;
width: 100%;
}
#masterlayout {
height: 100%;
width: 100%;
}
> 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.
>
--
Matthew Weier O'Phinney
Project Lead | [email protected]
Zend Framework | http://framework.zend.com/
