extjs-rails 4.1.0.alpha1

data/app/assets/javascripts/extjs-rails/src/data/StoreManager.js

@@ -0,0 +1,156 @@
+/**
+ * @docauthor Evan Trimboli <evan@sencha.com>
+ *
+ * Contains a collection of all stores that are created that have an identifier. An identifier can be assigned by
+ * setting the {@link Ext.data.AbstractStore#storeId storeId} property. When a store is in the StoreManager, it can be
+ * referred to via it's identifier:
+ *
+ *     Ext.create('Ext.data.Store', {
+ *         model: 'SomeModel',
+ *         storeId: 'myStore'
+ *     });
+ *
+ *     var store = Ext.data.StoreManager.lookup('myStore');
+ *
+ * Also note that the {@link #lookup} method is aliased to {@link Ext#getStore} for convenience.
+ *
+ * If a store is registered with the StoreManager, you can also refer to the store by it's identifier when registering
+ * it with any Component that consumes data from a store:
+ *
+ *     Ext.create('Ext.data.Store', {
+ *         model: 'SomeModel',
+ *         storeId: 'myStore'
+ *     });
+ *
+ *     Ext.create('Ext.view.View', {
+ *         store: 'myStore',
+ *         // other configuration here
+ *     });
+ *
+ */
+Ext.define('Ext.data.StoreManager', {
+    extend: 'Ext.util.MixedCollection',
+    alternateClassName: ['Ext.StoreMgr', 'Ext.data.StoreMgr', 'Ext.StoreManager'],
+    singleton: true,
+    uses: ['Ext.data.ArrayStore'],
+    
+    /**
+     * @cfg {Object} listeners
+     * @private
+     */
+
+    /**
+     * Registers one or more Stores with the StoreManager. You do not normally need to register stores manually. Any
+     * store initialized with a {@link Ext.data.Store#storeId} will be auto-registered.
+     * @param {Ext.data.Store...} stores Any number of Store instances
+     */
+    register : function() {
+        for (var i = 0, s; (s = arguments[i]); i++) {
+            this.add(s);
+        }
+    },
+
+    /**
+     * Unregisters one or more Stores with the StoreManager
+     * @param {String/Object...} stores Any number of Store instances or ID-s
+     */
+    unregister : function() {
+        for (var i = 0, s; (s = arguments[i]); i++) {
+            this.remove(this.lookup(s));
+        }
+    },
+
+    /**
+     * Gets a registered Store by id
+     * @param {String/Object} store The id of the Store, or a Store instance, or a store configuration
+     * @return {Ext.data.Store}
+     */
+    lookup : function(store) {
+        // handle the case when we are given an array or an array of arrays.
+        if (Ext.isArray(store)) {
+            var fields = ['field1'], 
+                expand = !Ext.isArray(store[0]),
+                data = store,
+                i,
+                len;
+                
+            if(expand){
+                data = [];
+                for (i = 0, len = store.length; i < len; ++i) {
+                    data.push([store[i]]);
+                }
+            } else {
+                for(i = 2, len = store[0].length; i <= len; ++i){
+                    fields.push('field' + i);
+                }
+            }
+            return new Ext.data.ArrayStore({
+                data  : data,
+                fields: fields,
+                autoDestroy: true,
+                autoCreated: true,
+                expanded: expand
+            });
+        }
+        
+        if (Ext.isString(store)) {
+            // store id
+            return this.get(store);
+        } else {
+            // store instance or store config
+            return Ext.data.AbstractStore.create(store);
+        }
+    },
+
+    // getKey implementation for MixedCollection
+    getKey : function(o) {
+         return o.storeId;
+    }
+}, function() {    
+    /**
+     * Creates a new store for the given id and config, then registers it with the {@link Ext.data.StoreManager Store Manager}. 
+     * Sample usage:
+     *
+     *     Ext.regStore('AllUsers', {
+     *         model: 'User'
+     *     });
+     *
+     *     // the store can now easily be used throughout the application
+     *     new Ext.List({
+     *         store: 'AllUsers',
+     *         ... other config
+     *     });
+     *
+     * @param {String} id The id to set on the new store
+     * @param {Object} config The store config
+     * @member Ext
+     * @method regStore
+     */
+    Ext.regStore = function(name, config) {
+        var store;
+
+        if (Ext.isObject(name)) {
+            config = name;
+        } else {
+            config.storeId = name;
+        }
+
+        if (config instanceof Ext.data.Store) {
+            store = config;
+        } else {
+            store = new Ext.data.Store(config);
+        }
+
+        return Ext.data.StoreManager.register(store);
+    };
+
+    /**
+     * Shortcut to {@link Ext.data.StoreManager#lookup}.
+     * @member Ext
+     * @method getStore
+     * @inheritdoc Ext.data.StoreManager#lookup
+     */
+    Ext.getStore = function(name) {
+        return Ext.data.StoreManager.lookup(name);
+    };
+});

