PDA

View Full Version : EXTJS 4.1.3 Dataview tooltip



8 Jun 2015, 6:02 AM
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!

tristan.lee
9 Jun 2015, 7:06 PM
Can you provide an example of what you have so far? You should be able to use a tooltip for what you're asking.

10 Jun 2015, 8:17 PM
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.

jdkhamba
11 Jun 2015, 5:40 AM
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.

11 Jun 2015, 5:46 AM
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??? :s

tristan.lee
11 Jun 2015, 5:50 AM
Sounds like you resolved it, but this example is working.

off

11 Jun 2015, 5:55 AM
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

tristan.lee
11 Jun 2015, 6:12 AM
You can create an event at a higher level and delegate it to the class of your button like so:

ofg

11 Jun 2015, 6:27 AM
Thanks A lot!!
it worked!

11 Jun 2015, 6:33 AM
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??

tristan.lee
11 Jun 2015, 6:49 AM
Because this handler is out of scope of the original record, you don't have reference to it through the handler. What I've done here is set the record ID as a data attribute to the template being rendered. Then within the handler, I can read that ID from the data attribute and load that record directly from the store.

ofn

11 Jun 2015, 8:43 PM
render:function(_this,dv, record, item, index, e){
var view = this,
store = view.getStore()
tip = Ext.create('Ext.tip.ToolTip', {
target: view.el,
delegate: view.itemSelector,
trackMouse: false,
width: 150,
height: 100,
autoScroll: true,
renderTo: Ext.getBody(),
hideDelay: 75000,
listeners: {
beforeshow: function updateTipBody(tip) {
var record = view.getRecord(tip.triggerElement);
content = new Ext.Template(['<div data-record="{recordId}" class = "parent-class">'+
'<div class="image-class">'+
'<img class="img-thumbnail" src="/cms/resources/images/default_profile_pic.png" />'+
'</div>'+
'<span>'+record.data.firstName + record.data.lastName +'</span>'+
'<button class = "hello" id = "chatbuttonID" type="button" > Chat </button>' +
'</div>']);
//tip.update(tipcontent);
tip.update(content.apply({
recordId:record.getId()
}));
debugger;
}
},
});


Ext.getBody().on('click', function( e) {
var target = e.getTarget();
record = store.getById(Ext.get(target).up('data-record').getAttribute('data-record'));
debugger;
}, {
delegate: 'hello'
});

},






But I still get my record as null under the click listener...
also I get the message :
Uncaught TypeError: Cannot read property 'getAttribute' of null

13 Jun 2015, 10:16 PM
Any help would be appreciated...
I am in need of a urgent solution...thanx...

tristan.lee
16 Jun 2015, 7:45 AM
data-record is an attribute on the element, so you'll need to query for it like so:


Ext.getBody().on('click', function(e) {
var target = e.getTarget();
record = store.getById(Ext.get(target).up('[data-record]').getAttribute('data-record'));
debugger;
}, null, {
delegate: 'hello'
});

16 Jun 2015, 8:51 PM
Ext.tip.QuickTipManager.init();
Ext.define('Cms.view.ShowCommunityMembersView', {
extend : 'Ext.view.View',
id:'ShowCommunityMembersView',
alias : 'widget.ShowCommunityMembersView',
cls:'show-community-members',
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 = this,
store = view.getStore()
tip = Ext.create('Ext.tip.ToolTip', {
target: view.el,
delegate: view.itemSelector,
trackMouse: false,
renderTo: Ext.getBody(),
hideDelay: 75000,
listeners: {
beforeshow: function updateTipBody(tip,record) {
var record = view.getRecord(tip.triggerElement);
content = new Ext.Template(['<div data-record="{recordId}" class = "parent-class">'+
'<div class="image-class">'+
'<img class="img-thumbnail" src="/cms/resources/images/default_profile_pic.png" />'+
'</div>'+
'<span>'+record.data.firstName + record.data.lastName +'</span>'+
'<button class = "chatButton" type="button" > Chat </button>' +
'</div>']);
tip.update(content.apply({
recordId:record.getId()
}));
}
},
});

Ext.getBody().on('click', function(e) {
var target = e.getTarget();
record = store.getById(Ext.get(target).up('[data-record]').getAttribute('data-record'));
debugger;
}, {
delegate: 'hello'
});

},




though i get the recordId, but when i fetch it .i get the same error..
Uncaught TypeError: Cannot read property 'getAttribute' of null

tristan.lee
17 Jun 2015, 7:08 AM
Take a look at my previous fiddle. I have a click listener on the body, but it's delegated to listen for this event bubbled from a specific element. In this case, I'm delegating to an element with a btn-click class, which is the button within the tooltip.

Your delegation seems to be set to hello, which isn't valid. You need to specify a selector there that matches an element within the tooltip. Otherwise, the click listener is going to be triggered on every click that bubbles up to the body, which is why you are getting the error.

17 Jun 2015, 8:36 PM
tip = Ext.create('Ext.tip.ToolTip', {
target: view.el,
delegate: view.itemSelector,
trackMouse: false,
width: 150,
height: 100,
autoScroll: true,
renderTo: Ext.getBody(),
hideDelay: 75000,
listeners: {
beforeshow: function updateTipBody(tip) {
var record = view.getRecord(tip.triggerElement);
content = new Ext.Template('<div data-record="{recordId}" class = "parent-class">'+
'<div class="image-class">'+
'<img class="img-thumbnail" src="/cms/resources/images/default_profile_pic.png" />'+
'</div>'+
'<span>'+record.data.firstName + record.data.lastName +'</span>'+
'<button class = "chatButton" type="button" > Chat </button>' +
'</div>');
debugger;
//tip.update(tipcontent);
tip.update(content.apply({

recordId:record.getId()
// recordId :record.id

}));
}
},
});

Ext.getBody().on('click', function(e) {
var target = e.getTarget(),

record = store.getById(Ext.get(target).up('[data-record]').getAttribute('data-record'));
}, {
delegate: '.chatButton'
});



No Tristan, dat error was just a silly coz i pasted the code while editing it.
This is my new code..
I think i am not able to fecth the recordId dats y getting the error..
Sorry for being silly, but is till couldnt resolve it... :s

tristan.lee
18 Jun 2015, 9:36 AM
Using your code, I put it into my previous fiddle. It's finding the record just fine.

Once adjustment I made was in the Ext.getBody().on(...), the options param containing the delegate should be passed as the 4th argument, not the 3rd. Perhaps that was your issue:

p0e