Question

Am working on moving nodes in a tree, and as they are moved, their ID’s are updated in the database through C# in the back-end. Till now, i have managed to update the position of the node that is being moved, but after its moved, the position of the other nodes in the tree should also get updated. Could anyone tell me how to proceed with this?

itemmove : {
fn : function(v, oldParent, newParent, index, eOpts) {
var nodeID = v.data.id;
var oldParent = oldParent.data.id;
var newParent = newParent.data.id;
var index = index;
var level = v.data.level;
movenode(nodeID, oldParent, newParent, index, level);
}
}


function movenode(nodeID, oldParent, newParent, index, level) {
Ext.Ajax.request({
    url : 'data/pages.aspx',
    params : {
        UserID : USER.UserID,
        mode : 'MOVENODE',
        currentNode : nodeID,
        oldParentNode : oldParent,
        newParentNode : newParent,
        index : index,
        level : level,
        ProjDB : projDB
    },
    success : function() {
        loadTREEst();
        genMessage(LANG.Suc, LANG.SaveOK, 'tick', false);

    },
    failure : function() {
        genMessage(LANG.Warn, LANG.GenWarn, 'warn', false);
    }
});
}

So, i send the parameters to SQl, and then update the index of the node that has been moved.

For example, if i move a node from position 8 to 1, the index of the 8th node changes to 1 in the database, but the index of the first node remains at 1. And because of this, the tree also doesnt get updated. i want all the other nodes in the tree to get updated as well. So, in this case, the node in index 1 will become index 2, the node in index 2 will become index 3, and so on. Can anyone explain me how to do this.

Is there any other method other than autosync or sync to do this?
Thanks in advance.

Answer 1

Here is some sample code that works with 4.1:

Ext.define('BS.model.ItemCategory', {
    extend: 'Ext.data.Model',
    fields: [
        {name: 'name'     , type: 'string'},
        {name: 'iconCls'  , type: 'string', defaultValue: 'treenode-no-icon'},
        {name: 'leaf'     , type: 'boolean', defaultValue: false},
        {name: 'expanded' , type: 'boolean', defaultValue: true, persist: false},
        {name: 'index'     , type: 'int'},        
    ],

    proxy: {
        type: 'direct',

        api: {
            create: ItemCategories.Create,
            read: ItemCategories.Read,
            update: ItemCategories.Update,
            destroy: ItemCategories.Delete,
        },
    }, 
});

You won’t be having a direct proxy as your server isn’t php, but just put the corresponding server scripts (see docs).

Then my store:

Ext.define('BS.store.ItemCategories', {

    extend: 'Ext.data.TreeStore',    
    model: 'BS.model.ItemCategory',

    autoSync: true,

    root: {
        text: 'Root',
        id: 'NULL',
        expanded: true
    },

    clearOnLoad: true,
});

And the view:

Ext.define('BS.view.admin.pages.item-categories.ItemCategories' ,
{
    extend: 'Ext.tree.Panel',
    alias : 'widget.item-categories-tree',

    store: 'ItemCategories',

    displayField: 'name',

    rootVisible: false,
    useArrows: true,
    multiSelect: false,
    singleExpand: false,    
    allowDeselect: true,

    plugins: {
        ptype: 'treeviewdragdrop',                    
    },          
});

That’s pretty much it! When you move a node you’ll see ExtJS sends an update request to the server with an array of all the nodes whose index (sort) has changed.