PDA

View Full Version : Accordion Help



bkcharan
14 Feb 2013, 5:48 AM
Hello
I am using ExtJS 4.1 and trying to add accordion items dynamically. I get all the items shows up as 'Open' in a equally divided space. Can someone point out what I am doing wrong here? Here is the code I use. (I fire handleEvent() from the app to invoke the code)



Ext.define('MyApp.view.Viewport', {
renderTo: Ext.getBody(),
extend: 'Ext.container.Viewport',
requires:[
'Ext.tab.Panel',
'Ext.layout.container.Border'
],


layout: {
type: 'border'
},


items: [{
region: 'north',
xtype: 'panel'
},{
region: 'west',
xtype: 'panel',
itemId: 'mainLeftPanel',
layout: {
type: 'accordion',
titleCollapse: true,
animate: true,
activeOnTop: true
},
items: undefined,
collapsible: true,
split: true,
title: 'west',
width: 150
},{
region: 'center',
xtype: 'panel'
}]

});




Ext.define('MyApp.controller.Main', {
extend: 'Ext.app.Controller',

views: [
'Viewport'
],


refs: [{
ref: 'mainLeftPanel',
selector: 'panel[itemId=mainLeftPanel]'
}],

init: function() {
this.application.on('Main', this.handleEvents, this);
},


handleEvents: function(eventName, args) {
var action = args.action;
if (!action) {
this.initializeLogin.call(this);
}
},


initializeLogin: function() {
var navList: [
{
label: 'Item 1',
xtype: 'panel'
},
{
label: 'Item 2',
xtype: 'panel'
},
{
label: 'Item 3',
xtype: 'panel'
}
]


for (var i in navList) {
var obj = navList[i];
this.getMainLeftPanel().add({
title: obj.label,
xtype: obj.xtype
})
}
}


});

sword-it
14 Feb 2013, 6:18 AM
Hi bkcharan,



I get all the items shows up as 'Open' in a equally divided space. Can someone point out what I am doing wrong here?


You add item dynamically, it mean every time you added a single item through for loop. In accordion layout
if container have a single item it will expand.
After for loop you need to call doLayout() method mainLeftPanel like-



.......................

for (var i in navList) {
var obj = navList[i];
this.getMainLeftPanel().add({
title: obj.label,
xtype: obj.xtype
})
}
.....................
this.getMainLeftPanel().doLayout();


for mor info read API docs- http://docs.sencha.com/ext-js/4-1/#!/api/Ext.panel.Panel-method-doLayout

bkcharan
14 Feb 2013, 6:31 AM
sword-it
Thanks for your reply. I added doLayout() and it made no difference though. I even invoked that from browser console and it remained the same. Any thoughts?