PDA

View Full Version : TreePanel from folder path or json response



ssamuel68
27 Feb 2013, 12:42 PM
Hi,

Is possible to show a tree panel from a folder path, for example: c:/ show all folders, subfolders and files?

Thx

evant
27 Feb 2013, 12:58 PM
No, because you don't have access to the client file system from the browser.

ssamuel68
27 Feb 2013, 1:04 PM
Ok, I have a method that I access through a controller that returns me the folder structure (json).

How I convert that response to a tree store like.

Thx

ssamuel68
27 Feb 2013, 1:06 PM
Really the main porpuse is to show me the directory that I consult through a SSH request on java and I return a json with the structure

wojteks27
28 Feb 2013, 2:00 AM
You have to format the JSON response properly for the Ext.data.TreeStore reader to parse.
Use correct root name (you should use this name as store.proxy.reader.root property) in your JSON

Example :

Ext.define('Departments.store.TreeStore', {
extend:'Ext.data.TreeStore',
id:'DepartmentsTreeStore',
model:'Departments.model.Department',
root:{
expanded:true,
id:0,
text:'Departments'
},
proxy:{
type:'ajax',
url:'dzialy/lista',
reader:{
type:'json',
root:'depts'
}
}
});




{
"depts":[
{
"text": "Maths", "id": "mathDept", "depts": [
{ "text":"X1", "id": "x1", "leaf": true },
{ "text":"X2", "id": "x2", "leaf": true}
]
},
{
"text": "Biology", "id": "bioDept", "depts": [
{ "text": "Y1", "id": "y1", "leaf": true},
{ "text": "Y2", "id": "y2", "leaf": true}
]
},
{
"text": "English", id: "engDept", "depts": [
{ "text": "Z1", "id": "z1", "leaf": true},
{ "text": "Z2", "id": "z2", "leaf": true},
{ "text": "Z3", "id": "z3", "leaf": true}
]
}
]
}


It is important that every node which is not a leaf, contain an array of leafs in a property named the same as root.

Try it out tell me if it worked for you.

Wojtek

