PDA

View Full Version : ExtJS 3.4 / 4.x Accordion Problem



netzkultur
19 Apr 2012, 5:36 AM
Hi,
I'm trying to get my extjs3 navigation to work on extjs4. But I think there must be something wrong because the items of the accordion are not clickable (v4.1 RC3) or not shown (v.4.0.7).



extjs4 - not working




var item1 = Ext.create('Ext.Panel', {
title: 'Accordion Item 2',
html: '<empty panel>',
cls:'empty'
});


var item2 = Ext.create('Ext.Panel', {
title: 'Accordion Item 3',
html: '<empty panel>',
cls:'empty'
});


var accordion = Ext.create('Ext.Panel', {
margins:'5 0 5 5',
split:true,
width: 210,
layout:'accordion',
items: [item1, item2]
});


var paneltest = Ext.create('Ext.Panel', {
width: 210,
region:'west',
items: [accordion, {
xtype: 'panel',
html: 'test'
}]

});
var viewport = Ext.create('Ext.Viewport', {
layout:'border',
items:[
paneltest, {
region:'center',
margins:'5 5 5 0',
cls:'empty',
bodyStyle:'background:#f1f1f1',
html:'

<empty center panel>'
}]
});




extjs3.4 (working)




var item1 = new Ext.Panel({
title: 'Accordion Item 4',
html: '<empty panel>',
cls:'empty'
});


var item2 = new Ext.Panel({
title: 'Accordion Item 5',
html: '<empty panel>',
cls:'empty'
});


var accordion = new Ext.Panel({

margins:'5 0 5 5',
split:true,
width: 210,
layout:'accordion',
items: [item1, item2]
});


var paneltest = new Ext.Panel({
region: 'west',
width: 210,
items: [accordion, { xtype: 'panel', html: 'test'}]
});


var viewport = new Ext.Viewport({
layout:'border',
items:[
paneltest, {
region:'center',
margins:'5 5 5 0',
cls:'empty',
bodyStyle:'background:#f1f1f1',
html:'

<empty center panel>'
}]
});


Full example:

http://jsfiddle.net/rotfuchs/AdJdr/

scottmartin
19 Apr 2012, 7:08 AM
You are over nesting your panels ... no need to embed panels inside panels.

Make the following changes and get rid of your 'paneltest' panel



var accordion = Ext.create('Ext.Panel', {
margins:'5 0 5 5',
split:true,
region:'west',
width: 210,
layout:'accordion',
items: [item1, item2]
});

var viewport = Ext.create('Ext.Viewport', {
layout:'border',
items:[
accordion, {
region:'center',
margins:'5 5 5 0',
cls:'empty',
bodyStyle:'background:#f1f1f1',
html:'<br/><br/>&lt;empty center panel&gt;'
}]
});​


Regards,
Scott.

netzkultur
19 Apr 2012, 10:36 PM
Thank you for your reply.

The 'paneltest' was only an example for a container element with several items. I need it to get something under the accordion e.g. a toolbar or in this case a simple panel with the word 'test' in it. As you can see in the screenshot it was possible in extjs v3.5. Sadly I can't find any way get this in extjs4.

scottmartin
20 Apr 2012, 5:40 AM
See if this is closer to what you are looking for:



var item1 = new Ext.Panel({
title: 'Accordion Item 4',
html: '<empty panel>',
cls: 'empty'
});

var item2 = new Ext.Panel({
title: 'Accordion Item 5',
html: '<empty panel>',
cls: 'empty'
});

var accordion = Ext.create('Ext.Panel', {
margins:'5 0 5 5',
split:true,
region:'west',
width: 210,
flex: 1,
layout:'accordion',
items: [item1, item2]
});

var westside = Ext.create('Ext.Container', {
width: 210,
layout: {
align: 'stretch',
type: 'vbox'
},
region: 'west',
items: [ accordion,
{
xtype: 'panel',
title: 'My Panel',
flex: 1
}
]

});

var viewport = Ext.create('Ext.Viewport', {
layout:'border',
items:[
westside, {
region:'center',
margins:'5 5 5 0',
cls:'empty',
bodyStyle:'background:#f1f1f1',
html:'<br/><br/>&lt;empty center panel&gt;'
}]
});


34307

Regards,
Scott.

netzkultur
23 Apr 2012, 4:22 AM
Thank you! That was the solution what I'm looking for. :)

Here's my complete navigation with collapsed accordion items if anyone is searching for it:

var item1 = new Ext.Panel({
title: 'Accordion Item 4',
html: '<empty panel>',
cls: 'empty'
});

var item2 = new Ext.Panel({
title: 'Accordion Item 5',
html: '<empty panel>',
cls: 'empty'
});

var accordion = Ext.create('Ext.panel.Panel', {
split:true,
region: 'west',

defaults: {
bodyStyle: 'padding:15px; border-top:none;'
},
layout: {
type: 'accordion',
titleCollapse: true,
multi: true,
fill: false,
animate: false,
flex: 1
},

id: 'accordionNavigationContainer',

listeners: {
afterrender: function(comp){
this.items.each(function(item) {
if(item.hidden != true) {
item.collapse();
}
});
this.doLayout();
}
},

items: [{
title: 'Panel 0',
html: 'Panel content!',
hidden: true,
collapsed: false
},{
title: 'Panel 1',
html: 'Panel content!<br>fsfsf<br>fsfsf<br>fsfsf<br>fsfsf<br>fsfsf<br>fsfsf<br>fsfsf',
listeners: {
beforeexpand: function(item) {
this.ownerCt.closeAllItems(item);
},
expand: function(item) {
this.ownerCt.doLayout();
},
collapse: function(item) {
this.ownerCt.doLayout();
}
}
},{
title: 'Panel 2',
html: 'Panel content!',
listeners: {
beforeexpand: function(item) {
this.ownerCt.closeAllItems(item);
} ,
expand: function(item) {
this.ownerCt.doLayout();
},
collapse: function() {
this.ownerCt.doLayout();
}
}
},{
title: 'Panel 3',
html: 'Panel content!',
listeners: {
beforeexpand: function(item) {
this.ownerCt.closeAllItems(item);
},
expand: function(item) {
this.ownerCt.doLayout();
},
collapse: function() {
this.ownerCt.doLayout();
}
}
}],

setNewHeight: function(currentItem) {
this.doLayout();
},

closeAllItems: function(currentItem) {

this.items.each(function(item) {
if(currentItem.id != item.id && item.hidden == false && item.collapsed == false) {
item.collapse();
}
});
this.doLayout();
}
});
var westside = Ext.create('Ext.Container', {
width: 210,
layout: {
align: 'stretch',
type: 'vbox'
},
region: 'west',
items: [ accordion,
{
xtype: 'panel',
title: 'My Panel',
flex: 1
}
]

});

var viewport = Ext.create('Ext.Viewport', {
layout:'border',
items:[
westside, {
region:'center',
margins:'5 5 5 0',
cls:'empty',
bodyStyle:'background:#f1f1f1',
html:'<br/><br/>&lt;empty center panel&gt;'
}]
});


Demo:
http://jsfiddle.net/rotfuchs/Rtjvv/6/