1. #1
    Sencha User talha06's Avatar
    Join Date
    Jul 2009
    Location
    Turkey
    Posts
    305
    Vote Rating
    0
    Answers
    8
    talha06 is on a distinguished road

      0  

    Default Answered: TreePanel - Root is shown double

    Answered: TreePanel - Root is shown double


    Hello everyone,

    The root of my tree grid is shown double. [As at the screenshot]
    I'll be happy if someone can help me.
    Thanks in advance..


    Here's my tree view defition:

    Code:
    Ext.define(appName + '.view.document.FolderTree', {    extend        : 'Ext.tree.Panel',
        alias        : 'widget.foldertree',
        requires: [
            'Ext.grid.plugin.CellEditing',
            'Ext.tree.plugin.TreeViewDragDrop',
            'Ext.grid.column.Action'
        ],
        title       : 'Folders',
        iconCls     : 'icon-folder',
        store       : 'FoldersTreeStore',
        rootVisible : false,
        folderSort  : true,
        animate        : true,
        autoScroll    : true,
        hideHeaders : true,
        viewConfig: {
            plugins: {
                ptype: 'treeviewdragdrop',
                dragText: 'Drag to reorder',
                ddGroup: 'task'
            }
        },
        initComponent: function() {
            var me = this;
    
    
            me.plugins = [me.cellEditingPlugin = Ext.create('Ext.grid.plugin.CellEditing')];
    
    
            me.columns = [
                {
                    xtype: 'treecolumn',
                    dataIndex: 'folderName',
                    flex: 1,
                    editor: {
                        xtype: 'textfield',
                        selectOnFocus: true,
                        validator: function(value){
                            value = Ext.String.trim(value);
                            return value.length < 1 ? this.blankText : true;
                        }
                    }
                },
                {
                    xtype: 'actioncolumn',
                    width: 24,
    //                icon: 'resources/images/cross-script.png',
    //                iconCls: 'x-hidden',
                    iconCls: 'icon-close',
                    tooltip: 'Delete'
                }
            ];
    
    
            this.btnCreateFolder = Ext.create('Ext.button.Button', {
                iconCls    : 'icon-new-folder',
                tooltip    : '<b>Create new folder</b>',
                action    : 'create-folder'
            });
    
    
            this.btnDeleteFolder = Ext.create('Ext.button.Button', {
                iconCls    : 'icon-delete-folder',
                tooltip    : '<b>Delete folder</b>',
                action    : 'delete-folder',
                disabled: true
            });
    
    
            this.dockedItems = [{
                xtype    : 'toolbar',
                dock     : 'bottom',
                items    : [ me.btnCreateFolder, '-', me.btnDeleteFolder ]
            }];
    
    
            me.callParent(arguments);
        }
    });
    TreeStore:

    Code:
    Ext.define(appName + '.store.FoldersTreeStore', {    extend        : 'Ext.data.TreeStore',
        model        : appName + '.model.Folder',
        autoLoad    : false,
        autoSync    : false,
        proxy        : {
            type    : 'ajax',
            api        : {
                read    : 'folder/load.ajax',
                create    : 'folder/saveOrUpdate.ajax',
                update    : 'folder/saveOrUpdate.ajax',
                destroy    : 'folder/delete.ajax'
            },
            reader    : {
                type    : 'json',
                root    : 'data',
                successProperty : 'success',
                totalProperty    : 'totalCount'
            },
            writer    : {
                type    : 'json',
                writeAllFields : true,
                encode    : true,
                root    : 'data'
            },
            listeners: {
                exception: function(proxy, response, operation){
                    Ext.MessageBox.show({
                        title: 'REMOTE EXCEPTION',
                        msg: operation.getError(),
                        icon: Ext.MessageBox.ERROR,
                        buttons: Ext.Msg.OK
                    });
                }
            }
        },
        sorters: [
            {
                property : 'order',
                direction: 'ASC'
            }
        ]
    });
    The data that I get from server:

    Code:
    {    "data": {
            "leaf": false,
            "folderId": 1,
            "order": 1,
            "expanded": true,
            "iconCls": "icon-drive",
            "folderName": "DRIVE",
            "data": [{
                "folderId": 2,
                "folderName": "ggg",
                "order": 2,
                "leaf": true,
                "iconCls": "icon-folder"
            }]
        },
        "success": true,
        "totalCount": 1
    }
    Selection_001.png
    Last edited by talha06; 27 Jul 2012 at 2:58 PM. Reason: added json data
    "People will never forget how you made them feel."
    linkedin.com/in/talhakabakus

  2. Quote Originally Posted by scottmartin View Post
    Please provide a small test case using the static JSON file for data.

    Scott.
    Thanks everyone for care; I've found my solution.
    We need to define rootVisible property false and return a root json object with 2 properties: "data" and "text". "data" will store the records of tree and text is just a ".".

  3. #2
    Touch Premium Member
    Join Date
    Jun 2011
    Posts
    1,099
    Vote Rating
    96
    Answers
    113
    Farish is a glorious beacon of light Farish is a glorious beacon of light Farish is a glorious beacon of light Farish is a glorious beacon of light Farish is a glorious beacon of light

      0  

    Default


    Take a look at the example of tree panel in the API docs. What I think is causing the problem is that you are using "data" inside "data". the child nodes of a node should be enclosed in "children". Changing it like this might help:

    Code:
    {
        "data": {
             "leaf": false,
             "folderId": 1,
             "order": 1,
             "expanded": true,
             "iconCls": "icon-drive",
             "folderName": "DRIVE",
             "children": [{
                 "folderId": 2,
                 "folderName": "ggg",
                 "order": 2,
                 "leaf": true,
                 "iconCls": "icon-folder"
             }]
         },
         "success": true,
         "totalCount": 1
     }

  4. #3
    Touch Premium Member
    Join Date
    Jun 2011
    Posts
    1,099
    Vote Rating
    96
    Answers
    113
    Farish is a glorious beacon of light Farish is a glorious beacon of light Farish is a glorious beacon of light Farish is a glorious beacon of light Farish is a glorious beacon of light

      0  

    Default


    Also, you are using rootVisible: false. The root shouldn't be shown at all in this case. Do you want "DRIVE" to be visible or not? you may also need to change your response according to that. Best would be to take a look at the example given in the API Docs.

  5. #4
    Sencha User talha06's Avatar
    Join Date
    Jul 2009
    Location
    Turkey
    Posts
    305
    Vote Rating
    0
    Answers
    8
    talha06 is on a distinguished road

      0  

    Default


    Unfortunately changing data key to children didn't worked.. (again I see double root) I looked API docs first of course, but the sample that is given there is for static tree, I'm getting data from server. So I didn't define "root" explicitly. DRIVE will be my root and I want it to be visible..

    Thanks for your care..
    "People will never forget how you made them feel."
    linkedin.com/in/talhakabakus

  6. #5
    Touch Premium Member
    Join Date
    Jun 2011
    Posts
    1,099
    Vote Rating
    96
    Answers
    113
    Farish is a glorious beacon of light Farish is a glorious beacon of light Farish is a glorious beacon of light Farish is a glorious beacon of light Farish is a glorious beacon of light

      0  

    Default


    hmmm. not sure then. does it help if you change your root from "data" to "root"?

  7. #6
    Sencha User talha06's Avatar
    Join Date
    Jul 2009
    Location
    Turkey
    Posts
    305
    Vote Rating
    0
    Answers
    8
    talha06 is on a distinguished road

      0  

    Default


    Unfortunately it didn't worked too..
    "People will never forget how you made them feel."
    linkedin.com/in/talhakabakus

  8. #7
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,197
    Vote Rating
    482
    Answers
    690
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    Would it have anything to do with the fact that you are loading the tree on initComponent, and then when you initialize it, it creates it again?

    Scott.

  9. #8
    Sencha User talha06's Avatar
    Join Date
    Jul 2009
    Location
    Turkey
    Posts
    305
    Vote Rating
    0
    Answers
    8
    talha06 is on a distinguished road

      0  

    Default


    Quote Originally Posted by scottmartin View Post
    Would it have anything to do with the fact that you are loading the tree on initComponent, and then when you initialize it, it creates it again?

    Scott.
    it is still same Scott..
    "People will never forget how you made them feel."
    linkedin.com/in/talhakabakus

  10. #9
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,197
    Vote Rating
    482
    Answers
    690
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    Perhaps a small working test case.. Must be something simple we are just overlooking.

    Scott.

  11. #10
    Sencha User talha06's Avatar
    Join Date
    Jul 2009
    Location
    Turkey
    Posts
    305
    Vote Rating
    0
    Answers
    8
    talha06 is on a distinguished road

      0  

    Default


    Yeah maybe Scott..

    Any other ideas will be appreciated a lot..
    "People will never forget how you made them feel."
    linkedin.com/in/talhakabakus