accordion layout help URGENT

**gaurav89** · 20 Aug 2011 9:47 AM

hi

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

CHART1
CHART2
CHART3
CHART4

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 ?

skirtle

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.

**christocracy** · 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.

http://www.sencha.com/products/extjs/examples/
(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.

http://dev.sencha.com/deploy/ext-4.0...accordion.html

**gaurav89** · 22 Aug 2011 9:28 PM

here is the code..

please help now

this file name is according.html

<html>
<head>
<title>Charts</title>


<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">

#frame{
width:450px;
margin:0px auto;
}

</style>
<script type="text/javascript" src="../../bootstrap.js"></script>
<script type="text/javascript" src="../example-data.js"></script>
<script type="text/javascript">
Ext.require(['*']);

Ext.onReady(function(){

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

width: 300,
height: 500,
//hideCollapseTool: true,
//sortable=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: '<empty panel>',
cls:'empty'
});

var item2 = Ext.create('Ext.Panel', {
title: 'Chart2',
// html: '<empty panel>',
cls:'empty'
});

var item3 = Ext.create('Ext.Panel', {
title: 'Chart3',
//html: '<empty panel>',
cls:'empty'
});

var item4 = Ext.create('Ext.Panel', {
title: 'Chart4',
html: '<empty panel>',
cls:'empty'
});

var accordion = Ext.create('Ext.Panel', {
// region:'east',
// margins:'50 50 50 50',
split:true,
renderTo:'frame',
width: 400,
height :500,
layout:'accordion',
items: [item1,item2,item3,item4]
});

var viewport = Ext.create('Ext.Viewport', {
layout:'border',
// width:300,
// height :400,
// renderTo:'frame',
items:[
accordion, {
// region:'center',
margins:'5 5 5 0',
//cls:'empty',
// bodyStyle:'background:#f1f1f1',
// html:'<br/><br/><empty center panel>'

}]
});

//viewport.render(document.body);

});
</script>
</head>
<body>
<div id="frame">
</div>

<script type="text/javascript" src="../shared/examples.js"></script>
</body>
</html>

**skirtle** · 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.

**gaurav89** · 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.

**skirtle** · 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.

**skirtle** · 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.

**gaurav89** · 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

THANKS A LOT,,,

**skirtle** · 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:

Code:

Ext.create('Ext.Panel', {
    height: 500,
    layout: 'accordion',
    renderTo: 'frame',
    width: 400,
    items: [
        item1,
        item2,
        item3,
        item4
    ]
});

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.

**gaurav89** · 23 Aug 2011 1:52 AM

A BIG THANKS TO You

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 ?

accordion layout help URGENT

Thread Tools

Search Thread

Display

Answered: accordion layout help URGENT

Answered: accordion layout help URGENT

When unsure

When unsure