PDA

View Full Version : Problem with Trees



anarchos78
27 Mar 2012, 10:53 AM
Hello to everyone,
I am trying to build a tree with two sub-roots. The concept behind this is to have a tree that replicates “Members Names” divided in two subsets: “Regular Members” and “New Members”
The tree is instantiate correctly. Then when I try to expand "Regular Members" node and then collapse and finally re-expand it I have the following behavior: store load duplicate children. After this “Regular Members” cannot be collapsed. The same thing happens to “New Members” node.
I am straggling two days now to find a solution. Maybe there is a different way to build something like that but I don’t know how.
Any help is appreciated
Tom,
Greece

And the code:
Index.html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>A Tree</title>
<link rel="stylesheet" href="../ext/resources/css/ext-all.css" />
<script src="../ext/ext-all-debug.js"></script>
<script type="text/javascript" src="js/tree.js"></script>
</head>

<body>

<div id="tree"></div>

</body>
</html>
<-------------------------------------------------------------------------
tree.js

Ext.onReady(function() {

Ext.define('TreeModel',{
extend: 'Ext.data.Model',
fields: [{name: 'id'},{name: 'text'},{name: 'biog'}]
});

Ext.define('TreeModel1',{
extend: 'Ext.data.Model',
fields: [{name: 'id'},{name: 'text'},{name: 'biog'}]
});

var store = Ext.create('Ext.data.TreeStore', {
model: 'TreeModel',
proxy: {
type: 'ajax',
url: 'a.json',
reader: {
type: 'json',
root: 'DATA'
}
},
root: {
text: 'Regular Members',
id: 'src',
expanded: false
}
});


var store1 = Ext.create('Ext.data.TreeStore', {
model: 'TreeModel1',
proxy: {
type: 'ajax',
url: 'a1.json',
reader: {
type: 'json',
root: 'DATA'
}
},
root: {
text: 'New Members',
id: 'src1',
expanded: false
}
});



var TreeStore = Ext.create('Ext.data.TreeStore', {
root: {
text: 'Members',
id: 'rtt',
expanded: true
}
});

TreeStore.getRootNode().appendChild(store.getRootNode());
TreeStore.getRootNode().appendChild(store1.getRootNode());

// create the Tree
var tree = Ext.create('Ext.tree.Panel', {
store: TreeStore,
hideHeaders: true,
rootVisible: true,
height: 350,
width: 400,
title: 'Directory Listing',
renderTo: 'tree',
collapsible: true
});


tree.getSelectionModel().on('selectionchange', function(sm, selectedRecord) {
var selectedMemberId = selectedRecord[0].data.id;
var rootNode = selectedRecord[0].getId();
if (selectedRecord.length && (selectedRecord[0].getId())!="src" && (selectedRecord[0].getId())!="src1" && (selectedRecord[0].getId())!="rtt") {
alert(selectedMemberId);
}
else
{
alert('My root is: ' + rootNode);
}
});



});
<-------------------------------------------------------------------------
a.json

{"DATA":[{"cls":"file","text":"Dinosa Michailidis","id":1,"leaf":true},{"cls":"file","text":"Niloy Sarkar","id":2,"leaf":true},{"cls":"file","text":"Athanasios Rigas","id":3,"leaf":true},{"cls":"file","text":"George Pap","id":4,"leaf":true},{"cls":"file","text":"Bill Gates","id":5,"leaf":true},{"cls":"file","text":"Edward Norton","id":6,"leaf":true},{"cls":"file","text":"Alfered Pateras","id":7,"leaf":true},{"cls":"file","text":"Loukas Papadimos","id":8,"leaf":true},{"cls":"file","text":"Archidis Petsalnikos","id":9,"leaf":true},{"cls":"file","text":"Minas Malakas","id":10,"leaf":true},{"cls":"file","text":"Thanasis Papakonstantinou","id":11,"leaf":true},{"cls":"file","text":"Michael Schumacher","id":12,"leaf":true},{"cls":"file","text":"Mounopano Mounopanou","id":13,"leaf":true},{"cls":"file","text":"Aleksios Tsipitas","id":14,"leaf":true},{"cls":"file","text":"Andreas Papandreou","id":15,"leaf":true},{"cls":"file","text":"Tom Rigagan","id":17,"leaf":true},{"cls":"file","text":"zsasc zdac","id":20,"leaf":true},{"cls":"file","text":"Keftes Loverdos","id":25,"leaf":true},{"cls":"file","text":"Konstantinos Karamalakas","id":26,"leaf":true},{"cls":"file","text":"aaaaaaaa aaaaaaaaaa","id":27,"leaf":true}],"DATASET":20}

