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

wojteks27

You are missing root property in your JSON.

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

Code:

{   
   "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

Code:

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

**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 :

Code:

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

Code:

{
    "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, 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,

Ok, my store looks like this:

Code:

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:

Code:

{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

PHP Code:


totalProperty : 'totalCount',

Code:

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

TreePanel from folder path or json response

Thread Tools

Search Thread

Display

Answered: TreePanel from folder path or json response

Answered: TreePanel from folder path or json response

JSON tree format

JSON tree format

Check network pane in web inspector

Check network pane in web inspector

Code

Code