PDA

View Full Version : uncaught exception: No center region defined in BorderLayout ext-comp-1256



ext1974
22 Feb 2010, 9:27 PM
Hi,

I am new to Ext JS and trying to create a page with drag / drop and resizing the panel

1) I used the Ext Examples from portal ( for drag / drop) - It is really nice and workd fine.
2) Modified the code in portlet.js for resizing the panel

Error #1: Getting the above error on FF - but my functionality is working fine

uncaught exception: No center region defined in BorderLayout ext-comp-1256
if(!c && Ext.layout.BorderLayout.WARN !== false){


Error #2: IE6 - page is not rendaring and getting the Invalid argument js error



My Main Code

var viewport = new Ext.Viewport({
layout: 'border',
items: [{
region: 'north',
margins: '0 0 0 0'
}
,
{
region: 'west',
id: 'west-panel', // see Ext.getCmp() below
title: '=========',
split: true,
width: 200,
minSize: 175,
maxSize: 400,
collapsible: true,
margins: '3 3 3 3',
items:new Ext.Panel({
title: '**************',
region: 'west',
split: true,
width: 200,
collapsible: true,
margins:'3 0 3 3',
cmargins:'3 3 3 3',
items: [tbCurreny1,tbCurreny2,tbCurrency3,tbCurrency4,rating,role,profile]
})
},

{//center
region:'center',
id: 'center-panel',
items:{
xtype:'portal',
margins:'3 3 5 0',
region:'center',
items:[{
columnWidth:.5,
style:'padding:10px 0 10px 10px',
items:[{
title:'****************',
layout:'fit',
tools: tools,
items:[mygrid],
collapsible: false
},{
title: '******************',
tools: tools,
layout:'fit',
items:[newmygrid ],
collapsible: false
}]
},
{
columnWidth:.5,
style:'padding:10px 0 10px 10px',
items:[{
title: '**************',
tools: tools,
layout:'fit',
items:[thirdGrid],
collapsible: false
},
{
title: '*****************',
height:330,
tools: tools,
collapsible: false }]
}
]
}

} ////center end
,
{
region: 'south',
id: 'south-panel',
margins: '0 0 0 0'
}
]
});




Resize Code :

/*!
* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing@extjs.com
* http://www.extjs.com/license
*/
Ext.ux.Portlet = Ext.extend(Ext.Panel, {
anchor : '100%',
frame : true,
collapsible : true,
draggable : true,
cls : 'x-portlet',
onRender: function(component) {
Ext.ux.Portlet.superclass.onRender.call(this, component);

var element = this;

var portlet_resizer = new Ext.Resizable(this.id, {
handles: 'c',
minHeight: 100,
//maxHeight: 400,
pinned: true
});


portlet_resizer.on("resize", function(r, width, height, event){
element.setHeight(height);
element.syncSize();
if (element.layout) {
element.doLayout();
}
});
}
});

Ext.reg('portlet', Ext.ux.Portlet);



Note : I am getting error when I include the Resize logic in the portlet.js

Appreciate your help

Thanks

Animal
23 Feb 2010, 12:15 AM
So there's an error telling you exactly what the problem is with your layout. So what is your question?

BTW, can you read the code in your first post? I guarantee nobody will read it when it looks like that.