2

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() {
       Ext.QuickTips.init();
         var me = this;
         me.callParent(arguments);
              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 project from designer then everything works fine. The problem is if i write renderer in ui file, it will get overwritten everytime i export the project :(

suknic
  • 637
  • 6
  • 15
S R
  • 674
  • 2
  • 18
  • 45

1 Answers1

1
  1. Ext.QuickTips.init() should only be called 1 time and needs to be relocated to a global location.
  2. You need to relocate your rendered definition to the actual column it belongs to: { ..., dataIndex : 'myColumn', rendered : function (value, metaData, etc) { return value; }, title : 'My Column Title', ... }

EDIT

Below is an example:

Ext.define('MyApp.view.ItemManager', {
    extend: 'MyApp.view.ui.ItemManager',

    initComponent: function() {
        //Ext.QuickTips.init(); // move to global js file. only call once.
        var me = this;
        me.callParent(arguments);

        if (!me.down('#itemManager').columns[3].renderer) {
            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>';
            }
        }
    }
});
Timothy Allyn Drake
  • 926
  • 6
  • 22
  • if u luk @ques thoroughly u will notice that i have said im using ext desginer 1.2 that does not have renderer option to specify...so if i inclu code in js that is created after exporting it as u said, next time when i export xds the code(renderer) written by me overwritten..so i can not include renderer in column confg – S R Sep 29 '11 at 06:19
  • Please review and apply the example I added. Also, please do not forget to move your `Ext.QuickTips.init();` to a global location as it should only be called once. – Timothy Allyn Drake Sep 29 '11 at 07:34