PDA

View Full Version : Container layout doesn't work



hermann.s
20 Sep 2013, 2:09 AM
I have a problem.
I have two custom defined components that I want to set the layout myself.

However it works for every component except for the Container component that I try to set as an accordion layout. It is instead set to vbox.


Ext.define('Base.Container', {
extend: 'Ext.container.Container',
xtype: 'container',

defaults:
{
hideMode: 'offsets',
},

config:
{
},

constructor : function(config)
{
this.initConfig(config);
config = merge(this.defaults, this.config);

this.callParent(arguments);

addToComponentManager(this, this.getXType());
}
});


In the main script file at some point I create a Container like this :

new Base.Container({id: '@BFE.Frontend.MyTask.Container.ID', layout: 'accordion'});

Later, in the console I type this in :

Ext.getCmp('Container_MyTask').layout.type
only to get "vbox".

However, the problem only exists with the container. My custom Panel component works fine :


Ext.define('Base.Panel', {
extend: 'Ext.panel.Panel',
xtype: 'panel',

defaults:
{
hideMode: 'offsets',
region: 'center',
renderTo: Ext.getBody()
},

config:
{
},

constructor : function(config)
{
this.initConfig(config);
config = merge(this.defaults, this.config);

this.callParent(arguments);

addToComponentManager(this, this.getXType());
}
});


new Base.Panel({id: '@BFE.Frontend.MainPanel.ID',
title: 'BPCT (powered by MCF)',
layout: 'card'});



Ext.getCmp('MainPanel').layout.type

will return "card".

Could it be that something is wrong with the constructor?

The merge function is this :

function merge(obj1, obj2) {
var obj3 = {};
for (var attrname in obj1) { obj3[attrname] = obj1[attrname]; }
for (var attrname in obj2) { obj3[attrname] = obj2[attrname]; }
return obj3;
}


I'm at a loss as to why this might be happening. Any ideas/suggestions?

ettavolt
21 Sep 2013, 3:42 AM
Move properties from defaults to definition object, drop constructor and use Ext.ComponentQuery/ComponentManager instead of yours.