1. #1
    Sencha User
    Join Date
    Jan 2012
    Posts
    85
    Answers
    6
    Vote Rating
    1
    ssamuel68 is on a distinguished road

      0  

    Default Answered: TreePanel from folder path or json response

    Answered: TreePanel from folder path or json response


    Hi,

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

    Thx

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

  3. #2
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    16,648
    Answers
    431
    Vote Rating
    583
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    No, because you don't have access to the client file system from the browser.
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  4. #3
    Sencha User
    Join Date
    Jan 2012
    Posts
    85
    Answers
    6
    Vote Rating
    1
    ssamuel68 is on a distinguished road

      0  

    Default


    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

  5. #4
    Sencha User
    Join Date
    Jan 2012
    Posts
    85
    Answers
    6
    Vote Rating
    1
    ssamuel68 is on a distinguished road

      0  

    Default


    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

  6. #5
    Sencha User wojteks27's Avatar
    Join Date
    Aug 2011
    Location
    Kraków, Poland
    Posts
    30
    Answers
    3
    Vote Rating
    2
    wojteks27 is on a distinguished road

      1  

    Default JSON tree format

    JSON tree format


    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

  7. #6
    Sencha User
    Join Date
    Jan 2012
    Posts
    85
    Answers
    6
    Vote Rating
    1
    ssamuel68 is on a distinguished road

      0  

    Default


    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.

  8. #7
    Sencha User wojteks27's Avatar
    Join Date
    Aug 2011
    Location
    Kraków, Poland
    Posts
    30
    Answers
    3
    Vote Rating
    2
    wojteks27 is on a distinguished road

      0  

    Default Check network pane in web inspector

    Check network pane in web inspector


    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?

  9. #8
    Sencha User wojteks27's Avatar
    Join Date
    Aug 2011
    Location
    Kraków, Poland
    Posts
    30
    Answers
    3
    Vote Rating
    2
    wojteks27 is on a distinguished road

      0  

    Default Code

    Code


    If you could post your source code it might help.

  10. #9
    Sencha User
    Join Date
    Jan 2012
    Posts
    85
    Answers
    6
    Vote Rating
    1
    ssamuel68 is on a distinguished road

      0  

    Default


    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.

  11. #10
    Sencha User
    Join Date
    Jan 2013
    Posts
    34
    Answers
    4
    Vote Rating
    0
    mkrakowski is on a distinguished road

      0  

    Default


    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 }]}