PDA

View Full Version : Setting Default on Accordion Nav



webguy
24 Nov 2007, 10:56 AM
I have been playing around with the Complex Layout in the examples. I was wondering how to set the left navigation so if I went to a link that is under Navigation, then the Accordion will be set to open, and if I open the Settings nav and click a link in the Settings Accordion, then when I go to this page the Settings Accordion will be open and not the Navigation Accordion.

efege
24 Nov 2007, 12:46 PM
If I understand correctly, you are interested in preservig the state of the accordion across visits to the page. The keyword here is state, and you should see the Ext.state.Manager class, which is used in some of the examples.

mdissel
24 Nov 2007, 2:09 PM
And when you want to set an initial activeItem you run into a bug... activeItem is not supported in the Accordion Layout.. i've already posted a bug report and the solution in this post, see http://extjs.com/forum/showthread.php?t=17073

webguy
24 Nov 2007, 2:10 PM
Where do I find this? I am very new to Ext JS. Is there documentation on this class?

mdissel
24 Nov 2007, 2:13 PM
Here's the documentation.. http://extjs.com/deploy/dev/docs/?class=Ext.layout.Accordion

hendricd
24 Nov 2007, 2:14 PM
Yep, got // infront of that config.option until I hear what they're gonna do with it...

webguy
24 Nov 2007, 2:36 PM
Being a newbie, how do I apply this to the comple.html file in the examples..

ext-2.0-rc1\examples\layout

webguy
27 Nov 2007, 1:30 AM
mdissel, i can't figure out how you fixed the Accordion state problem. Can i get additional help?

mdissel
27 Nov 2007, 10:40 AM
Yes, just post your code and describe what it should do and i (or others) will see if we can help you.

webguy
27 Nov 2007, 8:48 PM
Here is my code:



<html>
<head>
<title>Title</title>
<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" />
<link href="../_inc/styles.css" rel="stylesheet" type="text/css" />
<!-- GC -->
<!-- LIBS -->
<script type="text/javascript" src="adapter/ext/ext-base.js"></script>
<!-- ENDLIBS -->

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

