PDA

View Full Version : Problem while loading accordion panel in Extjs



AbrahamPDV
23 Nov 2013, 9:39 AM
Hi All,

I am new to Extjs. I am unable to load the accordian panel which is defined by using Ext.define.
My Scenario:

I have a tab panel and for tabpanel i have tbar text element. When i clicked on tbar text element i want to load accordion panel defined by using Ext.define. I am getting title but not accordion items.

App Name: SimplifiedUI
viewport.js:
Ext.define('SimplifiedUI.view.Viewport', {extend: 'Ext.container.Viewport',
uses: ['SimplifiedUI.view.header.Uiheader','SimplifiedUI.view.content.Uicontent'],
layout: {
type: 'border'
},
autoScroll: true,
initComponent: function() {
var me = this;

Ext.applyIf(me, {
items: [
{
xtype: 'uiheader',
region: 'north',
weight: -2,
height: 80
//title: 'My Panel'
},
{
xtype: 'uicontent',
region: 'center',
autoScroll: true
//title: 'My Panel'
}
]
});


me.callParent(arguments);
}
});



View where i am trying to load the accordion panel:

Ext.define('SimplifiedUI.view.content.Uicontent', {
extend:'Ext.panel.Panel',
alias: 'widget.uicontent',
uses:['SimplifiedUI.view.content.ClientAccordian'],
config: {
bodyStyle: {"background-color":"#F3F3F0","height":"85px"},
style:'position:static;background-repeat: no-repeat;cursor: default;margin: 10px 140px 20px 140px;',
},
autoWidth:true,
autoHeight:true,
autoScroll: true,
items : [{
xtype: 'tabpanel',
tabPosition : 'top',
plain : true,
activeTab : 0,
collapsible : false,
titlebar : false,
split : false,
deferredRender : false,
border : false,
autoWidth:true,
autoHeight:true,
autoScroll: true,
/* Tabs */
items : [{
title: "Integration Flows Config",
id: 'flowsconfig',
tbar: [{
text: 'Show Configurations',
id: 'showconfigurations',
handler: function() {
Ext.getCmp('flowsconfig').add({
xtype:'accordionpanel'
});
Ext.getCmp('flowsconfig').doLayout();
},
}]
}]
}],

constructor:function(config) {
this.initConfig(config);
this.callParent(arguments);
}
});

ClientAccordian.js
Ext.define('SimplifiedUI.view.content.ClientAccordian', {
extend: 'Ext.panel.Panel',
title: 'Accordion Panel',
alias: 'widget.accordionpanel',
layout: 'accordion',
defaults: {
bodyStyle: 'padding:15px'
},
layoutConfig: {
titleCollapse: false,
animate: true,
activeOnTop: true
},
items: [{
title: 'Panel 1',
name: 'panel-1',
html: 'Panel with static content!'
}, {
title: 'Panel 2',
name: 'panel-2',
html: 'Panel2 with static content!'
}, {
title: 'Panel 3',
name: 'panel-3',
html: 'Panel3 with static content!'
}]
});

Can you please hep me to do this.

Thanks,
Abraham.

dawesi
25 Nov 2013, 9:06 AM
can you edit your post and put it in code blocks (the # icon - used advanced edit) Also what is the format of the parent container/panel for the accordian? fit?