PDA

View Full Version : Dynamic Accordion



gre19
3 Feb 2010, 4:10 PM
Hi All,

I want to create a dynamic accordion to get data from a Json array.

My Json data is as follows:



// JSON Data
var jSource = '{"success":true,"result":{"count":5,"records":[{"number":1,"name":"Emp1","company":"Yahoo"},
{"number":"2","name":"Emp2","company":"Yahoo"}{"number":"3","name":"Emp2","company":"eBay"},
{"number":"4","name":"Emp2","company":"eBay"}]}}';
I want to get the Company name as title of the accordion's items config and list employee names under company. Foe ex:

Yahoo
Emp1
Emp2
eBay
Emp1
Emp2


My code looks like following:



Ext.BLANK_IMAGE_URL = 'ext/resources/images/default/s.gif';

Ext.onReady(function(){
Ext.QuickTips.init();

// JSON Data Request
var jSource = '{"success":true,"result":{"count":5,"records":[{"number":1,"name":"Emp1","company":"Yahoo"},
{"number":"2","name":"Emp2","company":"Yahoo"}{"number":"3","name":"Emp2","company":"eBay"},
{"number":"4","name":"Emp2","company":"eBay"}]}}';

var myReader = new Ext.data.JsonReader({
root: 'result.records'
}, Ext.data.Record.create([{
name: 'number'
}, {
name: 'name'
}, {
name: 'company'
}]));

// Store for data
var store = new Ext.data.Store({
reader: myReader
});
store.loadData(Ext.util.JSON.decode(jSource));


// Accordion
var accordion = {

layout: 'accordion',
closable:false
,border:false
,layoutConfig:{animate:true}
,defaults: {
stateEvents: ["collapse","expand"]
,getState:function() {
return {collapsed:this.collapsed};
}
,bodyStyle:'padding:8px'
,border:false
},
items: [{
title: 'company name', //Yahoo
id: 'panel1',
collapsed:true,
html: 'name', // emp1
// emp2
}, {
title: 'company name', // eBay
id: 'panel2',
collapsed:true,
html: 'employee name' // emp1
}],
width: 175,
height: 200
}

// Add accordion to the left panel
navPanel = {
title: 'Companies',
region: 'west',
margins: '2 0 5 5',
cmargins: '0 5 0 0',
height: 300,
width: 275,
minSize: 100,
maxSize: 500,
autoScroll: true,
border: false,
split: true,
width: 275,
items: [accordion]
}

// Layout container
var container = new Ext.Viewport({
layout: 'border',
defaults: {
collapsible: false,
split: true,
bodyStyle: 'padding:5px'
},
items: [{
layout: 'border',
id: 'layout-browser',
region: 'center',
defaults: {
collapsible: true,
split: true,
bodyStyle: 'padding:15px'
},
margins: '2 0 5 5',
width: 275,
minSize: 100,
maxSize: 500,

items: [navPanel]
}]

})

});Any kind of help will be greatly appreciated.

Thanks