PDA

View Full Version : Problem with a inner layout and toolbar



malotor
2 Mar 2007, 6:35 AM
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



<!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>
<title>Hpanel v.4.0.0 - Harpra</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />


<link rel="stylesheet" type="text/css" href="./yui-ext/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="./yui-ext/resources/css/ytheme-aero.css" />
<link rel="stylesheet" type="text/css" href="./css/layout.css" />

<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>

<script language="javascript" src="./js/jquery.js"></script>


<script language="javascript" src="./js/layout.js"></script>

<script language="javascript" src="./modules/list_detail/js/layout.js"></script>
</head>
<body>

<div id ="container">
<div id="north" class="x-layout-inactive-content">
<div id="header">
<h1>Hpanel</h1>

<h2>v.4.0.0.alpha</h2>
</div>

</div>

<dl id="applicationMenu" style="display:none;">
<dt>Escritorio (#)</dt> <dd>
<ul>
Añadir Widget (./index.php?obj=) Configurar cuenta (./index.php?obj=) Email (./index.php?obj=) Agenda (./index.php?obj=) [/list]

</dd>
<dt>Administración (#)</dt> <dd>
<ul>
Usuarios (./index.php?obj=USR) Grupos (./index.php?obj=GRP) Objetos (./index.php?obj=) Menu (./index.php?obj=) [/list]
</dd>

<dt>Gestión (#)</dt> <dd>
<ul>
Proveedores (./index.php?obj=) Facturas (./index.php?obj=) Pedidos (./index.php?obj=) Clientes (./index.php?obj=) [/list]
</dd>

</dl> <div id="applicationlayout" >

<div id="toolbar"></div>

<div id="contentpanel">
<div id="nav" class="ylayout-inactive-content">
izquierda
</div>
<div id="content" class="ylayout-inactive-content">
derecha
</div> </div>

</div>

</div>
</body>
</html>


My javascript:


applicationLayout = function(){
var layout;
return {
init : function(){

var tb = new Ext.Toolbar('toolbar');
tb.add({text:'Inicio'});

//A?adimos los menus
$("#applicationMenu").children().each(function () {

switch (this.tagName) {
case 'DT':
//Creamos el menu
menu = new Ext.menu.Menu('mainMenu');
tb.add({text:$(this).children()[0].getAttribute('title'), menu: menu});
break;

case 'DD':
$(this).find("ul li a").each(function(i) {
menu.add({text: $(this).html()});
});
break;
}

});

layout = new Ext.BorderLayout(document.body, {
hideOnLayout: true,
north: {
split:false,
initialSize: 63,
titlebar: false
},
center: {
titlebar: false
}
});

layout.beginUpdate();
layout.add('north', new Ext.ContentPanel('north', 'North'));
layout.add('center', new Ext.ContentPanel('applicationlayout',{
toolbar: tb,
resizeEl: 'contentpanel',
autoScroll:true,
fitToFrame:true
}));
layout.endUpdate();
}

};

}();


Ext.EventManager.onDocumentReady(applicationLayout.init, applicationLayout, true);

Example = function(){
return {
init : function(){
var layout = new Ext.BorderLayout(document.getElementById('contentpanel'), {
west: {
split:false,
initialSize: 200,
collapsible: false
},
east: {
autoScroll: true
}
});
layout.beginUpdate();
layout.add('west', new Ext.ContentPanel('nav'));
layout.add('east', new Ext.ContentPanel('contentpanel'));
layout.endUpdate();
}
}

}();
Ext.EventManager.onDocumentReady(Example.init, Example, true);



What's wrong ????

I use jquery to create menubar form markup :).

Thanks

brian
2 Mar 2007, 2:47 PM
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>
:)

malotor
7 Mar 2007, 10:01 AM
It works fine!!! It's could be a temporality solución for the problem.


Thanks

malotor
7 Mar 2007, 10:58 AM
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/

malotor
7 Mar 2007, 11:21 AM
I forgot login an password.

User:demo
pass:demo

brian
7 Mar 2007, 2:30 PM
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

brian
7 Mar 2007, 2: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?

brian.moeskau
7 Mar 2007, 4: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

brian
7 Mar 2007, 5: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.

malotor
9 Mar 2007, 7: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.

:)

malotor
9 Mar 2007, 7:59 AM
Now it works. You can see that the layout slide down when I put a header and if I collapse the south panel it disapear. The grid don't fit to the region when i resize the panels.

Here you can see the example

http://www.harpra.com/yui/

user:demo
pass:demo

Here is the js code:



Example = function(){
var layout;
return {
init : function(){
layout = new Ext.BorderLayout(document.getElementById('myDiv'), {
hideOnLayout: true,

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: false,
autoScroll:true,
closeOnTab: true
}
});

layout.beginUpdate();

layout.add('south', new Ext.ContentPanel('south', {title: 'South', closable: true,fitToFrame: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,fitToFrame:true }));
layout.add('center', new Ext.ContentPanel('center1', {title: 'Close Me', closable: true,fitToFrame:true}));
//layout.add('center', new Ext.ContentPanel('center2', {title: 'Center Panel', closable: false,fitToFrame:true}));
//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);

/*
* Ext - JS Library 1.0 Alpha 2
* Copyright(c) 2006-2007, Jack Slocum.
*/

Ext.onReady(function(){

// create the Data Store
var ds = new Ext.data.Store({
// load using HTTP
proxy: new Ext.data.HttpProxy({url: 'http://www.harpra.com/yui/modules/list_detail/sheldon.xml'}),

// the return will be XML, so lets set up a reader
reader: new Ext.data.XmlReader({
// records will have an "Item" tag
record: 'Item',
id: 'ASIN'
}, [
// set up the fields mapping into the xml doc
// The first needs mapping, the others are very basic
{name: 'Author', mapping: 'ItemAttributes > Author'},
'Title', 'Manufacturer', 'ProductGroup'
])
});

var cm = new Ext.grid.ColumnModel([
{header: "Author", dataIndex: 'Author'},
{header: "Title",dataIndex: 'Title'},
{header: "Manufacturer", dataIndex: 'Manufacturer'},
{header: "Product Group", dataIndex: 'ProductGroup'}
]);
cm.defaultSortable = true;

// create the grid
var grid = new Ext.grid.Grid('example-grid', {
ds: ds,
cm: cm,
autoSizeColumns: true,
monitorWindowResize: true,
autoHeight:true
});
grid.render();

ds.load();
});

jack.slocum
9 Mar 2007, 3:40 PM
Your need to use a Ext.GridPanel to add the grid as a panel and have it fit. There are at least 20 threads on this.

malotor
12 Mar 2007, 2:01 AM
Thanks, i'll search it