ExtJS 4 Tree dragText

Another quick one whilst it’s in my head. I was dragging between other components and the tree the other day and I wasn’t happy with the text used when dragging. So here’s a few overrides for ExtJS 4.0.7 that will let you set a dragField with your gridviewdragdrop plugin that will use the field in the model you are dragging with the dragText you provide.

This code assumes you are only ever dragging one model into the Tree.

Ext.override(Ext.view.DragZone, {
    getDragText: function() {
        if (this.dragField) {
            var fieldValue = this.dragData.records[0].get(this.dragField);
            return Ext.String.format(this.dragText, fieldValue);
        } else {
            var count = this.dragData.records.length;
            return Ext.String.format(this.dragText, count, count == 1 ? '' : 's');
        }
    }
});


Ext.override(Ext.grid.plugin.DragDrop, {
    onViewRender : function(view) {
        var me = this;

        if (me.enableDrag) {
            me.dragZone = Ext.create('Ext.view.DragZone', {
                view: view,
                ddGroup: me.dragGroup || me.ddGroup,
                dragText: me.dragText,
                dragField: me.dragField
            });
        }

        if (me.enableDrop) {
            me.dropZone = Ext.create('Ext.grid.ViewDropZone', {
                view: view,
                ddGroup: me.dropGroup || me.ddGroup
            });
        }
    }
});

Use it like this

viewConfig: {
    plugins: {
        ptype: 'gridviewdragdrop',
        ddGroup: 'TreeDD',
        enableDrop: false,
        dragText: 'Employee: {0}',
        dragField: 'fullName'
    }
},

Leave Your Comment

Your email will not be published or shared. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>