PDA

View Full Version : problems with this message "Ext.Container.LAYOUTS[this.layout.toLowerCase()] is not"



David Martinez
8 Aug 2010, 11:34 AM
I have problems with this message: "Ext.Container.LAYOUTS[this.layout.toLowerCase()] is not a constructor" I am designing a home page with a menu TreePanel. Tabs also be loaded dynamically. But when I run out the Custom Error that I can not identify the problem. please help.:s
el code:


Ext.ns("com.sys.ccs");

com.sys.ccs.PrincipalView = function(config) {
this.north = config.north;
this.west = config.west;
this.menuTree = config.menuTree;
this.center = config.center;

config.items = [
this.north
,this.west
,this.center
];
i = 0;
this.addTab = function addTab(e) {
var tabs = this.center;
var open = !tabs.getItem(e.id);
if (open){
var newPanel = new Ext.Panel({
id : e.id,
layout: 'fit',
title: e.text,
loadScripts: true,
closable: true,
border:false,
iconCls:e.id,
autoLoad: {
url: e.attributes.url + '?id=' + e.id,
border:false,
scripts: true,
scope: this
}
});
this.center.add(newPanel);
this.center.setActiveTab(newPanel);
}
else {
this.center.setActiveTab(e.id);
}
}

this.menuTree.on('click', function(node, e){
if(node.isLeaf()){
e.stopEvent();
this.addTab(node);
}
},this);

com.sys.ccs.PrincipalView.superclass.constructor.call(this, config);
};
Ext.extend(com.sys.ccs.PrincipalView, Ext.Viewport, {
layout:'tdgi_border'
});

mankz
8 Aug 2010, 11:46 AM
My guess is that this layout is not included in your source:



Ext.extend(com.sys.ccs.PrincipalView, Ext.Viewport, {
layout:'tdgi_border'
});

mankz
8 Aug 2010, 11:47 AM
Tip: Do a console.dir(Ext.Container.LAYOUTS) to see which layouts are defined.

David Martinez
8 Aug 2010, 12:02 PM
So you see I'm using namespace and thus should the "Ext.extend(com.sys.ccs.PrincipalView, Ext.Viewport, {
layout:'tdgi_border'
});" is set outside the block of code.

Full code:




Ext.ns("com.sys.ccs");

com.sys.ccs.PrincipalView = function(config) {
this.north = config.north;
this.west = config.west;
this.menuTree = config.menuTree;
this.center = config.center;

config.items = [
this.north
,this.west
,this.center
];
i = 0;

this.addTab = function addTab(e) {
var tabs = this.center;
var open = !tabs.getItem(e.id);
if (open){
var newPanel = new Ext.Panel({
id : e.id,
layout: 'fit',
title: e.text,
loadScripts: true,
closable: true,
border:false,
iconCls:e.id,
autoLoad: {
url: e.attributes.url + '?id=' + e.id,
border:false,
scripts: true,
scope: this
}
});
this.center.add(newPanel);
this.center.setActiveTab(newPanel);
}
else {
this.center.setActiveTab(e.id);
}
}

this.menuTree.on('click', function(node, e){
if(node.isLeaf()){
e.stopEvent();
this.addTab(node);
}
},this);

com.sys.ccs.PrincipalView.superclass.constructor.call(this, config);
};
Ext.extend(com.sys.ccs.PrincipalView, Ext.Viewport, {
layout:'tdgi_border'
});


Ext.ux.IFrameComponent = Ext.extend(Ext.BoxComponent, {
....
});

com.sys.ccs.PrincipalHeader = function(config) {
...
];
com.sys.ccs.PrincipalHeader.superclass.constructor.call(this, config);
}
Ext.extend(com.sys.ccs.PrincipalHeader, Ext.Panel, {
region: 'north',
baseCls:'x-plain',
id:'north',
height:80,
initComponent: function(){
com.sys.ccs.PrincipalHeader.superclass.initComponent.apply(this);
}
});
com.sys.ccs.PrincipalTree = function(config) {

...

com.sys.ccs.PrincipalTree.superclass.constructor.call(this, config);
}
Ext.extend(com.sys.ccs.PrincipalTree, Ext.tree.TreePanel, {
region: 'center',
border : false,
rootVisible: false,
rootVisible: false,
initComponent: function(){
com.sys.ccs.PrincipalTree.superclass.initComponent.apply(this);
}
});
Ext.onReady(function(){
var principalTree = new com.sys.ccs.PrincipalTree({
loader: new Ext.tree.TreeLoader(),
//url: 'menu.php',
root: new Ext.tree.AsyncTreeNode('menu.php')
});
var panelTree = new Ext.Panel({
items : [principalTree],
iconCls:'principal_mainmenu',
split: true,
autoScroll: true,
region : 'west',
width: 220,
collapsedTitle: true,
layoutConfig:{
animate : false
},
collapsible: true,
title: 'Módulos',
margins : '0 0 5 5'
});
var principalHeader = new com.sys.ccs.PrincipalHeader({
principalTree : principalTree
});
new com.sys.ccs.PrincipalView({
layout: 'center',
north: principalHeader,
west: panelTree,
menuTree : principalTree,
center: new Ext.TabPanel({
region: 'center',
id : 'tabPanelCenter',
border:false,
activeTab: 0,
enableTabScroll : true,
items: {
iconCls: 'principal_tabhome',
title: 'Principal'

}
})
});
setTimeout(function(){
Ext.get('loading').remove();
Ext.get('loading-mask').fadeOut({remove:true});
}, 250);
})

mankz
8 Aug 2010, 12:04 PM
What does "this.layout" evaluate to when the error happens? Investigate in Firebug, should give the answer.