View Full Version : extjs 4 rendering tooltip on grid on tabpanel

30 Aug 2011, 5:13 AM
i am working with Extjs 4 & using Designer 1.2.0
i am facing problems with grid's renderer function that i am using to display tooltip. The grid is placed in tab panel. Everything works fine for first time when i open tab panel,but when i close tab panel & reopen it , the initComponent() does not get called again & so **tooltip** does not show up & **hyperlink** effect goes off . What can be solution for this problem?
below is my code :

Ext.define('MyApp.view.ItemManager', {
extend: 'MyApp.view.ui.ItemManager',
initComponent: function () {
var me = this;
me.down('#itemManager').columns[3].renderer = function (value, metaData, record, colIndex, store, view) {
var imgpath = "<img style=\'margin: 2px 0;height:150px;width:150px;\' src=\' /items/" + record.data.id + " '/>";
metaData.tdAttr = 'data-qtip=" ' + imgpath + '"';
return '<a href="/items/imgdownload?id=' + record.data.id + '">' + record.data.img_filename + '</a>';

However when i write renderer code in ui file generated by exporting from designer then everything works fine. The problem is if i write in ui file, it will get overwritten everytime i export the project. I am destroying tab when i close it.

31 Aug 2011, 7:58 AM
Please wrap all posted code in code tags (# button on the editor toolbar).

It's difficult to say exactly what's going wrong but there are a number of things that don't feel right about that code.

Firstly, Ext.QuickTips.init(). In Ext 4 this should be Ext.tip.QuickTipManager.init(). Further, this is something you should only do once when the page loads, not in initComponent.

The next thing that worries me is this bit:


It looks like me is a captured reference to the container and this is trying to grab the current component. Surely there should be a this in there somwhere? I'd also worry that you seem to be using a component id to reference a component: one of the main advantages of using component queries is that you don't run the risk of the explosions that ids can cause. Avoid static ids on components.

I think that whole way of assigning a renderer looks like a bodge but I'm not familiar enough with Ext Designer to suggest an alternative. My gut feeling is that it looks like it'll tamper with properties on the superclass's prototype. Though this is not a problem in itself it shouldn't be in the initComponent of the subclass.

My next concern would be your use of record.data. This breach of encapsulation was bad form in ExtJS 3 and in 4 it isn't even documented. If you want the value of the id field just do record.get('id').

Next, you've got some stray whitespace in your attributes. The img src and the data-qtip attributes both have spaces around their values, inside the quotes. It may work but it shouldn't be there.

Finally, I don't see a call of this.callParent(). I'm surprised this code works at all without it.

If correcting all of these niggles doesn't fix it, my next question would be what do you mean 'closing' the tab? Is it destroyed or just hidden? If it is just hidden then there's no surprise that initComponent isn't called again but it shouldn't lose its renderer like that. If it's destroyed then reopening it would require you to create a new instance of the tab. If this doesn't call initComponent then something has gone dramatically wrong. A common error under these circumstances is to reuse the destroyed tab, with unpredictable consequences.

It might be helpful to see the code you use for showing the tab panel each time.

31 Aug 2011, 9:19 PM
@skirtle i have edited my code. i m destroying tab still renderer does not work .

1 Sep 2011, 1:53 PM
You seem to have wrapped your code in QUOTE tags, not CODE tags.

Could you post the code you're using to open a new tab? What makes you say that initComponent() is not being called the second time?

Are you getting any error at all?

Have you tried this in different browsers?

You still seem to be using a static id in your component query. I have a suspicion that your original tab isn't being destroyed properly leading to duplicate ids.