PDA

View Full Version : Accordion does not work with items



ana.cristina.ionescu
1 Mar 2012, 7:51 AM
Hi ,

The following code is not working because panel 1 and panel 2 contains the items config instead of html.
Error on FF : itemEl is undefined.
Is there a solution for this?

Ext.onReady(function() {
var panel1 = { title: 'Title1', layout: 'fit', items: [] }
var panel2 = { title: 'Title2', layout: 'fit', items: [] }
var accordionPanel = new Ext.Panel(
{ layout: 'accordion',
items: [panel1, panel2]
});
new Ext.Viewport({ layout:'fit', items:[accordonPanel] });
})Thanks.

kau87
1 Mar 2012, 9:50 AM
Could it be the typo at new Ext.Viewport({ layout:'fit', items:[accordonPanel] });?
It should be accordionPanel.

ana.cristina.ionescu
1 Mar 2012, 1:50 PM
No, the issue is not from there. When testing, please consider some panels as items in panel 1 and panel2 .
Thank you,
Ana

kau87
1 Mar 2012, 2:59 PM
I tried this on Firefox 10.0.2 and ExtJS 4.0.6 and didn't find any errors:



Ext.onReady(function() {
var internalPanel1 = Ext.create( 'Ext.tab.Panel', {
width: 400,
height: 400,
items: [{
title: 'Foo'
}, {
title: 'Bar'
}]
});

var internalPanel2 = Ext.create( 'Ext.tab.Panel', {
width: 400,
height: 400,
items: [{
title: 'Foo'
}, {
title: 'Bar'
}]
});

var panel1 = { title: 'Title1', layout: 'fit', items: [ internalPanel1 ] }
var panel2 = { title: 'Title2', layout: 'fit', items: [ internalPanel2 ] }
var accordionPanel = new Ext.Panel(
{ layout: 'accordion',
items: [panel1, panel2]
});
new Ext.Viewport({ layout:'fit', items:[accordionPanel] });
});

vietits
1 Mar 2012, 5:33 PM
Try to use Ext.create instead of using new operator. I'm not sure whether or not it fixes your problem but the following code works well on my Chrome and FireFox.


Ext.onReady(function() {
var panel1 = { title: 'Title1', layout: 'fit', items: [] }
var panel2 = { title: 'Title2', layout: 'fit', items: [] }
var accordionPanel = Ext.create('Ext.Panel',{
layout: 'accordion',
items: [panel1, panel2]
});
Ext.create('Ext.Viewport',{ layout:'fit', items:[accordionPanel] });
});

ana.cristina.ionescu
15 Mar 2012, 9:22 AM
Actually the but appears when adding to an accordion a Menu.
Here is a sample code:




Ext.onReady(function() {
var menu_item1 = {
xtype : 'menuitem',
text : 'Menu Item'
};

var menu_panel1= Ext.create('Ext.menu.Menu', {
floating : false,
title : 'Menu 1',
items : [menu_item1 ]
});
var menu_item2 = {
xtype : 'menuitem',
text : 'Menu Item 2'
};

var menu_panel2 = Ext.create('Ext.menu.Menu', {
floating : false,
title : 'Menu 2',
items : [menu_item2 ]
});

var accordionPanel = new Ext.Panel(
{ layout: 'accordion',
items: [menu_panel1,menu_panel2 ]
});
new Ext.Viewport({ layout:'fit', items:[accordonPanel] });
})