CODEWITHSUNDEEP
javascriptextjs
Ambasador
Ambasador

Reputation: 377

How to prevent deleting , editing and dragging records in tree. Extjs

In Ext.tree.Panel, editing records is done by rowediting plugin. How to prevent deleting or editing the topmost Root record?

And how to prohibit dragging the top records except childNodes?

Dragging is done using the treeviewdragdrop plugin. Below is the plugin code.

...
plugins: [{
        ptype: 'rowediting',
        clicksToMoveEditor: 1,
        autoCancel: false,
        listeners: {
            afteredit : function (editor, context, eOpts ){
                context.store.reload();

            },
            canceledit : function ( editor, context, eOpts ){
                context.store.reload();

            }
        }
    }],
    viewConfig: {
        plugins: [{
            ptype: 'treeviewdragdrop',
            containerScroll: true
        }]
    }, 
...

Example in fiddle , on file app/view/QuestionTree.js

Upvotes: 0

Views: 88

Answers (2)

Fabio Barros
Fabio Barros

Reputation: 1439

Just to add to the solution, to prevent the drag on topmost records you could also use:

       listeners: {
            viewready: function (tree) {
                var view = tree.getView(),
                    dd = view.findPlugin('treeviewdragdrop');

                dd.dragZone.onBeforeDrag = function (data, e) {
                    var rec = view.getRecord(e.getTarget(view.itemSelector));
                    return rec.isLeaf();
                };
            }
        }

Upvotes: 1

beso9595
beso9595

Reputation: 1174

For preventing editing you can use beforeedit event where you can return false and cancel the operation. Same way you can use beforedrop for preventing drop. Here's the FIDDLE (in QuestionTree.js)

beforeedit: function (editor, context) {
    return !context.record.isRoot();
}



listeners: {
    beforedrop: function (node, data, overModel, dropPosition) {
        return data.records[0].isLeaf();
    }
},

Upvotes: 0

Related Questions