<-------------------------------------------------------------------------
a1.json

{"DATA":[{"cls":"file","text":"Kota Kotopoulo","id":1,"leaf":true},{"cls":"file","text":"Gida Katsikis","id":2,"leaf":true}],"DATASET":2}

mitchellsimoens
27 Mar 2012, 12:17 PM
Why do you have store and store1? Why not have the TreeStore have a root that isn't visible and have two children that are your two roots.

anarchos78
27 Mar 2012, 9:10 PM
Thank you for your reply,
And how can i do that because it seems that it doesn't work,
Can you give me some instructions according the code above?
Thank you in advance
Tom

anarchos78
27 Mar 2012, 9:35 PM
I have something to add. I am using two stores because i am pulling the data from two separate tables from my database. The above json files are for demonstartional use only. So how a have a tree with two roots when each root is replicated from a database?
Thanks

anarchos78
28 Mar 2012, 1:15 PM
No one?

podvlada
5 Apr 2013, 4:49 AM
Hi,

I am aware of the fact, that this thread is kind of old, but I'm experiencing the same problem - when my panel is created, it loads data correctly. After loading data manually (by button, method store.load() ) it also loads data correctly, but when I collapse and expand parent in the tree, it's children get doubled. No, data are not stored in database twice. No, data are not loaded twice. No, JSON string has only correct data inside. This happens somewhere between Ext.data.TreeStore and Ext.tree.Panel - and I do not see into this.

Have somebody come into some conclusion yet? Thanks in advance...

42948

anarchos78
7 Apr 2013, 2:28 AM
Hello,
Can you post the foul "json" that Ext.data.TreeStore holds?
Regards

podvlada
7 Apr 2013, 4:57 AM
The JSON object inspected in firebug console that comes from the controller to store is:



[
{
"children": [
{
"children": null,
"expanded": false,
"IdKey": 9,
"StartDate": "/Date(1364940000000)/",
"EndDate": "/Date(1366927200000)/",
"PercentDone": 15,
"Name": "Etapa 1",
"Priority": 1,
"Duration": 17,
"DurationUnit": "d",
"index": 0,
"parentId": 8,
"leaf": true,
"BaselineStartDate": null,
"BaselineEndDate": null,
"BaselinePercentDone": null,
"Id": 9
},
{
"children": null,
"expanded": false,
"IdKey": 10,
"StartDate": "/Date(1365717600000)/",
"EndDate": "/Date(1366408800000)/",
"PercentDone": 29,
"Name": "Etapa 2",
"Priority": 1,
"Duration": 6,
"DurationUnit": "d",
"index": 1,
"parentId": 8,
"leaf": true,
"BaselineStartDate": null,
"BaselineEndDate": null,
"BaselinePercentDone": null,
"Id": 10
}
],
"expanded": true,
"IdKey": 8,
"StartDate": "/Date(1364940000000)/",
"EndDate": "/Date(1366927200000)/",
"PercentDone": 18.652173913043477,
"Name": "Produkt 1",
"Priority": 2,
"Duration": 17,
"DurationUnit": "d",
"index": 0,
"parentId": null,
"leaf": false,
"BaselineStartDate": null,
"BaselineEndDate": null,
"BaselinePercentDone": null,
"Id": 8
}
]


There's only one record of every task.
It's always the same, even when some tasks show twice, so I assume, that magic happens somewhere between store and panel. Don't know what to do with that - it happens randomly.

Thanks for your concern.

