PDA

View Full Version : Problem with Accordion Layout inside Border



xxhalfpint
25 Jun 2012, 7:41 AM
I'm getting a panel.header is undefined when I use an accordion layout.

Here's the relevant Code:

Ext.define('App.view.Viewport', {
extend: 'Ext.container.Viewport',

layout:'border',
items: [{
region: 'north',
title: 'top'
}, {
split:true,
width:200,
xtype:'folderpanel'
}, {
title: 'Center',
region: 'center'
}]
}];

Ext.define('App.view.folders.FolderPanel', {
extend: 'Ext.panel.Panel',
alias: 'widget.folderpanel',

region: 'west',
layout:'accordion',
items: [{
title:'Title1',
html:'Content1'
}, {
title:'Title2',
html:'Content2'
}]
});

Does anyone have an idea what's going on I've been stuck for quite a while.
I appreciate the help :)

xxhalfpint
25 Jun 2012, 8:24 AM
I think it has to do with nesting the panels the wrong way, but haven't pin pointed the actual issue yet.

scottmartin
25 Jun 2012, 8:49 AM
This should work:

You have ']' instead of ')' at the end of your viewport define.



Ext.define('App.view.folders.FolderPanel', {
extend: 'Ext.panel.Panel',
alias: 'widget.folderpanel',

region: 'west',
layout: 'accordion',
items: [{
title: 'Title1',
html: 'Content1'
},
{
title: 'Title2',
html: 'Content2'
}]
});

Ext.define('App.view.Viewport', {
extend: 'Ext.container.Viewport',

layout: 'border',
items: [{
region: 'north',
title: 'top'},
{
split: true,
width: 200,
xtype: 'folderpanel'
},
{
title: 'Center',
region: 'center'
}]
});

Ext.create('App.view.Viewport', {});



Scott.

xxhalfpint
25 Jun 2012, 8:55 AM
That was a posting issue, I have what you suggested and am still getting the error :/
Still trying to figure out what could be wrong. Any other ideas.
It works if I use layout 'fit' instead of accordion.
The moment I change to accordion it breaks with the panel.header is undefined.

scottmartin
25 Jun 2012, 9:15 AM
Perhaps there is something on your end causing the problem?
What version of ExtJS4, Browser, OS, etc.

I ran this in jsFiddle using 4.02,4.07,4.1

36516

Scott.

scottmartin
25 Jun 2012, 9:22 AM
I put this together in our designer real quick: (Sencha Architect)



Ext.define('MyApp.view.MyViewport', {
extend: 'Ext.container.Viewport',

layout: {
type: 'border'
},

initComponent: function() {
var me = this;

Ext.applyIf(me, {
items: [
{
xtype: 'panel',
title: 'Center',
region: 'center'
},
{
xtype: 'panel',
width: 150,
layout: {
type: 'accordion'
},
region: 'west',
split: true,
items: [
{
xtype: 'panel',
title: 'Acc 1'
},
{
xtype: 'panel',
title: 'Acc 2'
}
]
},
{
xtype: 'panel',
height: 50,
title: 'North',
region: 'north'
}
]
});

me.callParent(arguments);
}

});

Ext.create('MyApp.view.MyViewport', {});

xxhalfpint
25 Jun 2012, 9:27 AM
Thanks for all the help.
I found the issue was with using neptune. I stopped using it and it worked so I guess I didn't import all the neccessary files in the index.html when I used it.

<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-neptune.css"/>

<script type=text/javascript" src="extjs/ext-neptune.js"></script>

I guess I also needed to add css for ext-all as well? or ext-all,js?

scottmartin
25 Jun 2012, 9:52 AM
Yes, neptune is an add-on, not a replacement.

Scott.