在tabpanel上的网格上的extjs 4渲染工具提示

时间:2011-08-31 06:29:09

标签: grid extjs4 tabpanel renderer

我正在使用Extjs 4&使用Designer 1.2.0 我正在使用网格的渲染器功能来解决我用于显示工具提示的问题。网格放置在选项卡面板中。当我打开标签面板时,一切正常,但当我关闭标签面板&重新打开它,initComponent()不再被调用&所以工具提示不显示& 超链接效果消失。什么可以解决这个问题? 下面是我的代码:

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>';
              }
      }
});

然而,当我在通过从设计师导出项目生成的 ui 文件中编写渲染器代码时,一切正常。问题是如果我在 ui 文件中写入渲染器,每次导出项目时都会得到覆盖 :(

1 个答案:

答案 0 :(得分:1)

  1. Ext.QuickTips.init()只应被调用一次,需要重新定位到全球位置。
  2. 您需要将呈现的定义重定位到它所属的实际列:{ ..., dataIndex : 'myColumn', rendered : function (value, metaData, etc) { return value; }, title : 'My Column Title', ... }
  3. 修改

    以下是一个例子:

    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>';
                }
            }
        }
    });