View Full Version : accordion with remote data binding

12 Jan 2015, 4:09 PM
Accordion with remote data

in this example it is showing hard coded accordion items

How would I bind remote data?

I have a modified structure

f8x.app.SelectAsset = new f8x.app.MultiTreeConfigBaseComponent({
title: 'Select Assests to Upgrade App',
activeElement: undefined,
trackCheckItems: undefined,
cookieKey: "SelectAssetAssetType",
remoteAssetTypeData: [],
createPanel: function (options) {
Ext.apply(options, { enableDD: true });
var container = f8x.app.MultiTreeConfigBaseComponent.prototype.createPanel.call(this, options);
Ext.apply(this.LeftSection, { title: 'Asset Types', width: "45%" });
Ext.apply(this.MiddleSection, { title: '', width: "45%" });
Ext.apply(this.RightSection, { width: "0%", collapsible: false, split: false });
Ext.apply(container, { title: '' });
var titlePanel = this.createTitlePanel();
this.mainContainer = new Ext.Panel({
border: false,
items: [titlePanel, container]
this.trackCheckItems = f8x.app.UpgradeApp.trackCheckItems;
return this.mainContainer;

in the above code, this.LeftSection will load the accordion data. This is calling a function, which has a hard coded accordion items, I want to replace those with remote data. I replaced that hard coded items with ajax call, but since it is async call, It won't wait until data is loaded from remote.

So I need to load the data some where in very begging and use it in the hard coded function or
I should push this data to the according in my ajax success method.

Can you guide me, how can I push the accordion data to the page in ajax success method? or pre load the remote data and have it ready?

if you notice, I wrote some logic to load the "this.loadAssetTypeData();"

16 Jan 2015, 10:56 AM
Check out the following example.



19 Jan 2015, 8:00 AM
I guess we are not using accordion panel. Excuse me for not find this out before I posted the question. Our ExtJS is extremely customized in a very complected architecture. After long troubleshooting, I figured out, the accordion type layout is generated by this code

createLeftPanel: function (options) {
var leftSection = new Ext.Panel({
xtype: 'panel',
title: 'Navigation Panel',
region: 'west',
split: true,
autoScroll: true,
width: '25%',
height: 370,
collapsible: true,
margins: '3 0 3 0',
border: false,
layout: {
type: 'hbox',
align: 'stretch'
items: [
layout: 'form',
border: false,
flex: 1,
autoScroll: true,
items: this.childTreeElement
listeners: {
render: this.onAccordionRender,
scope: this
return leftSection;

I have added the onAccordionRender listener to the above code

onAccordionRender: function (accordionPanel) {
// exapmple json response
//var responseText = '{"data":[{"title":"Panel 1"},{"title":"Panel 2"},{"title":"Panel 3"}]}',
// obj = Ext.decode(responseText),
// data = obj.data;

loadRemoteData: function (accordionPanel) {
url: 'url here',
params: { action: "List" },
success: function (response, request) {
var resultArray = [];
var resultJson = Ext.decode(response.responseText);
$.each(resultJson.topics, function (index, value) {
var obj = {
objectName: 'Name here',
pointToObject: 'text here',
name: resultJson.topics[index].Code,
disableContextMenu: true,
title: resultJson.topics[index].DisplayFieldName
failure: function (response, request) {
Ext.Msg.alert('Error', response.responseText);
scope: this,
async: false

accordionPanel.add(resultArray); is appending data to the UI, but not as accordion panes

Here is how it is adding the data. I think I should not do accordionPanel.add() rather find somethign like accordionPanel.Children.add("RemoteData");


May be this will help to identify the right event. accordionPanel on my watch expression:

accordionPanel: Ext.apply.extend.sb

allowQueuedExpand: false
autoScroll: true
bbarCls: "x-panel-bbar"
body: Ext.Element
bodyCls: "x-panel-body"
border: false
boxReady: true
bwrap: Ext.Element
bwrapCls: "x-panel-bwrap"
collapseEl: "el"
collapsed: false
collapsible: true
container: Ext.Element
el: Ext.Element
elements: "body,header,header"
events: Object
footerCls: "x-panel-footer"
getState: function () {
hasLayout: true
header: Ext.Element
headerCls: "x-panel-header"
headerTextCls: "x-panel-header-text"
height: 370
id: "ext-comp-1373"
initialConfig: Object
items: Ext.util.MixedCollection
lastSize: Object
layout: Ext.apply.extend.sb
layoutConfig: Object
margins: "3 0 3 0"
mons: Array[1]
ownerCt: Ext.apply.extend.sb
region: "west"
rendered: true
slideAnchor: "l"
split: true
tbarCls: "x-panel-tbar"
title: "Asset Types"
toolbars: Array[0]
tools: Object
width: "45%"
x: 0
xtype: "panel"
y: 3
__proto__: Ext.apply.extend.F

Little more troublshoot, here is where I need to insert the remote data.