ssamuel68
4 Mar 2013, 5:21 AM
Thanks wojteks27 (http://www.sencha.com/forum/member.php?304525-wojteks27), I'm having problems returning the json, I'm working with java for the response and I return a json like yours but the tree is not showing up.

wojteks27
4 Mar 2013, 5:24 AM
I'm assuming you use Chrome of Firefox.

In network pane in web inspector or Firebug there should be a trace of your request. Check whether the response is in correct format (doesn't get tweaked somewhere on the way). Check if the properties such as 'success' and 'root' have correct corresponding values in your JSON and in tree's reader.

Are there any error messages in console?

wojteks27
4 Mar 2013, 5:28 AM
If you could post your source code it might help.

ssamuel68
4 Mar 2013, 3:43 PM
Thanks again wojteks27 (http://www.sencha.com/forum/member.php?304525-wojteks27),

Ok, my store looks like this:


Ext.define('Test.store.FtpTree', {
extend: 'Ext.data.TreeStore',
autoLoad: false,


proxy: {
type: 'direct',
directFn: Test.getFtpTree,
reader:{
type:'json',
root:'children'
}
},

root:{
expanded:true,
id:0,
text:'Folder'
}
});


The answer that I'm receiving is a "json" but string like:


{id: 'netbeans-7.2-ml-linux.sh', text: 'netbeans-7.2-ml-linux.sh', leaf: true},{id: 'Sam', text: 'Sam', leaf: false, children: [{id: 'testDoc3.txt', text: 'testDoc3.txt', leaf: true}]},{id: 'Empty', text: 'Empty'},{id: 'testDoc3.txt', text: 'testDoc3.txt', leaf: true},{id: 'soapUI-x32-4.5.1.sh', text: 'soapUI-x32-4.5.1.sh', leaf: true}

Don't know what I'm missing here.

mkrakowski
4 Mar 2013, 6:22 PM
This might be only relevant in a paging situation, but worth a shot. A total count param might be required in the returned json string, such as


totalProperty : 'totalCount',



{"totalCount":"6","results":[{ //your json }]}

wojteks27
4 Mar 2013, 10:39 PM
You are missing root property in your JSON.

You need to make that JSON an array, like in my example :


{
"children": [{
"id": "netbeans-7.2-ml-linux.sh",
"text": "netbeans-7.2-ml-linux.sh",
"leaf": true
}, {
"id": "Sam",
"text": "Sam",
"leaf": false,
"children": [{
"id": "testDoc3.txt",
"text": "testDoc3.txt",
"leaf": true
}]
}, {
"id": "Empty",
"text": "Empty"
}, {
"id": "testDoc3.txt",
"text": "testDoc3.txt",
"leaf": true
}, {
"id": "soapUI-x32-4.5.1.sh",
"text": "soapUI-x32-4.5.1.sh",
"leaf": true
}]
}

Notice the top-level array. Try making your function return JSON with top-level array labeled "children" and get back to us;)

PS.
@mkrakowski
As to the "totalProperty" it is only relevant when paging

This is only needed if the whole dataset is not passed in one go, but is being paged from the remote server

ssamuel68
5 Mar 2013, 6:33 AM
You were totally right, my json was wrong. I solve my json structure and now my response is json like.


'{
"children": [{
"id": "netbeans-7.2-ml-linux.sh",
"text": "netbeans-7.2-ml-linux.sh",
"leaf": true
}, {
"id": "Sam",
"text": "Sam",
"leaf": false,
"children": [{
"id": "testDoc3.txt",
"text": "testDoc3.txt",
"leaf": true}
]},
{
"id": "Empty",
"text": "Empty"
},
{
"id": "testDoc3.txt",
"text": "testDoc3.txt",
"leaf": true
},
{
"id": "soapUI-x32-4.5.1.sh",
"text": "soapUI-x32-4.5.1.sh",
"leaf": true
}
]}';



If I do a
print_r(json_decode($json)); it prints the json perfectly.

However the tree is not showing up.


createTreePanel: function(container){

var treeStore = Ext.getStore('FtpTree').load();

var panel = Ext.create('Ext.tree.Panel', {
title: 'Folder Tree',
width: 200,
height: 150,
store: treeStore,
rootVisible: false
});


container.add(panel);
},

wojteks27
5 Mar 2013, 7:27 AM
Why is there no model assigned to your TreeStore?
Is the console showing any errors?

In the console use :


Ext.getStore('FtpTree');


And check whether it has loaded. If so the store.tree.root property should reflect your JSON's construction (in models).

Regards,
Wojtek

ssamuel68
5 Mar 2013, 8:09 AM
The problem was the root of my response.

Now, the tree is showing, but when I try to expand or collapse the tree freezes.

Store

Ext.define('Test.store.FtpTree', {
extend: 'Ext.data.TreeStore',
model:'Test.model.Tree',
autoLoad: false,


proxy: {
type: 'direct',
directFn: Test.getFtpTree,
reader:{
type:'json',
root:'children'
}
}
});


My model:

Ext.define('Test.model.Tree', {
extend: 'Ext.data.Model',
fields: [
'id',
'text',
'leaf',
'children'
]
});


My json:


{"text": "Downloads", "expanded": true, "leaf": false, "children": [{"id": "netbeans-7.2-ml-linux.sh", "text": "netbeans-7.2-ml-linux.sh", "leaf": true},{"id": "Sam", "text": "Sam", "leaf": false, "expanded": true, "children": [{"id": "testDoc3.txt", "text": "testDoc3.txt", "leaf": true}]},{"id": "Empty", "text": "Empty", "leaf": false, "expanded": true },{"id": "testDoc3.txt", "text": "testDoc3.txt", "leaf": true},{"id": "soapUI-x32-4.5.1.sh", "text": "soapUI-x32-4.5.1.sh", "leaf": true}]}

And my tree looks like:
42199

All seems perfect, there are two things. The "Empty" folder is empty.. but it shows like it has files inside, and the other thing is the expand and collapse buttons are not working, every time I click it freezes.

What I'm missing here.

thx

wojteks27
5 Mar 2013, 8:17 AM
http://www.sencha.com/forum/showthread.php?4088-Tree-Empty-folders-turn-into-leafs

It should help the issue with folder (just make make any empty folders leafs and change their cls). As to freezing, for me the code looks fine. Without console error messages I could only be guessing (and I'm not that good at it):)

Wojtek

wojteks27
5 Mar 2013, 8:22 AM
Tell me also which browser are you testing your code under.

ssamuel68
5 Mar 2013, 8:31 AM
Chrome on linux(ubuntu)

ssamuel68
5 Mar 2013, 8:32 AM
The console is showing this errors:



Uncaught TypeError: Cannot read property 'internalId' of undefined ext-all-dev.js:89891
Uncaught TypeError: Cannot read property 'internalId' of undefined ext-all-dev.js:89891
Uncaught TypeError: Cannot call method 'insertSibling' of null

wojteks27
5 Mar 2013, 8:56 AM
Hmm, I'm afraid that this is as much as I will help you.

Try checking in the source code which object is null and follow the function execution chain until you find where it should be assigned.

Regards,
Wojtek

ssamuel68
7 Mar 2013, 6:23 AM
All good now, the problem is that I was using the name file as the id, so, when the json has the same id twice it freezes.

I solve it not using the name as the id too =).

If anyone want the code from traverse the directory to json treepanel store just tell me and I put it here.

Thx.

wojteks27
7 Mar 2013, 6:50 AM
Mark the reply which helped you to make this topic labeled as answered:)

Glad that you got it running:)