PDA

View Full Version : error when loading grids into an accordion layout of a Container-region



Reggae
21 Oct 2011, 3:26 AM
I have a complex MVC layout which consists of a viewport with hboxes and a container within one of those hboxes. The container has a border layout and has 5 regions. When the application is started, the container contains only the empty region panels.
The content of the regions is added at runtime. In Ext 4.0.2a that worked very well and smooth. In Ext 4.0.7 (gpl) it throws the error:

Type error 'undefined is not an object (evaluating child.header.removeCls')


Ext.define('BE.view.AdministrationView', {Here is the code:


extend: 'Ext.container.Container',
alias: 'widget.BE-view-AdministrationView',




/**
* Initializer
*/
initComponent: function() {
var config = {
layout: 'border',
items: [{
region:'north',
itemId:'WeluPdmAdministrationRegionNorth',
margins: '0 0 0 0',
height: 200,
split: true,
collapsible: true,
collapseMode: 'mini',
collapsed: true,
layout: 'accordion',
activeItem: 0
},{
region:'west',
itemId:'WeluPdmAdministrationRegionWest',
margins: '0 0 0 0',
width: 400,
split: true,
collapsible: true,
collapseMode: 'mini',
collapsed: true,
layout: 'accordion',
activeItem: 0


},{
region:'south',
itemId:'WeluPdmAdministrationRegionSouth',
margins: '0 0 0 0',
height: 200,
title: BE.core.I18n.get('WeluPdm', 'StammdatenSouthTitel'),
split: true,
collapsible: true,
collapseMode: 'mini',
collapsed: true,
layout: 'accordion',
activeItem: 0
},{
region:'east',
itemId:'WeluPdmAdministrationRegionEast',
margins: '0 0 0 0',
width: 500,
split: true,
collapsible: true,
collapseMode: 'mini',
collapsed: true,
layout: 'accordion',
activeItem: 0


},
{
region: 'center',
itemId: 'WeluPdmAdministrationRegionCenter',
layout: 'accordion',
margins: '0'
}]
};
Ext.apply(this, config);
this.callParent(arguments);


},

/**
* populates a given region(center, north, west, south, east)
* of a container with appropriate items
*/
setRegion: function(region, subModulePath) {
if (region == 'center') {
this.cleanAllRegions();
this.collapseAllRegions();
}
var regionObject = this.getRegion(region);
if (regionObject !== undefined) {
var regionPath = subModulePath + '/' + region;;
var items = this._loadRegionItems(regionPath);
if (items.length > 0) {
var expandRegion = false;
Ext.each(items, function(expItem) {
if (!expItem.collapsed && !expandRegion) {
expandRegion = true;
}
});
regionObject.add(items);
}
regionObject.doLayout();
if (region == 'center') {
expandRegion = true ? this.expandRegion('center') : regionObject.collapse();
} else {
if (expandRegion) {
regionObject.expand();
}
}
}
},

/**
* @param region
* @returns a region component
*/
getRegion: function(region) {
switch(region) {
case 'center':
return this.getComponent('WeluPdmAdministrationRegionCenter');
break;
case 'north' :
return this.getComponent('WeluPdmAdministrationRegionNorth');
break;
case 'west' :
return this.getComponent('WeluPdmAdministrationRegionWest');
break;
case 'south' :
return this.getComponent('WeluPdmAdministrationRegionSouth');
break;
case 'east' :
return this.getComponent('WeluPdmAdministrationRegionEast');
break;
}
},

/**
* expands a given region of the container
*
* @param region
*/
expandRegion: function(region) {
if (this.items) {
var eRegion = this.getRegion(region);
if (eRegion.items) {
eRegion.expand();
if (eRegion.items.items.length > 0) eRegion.items.items[0].expand();
}
eRegion.doLayout();
}
},

collapseRegion: function(region) {
var eRegion = this.getRegion(region);
eRegion.collapse();
},

/**
* collapses all regions
*/
collapseAllRegions : function() {
this.getComponent('WeluPdmAdministrationRegionSouth').collapse();
this.getComponent('WeluPdmAdministrationRegionNorth').collapse();
this.getComponent('WeluPdmAdministrationRegionWest').collapse();
this.getComponent('WeluPdmAdministrationRegionEast').collapse();
},

/**
* removes all items from a given region
*
* @param region
*/
cleanRegion: function(region) {
var eRegion = this.getRegion(region);
if (eRegion.items.items.length > 0) eRegion.removeAll();
},

/**
* removes all items from all regions.
*/
cleanAllRegions : function() {
var northRegion = this.getRegion('north');
if (northRegion.items.items.length > 0) {
northRegion.removeAll();
if (!northRegion.collapsed) northRegion.collapse;
}
var westRegion = this.getRegion('west');
if (westRegion.items.items.length > 0) {
westRegion.removeAll();
if (!westRegion.collapsed) westRegion.collapse;
}
var southRegion = this.getRegion('south');
if (southRegion.items.items.length > 0) {
southRegion.removeAll();
if (!southRegion.collapsed) southRegion.collapse;
}
var eastRegion = this.getRegion('east');
if (eastRegion.items.items.length > 0) {
eastRegion.removeAll();
if (!eastRegion.collapsed) northRegion.collapse;
}
var centerRegion = this.getRegion('center');
if (centerRegion.items.items.length > 0) {
centerRegion.removeAll();
}
},


/**
* @private
* @return {Array} an array of region items fetched from the registry.
*/
_getRegionItems: function(region) {
var items = [];
var config = BE.core.Registry.get('menu/administration/components/' + region);
Ext.each(config, function(component) {
var item = {};
Ext.apply(item, component, {layout: 'fit'});
items.push(item);
});
return items;
},

/**
* @private
* @return {Array} an array of region items fetched from the registry.
*/
_loadRegionItems: function(region) {
var items = [];
var config = BE.core.Registry.get(region);
Ext.each(config, function(component) {
var item = {};
Ext.apply(item, component);
items.push(item);
});
return items;
}


});

Reggae
21 Oct 2011, 8:38 AM
Sorry I forgot to mention the error-line (ext-all-debug) of the error when loading grids into a accordion layout of Container Region.

The line is 84870