PDA

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



denu
18 Dec 2011, 5:09 AM
Hi,
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,
original,
parentNode,
record;

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) {
this.getStore().getRootNode().appendChild(newNode);
} else {
if (selected.isLeaf())
selected = selected.parentNode;
selected.appendChild(newNode);
selected.expand();
}
this.getStore().sync();
}


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) {
this.getStore().sync();
}
}
,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);
}
}
this.getStore().sync();
}
}
}
,root: {
text: 'Articles',
id: 0,
nodeType: 'async',
leaf: false,
draggable: false,
expanded: false
}
});
return this.store;
}


Here's my request Json:


{
"id":null,
"text":"New article",
"name":"",
"description":"",
"leaf":true,
"parentId":0,
"iconCls":"article",
"index":0,
"depth":1,
"checked":null
}


Here's server response:



{
"success":true,
"data":[
{"id":100,
"text":"New article",
"name":"new-article",
"leaf":true,
"iconCls":"article",
"depth":1,
"index":0,
"checked":null,
"description":null,
"parentId":0}
]
}

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

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

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


var newNode = {
leaf: true,
iconCls: 'article',
text: 'New article'
};
this.addNewNode(newNode);

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
});

this.addNewNode(newNode);

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)

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

denu
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.