PDA

View Full Version : Panel splitting is not working with accordion layout



gabsoftware
9 Jul 2012, 12:25 AM
Hi,

I'm currently trying to make an application with the trial version of Sencha Architect. The application should have a header on top, a menu with collapsible items on the left, an alert panel on the bottom, and a tab panel on center. The problem is : as soon as I switch the menu layout to "accordion" then the split feature stop working correctly.

Here are 3 screenshots to show the problem :

369383693936940


When I try to resize the panel, I got a JavaScript exception ( me.innerCt is undefined). Here is the stacktrace of the error :


Uncaught exception: TypeError: Cannot convert 'me.innerCt' to object
Error thrown at line 31286, column 8 in <anonymous function: calculateChildBoxes>(visibleItems, targetSize) in http://extjs.cachefly.net/ext-4.0.7-commercial/ext-all-debug.js:
var me = this,
called from line 31600, column 8 in <anonymous function: onLayout>() in http://extjs.cachefly.net/ext-4.0.7-commercial/ext-all-debug.js:
var me = this,
called via Function.prototype.apply() from line 2891, column 12 in <anonymous function: callParent>(args) in http://extjs.cachefly.net/ext-4.0.7-commercial/ext-all-debug.js:
return parentClass[methodName].apply(this, args || []);
called from line 84833, column 12 in <anonymous function: onLayout>() in http://extjs.cachefly.net/ext-4.0.7-commercial/ext-all-debug.js:
me.callParent(arguments);
called via Function.prototype.apply() from line 20654, column 12 in <anonymous function: layout>() in http://extjs.cachefly.net/ext-4.0.7-commercial/ext-all-debug.js:
me.onLayout.apply(me, arguments);
called from line 21777, column 12 in <anonymous function: doContainerLayout>() in http://extjs.cachefly.net/ext-4.0.7-commercial/ext-all-debug.js:
layout.layout();
called from line 21790, column 8 in <anonymous function: afterLayout>(width, height, isSetSize, layoutOwner) in http://extjs.cachefly.net/ext-4.0.7-commercial/ext-all-debug.js:
this.doContainerLayout();
called via Function.prototype.apply() from line 20658, column 12 in <anonymous function: layout>() in http://extjs.cachefly.net/ext-4.0.7-commercial/ext-all-debug.js:
me.afterLayout.apply(me, arguments);
called from line 17411, column 12 in <anonymous function: doComponentLayout>(width, height, isSetSize, callingContainer) in http://extjs.cachefly.net/ext-4.0.7-commercial/ext-all-debug.js:
componentLayout.layout(width, height, isSetSize, callingContainer);
called from line 17375, column 8 in <anonymous function: setCalculatedSize>(width, height, callingContainer) in http://extjs.cachefly.net/ext-4.0.7-commercial/ext-all-debug.js:
me.doComponentLayout(width, height, false, callingContainer);


The faulty line seems to be :


innerCtBorderWidth = me.innerCt.getBorderWidth(me.perpendicularLT + me.perpendicularRB),


Problem occurs under Opera and Firefox, maybe others.

Here is the code generated by Sencha Architect :



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

padding: 5,
layout: {
type: 'border'
},

initComponent: function() {
var me = this;

Ext.applyIf(me, {
items: [
{
xtype: 'panel',
height: 150,
style: 'text-align: center;',
styleHtmlContent: false,
layout: {
type: 'border'
},
title: 'Super Application',
region: 'north',
dockedItems: [
{
xtype: 'image',
floating: false,
width: 320,
src: 'images/logo_cgo.png',
dock: 'right',
region: 'east'
}
],
items: [
{
xtype: 'panel',
title: 'Session',
region: 'center',
items: [
{
xtype: 'button',
height: 34,
width: 84,
text: 'Connexion'
},
{
xtype: 'button',
height: 34,
width: 88,
text: 'Déconnexion'
}
]
}
]
},
{
xtype: 'panel',
height: 50,
title: 'Alertes',
region: 'south'
},
{
xtype: 'panel',
width: 200,
activeItem: 0,
layout: {
type: 'accordion'
},
collapsible: true,
title: 'Menu',
region: 'west',
split: true,
items: [
{
xtype: 'panel',
layout: {
type: 'accordion'
},
collapsed: false,
title: 'Comptabilité',
items: [
{
xtype: 'panel',
collapsed: false,
title: 'Saisir'
},
{
xtype: 'panel',
collapsed: true,
title: 'Conseil'
}
]
},
{
xtype: 'panel',
layout: {
type: 'accordion'
},
collapsed: true,
title: 'Social',
items: [
{
xtype: 'panel',
collapsed: false,
title: 'Conseil'
}
]
},
{
xtype: 'panel',
layout: {
type: 'accordion'
},
collapsed: true,
title: 'Outils'
},
{
xtype: 'panel',
layout: {
type: 'accordion'
},
collapsed: true,
title: 'Factures'
},
{
xtype: 'panel',
layout: {
type: 'accordion'
},
collapsed: true,
title: 'Personnalisation'
},
{
xtype: 'panel',
layout: {
type: 'accordion'
},
collapsed: true,
title: 'Mes archives'
},
{
xtype: 'panel',
layout: {
type: 'accordion'
},
collapsed: true,
title: 'Visioplanning'
}
]
},
{
xtype: 'tabpanel',
activeTab: 0,
region: 'center',
items: [
{
xtype: 'panel',
title: 'Tab 1'
},
{
xtype: 'panel',
title: 'Tab 2'
},
{
xtype: 'panel',
title: 'Tab 3'
}
]
}
]
});

me.callParent(arguments);
}

});


Any help would be appreciated and will greatly influence wether I will use Sencha Architect + ExtJS for my development or not :-)

Best regards,

Gabriel

scottmartin
9 Jul 2012, 2:38 PM
Please try this using 4.1.1. It works fine.
I see in your settings/extjs path, you are using 4.07 from cachefly

Scott.

gabsoftware
10 Jul 2012, 4:57 AM
Hi,

It is indeed fixed with 4.1 :-) I didn't see that I was using 4.0.7 from cachefly.net after my fresh install of Sencha Architect. It's now working as expected.

I feel ExtJs is really a great product, by the way.

Thank you for your reply and for solving my problem !

Regards,

Gabriel