Page 1 of 2 12 LastLast
Results 1 to 10 of 18

Thread: EXTJS 4.1.3 Dataview tooltip

  1. #1

    Default EXTJS 4.1.3 Dataview tooltip

    hi,
    I have a dataview containing only dynamic images.
    I want to show a large html tag(example image.name and other details including button) on mouseover of the images.
    I cant use data-qtip as it does not support class.
    Any help will be appreciated
    Thanks!

  2. #2
    Sencha - Sustaining Engineer tristan.lee's Avatar
    Join Date
    Mar 2015
    Location
    Central Ohio
    Posts
    1,579
    Answers
    165

    Default

    Can you provide an example of what you have so far? You should be able to use a tooltip for what you're asking.
    Tristan Lee
    Sencha Inc - Sustaining Engineer


    Having an issue? Help us help you - be detailed; provide some code; demonstrate with a fiddle (fiddle.sencha.com)

    Embed your fiddle in your post: [FIDDLE]id[/FIDDLE]

  3. #3

    Default

    Code:
    Ext.define('Cm.view.Dummyview', {
        extend: 'Ext.view.View',
        store: 'Cms.store.MyCommunityMembersStore',
        xtype: 'Dataview',
        tpl: new Ext.XTemplate('<tpl for=".">' + '<div class = "comm-members" >' + '<img class="img-thumbnail" src="/cms/resources/images/default_profile_pic.png" />' + '</div>' + '</tpl>'),
        itemSelector: 'div.comm-members',
    
    
        listeners: {
            render: function(_this, dv, record, item, index, e) {
                var view = Ext.getCmp('Dummyview'),
                    store = view.getStore(),
                    tip = Ext.create('Ext.tip.ToolTip', {
                        target: view.el,
                        delegate: view.itemSelector,
                        trackMouse: false,
                        renderTo: Ext.getBody(),
                        listeners: {
                            beforeshow: function(tip, record, item, index, e) {
                                var record = view.getRecord(tip.triggerElement),
                                    tipcontent = '<div class = "parent-class">' + '<div class = "image-class>"' + '<img class="img-thumbnail" src="/cms/resources/images/default_profile_pic.png" />' + '</div>' +
                                    //'<div class = "name-class"><span>{firstName}{lastName}</span>'+
                                    '<div class = "name=class"><span>'
                                    /*+record.data.firstName + record.data.lastName*/'<button class="joinOrSubcription" type="button" ></button>' + '</span>' + '</div>' +
    
    
                                    '</div>'
                                tip.update(tipcontent);
                            }
                        }
                    });
            }
        }
    });
    here is my sample code where in i have created a dataview of images using tpl.
    Now on render i want to show a image ,name (from store) and a button on mouse over of the images.
    I created a single tooltip instance on render and trying to customize the tooltip using beforeshow listener .i.e; using div tag and other html tags.

    The code doesnt seem to work.
    Last edited by tristan.lee; 10 Jun 2015 at 8:23 PM. Reason: Please add code tags

  4. #4
    Sencha User jdkhamba's Avatar
    Join Date
    Jul 2012
    Posts
    236
    Answers
    45

    Default

    Probable wanna listen to the refresh event of the view instead of render as the store needs to finish binding to the view before you can access it's records.

  5. #5

    Default

    yea..its working fine now.

    I am still not able catch the action of the button inside the tooltip.
    Tooltip doesnt have click event listener.
    i need the button click event along with the dataview record.

    How to do it???

  6. #6
    Sencha - Sustaining Engineer tristan.lee's Avatar
    Join Date
    Mar 2015
    Location
    Central Ohio
    Posts
    1,579
    Answers
    165

    Default

    Sounds like you resolved it, but this example is working.

    Tristan Lee
    Sencha Inc - Sustaining Engineer


    Having an issue? Help us help you - be detailed; provide some code; demonstrate with a fiddle (fiddle.sencha.com)

    Embed your fiddle in your post: [FIDDLE]id[/FIDDLE]

  7. #7

    Default

    but, now i want the button tag to work.

    i want a pop up on the button click(appearing inside the tooltip) , but unable to catch any of its event.

    My sample code is as given in the previous post.

    Please help.
    Thanks

  8. #8
    Sencha - Sustaining Engineer tristan.lee's Avatar
    Join Date
    Mar 2015
    Location
    Central Ohio
    Posts
    1,579
    Answers
    165

    Default

    You can create an event at a higher level and delegate it to the class of your button like so:

    Tristan Lee
    Sencha Inc - Sustaining Engineer


    Having an issue? Help us help you - be detailed; provide some code; demonstrate with a fiddle (fiddle.sencha.com)

    Embed your fiddle in your post: [FIDDLE]id[/FIDDLE]

  9. #9

    Default

    Thanks A lot!!
    it worked!

  10. #10

    Default

    Thank you!
    Its working for button click but at the same time i am losing data for record from the store.

    Ext.getBody().on('click', function(_this, record, item, index, e, eOpts) {
    alert('Clicked');
    }, {
    delegate: 'joinOrSubscription'
    });

    the record does not help me to fetch data from my store.
    How to fetch data from mys store under this handler??

Page 1 of 2 12 LastLast

Similar Threads

  1. Tooltip help for dataview
    By rrandymeyer in forum Ext: Q&A
    Replies: 4
    Last Post: 2 Jan 2012, 9:33 PM
  2. extjs dataview tooltip
    By prajeesh_bs in forum Ext 3.x: Help & Discussion
    Replies: 1
    Last Post: 30 Nov 2011, 12:45 PM
  3. extjs tooltip to prevent default tooltip
    By wp.joju in forum Ext 3.x: Help & Discussion
    Replies: 2
    Last Post: 1 Jul 2010, 7:43 AM
  4. DataView and Tooltip
    By Stephan Schrade in forum Ext 2.x: Help & Discussion
    Replies: 6
    Last Post: 10 Dec 2008, 10:25 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •