[OPEN-2] Ext.ToolTip

Request new features or modifications for Extensible components

Re: [OPEN-2] Ext.ToolTip

Postby eggzamummy » Sat May 12, 2012 6:52 am

I'm using extensible 1.0 with extjs 3.4. As far as the Init of QTips, I have that in place and actually have other qtips working fine within the application in a few treepanels. The weird thing is that I see the markup in the DIV in firebug so I know that the qtip=XXX is there it's just not displaying. Here's the override code:

Code: Select all
Ext.override(Ext.ensible.cal.DayBodyView, {
    getEventTemplate : function(){
        if(!this.eventTpl){
            this.eventTpl = !(Ext.isIE || Ext.isOpera) ?
                new Ext.XTemplate(
                    '<div  qtip="<b>{Title}</b><br/>{Description}" id="{_elId}" class="{_extraCls} ext-cal-evt ext-cal-evr" style="left: {_left}%; width: {_width}%; top: {_top}px; height: {_height}px;">',
                        '<div class="ext-evt-bd">', this.getEventBodyMarkup(), '</div>',
                        this.enableEventResize ? '<div class="ext-evt-rsz"><div class="ext-evt-rsz-h">&#160;</div></div>' : '',
                    '</div>'
                )
                : new Ext.XTemplate(
                    '<div qtip="<b>{Title}</b><br/>{Description}" id="{_elId}" class="ext-cal-evt {_extraCls}" style="left: {_left}%; width: {_width}%; top: {_top}px;">',
                        '<div class="ext-cal-evb">&#160;</div>',
                        '<dl style="height: {_height}px;" class="ext-cal-evdm">',
                            '<dd class="ext-evt-bd">',
                                this.getEventBodyMarkup(),
                            '</dd>',
                            this.enableEventResize ? '<div class="ext-evt-rsz"><div class="ext-evt-rsz-h">&#160;</div></div>' : '',
                        '</dl>',
                        '<div class="ext-cal-evb">&#160;</div>',
                    '</div>'
                );
            this.eventTpl.compile();
        }
        return this.eventTpl;
    }           
});
Managing Web Consultant
www.stbwebservices.com
eggzamummy
 
Posts: 35
Joined: Tue Aug 30, 2011 10:14 am

Re: [OPEN-2] Ext.ToolTip

Postby eggzamummy » Tue May 15, 2012 10:38 am

I figured it out. I actually had to do something a little different than what is in the example code posted. I had to make it look like below:

Code: Select all
new Ext.XTemplate(
                    '<div ext:qtip="{starttime}</br>{clientname}</br>{servicename}" id="{_elId}" class="{_extraCls} ext-cal-evt ext-cal-evr" style="left: {_left}%; width: {_width}%; top: {_top}px; height: {_height}px;">',
                        '<div ext:qtip="{starttime}</br>{clientname}</br>{servicename}" class="ext-evt-bd">', this.getEventBodyMarkup(), '</div>',
                        this.enableEventResize ? '<div class="ext-evt-rsz"><div class="ext-evt-rsz-h">&#160;</div></div>' : '',
                    '</div>'
                )


Notice the "ext:" in front of qtip. This was required for it to show up for me.
Managing Web Consultant
www.stbwebservices.com
eggzamummy
 
Posts: 35
Joined: Tue Aug 30, 2011 10:14 am

Re: [OPEN-2] Ext.ToolTip

Postby gabe.sidler » Thu May 17, 2012 2:30 am

Hi,
Thanks for sharing your solution. I am glad to hear that you were able to figure this out.

For anyone reading this: Notice that there are differences in how qtips work between extjs 3.x and extjs 4.0. The above solution applies to extjs 3.x. For a version that works with extjs 4.x, see this post: viewtopic.php?f=4&t=191#p1488

Gabe
User avatar
gabe.sidler
Moderator
Moderator
 
Posts: 126
Joined: Sun Sep 25, 2011 4:34 am

Previous

Return to Feature Requests

Who is online

Users browsing this forum: No registered users and 1 guest

cron