data/app/assets/javascripts/extjs-rails/src/data/Tree.js

@@ -0,0 +1,290 @@
+/**
+ * @class Ext.data.Tree
+ *
+ * This class is used as a container for a series of nodes. The nodes themselves maintain
+ * the relationship between parent/child. The tree itself acts as a manager. It gives functionality
+ * to retrieve a node by its identifier: {@link #getNodeById}.
+ *
+ * The tree also relays events from any of it's child nodes, allowing them to be handled in a
+ * centralized fashion. In general this class is not used directly, rather used internally
+ * by other parts of the framework.
+ *
+ */
+Ext.define('Ext.data.Tree', {
+    alias: 'data.tree',
+
+    mixins: {
+        observable: "Ext.util.Observable"
+    },
+
+    /**
+     * @property {Ext.data.NodeInterface}
+     * The root node for this tree
+     */
+    root: null,
+
+    /**
+     * Creates new Tree object.
+     * @param {Ext.data.NodeInterface} root (optional) The root node
+     */
+    constructor: function(root) {
+        var me = this;
+
+        me.mixins.observable.constructor.call(me);
+
+        if (root) {
+            me.setRootNode(root);
+        }
+    },
+
+    /**
+     * Returns the root node for this tree.
+     * @return {Ext.data.NodeInterface}
+     */
+    getRootNode : function() {
+        return this.root;
+    },
+
+    /**
+     * Sets the root node for this tree.
+     * @param {Ext.data.NodeInterface} node
+     * @return {Ext.data.NodeInterface} The root node
+     */
+    setRootNode : function(node) {
+        var me = this;
+
+        me.root = node;
+
+        if (me.fireEvent('beforeappend', null, node) !== false) {
+            node.set('root', true);
+            node.updateInfo();
+            // root node should never be phantom or dirty, so commit it
+            node.commit();
+
+            node.on({
+                scope: me,
+                insert: me.onNodeInsert,
+                append: me.onNodeAppend,
+                remove: me.onNodeRemove
+            });
+
+            me.relayEvents(node, [
+                /**
+                 * @event append
+                 * @inheritdoc Ext.data.NodeInterface#append
+                 */
+                "append",
+
+                /**
+                 * @event remove
+                 * @inheritdoc Ext.data.NodeInterface#remove
+                 */
+                "remove",
+
+                /**
+                 * @event move
+                 * @inheritdoc Ext.data.NodeInterface#move
+                 */
+                "move",
+
+                /**
+                 * @event insert
+                 * @inheritdoc Ext.data.NodeInterface#insert
+                 */
+                "insert",
+
+                /**
+                 * @event beforeappend
+                 * @inheritdoc Ext.data.NodeInterface#beforeappend
+                 */
+                "beforeappend",
+
+                /**
+                 * @event beforeremove
+                 * @inheritdoc Ext.data.NodeInterface#beforeremove
+                 */
+                "beforeremove",
+
+                /**
+                 * @event beforemove
+                 * @inheritdoc Ext.data.NodeInterface#beforemove
+                 */
+                "beforemove",
+
+                /**
+                 * @event beforeinsert
+                 * @inheritdoc Ext.data.NodeInterface#beforeinsert
+                 */
+                "beforeinsert",
+
+                /**
+                 * @event expand
+                 * @inheritdoc Ext.data.NodeInterface#expand
+                 */
+                "expand",
+
+                /**
+                 * @event collapse
+                 * @inheritdoc Ext.data.NodeInterface#collapse
+                 */
+                "collapse",
+
+                /**
+                 * @event beforeexpand
+                 * @inheritdoc Ext.data.NodeInterface#beforeexpand
+                 */
+                "beforeexpand",
+
+                /**
+                 * @event beforecollapse
+                 * @inheritdoc Ext.data.NodeInterface#beforecollapse
+                 */
+                "beforecollapse" ,
+
+                /**
+                 * @event sort
+                 * @inheritdoc Ext.data.NodeInterface#event-sort
+                 */
+                "sort",
+
+                /**
+                 * @event rootchange
+                 * Fires whenever the root node is changed in the tree.
+                 * @param {Ext.data.Model} root The new root
+                 */
+                "rootchange"
+            ]);
+
+            me.nodeHash = {};
+            me.registerNode(node);
+            me.fireEvent('append', null, node);
+            me.fireEvent('rootchange', node);
+        }
+
+        return node;
+    },
+
+    /**
+     * Flattens all the nodes in the tree into an array.
+     * @private
+     * @return {Ext.data.NodeInterface[]} The flattened nodes.
+     */
+    flatten: function(){
+        var nodes = [],
+            hash = this.nodeHash,
+            key;
+
+        for (key in hash) {
+            if (hash.hasOwnProperty(key)) {
+                nodes.push(hash[key]);
+            }
+        }
+        return nodes;
+    },
+
+    /**
+     * Fired when a node is inserted into the root or one of it's children
+     * @private
+     * @param {Ext.data.NodeInterface} parent The parent node
+     * @param {Ext.data.NodeInterface} node The inserted node
+     */
+    onNodeInsert: function(parent, node) {
+        this.registerNode(node, true);
+    },
+
+    /**
+     * Fired when a node is appended into the root or one of it's children
+     * @private
+     * @param {Ext.data.NodeInterface} parent The parent node
+     * @param {Ext.data.NodeInterface} node The appended node
+     */
+    onNodeAppend: function(parent, node) {
+        this.registerNode(node, true);
+    },
+
+    /**
+     * Fired when a node is removed from the root or one of it's children
+     * @private
+     * @param {Ext.data.NodeInterface} parent The parent node
+     * @param {Ext.data.NodeInterface} node The removed node
+     */
+    onNodeRemove: function(parent, node) {
+        this.unregisterNode(node, true);
+    },
+
+    /**
+     * Fired when a node's id changes.  Updates the node's id in the node hash.
+     * @private
+     * @param {Ext.data.NodeInterface} node 
+     * @param {Number} oldId The old id
+     * @param {Number} newId The new id
+     */
+    onNodeIdChanged: function(node, oldId, newId) {
+        var nodeHash = this.nodeHash;
+    
+        nodeHash[newId] = node;
+        delete nodeHash[oldId || node.internalId];
+    },
+
+    /**
+     * Gets a node in this tree by its id.
+     * @param {String} id
+     * @return {Ext.data.NodeInterface} The match node.
+     */
+    getNodeById : function(id) {
+        return this.nodeHash[id];
+    },
+
+    /**
+     * Registers a node with the tree
+     * @private
+     * @param {Ext.data.NodeInterface} The node to register
+     * @param {Boolean} [includeChildren] True to unregister any child nodes
+     */
+    registerNode : function(node, includeChildren) {
+        var me = this;
+
+        me.nodeHash[node.getId() || node.internalId] = node;
+        node.on('idchanged', me.onNodeIdChanged, me);
+        if (includeChildren === true) {
+            node.eachChild(function(child){
+                me.registerNode(child, true);
+            });
+        }
+    },
+
+    /**
+     * Unregisters a node with the tree
+     * @private
+     * @param {Ext.data.NodeInterface} The node to unregister
+     * @param {Boolean} [includeChildren] True to unregister any child nodes
+     */
+    unregisterNode : function(node, includeChildren) {
+        delete this.nodeHash[node.getId() || node.internalId];
+        if (includeChildren === true) {
+            node.eachChild(function(child){
+                this.unregisterNode(child, true);
+            }, this);
+        }
+    },
+
+    /**
+     * Sorts this tree
+     * @private
+     * @param {Function} sorterFn The function to use for sorting
+     * @param {Boolean} recursive True to perform recursive sorting
+     */
+    sort: function(sorterFn, recursive) {
+        this.getRootNode().sort(sorterFn, recursive);
+    },
+
+     /**
+     * Filters this tree
+     * @private
+     * @param {Function} sorterFn The function to use for filtering
+     * @param {Boolean} recursive True to perform recursive filtering
+     */
+    filter: function(filters, recursive) {
+        this.getRootNode().filter(filters, recursive);
+    }
+});

