View Full Version : accordion layout help URGENT

20 Aug 2011, 9:47 AM

My requirement is to make only one panel visible at a time,
this can be done using ext js ACCORDION layout.

but the problem is all the panels contain charts i.e. one panel contain pie chart,other contain bar chart and other contain donut, now the issue is to make all charts in one group and only one should open which user will click

its layout is something


I am stuck in it.need urgent help ..please help how can i do this using ACCORDION layout or is there any other way to do it ?

22 Aug 2011, 4:57 AM
When unsure of where to begin with any particular UI problem, always start by finding an appropriate example, on the examples page.

(also, the downloaded ExtJS SDK contains a folder /examples which can be run from your localhost)

Perhaps you want to start by running the Accordion sample? View the source; copy/paste the code into your app.


22 Aug 2011, 9:28 PM
here is the code..

please help now

this file name is according.html

<!-- Ext -->

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

margin:0px auto;

<script type="text/javascript" src="../../bootstrap.js"></script>
<script type="text/javascript" src="../example-data.js"></script>
<script type="text/javascript">


var item1 = Ext.create('Ext.Panel', {

width: 300,
height: 500,
//hideCollapseTool: true,
collapsible: true,
renderTo: Ext.getBody(),
layout: 'fit',
items: {
xtype: 'chart',
animate: true,
shadow: true,
store: store1,
axes: [{
type: 'Numeric',
position: 'left',
fields: ['data1'],
title: 'Hits',
grid: true,
minimum: 0
}, {
type: 'Category',
position: 'bottom',
fields: ['name'],
title: 'Months',
label: {
rotate: {
degrees: 270
series: [{
type: 'column',
axis: 'left',
gutter: 80,
xField: 'name',
yField: ['data1'],
style: {
fill: '#EE9A49'


var item22 = Ext.create('Ext.Panel', {
title: 'Chart1',
// html: '&lt;empty panel&gt;',

var item2 = Ext.create('Ext.Panel', {
title: 'Chart2',
// html: '&lt;empty panel&gt;',

var item3 = Ext.create('Ext.Panel', {
title: 'Chart3',
//html: '&lt;empty panel&gt;',

var item4 = Ext.create('Ext.Panel', {
title: 'Chart4',
html: '&lt;empty panel&gt;',

var accordion = Ext.create('Ext.Panel', {
// region:'east',
// margins:'50 50 50 50',
width: 400,
height :500,
items: [item1,item2,item3,item4]

var viewport = Ext.create('Ext.Viewport', {
// width:300,
// height :400,
// renderTo:'frame',
accordion, {
// region:'center',
margins:'5 5 5 0',
// bodyStyle:'background:#f1f1f1',
// html:'<br/><br/>&lt;empty center panel&gt;'



<div id="frame">

<script type="text/javascript" src="../shared/examples.js"></script><!-- EXAMPLES -->

22 Aug 2011, 9:50 PM
You don't need any of the renderTo options if you're using a viewport but I doubt that's causing a problem.

Could you explain exactly what the problem is? From your original description I can't figure out what issue you're having and your code doesn't really clarify. As far as I can tell you just haven't written any code for your other charts.

22 Aug 2011, 11:33 PM
thanks for your reply.

the problem is that i want layout like accordion layout which should have four panels and each having one chart.

i havn't added the code for other charts as now even this code is not running properly.(in it on one panel there is one chart on other there are empty panels)

when i remove this chart ...the layout works fine for panels and it shows for panels..
but when i insert the chart code only chart shows and all panels disappear.

Please help ...its urgent.

22 Aug 2011, 11:40 PM
Please help ...its urgent.

You'd get help quicker if you posted a better code example. First you should wrap all code in code tags. Second you should give a complete example: the current example doesn't include sample data.

As is, many people on the forums will take one look at your post and skip over it because they can't read it.

22 Aug 2011, 11:53 PM
OK, I just tried the code you posted above. It seemed to work OK if I made a few small tweaks...

Get rid of all the renderTo config options.
Uncomment the lines region: 'center' and region: 'east', the border layout blows up without them.

Once I did that everything seemed to be fine.

Which browsers are you seeing problems in? I tried in Chrome and FF.

23 Aug 2011, 1:30 AM
thanks it is working fine.

but my requirement is not to use border layout as it (accordion chart layout) is the separate component of my extjs web page and it is on one corner of the page with other tables .

i am using it in firefox


23 Aug 2011, 1:40 AM
Do you mean you want to inject the accordion into some HTML markup that isn't created by ExtJS?

That should be easy enough.

Get rid of the viewport. Add in a renderTo on the accordion:

Ext.create('Ext.Panel', {
height: 500,
layout: 'accordion',
renderTo: 'frame',
width: 400,
items: [

That works for me. It's similar to what you had before but, importantly, I've completely got rid of the viewport.

I'm still not convinced I'm actually answering your real question but I'm afraid I'm struggling to understand what it is you want.

23 Aug 2011, 1:52 AM


it is exactly what i wanted.....

THANKS a lot..

You understand me right and it is what exactly i wanted.

one more query can we position this component to anywhere in the page ?

23 Aug 2011, 2:03 AM
one more query can we position this component to anywhere in the page ?

If you're using renderTo then you just need to make sure you put the HTML element in the right place on the page. The only potential problem I can see is with sizing. Getting the widths and heights just the way you want might be annoying if you don't want them hardcoded the way they are now.

If you want to position it at particular co-ordinates on the page you could set renderTo: Ext.getBody() then set x and y config options to position it.