Node cannot be inserted at the specified point in the hierarchy" code: "3

[prkristoff]

Hi,

I am having trouble with the following code. When i try to show the page i get this error: 'Node cannot be inserted at the specified point in the hierarchy" code: "3'. It seems to have something to do with adding the last column to the grid: 'assignmente'. Any help would be appreciated.

    create: function () {
        var myself = this;
        var columns = [];
        columns.push({
            id: 'week_no',
            header: "Week",
            dataIndex: 'week_no',
            menuDisabled: true,
            width: 50
        },{
            id: 'date',
            header: "Date",
            dataIndex: 'date',
            menuDisabled: true,
            renderer: Ext.util.Format.dateRenderer('m/d/Y'),
            width: 75
        },{
            id: 'start',
            header: "Start",
            dataIndex: 'from_time',
            menuDisabled: true,
            renderer: Ext.util.Format.dateRenderer('h:i A'),
            width: 75
        },{
            id: 'end',
            header: "End",
            dataIndex: 'to_time',
            menuDisabled: true,
            renderer: Ext.util.Format.dateRenderer('h:i A'),
            width: 75
        },{
            id: 'meeting_place',
            header: "Meeting Place",
            dataIndex: 'meeting_place',
            menuDisabled: true,
            width: 125
        },{
            id: 'information',
            header: "Other Information",
            dataIndex: 'information',
            menuDisabled: true,
            width: 250
        },{
            id: 'assignment',
            header: "Assignment",
            dataIndex: 'reading_assignment',
            menuDisabled: true,
            width: 250
        }
        );
        
        var columnModel = new Ext.grid.ColumnModel(columns);
        var dataStore = new Ext.data.Store({
            proxy: new Ext.data.HttpProxy({
                url: '/facilitators/' + document.getElementById('facilitator_id').getAttribute('value') + ';ajax_get_calender',
                timeout: 120000
            }),
            reader: new Ext.data.JsonReader({
                root: 'results',
                id: 'Id'
            },
            [{name: "id"},
             {name: "week_no"},
             {name: "date"},
             {name: "from_time", type: 'date',dateFormat: 'h:i A'},
             {name: "to_time", type: 'date',dateFormat: 'h:i A'},
             {name: "meeting_place", type: 'string'},
             {name: "information", type: 'string'},
             {name: "reading_assignment", type: 'string'},
            ])
        });
        // create the Grid
        this.grid = new Ext.grid.GridPanel({
            store: dataStore,
            el: 'calendar_grid',
            cm: columnModel,
            stripeRows: true,
            selModel: new Ext.grid.RowSelectionModel({singleSelect: true}),
            height:350,
            width:600,
            title:'Calendar',
            tbar:[{text: 'Edit Class',
                    id: this.editClassButtonId,
                    border: true},
                  {text: 'No class this week',
                    id: this.noClassButtonId},
                  {text: 'Add event',
                    id: this.addEventButtonId,
                    handler: function(){
                        addJFEvent.popup(this);
                    }},
                  {text: 'Edit event',
                    id: this.editEventButtonId},
                  {text: 'Remove free week',
                    id: this.removeFreeWeekButtonId}
                ]
        });
        
        dataStore.load();
        this.grid.render();
        this.grid.on('rowclick', this._setButtonStatus());
        this._setButtonStatus()();
        
        Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
        
       var viewport = new Ext.Viewport({
            layout:'border',
            items:[
                new Ext.BoxComponent({ // raw
                    region:'north',
                    el: 'calendar_heading',
                    height:32,
                    margins: '10 10 10 10'
                })
                , {
                    title: 'Help',
                    region:'east',
                    width: 300,
                    collapsible: true,
                    margins:'0 0 0 0',
                    autoScroll: true,
                    items: [this.create_accordion()]
                }, {
                    region:'center',
                    el: 'calendar_grid',
                    split:true,
                    height:350,
                    width:600,
                    collapsible: false,
                    title:'Calendar 222',
                    margins:'0 0 0 0',
                    items: [this.grid]
                },{
                    region:'south',
                    contentEl: 'south',
                    split:true,
                    height: 100,
                    minSize: 100,
                    maxSize: 200,
                    collapsible: true,
                    title:'South',
                    margins:'0 0 0 0'
                }
             ]
        });
    },
    
    _setButtonStatus: function () {
        var myself = this;
        return function () {
            var editClassBtn = Ext.ComponentMgr.get(myself.editClassButtonId);
            var noClassBtn = Ext.ComponentMgr.get(myself.noClassButtonId);
            var addEventBtn = Ext.ComponentMgr.get(myself.addEventButtonId);
            var editEventBtn = Ext.ComponentMgr.get(myself.editEventButtonId);
            var removeFreeBtn = Ext.ComponentMgr.get(myself.removeFreeWeekButtonId);
            var selected = myself._getSelectedRow();
            if (selected) {
                
            } else {
                editClassBtn.disabled = true;
                noClassBtn.disabled = true;
                addEventBtn.disabled = false;
                editEventBtn.disabled = true;
                removeFreeBtn.disabled = true;
            }
        }
    },
    
    _getSelectedRow: function () {
        return this.grid.getSelectionModel().getSelected();
    },
    
    create_accordion: function() {
        
        var accDiv = document.getElementById("accordion");
        var panelDivs = accDiv.getElementsByTagName("div");
        var items = [];
        for (var i=0; i < panelDivs.length; i+=2) {
            var panelDiv = panelDivs[i];
            var h3 = panelDiv.getElementsByTagName("h3")[0];
            var title = h3.textContent;
            var panelBody = panelDivs[i+1];
            var html = panelBody.textContent;
            var entry = {title: title,
                         html: html,
                         collapsed: true,
                         autoScroll: true,
                         height: 300};
            items.push(entry);
        }
        
        var accordion = new Ext.Panel({
            layout:'accordion',
            defaults: {
                // applied to each contained panel
                bodyStyle: 'padding:15px'
            },
            layoutConfig: {
                // layout-specific configs go here
                titleCollapse: false,
                animate: true,
                activeOnTop: true
            },
            items: items
        });
        return accordion;
    }

}