<!--<script language="javascript" src="../grid/PropsGrid.js"></script>-->
<style type="text/css">
html, body {
font:normal 12px verdana;
margin:0;
padding:0;
border:0 none;
overflow:hidden;
height:100%;
}
p {
margin:5px;
}
.tl1 {
background-image:url(../_img/icons/wp.png);
}
.tl2{
background-image:url(../_img/icons/mb.png);
}
.tl3 {
background-image:url(../_img/icons/ap.png);
}
.tl4 {
background-image:url(../_img/icons/inv.png);
}
.tl5 {
background-image:url(../_img/icons/cred.png);
}
.tl6 {
background-image:url(../_img/icons/p.png);
}
.tl7 {
background-image:url(../_img/icons/folder_wrench.png);
}
.x-layout-collapsed-west{
background-image:url(../_img/explorer.gif);
background-repeat:no-repeat;
background-position:center;
}
.x-layout-collapsed-east{
background-image:url(../_img/tools.gif);
background-repeat:no-repeat;
background-position:center;
}
.x-layout-collapsed-south{
background-image:url(../_img/help.gif);
background-repeat:no-repeat;
background-position:center;
}
</style>
<script type="text/javascript">
Ext.onReady(function(){

Ext.state.Manager.setProvider(new Ext.state.CookieProvider());

var viewport = new Ext.Viewport({
layout:'border',
items:[
new Ext.BoxComponent({ // raw
region:'north',
el: 'north',
height:70
}),{
region:'south',
contentEl: 'south',
split:false,
height: 100,
minSize: 100,
maxSize: 200,
collapsible: true,
title:'Bottom',
margins:'0 0 0 0'
}, {
region:'east',
title: 'Right',
collapsible: true,
split:true,
width: 225,
minSize: 215,
maxSize: 300,
layout:'fit',
margins:'0 5 0 0',
items:
new Ext.TabPanel({
border:false,
activeTab:0,
tabPosition:'top',
items:[{
html:'<p><a href="news.php" class="nav3">Link 1</a></p>',
title: 'Tab 1',
autoScroll:true
},
{
html:'<p><a href="news.php" class="nav3">Link 1</a></p>',
title: 'Tab 2',
autoScroll:true
}]
})
},{
region:'west',
id:'west-panel',
title:'Explorer',
split:true,
width: 200,
minSize: 175,
maxSize: 300,
/*collapsible: true,*/
margins:'0 0 0 5',
layout:'accordion',
layoutConfig:{
animate:true
},
items: [{
contentEl: 'west',
title:'Test Link 1',
html:'<p>&nbsp;&nbsp;<img src="../_img/icons/i.png" width="14" height="13" align="absmiddle" border="0">&nbsp;<a href="link1.php" class="nav3">Link 1</a></p><p>&nbsp;&nbsp;<img src="../_img/icons/i.png" width="14" height="13" align="absmiddle" border="0">&nbsp;<a href="link2.php" class="nav3">Link 2</a></p><p>&nbsp;&nbsp;<img src="../_img/icons/i.png" width="14" height="13" align="absmiddle" border="0">&nbsp;<a href="link3.php" class="nav3">Link 3</a></p>',
border:false,
iconCls:'tl1'
},{
title:'Test Link 2',
html:'<p>&nbsp;&nbsp;<img src="../_img/icons/i.png" width="14" height="13" align="absmiddle" border="0">&nbsp;<a href="link1.php" class="nav3">Link 1</a></p><p>&nbsp;&nbsp;<img src="../_img/icons/i.png" width="14" height="13" align="absmiddle" border="0">&nbsp;<a href="link2.php" class="nav3">Link 2</a></p><p>&nbsp;&nbsp;<img src="../_img/icons/i.png" width="14" height="13" align="absmiddle" border="0">&nbsp;<a href="link3.php" class="nav3">Link 3</a></p>',
border:false,
iconCls:'tl2'
},{
title:'Test Link 3',
html:'<p>&nbsp;&nbsp;<img src="../_img/icons/i.png" width="14" height="13" align="absmiddle" border="0">&nbsp;<a href="link1.php" class="nav3">Link 1</a></p><p>&nbsp;&nbsp;<img src="../_img/icons/i.png" width="14" height="13" align="absmiddle" border="0">&nbsp;<a href="link2.php" class="nav3">Link 2</a></p><p>&nbsp;&nbsp;<img src="../_img/icons/i.png" width="14" height="13" align="absmiddle" border="0">&nbsp;<a href="link3.php" class="nav3">Link 3</a></p>',
border:false,
iconCls:'tl3'
},{
title:'Test Link 4',
html:'<p>&nbsp;&nbsp;<img src="../_img/icons/i.png" width="14" height="13" align="absmiddle" border="0">&nbsp;<a href="link1.php" class="nav3">Link 1</a></p><p>&nbsp;&nbsp;<img src="../_img/icons/i.png" width="14" height="13" align="absmiddle" border="0">&nbsp;<a href="link2.php" class="nav3">Link 2</a></p><p>&nbsp;&nbsp;<img src="../_img/icons/i.png" width="14" height="13" align="absmiddle" border="0">&nbsp;<a href="link3.php" class="nav3">Link 3</a></p>',
border:false,
iconCls:'tl4'
},{
title:'Test Link 5',
html:'<p>&nbsp;&nbsp;<img src="../_img/icons/i.png" width="14" height="13" align="absmiddle" border="0">&nbsp;<a href="link1.php" class="nav3">Link 1</a></p><p>&nbsp;&nbsp;<img src="../_img/icons/i.png" width="14" height="13" align="absmiddle" border="0">&nbsp;<a href="link2.php" class="nav3">Link 2</a></p><p>&nbsp;&nbsp;<img src="../_img/icons/i.png" width="14" height="13" align="absmiddle" border="0">&nbsp;<a href="link3.php" class="nav3">Link 3</a></p>',
border:false,
iconCls:'tl5'
},{
title:'Test Link 6',
html:'<p>&nbsp;&nbsp;<img src="../_img/icons/i.png" width="14" height="13" align="absmiddle" border="0">&nbsp;<a href="link1.php" class="nav3">Link 1</a></p><p>&nbsp;&nbsp;<img src="../_img/icons/i.png" width="14" height="13" align="absmiddle" border="0">&nbsp;<a href="link2.php" class="nav3">Link 2</a></p><p>&nbsp;&nbsp;<img src="../_img/icons/i.png" width="14" height="13" align="absmiddle" border="0">&nbsp;<a href="link3.php" class="nav3">Link 3</a></p>',
border:false,
iconCls:'tl6'
},{
title:'Test Link 7',
html:'<p>&nbsp;&nbsp;<img src="../_img/icons/i.png" width="14" height="13" align="absmiddle" border="0">&nbsp;<a href="link1.php" class="nav3">Link 1</a></p><p>&nbsp;&nbsp;<img src="../_img/icons/i.png" width="14" height="13" align="absmiddle" border="0">&nbsp;<a href="link2.php" class="nav3">Link 2</a></p><p>&nbsp;&nbsp;<img src="../_img/icons/i.png" width="14" height="13" align="absmiddle" border="0">&nbsp;<a href="link3.php" class="nav3">Link 3</a></p>',
border:false,
iconCls:'tl7'
}]
},
{
region:'center',
contentEl: 'center',
title:'Main',
autoScroll: true
}
]
});
});
</script>
</head>
<body>
<script type="text/javascript" src="ext.js"></script><!-- EXAMPLES -->
<div id="west">
</div>
<div id="north">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><a href="index.php"><img src="../_img/logo.gif" border="0"></a></td>
<td></td>
</tr>
</table>
</div>

<div id="center" class="x-hide-display">
<div style="padding-left:50px;padding-right:50px;">
<br/><br/>
Test Content
<br/><br/><br/>
</div>
</div>

<div id="south">
<p>links go here</p>
</div>

</body>
</html>



I want to be able to to set Test Link 3 the Active Item on the page. Then I another page/file, I want to be able to make the Test Link 2 the Active Item on that page the active state so the Accordion stays open on Test Link 2. Right now each time I click on a link inside the Test Link 1 to Test Link 7, it resets itself so only Test Link 1 is the Active Item/State.

tryanDLS
28 Nov 2007, 9:04 AM
Please edit your post to put your code in CODE tags.

webguy
30 Nov 2007, 9:57 PM
Ok. Sorry. New to this forum.