PDA

View Full Version : adding multiple dynamic accordion layout PANELs to accorion panel



poojagarg89
16 Jan 2013, 3:10 AM
I have a Tree which I have to convert that into panels having Accordion panel

here is the structure of tree
first screen
41303

when I expand inner children of "Groups" the tree Structure is like this:
2nd screen
41304


Now I have to convert this full tree structure into Accordion Panel

Code:



var maintenance_panel = new Ext.Panel({
id:"main_panel_id",
collapsible:false,
region:"center",
width: 210,
height:460,
autoScroll:true,
padding:'0 15 0 0',
layout:'fit',
tbar: [{

text: "Edit Search Point",
handler: function(){
}
}]
});



Screenshots till I reached:
1st Screen same as TreePanel into Accordion

41305

Code:



for(var i=0;i<inventory_maintenance_treeds.getCount();i++){
var template_id = inventory_maintenance_treeds.getAt(i).data.template_id;
Ext.getCmp("main_panel_id").removeAll();{
id: template_id.split(":")[0]+'template'+i

}
Ext.getCmp("main_panel_id").doLayout();
}
inventory_maintenance_treeds.load({

callback:function(r,o,s)
{
for(var i=0;i<inventory_maintenance_treeds.getCount();i++){
var template_id = inventory_maintenance_treeds.getAt(i).data.template_id;
if(template_id.indexOf("template")!=-1){

Ext.getCmp("main_panel_id").add({
id: template_id.split(":")[0]+':template'+i,
collapsible: true,
title: template_id.split(":")[4],
layout:"accordion",
autoScroll:true,
//padding:'0 20 0 0',
listeners:{
beforeexpand:function(p)
{
var id=p.getId();
// Sub groups code
var grid_id = id.split(":")[0];
inventory_maintenance_ds.load({params:{load_type:"Inventory",group_id:grid_id}});
[B]groups_fn(id);
// [End]
}
}
});
Ext.getCmp("main_panel_id").doLayout();
if(i==0){
if(temp==0){
Ext.getCmp(template_id.split(":")[0]+':template'+i).collapse();
temp=1;
}
}

}
}
}
});






2nd ScreenShot of TreePanel into Accordion :

41306

Code:



function groups_fn(id)
{
var g_id=id.split(":");
var id_1 = id;
inventory_maintenance_treeds.load({
params:{group_id:g_id[0],load_type:"accordian_groups"},
callback:function(r,o,s)
{
for(var i=0;i<inventory_maintenance_treeds.getCount();i++){
// var Group_id = inventory_maintenance_treeds.getAt(i).data.Group_id;
Ext.getCmp(id_1).removeAll();
Ext.getCmp(id_1).doLayout();
}
for(var i=0;i<inventory_maintenance_treeds.getCount();i++){
var Group_id = inventory_maintenance_treeds.getAt(i).data.Group_id;
Ext.getCmp(id_1).add({
id: Group_id.split(":")[0]+':group'+i,
collapsible: true,
title: Group_id.split(":")[3],
layout:'accordion',
autoScroll:true,
//padding:'0 20 0 0',
listeners:{
beforeexpand:function(p)
{
var subid_1=p.getId();

// Sub groups code
//var grid_id = subid_1.split(":")[0];
//inventory_maintenance_ds.load({params:{load_type:"Inventory",group_id:grid_id}});
[B]sub_groups_fn(subid_1);
// [End]
}
}
});
Ext.getCmp(id_1).doLayout();
if(i==0){
if(temp==1){
//Ext.getCmp(Group_id.split(":")[0]+':group'+i).collapse();
temp=0;
}
}

}
}
});
}




Now my issues come i.e.
when I click on inner child suppose "BASKIN ROBIN DISTRIBUTION" 2nd childnode......
it is not giving me further accordion panels for its child as "Baskin Robin Distributions" contains TWO childs but no issue in Firebug for this
here is the screenshot :

41307

Code:



function sub_groups_fn(id) // recursive function for further childnodes and their childnodes
{
//alert(id);
var g_id=id.split(":");
inventory_maintenance_treeds.load({
params:{group_id:g_id[0],load_type:"accordian_subgroups"},
callback:function(r,o,s)
{
for(var i=0;i<inventory_maintenance_treeds.getCount();i++){
Ext.getCmp(id).removeAll();
Ext.getCmp(id).doLayout();
}

for(var i=0;i<inventory_maintenance_treeds.getCount();i++){
//alert(inventory_maintenance_treeds.getAt(i).data.Group_id);
var Group_id = inventory_maintenance_treeds.getAt(i).data.Group_id;
Ext.getCmp(id).add({
id: Group_id.split(":")[0]+':subgroup'+i,
collapsible: true,
title: Group_id.split(":")[3],
layout:'accordion',
autoScroll:true,
listeners:{
beforeexpand:function(p)
{
var id_1=p.getId();

// Sub groups code
[B]sub_groups_fn(id_1);
// [End]
}
}
});
// alert(id);
Ext.getCmp(id).doLayout();
}
}
});
}



Baskin robins didn't expanded



I am getting prob in this 3rd level of accordion panel

