How do I sort items on insert into treestore and have them displayed sorted in treepanel? extjs 4.07

Question

I want to know how to insert items into a treestore sorted, if there is a way within extjs to do this. I then want to have the items appear in a treepanel sorted, although there may already be some nodes in the treepanel;

So, that question may be, how do I have a treepanel reload what it is displaying based on what is within my store. Let me be clear, I do not want to reload the store from some datasource. I want to reload the panel to reflect what is contained within the store. What is the best way to go about this?

Answer 1

There is no real default way to do this. What your going to have to do is create an empty store on the page that uses the same model as the tree, something really simple like this:

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