1. #1
    Sencha User
    Join Date
    Sep 2008
    Posts
    66
    Vote Rating
    0
    barbara1712 is on a distinguished road

      0  

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

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


    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
    PHP Code:
    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,

  2. #2
    Sencha User BitPoet's Avatar
    Join Date
    Sep 2008
    Location
    Bavaria
    Posts
    277
    Vote Rating
    1
    BitPoet is on a distinguished road

      0  

    Default


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

  3. #3
    Sencha User
    Join Date
    Sep 2008
    Posts
    66
    Vote Rating
    0
    barbara1712 is on a distinguished road

      0  

    Default


    Thanks BitPoet for the reply,

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

  4. #4
    Sencha User
    Join Date
    Sep 2008
    Posts
    66
    Vote Rating
    0
    barbara1712 is on a distinguished road

      0  

    Default


    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 )

    PHP Code:
    [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.

  5. #5
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    87
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    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.

  6. #6
    Sencha User
    Join Date
    Sep 2008
    Posts
    66
    Vote Rating
    0
    barbara1712 is on a distinguished road

      0  

    Default


    This is my code for courseview.inc.php

    PHP Code:
     
    <?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>

  7. #7
    Sencha User
    Join Date
    Sep 2008
    Posts
    66
    Vote Rating
    0
    barbara1712 is on a distinguished road

      0  

    Default


    Any help please?

Thread Participants: 2