Hi all,

First of all, I must say I'm really impressed by ExtJS. I guess you hear that a lot, but I'm really enjoying working with it. The only area that's not so strong, I guess, is documentation. Or rather, the API documentation is great, but more tutorial-style documentation on underlying concepts would be great. Of course, I realise it's hard to find people to do this and keep it up to date.

Anyway, I'm struggling a bit with the concepts behind drag-and-drop. I've seen examples, and the API docs, but my trial and error so far as erred more than succeeded.

In essence, I want a layout where people can drag from a TreePanel to a Grid to add items from the tree to the list in the grid. I also want people to be able to drag a cell on the grid to a "trash can" to remove it from the list.

I've got the tree and grid working, and all the underlying code is in place. I think all I need is to know how to configure the tree so that leaf nodes (only!) are draggable, with a drop-handler on the grid (I already have a function to add a row to the grid and do the necessary AJAX request to save this in the database). Similarly, I need to make the cells in the first column in the grid draggable, and allow them to be dropped on a trash can graphic, with a similar handler (which again, I already have the logic for).

I've pasted the relevant code below. If anyone can tell me what I need to add to get this functionality, I'd be really grateful!

Code:
// basic record
var Skill = Ext.data.Record.create([
       {name: 'skill_id', type: 'int'},
       {name: 'name', type: 'string'},
       {name: 'description', type: 'string'},
       {name: 'rating', type: 'int'}
  ]);

// tree setup
var skillsTreeLoader = new Ext.tree.TreeLoader({
        dataUrl : '/skills/skills_tree'
});

skillsTreeLoader.on('beforeload', function(treeLoader, node) {
    this.baseParams.level = node.attributes.level;
});

    var skillsTree = new Ext.tree.TreePanel('skillsTree', {
        animate: true, 
        loader: skillsTreeLoader,
        enableDD: false,
        containerScroll: true,
        rootVisible: false
    });

    // Set the root node
    var skillsTreeRoot = new Ext.tree.AsyncTreeNode({
        text: 'Skills',
        draggable : false,
        id : 'root'
    });
    skillsTreeRoot.attributes.level = 'root';
    skillsTreeRoot.attributes.selectable = false;
    skillsTreeRoot.attributes.description = '';
    skillsTree.setRootNode(skillsTreeRoot);

    // Render the tree, and expand the root note
    skillsTree.render();
    skillsTreeRoot.expand();

// grid setup
var skillsColumnModel = new Ext.grid.ColumnModel([{
        header: "Skill name",
        dataIndex: 'name',
        width: 160
    },{
        header: "Rating",
        dataIndex: 'rating',
        width: 100
       }
    }]);
skillsColumnModel.defaultSortable = true;

var skillsDataStore = new Ext.data.Store({        
    proxy: new Ext.data.HttpProxy({
        url: '/skills/user_skills'
    }),
    reader: new Ext.data.JsonReader({
        root: 'skills',
        id: 'skill_id'
    }, Skill)
});

    var skillsGrid = new Ext.grid.EditorGrid('skillsGrid', {
        ds: skillsDataStore,
        cm: skillsColumnModel,
        enableColLock: false
    });
    
    // render it
    skillsDataStore.load();
    skillsGrid.render();