PDA

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



prkristoff
29 Jun 2008, 11:01 AM
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
29 Jun 2008, 11:27 AM
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
29 Jun 2008, 11:41 AM
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
29 Jun 2008, 11:46 AM
Also, make sure you wrap all that in an Ext.onReady function block.

prkristoff
29 Jun 2008, 11:50 AM
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
29 Jun 2008, 11:58 AM
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
29 Jun 2008, 12:00 PM
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
29 Jun 2008, 12:03 PM
You'll need to examine the stack trace and back into which component is screaming (it may not even be the 'center' region).

prkristoff
29 Jun 2008, 1:01 PM
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
29 Jun 2008, 1:06 PM
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

Animal
29 Jun 2008, 11:11 PM
If you are using a Viewport, you will never ever call the render method.

add the Grid to the Container object that you want to contain it.

Components register themselves, you don't have to do it.

ankurgoel
27 Aug 2008, 10:54 PM
When i m running my code i m have prob.."Node cannot be inserted at the specified point in the hierarchy" code: "3"
my html code:



<body>

<ul id="actions" class="x-hidden">
<li>
<a id="use" href="#">Create</a>
</li>
<li>
<a id="create" href="#">Add</a>
</li>
</ul>

<div id="tab1"></div>
<div id="tab2"></div>
<div id="tab3"></div>
<div id="tab4"></div>

</body>


my js code:
Ext.onReady(function(){
// Menu containing actions
var tabActions = new Ext.Panel({
frame:true,
title: 'Actions',
collapsible:true,
el:'actions',
titleCollapse: true
});

// Parent Panel to hold actions menu
var actionPanel = new Ext.Panel({
id:'action-panel',
region:'west',
split:true,
collapsible: true,
collapseMode: 'mini',
width:300,
minWidth: 150,
border: true,
baseCls:'x-plain',
items: [tabActions]
});

// Main (Tabbed) Panel
var tabPanel = new Ext.TabPanel({
region:'center',
deferredRender:false,
autoScroll: true,
//margins:'0 4 4 0',
activeTab:0,
items:[{
id:'tab1',
contentEl:'tab1',
title: 'y',
closable:false,
autoScroll:true
},{
id:'tab2',
contentEl:'tab2',
title: 'x',
closable:false,
autoScroll:true
}]
});

// Configure viewport
viewport = new Ext.Viewport({
layout:'border',
items:[actionPanel,tabPanel]
});


});


Any one have any idea...

Animal
27 Aug 2008, 11:22 PM
Several problems here.

Why did you do this:



var tabActions = new Ext.Panel({
frame:true,
title: 'Actions',
collapsible:true,
el:'actions',
titleCollapse: true
});

// Parent Panel to hold actions menu
var actionPanel = new Ext.Panel({
id:'action-panel',
region:'west',
split:true,
collapsible: true,
collapseMode: 'mini',
width:300,
minWidth: 150,
border: true,
baseCls:'x-plain',
items: [tabActions]
});


Create a Panel, and then immediately wrap it with another Panel? Why did you decide on that extra coding?

Those tabs. You cannot use the id config with the same id as the contentEl. The contentEl is accessed by id, and inserted into the Panel. The Panel's main element is given the ID specified, so it's inserting the Panels element into itself.

ankurgoel
28 Aug 2008, 12:01 AM
thanx dear,
Actually i was working with the basic tab pannel tutorial. The same code style is there.
My prob is solved.

Animal
28 Aug 2008, 12:44 AM
Please post a link to any code that encourages such overnesting and I will edit it.