anarchos78
7 Apr 2013, 6:53 AM
Please provide treestore model and panel definition. One thing more: Try to format your code (http://jsonlint.com/)

podvlada
10 Apr 2013, 5:16 AM
Hi, sorry about the time it took me to reply and the JSON code, I was busy...

There's a simple Ext.tree.Panel I also used - the problem persisted even with this simple configuration - although the panel on previous picture is not this one.


Ext.create('Ext.tree.Panel', {
title: 'Simple Tree',
width: 500,
height: 400,
store: taskStore,
rootVisible: false,
renderTo: 'ganttdiv',


dockedItems: [{
xtype: 'toolbar',
dock: 'top',
items: [
{ xtype: 'component', flex: 1 },
{ xtype: 'button', text: 'Button 1'},
{
text: 'Uložit',
iconCls: 'save',
handler: function () {
tempStore.sync();
}
},
{
text: 'Na?íst p?vodní stav',
iconCls: 'cancelchanges',
handler: function () {
tempStore.load();
}
},
]
}]
});


Panel gets data from a taskStore, which is written like this:



Ext.define("App.store.Task", { extend: 'Gnt.data.TaskStore',
model: 'App.model.Task',
autoSync: false,
proxy : {
type : 'ajax',
api: {
read: 'Tasks/Get',
create: 'Tasks/Create',
destroy: 'Tasks/Delete',
update: 'Tasks/Update'
},
writer : {
type : 'json',
root : 'taskdata',
encode : true,
allowSingle : false
},
reader : {
type : 'json'
}
},
listeners : {
beforesync : function() {
}
}
});


And that is based on App.model.Task:



Ext.define("App.model.Task", {
extend: "Gnt.model.Task",


// Some custom field definitions
fields: [
{ name: 'Id', type: 'int', useNull: true },
{ name: 'StartDate', type: 'date', dateFormat: 'MS', serialize: function (date) { return date; } },
{ name: 'EndDate', type: 'date', dateFormat: 'MS', serialize: function (date) { return date; } },
{ name: 'Priority', defaultValue: 1 },


// NodeInterface overrides
{name: 'parentId', type: 'int', useNull: true, persist: true },
{name: 'index', type: 'int', persist: true }
]
});


Data (in JSON format), that the TaskStore gets from controller are in my previous post.

anarchos78
10 Apr 2013, 7:39 AM
Hello,
What store type is "taskStore"? Is it "Ext.data.TreeStore"? If not, you have to make it a "TreeStore". Just inform me if you solve the problem.
Thanks

podvlada
10 Apr 2013, 10:40 AM
Basicly, it is. My taskStore extends 'Gnt.data.TaskStore' that extends 'Ext.data.TreeStore'.

Main point is, that with Ext JS 4.1.0 it worked as it supposed and with version 4.2.0 it went wrong. So I'm not getting what's wrong now... Nothing changed in "classes" that I use.

I will try to make my code more simple, less detached and hopefully the magic goes away :)

anarchos78
10 Apr 2013, 11:43 AM
I have noticed few issues with 4.2 version. Why just not stick with 4.1?

podvlada
10 Apr 2013, 11:49 PM
Well, that would be a solution :) But I (we) use Ext JS as an "library" for another product (Bryntum Ext Gantt - http://www.bryntum.com/products/gantt/) and new version of Gantt has some extra functionality, but it needs new version of Ext JS.

I'll try one more thing with this and if nothing helps, it will be necessary to stick with the older version, but that would be too bad :/

mpatton27
15 Jul 2013, 12:59 PM
We updated to 4.2.1 from 4.1 last week and are experiencing the same issue. In our case, collapsing our tree does not collapse the tree in the view, then clicking again to expand, duplicates all the nodes! Any update or work around on this?

podvlada
24 Jul 2013, 8:04 AM
I'm not exactly sure, but I believe that this behavior was accepted as bug and fixed in some next release. Anyway, in our developement the problem is gone :)

mpatton27
24 Jul 2013, 8:23 AM
I'm not exactly sure, but I believe that this behavior was accepted as bug and fixed in some next release. Anyway, in our developement the problem is gone :)

Thanks for the reply! The problem went away? Did you make a change or get latest version. What version are you using?

podvlada
25 Jul 2013, 1:02 AM
Yes, the problem went away without making any changes to our implementation and configuration. Current version, that we are using, is 4.2.0.663 as for the file ext-all-debug. Statement in the file says:




Build date: 2013-03-11 22:33:40 (aed16176e68b5e8aa1433452b12805c0ad913836)

This file is used as a base for product Gantt Diagram from Bryntum company, which is version 2.2.6 if that helps :) Was 2.2.0 that needed Ext v. 4.2.0 at least, that's when the problems came.

Actually, I browsed to history and found THIS (https://www.assembla.com/spaces/bryntum/support/tickets/697#). So, not sure wheter it is an Ext bug or Gantt bug. New release of Bryntum Gantt fixed this, so I'm not sure, if they fixed their (Bryntum) bug, or made up a solution that somehow got rid of Ext bug. :-?

EESW
25 Jul 2013, 2:15 PM
Thanks,Vlada for clarification! Glad to hear that Bryntum was able to figure out the problem and get you a solution so quickly. Guess, I'm going to have to wait for Sencha to fix the issue or track it down myself too. :(

Appreciate the help!

Kind regard,
Mark