error 'unable to modify the parent container element before child element is closed'

[barbara1712]

Hi,

I am new to Extjs. I am getting the error
error 'unable to modify the parent container element before child element is closed'
on IE8. But this works fine on Mozilla.
The structure is like
index.php

echo '<div id="courselist"></div>';
 include('course/courseview.php'); 

course/courseview.php is having
Main Panel
-Top Panel
--Form Panel
-Bottom Panel
--Tab Panel
---WeekGrid,MonthGrid

mainPanel.render('courselist')

Please help me to solve this error.
I am not getting why this error is displayed.

Your help will be highly appriciated.

Thanks,

[BitPoet]

Did you forget to wrap your code in an Ext.onReady callback?

[barbara1712]

Thanks BitPoet for the reply,

I have written the whole code (course/courseview.php) in Ext.onReady callback.

[barbara1712]

I am getting this error on IE only if I used grid panel.
Instead of GridPanel, if I use simple panel like below. It then works on both browser (IE and Mozilla )

[LEFT]var mainPanel = new Ext.Panel({
title:'Courses',
layout:'',
collapsible:false,
frame:false,
width:820,
height:400,
//renderTo:'courselist',[/LEFT]
html:'This is a test Panel'
});
 
mainPanel.render('courselist') 

Can any one please help me?

Thanks.

[Condor]

Can you post the actual returned HTML page (copy from 'show source')?

This error usually means that you are trying to modify the element that contains a script from within that script.
This is why you should not include scripts at deeper levels than the body.

[barbara1712]

This is my code for courseview.inc.php

 
<?php
?>
<style type="text/css">
   .grey-row .x-grid3-cell-inner{
      background-color:#F0F0F0;
    }
</style>
<script language="JavaScript" type="text/javascript" src="ext-3.0.0/examples/ux/RowPopup.js"></script>
<script language="JavaScript" type="text/javascript" src="GridRowPopup.js"></script>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/examples/ux/css/RowPopup.css" />
<script language="JavaScript" type="text/javascript" src="ext-3.0.0/examples/ux/uxvismode.js"></script>
<script type="text/javascript" src="course/courseform.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
 Ext.Container.prototype.bufferResize = false;
 function renderDetails(value, metadata, record, rowIndex, colIndex, store){
  var r = store.getAt(rowIndex);
  var url = '<a href="course/view.php?id='+ r.get('id') +'" style="text-decoration:underline">View</a>';
  return url;
 };
 function renderCompleted(value, metadata, record, rowIndex, colIndex, store){
  if(value == 1)
   return 'Yes';
  else
   return 'No';
 };
 /* --------------------------- WEEK VIEW STARTS ----------------------------------- */
 /***** Reader for Courses **********/
 courseWeekReader = new Ext.data.JsonReader({
  root: 'courses',
  totalProperty: 'totalCourses'
 },
 [
  {name: 'id',mapping:'id'},
  {name: 'fullname', mapping: 'fullname'},
  {name: 'coursecompany', mapping: 'coursecompany'},
  {name: 'completed', mapping: 'completed'},
  {name: 'courseby', mapping: 'courseby'},
  {name: 'summary', mapping: 'summary'},
  {name: 'name', mapping: 'name'},
  {name: 'shortname', mapping: 'shortname'},
  {name: 'view'}
 ]);
 /******** Reader ends **************/
 /****** Strore ***********/
 courseWeekStore = new Ext.data.Store({
  reader: courseWeekReader,
  url: 'course/coursedashboard.php',
  listeners:{'beforeload':function(){
   this.baseParams={
    courseDate: courseDate1,
    view: 0
   }
  }}
 });
 /****** Strore Ends *******/
 /******** Paging Bar ********/
 var courseWeekPaging = new Ext.PagingToolbar({
  pageSize: pageSize,
  store: courseWeekStore,
  //store:GradeStore,
  displayInfo: true,
  displayMsg: 'Displaying records {0} - {1} of {2}',
  emptyMsg: "No records to display"
 });
 /******* Paging Bar ends ********/
/*
 var tplGridRow = '<table style="height=\'1.7em\' width="100%" >' +
 '<tr><td><div class="popupTitle">Course Details</div></td></tr>'+
 '</table><table width="100%" bgcolor="white">' +
 '<tr><td></div><div class="popupText">'+
 '<b>Full Name:</b> {fullname}<br />'+
 '<b>Short Name:</b> {shortname}<br />'+
 '<b>Category:</b> {name}<br><br>' +
 '<b>Summary</b><br />{summary}<br><br>' +
 '</div><br></td></tr></table>';
*/
 /********** Grid Panel for Course in Week starts **************/
 courseWeekGrid = new Ext.grid.GridPanel({
  store:courseWeekStore,
  title:'Week View',
        trackMouseOver:false,
        disableSelection:true,
  collapsible: false,
  loadMask: true,
  height:283,
  autoScroll:true,
  columns:
  [
   { id: 'id', header: "", dataIndex: 'id', hidden:true },
   { id: 'fullname', header: "Name", dataIndex: 'fullname', sortable: true, width:240},
   { id: 'coursecompany', header: "Company", dataIndex: 'coursecompany', sortable: true , width:50},
   { id: 'completed', header: "Completed", dataIndex: 'completed',width:50, renderer:renderCompleted},
   { id: 'courseby', header: "Created By", dataIndex: 'courseby',width:130},
   { id: 'view', header: "View Details", renderer:renderDetails,width:70}
  ],
  viewConfig: {
            forceFit:true,
            enableRowBody:true,
   //emptyText: '<b><center>No records to display</b></center>',
            showPreview:true,
            getRowClass : function(record, rowIndex, p, store){
             if(record.data.completed ==1)
     return 'grey-row';
    else
     return 'x-grid3-row-collapsed';
   }
        },
        //plugins: new Ext.ux.grid.RowPopup({tpl:tplGridRow}),
  bbar:courseWeekPaging
 });
 /********** Grid Panel for Course in Week ends **************/
 /* --------------------------- WEEK VIEW ENDS ----------------------------------- */
 var topPanel = new Ext.Panel({
  title:'',
  layout:'',
  collapsible:true,
  frame:false,
  border:false,
  items: [frmCourse]
 });
 var myTabPanel = new Ext.TabPanel({
  activeTab:0,
  border:false,
  items:[courseWeekGrid]
 });
 var bottomPanel = new Ext.Panel({
  //title:'Course',
  layout:'',
  collapsible:false,
  frame:false,
  border:false,
  items:[myTabPanel]
 });
 var mainPanel;
 if(document.getElementById('courselist'))
 {
   mainPanel = new Ext.Panel({
   title:'Courses',
   layout:'',
   collapsible:false,
   frame:false,
   width:820,
   //border:true,
   height:400,
   //renderTo:'courselist',
   items: [topPanel,bottomPanel]
     });
 }
 mainPanel.render('courselist');
 // LOAD THE STORES
 courseWeekStore.load({ params:{start:0, limit:pageSize,view:0,courseDate:courseDate1}});

courseWeekGrid.setHeight(bottomPanel.getHeight());
})
</script>

[barbara1712]

Any help please?