PDA

View Full Version : Documented Accordion



marp
6 Mar 2008, 8:29 PM
Hi all,

I'm getting some strange behaviour from the code below originally from the docs (http://extjs.com/deploy/dev/docs/?class=Ext.layout.Accordion). After the page loads for the first time, panels only expand to show one line of text. Clicking the same panel open and closed a couple of times eventually has the panel expanding to its proper height in Internet Explorer.

In Safari and Firefox, the panels expand when you click them (animate: true) and then immediately collapse (without animation). After this, any further clicks to expand only opens the panel 1px, showing none of the panel content.

Also, i have been unable to have the accordion fill the entire page with use of fill:true.

Considering this is mostly a cut & paste from the docs, I assume i've done something silly to break it. Can anyone see in the following?


<html>
<head>
<title>test</title>

<!-- Include Ext and app-specific scripts: -->
<script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext/ext-all-debug.js"></script>
<script type="text/javascript">
Ext.onReady(function() {
var accordion = new Ext.Panel({
renderTo: Ext.getBody(),

title: 'this is the title',
layoutConfig: {
animate: true
},
layout:'accordion',
items: [{
title: 'Panel 1',
html: 'sample text'

},{
title: 'Panel 2',
html: '<p>Panel content!</p>b<br>b<br>b<br>b'
},{
title: 'Panel 3',
html: '<p>Panel content!</p>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>'
}]
});
});
</script>
<!-- Include Ext stylesheets here: -->
<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css">
</head>
<body>
</body>
</html>

Condor
6 Mar 2008, 11:46 PM
An accordion layout only works correctly if the height is known.
Either specify a height or use an Ext.Viewport, e.g.


Ext.onReady(function(){
var accordion = new Ext.Panel({
title: 'this is the title',
layoutConfig: {
animate: true
},
layout:'accordion',
items: [{
title: 'Panel 1',
html: 'sample text'
},{
title: 'Panel 2',
html: '<p>Panel content!</p>b<br>b<br>b<br>b'
},{
title: 'Panel 3',
html: '<p>Panel content!</p>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>'
}]
});
new Ext.Viewport({
layout: 'fit',
items: [accordion]
});
});

marp
10 Mar 2008, 6:32 PM
thanks, that fixed it right up.

aerozep
1 Apr 2008, 4:31 AM
Hi, i have the same problem but I don't know the solution:
Accordion is inside a window:
My code:

var DocsPalette = function(datiDoc){
var docsAccordion = new ICDocsAccordion(datiDoc);
DocsPalette.superclass.constructor.call(this, {
id: 'docsPalette_window',
title: 'Documenti collegati',
closable: true,
collapsible: true,
resizable: false,
width: 240,
height: 340,
plain: true,
layout: 'fit',
constrain: true,
bodyStyle:'padding:5px;',
animateTarget: 'querymainbutton',
items: docsAccordion,
renderTo: 'map-panel'
});

};
Ext.extend(DocsPalette, Ext.Window, {
});


var ICDocsAccordion = function(datiDoc){

ICDocsAccordion.superclass.constructor.call(this, {
id:'accordion_panel',
title: 'Ci sono documenti presenti',
layout:'accordion',
layoutConfig: {
titleCollapse: true,
animate: true
},
items:[{
title: 'prova 1',
html: '<p>altra prova</p>'
}]
}); //end constructor
};

Ext.extend(ICDocsAccordion, Ext.FormPanel, {
});

But when I open the "group" height goes 1px in Firefox and in Safari.
Where is my error?
Thank's Mattia

aerozep
3 Apr 2008, 7:01 AM
any?

mabello
3 Apr 2008, 7:07 AM
Hi there,

You are abuising of extend in my opinion. :)

I do not see your point on extending the widgets in your code.

Try not to extend and you will fix everything

marp
3 Apr 2008, 3:24 PM
The problem is you are using Ext.FormPanel instead of Ext.Panel for the accordion.
I could not get your code to render anything, so i moved it around a bit:



var accordion = new Ext.Panel({
id:'accordion_panel',
title: 'Ci sono documenti presenti',
layout:'accordion',
layoutConfig: {
titleCollapse: true,
animate: true
},
items:[{
title: 'prova 1',
html: '<p>altra prova</p>'
}]
}); //end constructor

new Ext.Viewport({
id: 'docsPalette_window',
title: 'Documenti collegati',
closable: true,
collapsible: true,
resizable: false,
width: 240,
height: 340,
plain: true,
layout: 'fit',
constrain: true,
bodyStyle:'padding:5px;',
animateTarget: 'querymainbutton',
items: accordion,
renderTo: 'map-panel'
});

The above code renders fine, however changing Ext.Panel to Ext.FormPanel will get the problem you are describing. Also, I think the width/height properties are not needed in Ext.ViewPort config, as layout:'fit' will probably ignore them.

aerozep
3 Apr 2008, 11:01 PM
Hi, yes, problem was the formPanel.
I put your solution (simple Panel) and all is fixed.
Thank's again,
Mattia