View Full Version : TreeStore gives error "original is undefined" after appendChild

18 Dec 2011, 5:09 AM
I'm using extjs 4.0.7

What could be the reason for firebug throwing javascript error 'original is undefined' after appending new node to parent node on the tree panel?

error is throwed here in ext-all-debug.js:

onUpdateRecords: function(records, operation, success){
if (success) {
var me = this,
i = 0,
length = records.length,
data = me.data,

for (; i < length; ++i) {
record = records[i];
original = me.tree.getNodeById(record.getId());
parentNode = original.parentNode;
if (parentNode) {

original.isReplace = true;
parentNode.replaceChild(record, original);
original.isReplace = false;

After I do something like this in my code:

addNewNode : function(newNode) {
var selected = this.getTree().getSelectionModel().getLastSelected();
if (!selected) {
} else {
if (selected.isLeaf())
selected = selected.parentNode;

I have TreeStore with HttpProxy:

getStore: function() {
if (this.store == null)
this.store = Ext.create('Ext.data.TreeStore', {
model: 'Article',

proxy: {
type: 'ajax',
api: {
create: 'service/articles.php?action=create',
read: 'service/articles.php?action=read',
update: 'service/articles.php?action=update',
destroy: 'service/articles.php?action=destroy'
reader: {
type: 'json',
root: 'data'
writer: {
type: 'json'
batchActions: true,

pageParam: undefined,
startParam: undefined,
pageParam: undefined,
pageParam: undefined

listeners: {
remove: {
scope: this,
fn: function (thisNode, removedNode, options) {
,move: {
scope: this,
fn: function(thisode, oldParent, newParent, index, options) {
var records = newParent.childNodes;
this.getStore().batchUpdateMode = 'complete';
for (var i=0; i < records.length; i++) {
if (records[i].data.index != i) {
records[i].set('index', i);
,root: {
text: 'Articles',
id: 0,
nodeType: 'async',
leaf: false,
draggable: false,
expanded: false
return this.store;

Here's my request Json:

"text":"New article",

Here's server response:

"text":"New article",

18 Dec 2011, 5:12 AM
which appendChild? Is newNode an actual Ext.data.NodeInterface instance?

18 Dec 2011, 10:14 AM
Use a debugger to step into getNodeById. See if you can figure out why it's returning undefined.

18 Dec 2011, 2:09 PM
My newNode was a plain js object:

var newNode = {
leaf: true,
iconCls: 'article',
text: 'New article'

I've tried to change it to NodeInterface type as You suggested:

var newNode = new Ext.data.NodeInterface({
text: 'New category',
name: 'new-category',
leaf: false,
iconCls: 'x-tree-icon-parent',
expandable: true


But after that the new node appears on the tree with empty 'text' and 'name' field...

I'm using proxy and custom model:

Ext.define('Article', {
extend: 'Ext.data.Model',
fields: [{ name: 'id', type: 'int', useNull: true},
{ name: 'text', type: 'string'},
{ name: 'name', type: 'string'},
{ name: 'description', useNull: true},
{ name: 'leaf', type: 'boolean'},
{ name: 'parentId', type: 'int'},
{ name: 'iconCls', type: 'string'},
{ name: 'index', type: 'int'},

There's lack of good example with TreeStore with HttpProxy.
What's worse the existing examples in current Documentation are broken:

XML Tree doesn't load nodes: http://docs.sencha.com/ext-js/4-0/#!/example/tree/xml-tree.html (http://docs.sencha.com/ext-js/4-0/#%21/example/tree/xml-tree.html)
as well as Drag and Drop ordering: http://docs.sencha.com/ext-js/4-0/#!/example/tree/reorder.html (http://docs.sencha.com/ext-js/4-0/#%21/example/tree/reorder.html)

27 Dec 2011, 2:44 PM
denu, any chance you figured this out? I'm having the same problem.

28 Dec 2011, 2:53 PM
sorry , i've left that behind as well as extjs4. there's no such problem with extjs3. maybe with next upgrade it will be easier to use proxy tree store.