[hendricd]

you have this

el: 'calendar_grid',

defined in more than one place, but you don't even need to specify an element for anything as Ext generates all the necessary markup for you.

Also, make sure you wrap all that in an Ext.onReady function block.

[prkristoff]

Doug,

Thank you for replying to my message. When i remove that line in the new Ext.grid.GridPanel, i get the following error:

 ext-all-debug.js (line 15681)
ct has no properties
this.el = ct.createChild({

Paul

you have this

el: 'calendar_grid',

defined in more than one place, but you don't even need to specify an element for anything as Ext generates all the necessary markup for you.

Also, make sure you wrap all that in an Ext.onReady function block.

[hendricd]

Also, make sure you wrap all that in an Ext.onReady function block.

[prkristoff]

Doug,

Sorry, i meant to let you know that the code is in an onReady function. Here is the code before the create function i put in before:

var mainLayout;
var eventDialog;
function init_mainLayout () {
    eventDialog = new EventDialog();
    mainLayout = new MainLayout();
}

Ext.onReady(init_mainLayout);

MainLayout = Class.create();
MainLayout.prototype = {
    initialize: function(){
        this.grid = null;
        this.editClassButtonId = 'editClass';
        this.noClassButtonId = 'noClass';
        this.addEventButtonId = 'addEvent';
        this.editEventButtonId = 'editEvent';
        this.removeFreeWeekButtonId = 'removeFreeWeek';
        this.create();
        Ext.ComponentMgr.get(this.addEventButtonId).on('click', function(){alert('click')});
    },
    
    create: function () {...

Also, make sure you wrap all that in an Ext.onReady function block.

[hendricd]

Does this element exist:

{
   region:'center',
  el: 'calendar_grid',

..and is it really necessary to target a specific element. (generally never required within an Ext-managed layout).

[prkristoff]

I have an empty div with that id.

Does this element exist:

{
   region:'center',
  el: 'calendar_grid',

..and is it really necessary to target a specific element. (generally never required within an Ext-managed layout).

[hendricd]

You'll need to examine the stack trace and back into which component is screaming (it may not even be the 'center' region).

[prkristoff]

Doug,

i tracked things down to this.grid.render():

        Ext.ComponentMgr.register(this.grid);
        dataStore.load();
        this.grid.render();
        this.grid.on('rowclick', this._setButtonStatus());

When i remove that line, the grid appears but without the final column: assignment.

Paul

You'll need to examine the stack trace and back into which component is screaming (it may not even be the 'center' region).

[prkristoff]

Doug,

Never mind i tracked things down. it turns out i did not give my grid enough size.

thanks,

Paul

Doug,

i tracked things down to this.grid.render():

        Ext.ComponentMgr.register(this.grid);
        dataStore.load();
        this.grid.render();
        this.grid.on('rowclick', this._setButtonStatus());

When i remove that line, the grid appears but without the final column: assignment.

Paul