Problem with a inner layout and toolbar - Ext JS

#2 03-02-2007, 04:47 PM

Quote:

Originally Posted by malotor

I have a toolbar in content panel. I's works perfectly but when I put a layout in the container give me a js error.

My html[...]

	    <script type="text/javascript" src="./yui-ext/yui-utilities.js"></script>
	    <script type="text/javascript" src="./yui-ext/ext-all.js"></script>
	    <script type="text/javascript" src="./yui-ext/ext-bridge-yui.js"></script>

[...]What's wrong ????

I'm not sure if this will resolve the issues, but...

Old way:

yui-utilities.js
ext-all.js
ext-bridge-yui.js

New way:

yui-utilities.js or jquery.js
ext-yui-adapter.js or ext-jquery-adapter.js
ext-all.js (or core)

Try this:

Fresh out of the ext-1.0-alpha2.zip I got the toolbar working in the layout. In the examples folder, I dropped the menu folder files into the layout folder, updated the header in complex.html, and made two <div> right after the <body>(one for the toolbar and one for the layout.) One more thing, after that I changed the document.body to document.getElementById('myDiv'), and other than that the rest of the js is unmodified.

<html>
<head>
  <title>Complex Layout</title>
	<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />

         <script type="text/javascript" src="../../yui-utilities.js"></script>     <script type="text/javascript" src="../../ext-yui-adapter.js"></script>     
    <script type="text/javascript" src="../../ext-all.js"></script>
    
    
    <script type="text/javascript" src="menus.js"></script>
    <link rel="stylesheet" type="text/css" href="menus.css" />
    
    <link rel="stylesheet" type="text/css" href="../examples.css" />
  
    
	<style type="text/css">
	body {font:normal 9pt verdana; margin:0;padding:0;border:0px none;overflow:hidden;}
	.x-layout-panel-north {
	    border:0px none;
	}
	#nav {
	}
	#autoTabs, #center1, #center2, #west {
	    padding:10px;
	}
	#north, #south{
	    font:normal 8pt arial, helvetica;
	    padding:4px;
	}
	.x-layout-panel-center p {
	    margin:5px;
	}
	#props-panel .x-grid-col-0{
	}
	#props-panel .x-grid-col-1{
	}
	</style>
	<script type="text/javascript">
	
	Example = function(){
	        var layout;
	        return {
	            init : function(){
	               layout = new Ext.BorderLayout(document.getElementById('myDiv'), {
	                    hideOnLayout: true,
	                    north: {
	                        split:false,
	                        initialSize: 32,
	                        titlebar: false
	                    },
	                    west: {
	                        split:true,
	                        initialSize: 200,
	                        minSize: 175,
	                        maxSize: 400,
	                        titlebar: true,
	                        collapsible: true,
                            animate: true
	                    },
	                    east: {
	                        split:true,
	                        initialSize: 202,
	                        minSize: 175,
	                        maxSize: 400,
	                        titlebar: true,
	                        collapsible: true,
                            animate: true
	                    },
	                    south: {
	                        split:true,
	                        initialSize: 100,
	                        minSize: 100,
	                        maxSize: 200,
	                        titlebar: true,
	                        collapsible: true,
                            animate: true
	                    },
	                    center: {
	                        titlebar: true,
	                        autoScroll:true,
                            closeOnTab: true
                        }
	                });

                    layout.beginUpdate();
	                layout.add('north', new Ext.ContentPanel('north', 'North'));
	                layout.add('south', new Ext.ContentPanel('south', {title: 'South', closable: true}));
	                layout.add('west', new Ext.ContentPanel('west', {title: 'West'}));
	                layout.add('east', new Ext.ContentPanel(Ext.id(), {autoCreate:true, title: 'Dynamic Tab', closable: true}));
	                layout.add('east', new Ext.ContentPanel('autoTabs', {title: 'Auto Tabs', closable: true}));
	                layout.add('center', new Ext.ContentPanel('center1', {title: 'Close Me', closable: true}));
	                layout.add('center', new Ext.ContentPanel('center2', {title: 'Center Panel', closable: false}));
	                layout.getRegion('center').showPanel('center1');
	                layout.getRegion('west').hide();
	                layout.endUpdate();
	           },
	           
	           toggleWest : function(link){
	                var west = layout.getRegion('west');
	                if(west.isVisible()){
	                    west.hide();
	                    link.innerHTML = 'Show West Region';
	                }else{
	                    west.show();
	                    link.innerHTML = 'Hide West Region';
	                }
	           }
	            
	     };
	       
	}();
	Ext.EventManager.onDocumentReady(Example.init, Example, true);
	
	</script>
