Page 1 of 2 12 LastLast
Results 1 to 10 of 15

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

  1. #1

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

    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.


    Code:
        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;
        }
    
    }

  2. #2
    Sencha User hendricd's Avatar
    Join Date
    Aug 2007
    Location
    Long Island, NY USA
    Posts
    5,966

    Default

    you have this
    Code:
    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.
    "be dom-ready..."
    Doug Hendricks

    Maintaining ux: ManagedIFrame, MIF2 (FAQ, Wiki), ux.Media/Flash, AudioEvents, ux.Chart[Fusion,OFC,amChart], ext-basex.js/$JIT, Documentation Site.


    Got Sencha licensing questions? Find out more here.


  3. #3

    Default

    Doug,

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


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


    Quote Originally Posted by hendricd View Post
    you have this
    Code:
    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.

  4. #4
    Sencha User hendricd's Avatar
    Join Date
    Aug 2007
    Location
    Long Island, NY USA
    Posts
    5,966

    Default

    Also, make sure you wrap all that in an Ext.onReady function block.
    "be dom-ready..."
    Doug Hendricks

    Maintaining ux: ManagedIFrame, MIF2 (FAQ, Wiki), ux.Media/Flash, AudioEvents, ux.Chart[Fusion,OFC,amChart], ext-basex.js/$JIT, Documentation Site.


    Got Sencha licensing questions? Find out more here.


  5. #5

    Default

    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:

    Code:
    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 () {...
    Quote Originally Posted by hendricd View Post
    Also, make sure you wrap all that in an Ext.onReady function block.

  6. #6
    Sencha User hendricd's Avatar
    Join Date
    Aug 2007
    Location
    Long Island, NY USA
    Posts
    5,966

    Question

    Does this element exist:

    Code:
    {
       region:'center',
      el: 'calendar_grid',
    ..and is it really necessary to target a specific element. (generally never required within an Ext-managed layout).
    "be dom-ready..."
    Doug Hendricks

    Maintaining ux: ManagedIFrame, MIF2 (FAQ, Wiki), ux.Media/Flash, AudioEvents, ux.Chart[Fusion,OFC,amChart], ext-basex.js/$JIT, Documentation Site.


    Got Sencha licensing questions? Find out more here.


  7. #7

    Default

    I have an empty div with that id.

    Quote Originally Posted by hendricd View Post
    Does this element exist:

    Code:
    {
       region:'center',
      el: 'calendar_grid',
    ..and is it really necessary to target a specific element. (generally never required within an Ext-managed layout).

  8. #8
    Sencha User hendricd's Avatar
    Join Date
    Aug 2007
    Location
    Long Island, NY USA
    Posts
    5,966

    Default

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

    Maintaining ux: ManagedIFrame, MIF2 (FAQ, Wiki), ux.Media/Flash, AudioEvents, ux.Chart[Fusion,OFC,amChart], ext-basex.js/$JIT, Documentation Site.


    Got Sencha licensing questions? Find out more here.


  9. #9

    Default

    Doug,

    i tracked things down to this.grid.render():
    Code:
            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


    Quote Originally Posted by hendricd View Post
    You'll need to examine the stack trace and back into which component is screaming (it may not even be the 'center' region).

  10. #10

    Default

    Doug,

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

    thanks,

    Paul

    Quote Originally Posted by prkristoff View Post
    Doug,

    i tracked things down to this.grid.render():
    Code:
            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

Page 1 of 2 12 LastLast

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •