Event drag tooltip

Ask for help related to our 2.x versions.
Post Reply
User avatar
garybake
Posts: 4
Joined: Wed Sep 24, 2014 11:22 am
Location: Manchester, UK
Contact:

Event drag tooltip

Post by garybake » Fri Sep 26, 2014 12:17 pm

Hi,

I'm wondering if anybody has an example of changing the default tooltip when dragging events around?

I can see that its part of the dragConfig I can't find an example of how to create a Sch.tooltip.Tooltip.

In my grids initComponent I create

Code: Select all

var tip = Ext.create("Sch.tooltip.Tooltip", {
                schedulerView   : me.getSchedulingView(),
                cls             : 'sch-dragdrop-tip',
                constrainTo     : me.up('[lockable=true]').el
            });
But this fails as it is unable to get the correct view.

I'm aiming to change the text on the tip dynamically when dragging the event round based on what is
underneath.

Regards
Gary

User avatar
mats
Core Developer
Core Developer
Posts: 14260
Joined: Sat Dec 19, 2009 11:41 pm
Location: Sweden
Contact:

Re: Event drag tooltip

Post by mats » Fri Sep 26, 2014 4:09 pm

You'd have to override our code, look at the 'update' method in the Tooltip code. It's called from the drag drop code, which is what you will have to override.
Tired of debugging javascript errors in web applications? Try our new error logging service RootCause, or read more on the Sencha blog

@bryntum
Facebook
API documentation

User avatar
garybake
Posts: 4
Joined: Wed Sep 24, 2014 11:22 am
Location: Manchester, UK
Contact:

Re: Event drag tooltip

Post by garybake » Fri Sep 26, 2014 6:16 pm

Hi, Thank you for the prompt response.

I have the custom template working and should have it live updating next week =)

User avatar
Khaja.Shaik
Posts: 3
Joined: Fri Feb 14, 2014 6:32 am

Re: Event drag tooltip

Post by Khaja.Shaik » Mon Sep 29, 2014 3:45 pm

Can someone show the sample code how to achieve custom tooltip ?

User avatar
garybake
Posts: 4
Joined: Wed Sep 24, 2014 11:22 am
Location: Manchester, UK
Contact:

Re: Event drag tooltip

Post by garybake » Mon Sep 29, 2014 4:02 pm

Hi,

I derived a new tooltip class (we expect to add more implementation later)

Code: Select all

Ext.define('CPA.ResourceAllocationDragTip', {
    extend: 'Sch.tooltip.Tooltip',

    template : new Ext.XTemplate(
        '<div id="resResDrag" class="{[values.valid ? "sch-tip-ok" : "sch-tip-notok"]} resourceDrag">',
        'Unknown',
        '</div>'
    )

});
Then in the main allocation grid:

in the initComponent

Code: Select all

var tip = Ext.create("CPA.ResourceAllocationDragTip", {});

var dragConfig = { 
      tip: tip
};

Ext.apply(this, {
     dragConfig: dragConfig
});
Then define the validator function for the grid

Code: Select all

dndValidatorFn : function(dragEventRecords, targetRowRecord, date) {
   var ddel = document.getElementById('resResDrag');
   ddel.textContent = Ext.util.Format.date(date, 'mY');
   return true; // drop is valid
}
Note mats recommends using the update method on tooltip method but I didn't have enough time to look into it properly. Also I've condensed the code from mine but it should work.

User avatar
bthomas
Posts: 46
Joined: Wed May 18, 2016 4:45 pm

Re: Event drag tooltip

Post by bthomas » Fri Sep 07, 2018 5:51 pm

This does not seem to be working with Scheduler 6.0.2. I have set the dragConfig tip to be an instance of

Code: Select all

Ext.define("Zulu.tip.SwapTooltip", {
    extend: "Sch.tooltip.Tooltip",

  constructor: function constructor(config) {
        this.renderTo = document.body;

        this.template = new Ext.XTemplate('<div class="{[values.valid ? "swap-val-ok" : "swap-val-not-ok"]}">', '</div>', {
                compiled: true,
                disableFormats: true
            })
       
        this.callParent(arguments);
    },

   update: function update(startDate, endDate, valid, redraw) {
        this.template.apply({
                valid: valid
        })
    }
}
I don't see any tip at all when dragging an event. Any thoughts?

User avatar
pmiklashevich
Core Developer
Core Developer
Posts: 1918
Joined: Fri Apr 01, 2016 11:08 am

Re: Event drag tooltip

Post by pmiklashevich » Tue Sep 11, 2018 11:11 am

Hello, in your update function you forgot to call parent to reach Ext.tip.ToolTip.update, and also realign the tooltip. The event drag tooltip is shown by default, so it's enough to override Sch.tooltip.Tooltip, like this:

Code: Select all

Ext.define(null, {
    override : 'Sch.tooltip.Tooltip',
    template : new Ext.XTemplate('<div class="{[values.valid ? "swap-val-ok" : "swap-val-not-ok"]}">{[values.valid ? "swap-val-ok" : "swap-val-not-ok"]}', '</div>', {
        compiled: true,
        disableFormats: true
    }),
    update: function update(startDate, endDate, valid, redraw) {
        var me = this;

        // Use callSuper to reach Ext.tip.ToolTip.update method but skip Sch.tooltip.Tooltip.update
        me.callSuper([
            me.template.apply({
                valid: valid
            })
        ]);

        // Don't forget to realign the tooltip so it follows the dragged event
        if (me.rendered && me.isVisible()) {
            if (Ext.getVersion().isGreaterThan('6.2.1')) {
                me.realignToTarget();
            } else {
                me.realign();
            }
        }
    }
});
Or if you wish to subclass Sch.tooltip.Tooltip, you can do like this (please read carefully the comments in the code snippet):

Code: Select all

Ext.define('MyTooltip', {
    extend : 'Sch.tooltip.Tooltip',
    template : new Ext.XTemplate('<div class="{[values.valid ? "swap-val-ok" : "swap-val-not-ok"]}">{[values.valid ? "swap-val-ok" : "swap-val-not-ok"]}', '</div>', {
        compiled: true,
        disableFormats: true
    }),
    update: function update(startDate, endDate, valid, redraw) {
        var me = this;

        // Use superclass.superclass.update to reach Ext.tip.ToolTip.update method but skip Sch.tooltip.Tooltip.update
        // NOTE: callParent reaches Sch.tooltip.Tooltip.update, but callSuper doesn't reach Ext.tip.ToolTip.update
        // callSuper works only for overrides!
        me.superclass.superclass.update.apply(me, [
            me.template.apply({
                valid: false
            })
        ]);

        // Don't forget to realign the tooltip so it follows the dragged event
        if (me.rendered && me.isVisible()) {
            if (Ext.getVersion().isGreaterThan('6.2.1')) {
                me.realignToTarget();
            } else {
                me.realign();
            }
        }
    }
});

Code: Select all

dragConfig : {
    tip : new MyTooltip()
},
Pavel Miklashevich - Core Developer

User avatar
pmiklashevich
Core Developer
Core Developer
Posts: 1918
Joined: Fri Apr 01, 2016 11:08 am

Re: Event drag tooltip

Post by pmiklashevich » Tue Sep 11, 2018 11:21 am

Or if you want to have fully custom tooltip, it's better to subclass Ext.tip.ToolTip and implement showForElement method.
P.S. Please create a new thread per question next time.
Pavel Miklashevich - Core Developer

User avatar
bthomas
Posts: 46
Joined: Wed May 18, 2016 4:45 pm

Re: Event drag tooltip

Post by bthomas » Wed Sep 12, 2018 9:28 pm

Thank you not just for the code example but for the comments as well! Much appreciated!

Post Reply