Inline edit grid doesn't work in two panels BorderLayout

[ajaxE]

Since I will need both center and south panel. I have created editable grid as following:

JS Code:


var layout = Ext.BorderLayout.create({
south: {
split:true,
initialSize: 500,
minSize: 100,
maxSize: 600,
autoScroll:true,
collapsible:true,
titlebar: true
},
center: {
margins:{left:0,top:0,right:0,bottom:0}
}
}, 'container');

layout.beginUpdate();
layout.add('center', new Ext.ContentPanel('grid-panel'));
var centerRegion = layout.getRegion('center');
centerRegion.add(new Ext.GridPanel(grid));
var south = new Ext.ContentPanel(
'grid-south',
{
title: 'Sample Data By Type',
fitToFrame:true,
autoScroll:true,
autoCreate:true
}
);
layout.add( 'south', south);
layout.endUpdate();

grid.render();


<div id="container"></div>
<div id="grid-panel" style="width:800px;height:500px;">
<div id="grid-example"></div>
<div id="editGrid">
</div>
</div>
<div id="grid-south"></div>

The above didn't work. If get rid of south panel and create layout using "grid-panel" instead of "container". It worked.

The error message is

missing ) in parenthetical
[Break on this error] <link rel="stylesheet" href="./css/style.css">\n

[Break on this error] <link rel="stylesheet" href="./css/style.css">\n
ext-all.js (line 43

Please help.


Thanks

[ajaxE]

BTW, it has to do with edit.

I have following also:

var gForm = new Ext.form.Form({});
gForm.render('editGrid');

Actually grid has been rendered fine in two panels BorderLayout. But when I have "gForm.render('editGrid');" it has the CSS error.

I need form to save the changed the data from the grid.

Thanks

[ajaxE]

nevermind, this problem is solved. But I am running into another problem now.

The problem was the return markup broke the existing code.