data/app/assets/javascripts/extjs-rails/src/data/TreeStore.js

@@ -0,0 +1,655 @@
+/**
+ * The TreeStore is a store implementation that is backed by by an {@link Ext.data.Tree}.
+ * It provides convenience methods for loading nodes, as well as the ability to use
+ * the hierarchical tree structure combined with a store. This class is generally used
+ * in conjunction with {@link Ext.tree.Panel}. This class also relays many events from
+ * the Tree for convenience.
+ *
+ * # Using Models
+ *
+ * If no Model is specified, an implicit model will be created that implements {@link Ext.data.NodeInterface}.
+ * The standard Tree fields will also be copied onto the Model for maintaining their state. These fields are listed
+ * in the {@link Ext.data.NodeInterface} documentation.
+ *
+ * # Reading Nested Data
+ *
+ * For the tree to read nested data, the {@link Ext.data.reader.Reader} must be configured with a root property,
+ * so the reader can find nested data for each node (if a root is not specified, it will default to
+ * 'children'). This will tell the tree to look for any nested tree nodes by the same keyword, i.e., 'children'.
+ * If a root is specified in the config make sure that any nested nodes with children have the same name.
+ * Note that setting {@link #defaultRootProperty} accomplishes the same thing.
+ */
+Ext.define('Ext.data.TreeStore', {
+    extend: 'Ext.data.AbstractStore',
+    alias: 'store.tree',
+    requires: [
+        'Ext.util.Sorter',
+        'Ext.data.Tree',
+        'Ext.data.NodeInterface'
+    ],
+
+    /**
+     * @cfg {Ext.data.Model/Ext.data.NodeInterface/Object} root
+     * The root node for this store. For example:
+     *
+     *     root: {
+     *         expanded: true,
+     *         text: "My Root",
+     *         children: [
+     *             { text: "Child 1", leaf: true },
+     *             { text: "Child 2", expanded: true, children: [
+     *                 { text: "GrandChild", leaf: true }
+     *             ] }
+     *         ]
+     *     }
+     *
+     * Setting the `root` config option is the same as calling {@link #setRootNode}.
+     */
+
+    /**
+     * @cfg {Boolean} [clearOnLoad=true]
+     * Remove previously existing child nodes before loading. 
+     */
+    clearOnLoad : true,
+
+    /**
+     * @cfg {Boolean} [clearRemovedOnLoad=true]
+     * If `true`, when a node is reloaded, any records in the {@link #removed} record collection that were previously descendants of the node being reloaded will be cleared from the {@link #removed} collection.
+     * Only applicable if {@link #clearOnLoad} is `true`.
+     */
+    clearRemovedOnLoad: true,
+
+    /**
+     * @cfg {String} [nodeParam="node"]
+     * The name of the parameter sent to the server which contains the identifier of the node.
+     */
+    nodeParam: 'node',
+
+    /**
+     * @cfg {String} [defaultRootId="root"]
+     * The default root id.
+     */
+    defaultRootId: 'root',
+
+    /**
+     * @cfg {String} [defaultRootProperty="children"]
+     * The root property to specify on the reader if one is not explicitly defined.
+     */
+    defaultRootProperty: 'children',
+
+    /**
+     * @cfg {Boolean} [folderSort=false]
+     * Set to true to automatically prepend a leaf sorter.
+     */
+    folderSort: false,
+
+    constructor: function(config) {
+        var me = this,
+            root,
+            fields;
+
+        config = Ext.apply({}, config);
+
+        /**
+         * If we have no fields declare for the store, add some defaults.
+         * These will be ignored if a model is explicitly specified.
+         */
+        fields = config.fields || me.fields;
+        if (!fields) {
+            config.fields = [
+                {name: 'text', type: 'string'}
+            ];
+        }
+
+        me.callParent([config]);
+
+        // We create our data tree.
+        me.tree = new Ext.data.Tree();
+
+        me.relayEvents(me.tree, [
+            /**
+             * @event append
+             * @inheritdoc Ext.data.Tree#append
+             */
+            "append",
+
+            /**
+             * @event remove
+             * @inheritdoc Ext.data.Tree#remove
+             */
+            "remove",
+
+            /**
+             * @event move
+             * @inheritdoc Ext.data.Tree#move
+             */
+            "move",
+
+            /**
+             * @event insert
+             * @inheritdoc Ext.data.Tree#insert
+             */
+            "insert",
+
+            /**
+             * @event beforeappend
+             * @inheritdoc Ext.data.Tree#beforeappend
+             */
+            "beforeappend",
+
+            /**
+             * @event beforeremove
+             * @inheritdoc Ext.data.Tree#beforeremove
+             */
+            "beforeremove",
+
+            /**
+             * @event beforemove
+             * @inheritdoc Ext.data.Tree#beforemove
+             */
+            "beforemove",
+
+            /**
+             * @event beforeinsert
+             * @inheritdoc Ext.data.Tree#beforeinsert
+             */
+            "beforeinsert",
+
+            /**
+             * @event expand
+             * @inheritdoc Ext.data.Tree#expand
+             */
+            "expand",
+
+            /**
+             * @event collapse
+             * @inheritdoc Ext.data.Tree#collapse
+             */
+            "collapse",
+
+            /**
+             * @event beforeexpand
+             * @inheritdoc Ext.data.Tree#beforeexpand
+             */
+            "beforeexpand",
+
+            /**
+             * @event beforecollapse
+             * @inheritdoc Ext.data.Tree#beforecollapse
+             */
+            "beforecollapse",
+
+            /**
+             * @event sort
+             * @inheritdoc Ext.data.Tree#sort
+             */
+            "sort",
+
+            /**
+             * @event rootchange
+             * @inheritdoc Ext.data.Tree#rootchange
+             */
+            "rootchange"
+        ]);
+
+        me.tree.on({
+            scope: me,
+            remove: me.onNodeRemove,
+            // this event must follow the relay to beforeitemexpand to allow users to
+            // cancel the expand:
+            beforeexpand: me.onBeforeNodeExpand,
+            beforecollapse: me.onBeforeNodeCollapse,
+            append: me.onNodeAdded,
+            insert: me.onNodeAdded,
+            sort: me.onNodeSort
+        });
+
+        me.onBeforeSort();
+
+        root = me.root;
+        if (root) {
+            delete me.root;
+            me.setRootNode(root);
+        }
+
+        //<deprecated since=0.99>
+        if (Ext.isDefined(me.nodeParameter)) {
+            if (Ext.isDefined(Ext.global.console)) {
+                Ext.global.console.warn('Ext.data.TreeStore: nodeParameter has been deprecated. Please use nodeParam instead.');
+            }
+            me.nodeParam = me.nodeParameter;
+            delete me.nodeParameter;
+        }
+        //</deprecated>
+    },
+
+    // inherit docs
+    setProxy: function(proxy) {
+        var reader,
+            needsRoot;
+
+        if (proxy instanceof Ext.data.proxy.Proxy) {
+            // proxy instance, check if a root was set
+            needsRoot = Ext.isEmpty(proxy.getReader().root);
+        } else if (Ext.isString(proxy)) {
+            // string type, means a reader can't be set
+            needsRoot = true;
+        } else {
+            // object, check if a reader and a root were specified.
+            reader = proxy.reader;
+            needsRoot = !(reader && !Ext.isEmpty(reader.root));
+        }
+        proxy = this.callParent(arguments);
+        if (needsRoot) {
+            reader = proxy.getReader();
+            reader.root = this.defaultRootProperty;
+            // force rebuild
+            reader.buildExtractors(true);
+        }
+    },
+
+    // inherit docs
+    onBeforeSort: function() {
+        if (this.folderSort) {
+            this.sort({
+                property: 'leaf',
+                direction: 'ASC'
+            }, 'prepend', false);
+        }
+    },
+
+    /**
+     * Called before a node is expanded.
+     * @private
+     * @param {Ext.data.NodeInterface} node The node being expanded.
+     * @param {Function} callback The function to run after the expand finishes
+     * @param {Object} scope The scope in which to run the callback function
+     */
+    onBeforeNodeExpand: function(node, callback, scope) {
+        if (node.isLoaded()) {
+            Ext.callback(callback, scope || node, [node.childNodes]);
+        }
+        else if (node.isLoading()) {
+            this.on('load', function() {
+                Ext.callback(callback, scope || node, [node.childNodes]);
+            }, this, {single: true});
+        }
+        else {
+            this.read({
+                node: node,
+                callback: function() {
+                    Ext.callback(callback, scope || node, [node.childNodes]);
+                }
+            });
+        }
+    },
+
+    //inherit docs
+    getNewRecords: function() {
+        return Ext.Array.filter(this.tree.flatten(), this.filterNew);
+    },
+
+    //inherit docs
+    getUpdatedRecords: function() {
+        return Ext.Array.filter(this.tree.flatten(), this.filterUpdated);
+    },
+
+    /**
+     * Called before a node is collapsed.
+     * @private
+     * @param {Ext.data.NodeInterface} node The node being collapsed.
+     * @param {Function} callback The function to run after the collapse finishes
+     * @param {Object} scope The scope in which to run the callback function
+     */
+    onBeforeNodeCollapse: function(node, callback, scope) {
+        callback.call(scope || node, node.childNodes);
+    },
+
+    onNodeRemove: function(parent, node, isMove) {
+        var me = this,
+            removed = me.removed;
+
+        if (!node.isReplace && Ext.Array.indexOf(removed, node) == -1) {
+            removed.push(node);
+        }
+
+        if (me.autoSync && !me.autoSyncSuspended && !isMove) {
+            me.sync();
+        }
+    },
+
+    onNodeAdded: function(parent, node) {
+        var me = this,
+            proxy = me.getProxy(),
+            reader = proxy.getReader(),
+            data = node.raw || node[node.persistenceProperty],
+            dataRoot;
+
+        Ext.Array.remove(me.removed, node);
+
+        if (!node.isLeaf()) {
+            dataRoot = reader.getRoot(data);
+            if (dataRoot) {
+                me.fillNode(node, reader.extractData(dataRoot));
+                delete data[reader.root];
+            }
+        }
+
+        if (me.autoSync && !me.autoSyncSuspended && (node.phantom || node.dirty)) {
+            me.sync();
+        }
+    },
+
+    onNodeSort: function() {
+        if(this.autoSync && !this.autoSyncSuspended) {
+            this.sync();
+        }
+    },
+
+    /**
+     * Sets the root node for this store.  See also the {@link #root} config option.
+     * @param {Ext.data.Model/Ext.data.NodeInterface/Object} root
+     * @return {Ext.data.NodeInterface} The new root
+     */
+    setRootNode: function(root, /* private */ preventLoad) {
+        var me = this;
+
+        root = root || {};
+        if (!root.isModel) {
+            // create a default rootNode and create internal data struct.
+            Ext.applyIf(root, {
+                id: me.defaultRootId,
+                text: 'Root',
+                allowDrag: false
+            });
+            Ext.data.NodeInterface.decorate(me.model);
+            root = Ext.ModelManager.create(root, me.model);
+        } else if (root.isModel && !root.isNode) {
+            Ext.data.NodeInterface.decorate(me.model);
+        }
+
+
+        // Because we have decorated the model with new fields,
+        // we need to build new extactor functions on the reader.
+        me.getProxy().getReader().buildExtractors(true);
+
+        // When we add the root to the tree, it will automaticaly get the NodeInterface
+        me.tree.setRootNode(root);
+
+        // If the user has set expanded: true on the root, we want to call the expand function
+        if (preventLoad !== true && !root.isLoaded() && (me.autoLoad === true || root.isExpanded())) {
+            me.load({
+                node: root
+            });
+        }
+
+        return root;
+    },
+
+    /**
+     * Returns the root node for this tree.
+     * @return {Ext.data.NodeInterface}
+     */
+    getRootNode: function() {
+        return this.tree.getRootNode();
+    },
+
+    /**
+     * Returns the record node by id
+     * @return {Ext.data.NodeInterface}
+     */
+    getNodeById: function(id) {
+        return this.tree.getNodeById(id);
+    },
+
+    /**
+     * Loads the Store using its configured {@link #proxy}.
+     * @param {Object} options (Optional) config object. This is passed into the {@link Ext.data.Operation Operation}
+     * object that is created and then sent to the proxy's {@link Ext.data.proxy.Proxy#read} function.
+     * The options can also contain a node, which indicates which node is to be loaded. If not specified, it will
+     * default to the root node.
+     */
+    load: function(options) {
+        options = options || {};
+        options.params = options.params || {};
+
+        var me = this,
+            node = options.node || me.tree.getRootNode(),
+            root;
+
+        // If there is not a node it means the user hasnt defined a rootnode yet. In this case lets just
+        // create one for them.
+        if (!node) {
+            node = me.setRootNode({
+                expanded: true
+            }, true);
+        }
+
+        if (me.clearOnLoad) {
+            if(me.clearRemovedOnLoad) {
+                // clear from the removed array any nodes that were descendants of the node being reloaded so that they do not get saved on next sync.
+                me.clearRemoved(node);
+            }
+            // temporarily remove the onNodeRemove event listener so that when removeAll is called, the removed nodes do not get added to the removed array
+            me.tree.un('remove', me.onNodeRemove, me);
+            // remove all the nodes
+            node.removeAll(false);
+            // reattach the onNodeRemove listener
+            me.tree.on('remove', me.onNodeRemove, me);
+        }
+
+        Ext.applyIf(options, {
+            node: node
+        });
+        options.params[me.nodeParam] = node ? node.getId() : 'root';
+
+        if (node) {
+            node.set('loading', true);
+        }
+
+        return me.callParent([options]);
+    },
+
+    /**
+     * Removes all records that used to be descendants of the passed node from the removed array
+     * @private
+     * @param {Ext.data.NodeInterface} node
+     */
+    clearRemoved: function(node) {
+        var me = this,
+            removed = me.removed,
+            id = node.getId(),
+            removedLength = removed.length,
+            i = removedLength,
+            recordsToClear = {},
+            newRemoved = [],
+            removedHash = {},
+            removedNode,
+            targetNode,
+            targetId;
+
+        if(node === me.getRootNode()) {
+            // if the passed node is the root node, just reset the removed array
+            me.removed = [];
+            return;
+        }
+
+        // add removed records to a hash so they can be easily retrieved by id later
+        for(; i--;) {
+            removedNode = removed[i];
+            removedHash[removedNode.getId()] = removedNode;
+        }
+
+        for(i = removedLength; i--;) {
+            removedNode = removed[i];
+            targetNode = removedNode;
+            while(targetNode && targetNode.getId() !== id) {
+                // walk up the parent hierarchy until we find the passed node or until we get to the root node
+                targetId = targetNode.get('parentId');
+                targetNode = targetNode.parentNode || me.getNodeById(targetId) || removedHash[targetId];
+            }
+            if(targetNode) {
+                // removed node was previously a descendant of the passed node - add it to the records to clear from "removed" later
+                recordsToClear[removedNode.getId()] = removedNode;
+            }
+        }
+
+        // create a new removed array containing only the records that are not in recordsToClear
+        for(i = 0; i < removedLength; i++) {
+            removedNode = removed[i];
+            if(!recordsToClear[removedNode.getId()]) {
+                newRemoved.push(removedNode);
+            }
+        }
+
+        me.removed = newRemoved;
+    },
+
+    /**
+     * Fills a node with a series of child records.
+     * @private
+     * @param {Ext.data.NodeInterface} node The node to fill
+     * @param {Ext.data.Model[]} newNodes The records to add
+     */
+    fillNode: function(node, newNodes) {
+        var me = this,
+            ln = newNodes ? newNodes.length : 0,
+            sorters = me.sorters,
+            i, sortCollection,
+            needsIndexSort = false,
+            performLocalSort = ln && me.sortOnLoad && !me.remoteSort && sorters && sorters.items && sorters.items.length,
+            node1, node2;
+
+        // See if there are any differing index values in the new nodes. If not, then we do not have to sortByIndex
+        for (i = 1; i < ln; i++) {
+            node1 = newNodes[i];
+            node2 = newNodes[i - 1];
+            needsIndexSort = node1[node1.persistenceProperty].index != node2[node2.persistenceProperty].index;
+            if (needsIndexSort) {
+                break;
+            }
+        }
+
+        // If there is a set of local sorters defined.
+        if (performLocalSort) {
+            // If sorting by index is needed, sort by index first
+            if (needsIndexSort) {
+                me.sorters.insert(0, me.indexSorter);
+            }
+            sortCollection = new Ext.util.MixedCollection();
+            sortCollection.addAll(newNodes);
+            sortCollection.sort(me.sorters.items);
+            newNodes = sortCollection.items;
+
+            // Remove the index sorter
+            me.sorters.remove(me.indexSorter);
+        } else if (needsIndexSort) {
+            Ext.Array.sort(newNodes, me.sortByIndex);
+        }
+
+        node.set('loaded', true);
+        for (i = 0; i < ln; i++) {
+            node.appendChild(newNodes[i], undefined, true);
+        }
+
+        return newNodes;
+    },
+
+    /**
+     * Sorter function for sorting records in index order
+     * @private
+     * @param {Ext.data.NodeInterface} node1
+     * @param {Ext.data.NodeInterface} node2
+     * @return {Number}
+     */
+    sortByIndex: function(node1, node2) {
+        return node1[node1.persistenceProperty].index - node2[node2.persistenceProperty].index;
+    },
+
+    // inherit docs
+    onProxyLoad: function(operation) {
+        var me = this,
+            successful = operation.wasSuccessful(),
+            records = operation.getRecords(),
+            node = operation.node,
+            filtered,
+            childNodes,
+            len,
+            i;
+
+        me.loading = false;
+        node.set('loading', false);
+        if (successful) {
+            if (!me.clearOnLoad) {
+                records = me.cleanRecords(node, records);
+            }
+            records = me.fillNode(node, records);
+        }
+        // The load event has an extra node parameter
+        // (differing from the load event described in AbstractStore)
+        /**
+         * @event load
+         * Fires whenever the store reads data from a remote data source.
+         * @param {Ext.data.TreeStore} this
+         * @param {Ext.data.NodeInterface} node The node that was loaded.
+         * @param {Ext.data.Model[]} records An array of records.
+         * @param {Boolean} successful True if the operation was successful.
+         */
+        // deprecate read?
+        me.fireEvent('read', me, operation.node, records, successful);
+        me.fireEvent('load', me, operation.node, records, successful);
+        //this is a callback that would have been passed to the 'read' function and is optional
+        Ext.callback(operation.callback, operation.scope || me, [records, operation, successful]);
+    },
+    
+    cleanRecords: function(node, records){
+        var nodeHash = {},
+            childNodes = node.childNodes,
+            i = 0,
+            len  = childNodes.length,
+            out = [],
+            rec;
+            
+        // build a hash of all the childNodes under the current node for performance
+        for (; i < len; ++i) {
+            nodeHash[childNodes[i].getId()] = true;
+        }
+        
+        for (i = 0, len = records.length; i < len; ++i) {
+            rec = records[i];
+            if (!nodeHash[rec.getId()]) {
+                out.push(rec);    
+            }
+        }
+        
+        return out;
+    },
+
+    // inherit docs
+    removeAll: function() {
+        var root = this.getRootNode();
+        if (root) {
+            root.destroy(true);
+        }
+        this.fireEvent('clear', this);
+    },
+
+    // inherit docs
+    doSort: function(sorterFn) {
+        var me = this;
+        if (me.remoteSort) {
+            //the load function will pick up the new sorters and request the sorted data from the proxy
+            me.load();
+        } else {
+            me.tree.sort(sorterFn, true);
+            me.fireEvent('datachanged', me);
+            me.fireEvent('refresh', me);
+        }
+        me.fireEvent('sort', me);
+    }
+}, function() {
+    var proto = this.prototype;
+    proto.indexSorter = new Ext.util.Sorter({
+        sorterFn: proto.sortByIndex
+    });
+});