PDA

View Full Version : Accordion does not collaps first panel.. Why?


jumpow
14 Jun 2013, 2:52 AM
I have next example of Accordion...
It opens page and firts item in accordion is open.
I can switch to other items, but first one is never collapsed. Why?
-----------------------------------
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
<link rel='stylesheet' type='text/css' href='extjs/resources/css/ext-all.css'>
<script type='text/javascript' src='extjs/ext-all-debug.js'></script>

<script type="text/javascript">
Ext.application(
{
name: 'Alfa IVR Statistic',
launch: function()
{
Ext.BLANK_IMAGE_URL='extjs/resources/s.gif';
Ext.onReady(function()
{
var accordion = new Ext.Panel(
{
title: 'Accordion Layout',
layout:'accordion',

defaults:
{
collapsed: true,
// applied to each contained panel
bodyStyle: 'padding:15px',
flex : 1 // The sizes of panels are divided according to the flex index
},
items:
[ {
title: 'Panel 1',
collapsed:true,
html: '&lt;p&gt;Panel content!&lt;/p&gt;'
},
{
title: 'Panel 2',
html: '&lt;p&gt;Panel content!&lt;/p&gt;'
},
{
title: 'Panel 3',
html: '&lt;p&gt;Panel content!&lt;/p&gt;'
}
]
});

var panel = new Ext.FormPanel(
{
id:'StFORM',
title : 'Test Accordion',
renderTo : 'SJPageMenu',
method: 'post',
style: 'background-color: #f3f0f3;',
items:
[
accordion
]
});
//-----------------------------------------------------------
});
}
});
</script>
</head>
<body>
<div id='SJPageMenu'></div>
</body>
</html>
friend
14 Jun 2013, 4:53 AM
I'm not sure why you're nesting the Accordion panel in a Form; removing the form fixes the issue. Also, since you're creating an Ext.Application, there's no need to use an Ext.onReady(). Ext.Application handles this for you:



<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>ExtDemo Application Login</title>
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-theme-gray/ext-theme-gray-all.css">
<script type="text/javascript" src="extjs/ext-all-debug-w-comments.js"></script>

<script type="text/javascript">
Ext.application({
name: 'Alfa IVR Statistic',
launch: function() {
var accordion = new Ext.Panel({
title: 'Accordion Layout',
layout:'accordion',
defaults: {
collapsed: true,
// applied to each contained panel
bodyStyle: 'padding:15px',
},
renderTo : 'SJPageMenu',
items: [{
title: 'Panel 1',
collapsed:true,
html: '&lt;p&gt;Panel content!&lt;/p&gt;'
},{
title: 'Panel 2',
html: '&lt;p&gt;Panel content!&lt;/p&gt;'
},{
title: 'Panel 3',
html: '&lt;p&gt;Panel content!&lt;/p&gt;'
}]
});
}
});
</script>
</head>
<body>
<div id="SJPageMenu"></div>
</body>
</html>
jumpow
16 Jun 2013, 9:50 PM
So, Accordion must be on highest level?
WHY?

I have to create report with lots of parameters and I try to divide parameters in groups.
Then I have to request report
uvarala@vocera.com
6 Jun 2014, 8:09 AM
Is this fixed in 4.2.x? I am suing 4.2.x and I am still seeing the same issue. Is there any work around for this
?


I am not using any forms inside the Accordion yet, but still see the same issue. The first panel, is not closing after it is closed and opened once !!