Please help me..................!!!


Thanks in advance....!!
Pooja
:D :) :D

saJoshua
16 Jan 2013, 3:24 AM
Do you have a data model that represents your data? Could you please post this?

I would think that using the nested ExtJS accordian layouts with Ext.Panel's is going to very quickly create deeply nested structures and you're going to run into problems. Maybe stick to a single accordian layout, then listen on click, parse your data and use Ext.DomHelper to load HTML into the Ext.Container representing each accordian area.

poojagarg89
16 Jan 2013, 3:35 AM
Here are the data according to screen shots:
1st Screen's Response and Post in firebug:
4130941310



2nd Screen's Response and Post:

4131141312

3rd Screen's Response and Post whose accordion Panel is not creating is :

41313

poojagarg89
16 Jan 2013, 3:38 AM
""Maybe stick to a single accordian layout, then listen on click, parse your data and use Ext.DomHelper to load HTML into the Ext.Container representing each accordian area.""


Can you give small code for what u said in this above lines just an outline how to do it.....

saJoshua
16 Jan 2013, 4:55 AM
really dirty example, but you might find something useful. This can be dropped into an 3.4.0 examples folder.



<html>
<head>
<title>Accordion Layout</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">


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

<!-- GC -->
<!-- LIBS -->
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<!-- ENDLIBS -->

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

<style type="text/css">
html, body {
font: normal 12px verdana;
margin: 0;
padding: 0;
border: 0 none;
overflow: hidden;
height: 100%;
}
.empty .x-panel-body {
padding-top:20px;
text-align:center;
font-style:italic;
color: gray;
font-size:11px;
}
</style>
<script type="text/javascript">
Ext.onReady(function() {

var data = {
group : {
group1 : [
'subgroup1 a',
'subgroup2 a',
'subgroup3 a',
'subgroup4 a'
],
group2 : [
'subgroup1 b',
'subgroup2 b',
'subgroup3 b',
'subgroup4 b'
],
group3 : [
'subgroup1 c',
'subgroup2 c',
'subgroup3 c'
],
group4 : [],
group5 : []
},
brand : {
brand1 : [],
brand2 : [],
brand3 : [],
brand4 : [],
brand5 : [],
brand6 : []
},
stocktype : {
st1 : [],
st2 : [],
st3 : []
},
storage : {}
};

var addNode = function(parent, text, showIndicator) {
return Ext.DomHelper.append(parent, {tag: 'div', html: '<div>' + (showIndicator ? '<div class="x-tool x-tool-toggle">&nbsp;</div>' : '') + '<span class="x-panel-header-text">' + text + '</span></div><div class="x-panel-bwrap" style="display: block; width:auto;"></div></div>', style:'cursor:pointer;border-left:0;border-right:0;', cls:"x-panel-header x-unselectable x-accordion-hd x-panel-collapsed"}, true);
}


var getPanel = function(o){
return new Ext.Panel({
title : '<b>' + o + '</b>',
value : o,
listeners : {
activate : function(cmp, fn){
// so when each panel is expanded,
// load some data and create DOM for that
// you might also want to look at using ExtJS XTemplate to consume your XML;


// this is purely for demonstration purposes..
if(!cmp.rendered) {
fn = fn || arguments.callee;
return window.setTimeout(function(){fn.call(cmp, cmp, fn)}, 100);
};

// clear out any existing child nodes;
while(cmp.body.dom.children.length) {
Ext.get(cmp.body.dom.children[0]).remove();
}

// iteratively add DOM nodes;
for(var item in data[cmp.value]) {
if(data[cmp.value].hasOwnProperty(item)){
var node = addNode(cmp.body.dom, item, true);
node.dom.setAttribute('level1', cmp.value);
node.dom.setAttribute('level2', item);

node.on({
click : function(e, el){

var header = e.getTarget('.x-panel-header')
var body = Ext.get(header).child('.x-panel-bwrap').dom;

// clear out any existing child nodes;
while(body.children.length) {
Ext.get(body.children[0]).remove();
}

var level1 = header.getAttribute('level1');
var level2 = header.getAttribute('level2');

if(!level1 || !level2) {
return;
}

data[level1][level2].forEach(function(item){
addNode(body, item);
});
}
});
};
};
}
}
});
};


var accordion = new Ext.Panel({
region:'west',
margins:'5 0 5 5',
split:true,
width: 210,
layout:'accordion',
listeners : {
render : function(){
for(var item in data) {
if(data.hasOwnProperty(item)) {
this.add(getPanel(item));
};
};
}
}
});

var viewport = new Ext.Viewport({
layout:'border',
items:[
accordion, {
region:'center',
margins:'5 5 5 0',
cls:'empty',
bodyStyle:'background:#f1f1f1',
html:'<br/><br/>&lt;empty center panel&gt;'
}]
});
});
</script>
</head>
<body>
<script type="text/javascript" src="../shared/examples.js"></script><!-- EXAMPLES -->
</body>
</html>

poojagarg89
16 Jan 2013, 5:10 AM
hey thanks a lot for this example will try it and will let you know if I face any probz.... Thanks again :)