PDA

View Full Version : Problem with NestedLayoutPanel and toolbar



malotor
4 Jun 2007, 9:17 AM
Hi, people!

I'm trying to build a webapplication and i need some help of the Ext comunity ;). This is a general purpose app and i have a global structure with header (logo,info, etc ), a toolbar ( with all actions ) and a content secci

tryanDLS
4 Jun 2007, 9:34 AM
It looks like your layout is in a div called center1 (not ref'd in yourcode) which is inactive

malotor
4 Jun 2007, 10:43 PM
I don't understand what mean "...div called center1 (not ref'd in yourcode) which is inactive"

malotor
5 Jun 2007, 9:12 AM
I did some changes but it don't work. Some idea ????

http://limestudio.es/extjs/lmpanel/


<!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>Complex Layout</title>

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



<!-- GC --> <!-- LIBS -->
<script type="text/javascript" src="../adapter/yui/yui-utilities.js"></script>
<script type="text/javascript" src="../adapter/yui/ext-yui-adapter.js"></script>
<!-- ENDLIBS -->

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



<style type="text/css">
html, body {
font:normal 12px verdana;
margin:0;
padding:0;
border:0 none;
overflow:hidden;
height:100%;
}
</style>
<script type="text/javascript">



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

//Creamos la barra de control


var simpleToolbar = new Ext.Toolbar('toolbar');
simpleToolbar.addButton({ text: 'Scroll Bottom', cls: 'x-btn-text-icon scroll-bottom'});
simpleToolbar.addButton({ text: 'Scroll Top', cls: 'x-btn-text-icon scroll-bottom'});
//Creamos el layout principal

layout = new Ext.BorderLayout(document.body, {
north: {
split:false,
initialSize: 32,
titlebar: false
},

center: {
titlebar: false,


},

});

layout.beginUpdate();




layout.add('north', new Ext.ContentPanel('north', 'North'));

//layout.add('center', new Ext.ContentPanel('center1', "More Information"));



var innerLayout = new Ext.BorderLayout('center1', {
west: {
split:true,
initialSize: 200,
minSize: 100,
maxSize: 400,
autoScroll:true,
collapsible:true,
titlebar: true
},
center: {
autoScroll:true
}
});
innerLayout.add('west', new Ext.ContentPanel('inner1', "More Information"));
innerLayout.add('center', new Ext.ContentPanel('inner2'));

layout.add('center', new Ext.NestedLayoutPanel(innerLayout,{toolbar:simpleToolbar}));

layout.endUpdate();

}
};

}();

Ext.EventManager.onDocumentReady(Example.init, Example, true);
</script>
</head>
<body>

<div id ="container">

<div id="north" class="x-layout-inactive-content">
LMPanel - LimeStudio - Panel de control
</div>

<div id="center1">
<div id="toolbar" class=""></div>
<div id="content">

<div id="inner1">
<p>This layout uses the gray theme. To make a layout use the gray theme, add the class .ytheme-gray to the body or a container element.</p>
<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="inner2">
<p>Duis hendrerit, est vel lobortis sagittis, tortor erat scelerisque tortor, sed pellentesque sem enim id metus. Maecenas at pede. Nulla velit libero, dictum at, mattis quis, sagittis vel, ante. Phasellus faucibus rutrum dui. Cras mauris elit, bibendum at, feugiat non, porta id, neque. Nulla et felis nec odio mollis vehicula. Donec elementum tincidunt mauris. Duis vel dui. Fusce iaculis enim ac nulla. In risus.</p>
<p>Donec gravida. Donec et enim. Morbi sollicitudin, lacus a facilisis pulvinar, odio turpis dapibus elit, in tincidunt turpis felis nec libero. Nam vestibulum tempus ipsum. In hac habitasse platea dictumst. Nulla facilisi. Donec semper ligula. Donec commodo tortor in quam. Etiam massa. Ut tempus ligula eget tellus. Curabitur id velit ut velit varius commodo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla facilisi. Fusce ornare pellentesque libero. Nunc rhoncus. Suspendisse potenti. Ut consequat, leo eu accumsan vehicula, justo sem lobortis elit, ac sollicitudin ipsum neque nec ante.</p>
<p>Aliquam elementum mauris id sem. Vivamus varius, est ut nonummy consectetuer, nulla quam bibendum velit, ac gravida nisi felis sit amet urna. Aliquam nec risus. Maecenas lacinia purus ut velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse sit amet dui vitae lacus fermentum sodales. Donec varius dapibus nisl. Praesent at velit id risus convallis bibendum. Aliquam felis nibh, rutrum nec, blandit non, mattis sit amet, magna. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam varius dignissim nibh. Quisque id orci ac ante hendrerit molestie. Aliquam malesuada enim non neque.</p>
</div>
</div>
</div>
</div>
</body>

</html>

tryanDLS
5 Jun 2007, 10:12 AM
Are you trying to put the toolbar into the center region of the innerLayout? If so, your toolbar div is in the wrong place - it should be inside the inner2 div.

malotor
5 Jun 2007, 9:42 PM
No, i'm trying to put the toolbar in the center region on the "layout" ( not innerlayout ) because i'll change the innerlayout depends on the option selected in the toolbar.