ExtJs 3 TreePanel Sorting not working

Question

I am using Ext.ux.tree.TreeGrid for tree grid panel. All is working fine except sort. I have 3 level of hierarchy in it like - parent - child - grand child. I want to make sorting based on text of parent only. But I am getting random result every time. :(

This is my code -

var tree_grid = new Ext.ux.tree.TreeGrid({
        title : 'Requirements',
        height : 415,
        enableDD : true,
        enableHdMenu : true,
        id : 'req_tree',
        columns : [ {
            header : 'Entity',
            dataIndex : 'text',
            width : 200,
            sortable: true,
            sortType : 'asText'
        }, {
            header : 'Text',
            width : 50,
            dataIndex : 'temp',
            align : 'center',
            // sortType : 'asFloat',
            sortable: false
        }],
        dataUrl : 'my_page.php'
});

For sorting I have tried this -

1) var myTreeSorter = new Ext.tree.TreeSorter(tree_grid, {});
   myTreeSorter.doSort(tree_grid.getRootNode());
2) new Ext.ux.tree.TreeGridSorter(tree_grid, {
     folderSort: true,
     dir: "desc",
     sortType: function(node) {
         // sort by a custom, typed attribute:
         return parseInt(node.id, 10);
     }
 });


3) Used Attributes like - sortType, sortable, sortInfo.

None of the above helped me however. Please help.

score 2 · Accepted Answer · answered Nov 04 '14 at 06:18

    var mySortStore = Ext.create("Ext.data.Store", {
        model: "MyTreeStore",
        data:  []
    });

Then when you go to add the node to the tree, use this function instead:

function addNodeSorted(node, childToBeAdded){
    //clear the store from previous additions
    mySortStore.removeAll();
    //remove old sorters if they are dynamically changing
    mySortStore.sort();
    //add the node into the tree
    node.appendChild(childToBeAdded);
    var cn = node.childNodes,
        n;

    //remove all nodes from their parent and add them to the store
    while ((n = cn[0])) {
        mySortStore.add(node.removeChild(n));
    }

    //then sort the store like you would normally do in extjs, what kind of sorting you want is up to you
    mySortStore.sort('height', 'ASC');//this is just an example

    //now add them back into the tree in correct order
    mySortStore.each(function(record){
        node.appendChild(record);
    });
}

score 0 · Answer 2 · answered Jun 06 '13 at 07:10

Did you tried to use the config folderSort on the store:

TreeGrid Example: sencha TreeGrid

var store = Ext.create('Ext.data.TreeStore', {
        model: 'Task',
        proxy: {
            type: 'ajax',
            //the store will get the content from the .json file
            url: 'treegrid.json'
        },
        **folderSort: true**
    });

--

Other solution, can be used a sort filter on the store:

Store Sort: sencha sort

//sort by a single field
myStore.sort('myField', 'DESC');

//sorting by multiple fields
myStore.sort([
    {
        property : 'age',
        direction: 'ASC'
    },
    {
        property : 'name',
        direction: 'DESC'
    }
]);

I am not using store for my tree panel.! I am using DataURL instead. — Ved, Jun 06 '13 at 07:12

ExtJs 3 TreePanel Sorting not working

2 Answers2