</head>
<body>

    <div id="toolbar" style="height:32px;"></div>
    <div id="myDiv" style="position:relative;"></div>
    
<script type="text/javascript" src="../examples.js"></script>
<div id ="container">
  <div id="west" class="x-layout-inactive-content">
    

I'm the west panel, pleased to make your acquaintance.</p>
  </div>
  <div id="north" class="x-layout-inactive-content">
    

Hey, I'm the North panel dude!</p>
  </div>
  <div id="autoTabs" class="x-layout-inactive-content">
      The layout manager will automatically create and/or remove the TabPanel component when a region has more than one panel. Close one of my panels and you can see what I mean.
  </div>
  <div id="center2" class="x-layout-inactive-content">
        

Show West Region</p>
        

My closable attribute is set to false so you can't close me. The other center panels can be closed.</p>
        

The center panel automatically grows to fit the remaining space in the container that isn't taken up by the border regions.</p>
        <hr>
        

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus. Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla vel, urna. Aliquam commodo ullamcorper erat. Nullam vel justo in neque porttitor laoreet. Aenean lacus dui, consequat eu, adipiscing eget, nonummy non, nisi. Morbi nunc est, dignissim non, ornare sed, luctus eu, massa. Vivamus eget quam. Vivamus tincidunt diam nec urna. Curabitur velit. Quisque dolor magna, ornare sed, elementum porta, luctus in, leo.</p>
  </div>
  <div id="center1" class="x-layout-inactive-content">
        

Done reading me? Close me by clicking the X in the top right corner.</p>
        

Vestibulum semper. Nullam non odio. Aliquam quam. Mauris eu lectus non nunc auctor ullamcorper. Sed tincidunt molestie enim. Phasellus lobortis justo sit amet quam. Duis nulla erat, varius a, cursus in, tempor sollicitudin, mauris. Aliquam mi velit, consectetuer mattis, consequat tristique, pulvinar ac, nisl. Aliquam mattis vehicula elit. Proin quis leo sed tellus scelerisque molestie. Quisque luctus. Integer mattis. Donec id augue sed leo aliquam egestas. Quisque in sem. Donec dictum enim in dolor. Praesent non erat. Nulla ultrices vestibulum quam.</p>
  </div>
  <div id="props-panel" class="x-layout-inactive-content" style="width:200px;height:200px;overflow:hidden;">
  </div>
  <div id="south" class="x-layout-inactive-content">
    south - generally for informational stuff, also could be for status bar
  </div>
</div>

</body>
</html>

#3 03-07-2007, 12:01 PM

It works fine!!! It's could be a temporality solución for the problem.

Thanks

#4 03-07-2007, 12:58 PM

I have another problem :P. When a put a header the layout slice down and partialy hide the south region.

Take a look in http://www.harpra.com/yui/

#5 03-07-2007, 01:21 PM

I forgot login an password.

User:demo
pass:demo

#6 03-07-2007, 04:30 PM

Quote:

Originally Posted by malotor

Take a look in http://www.harpra.com/yui/

I tried to take a look but in Safari the page is showing up as blank.

...ok, it shows up in FF2

#7 03-07-2007, 04:52 PM

the login "demo" doesn't work. I took a look at the code I posted and I see the problem too. The bottom of the page is offset by the height of the first div. I am still getting aquatinted with Ext docs and couldn't tell you offhand. If you specify the height of the layout div it will work, but that way doesn't give you the option of having a vertical expanding design. I think it has to be specified in the js not the style, because on load layout manager measures the window and adjusts. Anyways, I will look for the solution but it might take me a while. I've already looked in layout manager and tried a couple different things to see if I could get it to readjust the size different, but no use, I can't tell yet exactly where it's doing the math. Maybe someone else knows?

#8 03-07-2007, 06:04 PM

Look at my response here and see if it helps with your layout:

http://www.yui-ext.com/forum/viewtopic.php?t=3572

You may want to consider rendering the layout to the document.body and including the toolbar in the north panel instead of having it outside the layout. I haven't seen your page though, so I'm not sure if there are any other issues.

Brian

#9 03-07-2007, 07:18 PM

Thanks for your quick reply Brian. I think your suggestion is the fail-safe route, although I can see a reason to have the tool bar separately, for example: if a client wanted their website with an always-present top-of-the-page toolbar and a collapsable north region.

I am looking for the way to change some math in js that calculates the layout size, such as: get screen height -32px. Maybe there is something for this already? Another way: have a listener on monitor resize get window height -32px and then set the style of the element layout div with the new value.

#10 03-09-2007, 09:18 AM

I 'm solving problem and now show a blank page. I found a problems with DOCTYPE. When I use a DOCTYPE de panels collapse . If I remove the DOCTYPE and the page work.