PDA

View Full Version : Check Tree not displaying data



thorsten55
28 Oct 2014, 8:50 AM
Hi Guys

I am using Ext JS 4.2 and I am trying to make a check tree.

The problem that I am having is that no data is being displayed in my tree:

50827
So far I got the following code:

The data:

var treeSelectedData = {
"wurzel": {
"text": 'New Top Node',
"checked": "null",
"expanded": "true",
"children": [
{
"name": "Inbox",
"id": "Inbox",
"children": [
{
"id": "OfficeInbox",
"name": "RetailInbox",
"checked": "true"
},
{
"id": "bw",
"name": "BusinessWarehouse",
"checked": "false"
},
{
"id": "OphNew",
"name": "AppliedOpeningHours",
"checked": "false"
},
{
"id": "Intranet",
"name": "Intranet",
"checked": "false"
}
]
},
{
"name": "Outbox",
"id": "Outbox",
"children": [
{
"id": "retailOutbox",
"name": "retailOutbox",
"checked": "false"
},
{
"id": "ophApproved",
"name": "ophApproved",
"checked": "false"
},
{
"id": "ophRejected",
"name": "ophRejected",
"checked": "false"
}
]
},
{
"name": "Test",
"id": "Test",
"children": [
{
"id": "Hr",
"name": "Hr",
"checked": "false"
},
{
"id": "WorkReports",
"name": "WorkReports",
"checked": "false"
}
]
}
]
}
};


The model and store:



Ext.define('com.ibm.issc.publisher.model.TreeSelectModel', {
extend: 'Ext.data.Model',
fields: ['id', 'name']
});


Ext.define('com.store.TreeSelectStore', {
extend : 'Ext.data.TreeStore',
model: 'com.ibm.issc.publisher.model.TreeSelectModel',
autoLoad : true
});


var treeSelectStore = Ext.create('com.store.TreeSelectStore',{
data : treeSelectedData,
proxy: {
type: 'memory',
reader : {
type : 'json',
root : 'children'
},
/*writer : {
type : 'json'
}*/
},
sorters: [ {
property: 'name',
direction: 'ASC'
}]
});


The tree panel:



Ext.define('com.CheckTree', {
extend: 'Ext.tree.Panel',
xtype: 'check-tree',

id: 'checkTree',
rootVisible: true,
useArrows: true,
frame: true,
title: 'Check Tree',
width: 500,
height: 500,
store: treeSelectStore
});


I am guessing that my data is somehow wrong or that, I should set the root differently.
I have tried a couple of things but nothing seems to work so far, does anybody have any idea what I might be missing or what I am doing wrong?

Thanks a lot!

Thorsten

thorsten55
28 Oct 2014, 11:46 PM
Ok I figured it out:

For one the data had to look like this:


var treeSelectedData = {

text: 'New Top Node',
checked: false,
expanded: "true",
children: [
{
text: "Inbox",
id: "InboxId",
children: [
{
id: "OfficeInbox",
text: "RetailInbox",
checked: true
},
{
id: "bw",
text: "BusinessWarehouse",
checked: false
},
{
id: "OphNew",
text: "AppliedOpeningHours",
checked: false
},
{
id: "Intranet",
text: "Intranet",
checked: false
}
]
},
{
text: "Outbox",
id: "Outbox",
children: [
{
id: "retailOutbox",
text: "retailOutbox",
checked: false
},
{
id: "ophApproved",
text: "ophApproved",
checked: false
},
{
id: "ophRejected",
text: "ophRejected",
checked: false
}
]
},
{
text: "Test",
id: "Test",
children: [
{
id: "Hr",
text: "Hr",
checked: false
},
{
id: "WorkReports",
text: "WorkReports",
checked: false
}
]
}
]
};

Also to put the initial data in the store the data had to be assigned to root instead of data in a Ext.data.TreeStore no idea why its different than in a normal store.


var treeSelectStore = Ext.create('com.store.TreeSelectStore',{
root : treeSelectedData,
proxy: {
type: 'memory',
reader : {
type : 'json',
root : 'children'
},
/*writer : {
type : 'json'
}*/
},
sorters: [ {
property: 'name',
direction: 'ASC'
}]
});

thorsten55
30 Oct 2014, 5:06 AM
Another important point was when loading via ajax, that ExtJS knows which nodes are leafs otherwise it loads forever the same json form the server.so the json looked like this:{"expanded":true,"children":{"leaf":false,"expanded":true,"children":{"leaf":false,"expanded":true,"children":[{"leaf":true,"expanded":true,"checked":false,"text":"Einf\u00fchrung","id":"1"},{"leaf":true,"expanded":true,"checked":false,"text":"Willkommen","id":"2"},{"leaf":true,"expanded":true,"checked":false,"text":"koko","id":"3"},{"leaf":true,"expanded":true,"checked":false,"text":"Unified","id":"4"},{"leaf":true,"expanded":true,"checked":false,"text":"Test","id":"5"},{"leaf":true,"expanded":true,"checked":false,"text":"Monitor","id":"6"}],"checked":false,"text":"Ausgangsseite","id":"7"},"checked":false,"text":"lala","id":"8"}}