Extjs4 Grid column tip实现

var grid = new Ext.grid.GridPanel({
renderTo: 'xxxGrid',
   store:  store,
   columns: [
        {header: 'key',flex: 1, dataIndex: 'key' , hidden:true},
        {header: 'monitorGroupKey' , flex: 1, dataIndex: 'monitorGroupKey' ,hidden:true },        
        {header: 'emailGroupKey' , flex: 1, dataIndex: 'emailGroupKey',hidden:true},        
        {header: receiveNameLabel , flex: 1, dataIndex: 'name' , sortable : false , filterable : false},    
      {header: receiveDescLabel , flex: 1, dataIndex: 'description' , sortable : false , filterable : false}  ],    
  loadMask:true, 
viewConfig: {
stripeRows: true,
        forceFit: true,
        scrollOffset: 0
},
bbar: new Ext.PagingToolbar({
            store:  store,
            displayInfo: true,
            displayMsg: '<%=bundle.getString("xxx")%> {0} - {1} of {2}',
            emptyMsg: "<%=bundle.getString("xxx")%>"
    }),
height:305,
listeners: {
        viewready: function (grid) {
            var view = grid.view;             
            // record the current cellIndex
            grid.mon(view, {
                uievent: function (type, view, cell, recordIndex, cellIndex, e) {
                    grid.cellIndex = cellIndex;
                    grid.recordIndex = recordIndex;
                }
            });
            
            grid.tip = Ext.create('Ext.tip.ToolTip', {
                target: view.el,
                delegate: '.x-grid-cell',
                trackMouse: true,
                renderTo: Ext.getBody(),

                listeners: {
                    beforeshow: function updateTipBody(tip) {
                        if (!Ext.isEmpty(grid.cellIndex) && grid.cellIndex !== -1) {
                            header = grid.headerCt.getGridColumns()[grid.cellIndex];
  if(
  grid.getStore().getAt(grid.recordIndex).get(header.dataIndex) != null
  &&  grid.getStore().getAt(grid.recordIndex).get(header.dataIndex).length >0
  )
                            tip.update(grid.getStore().getAt(grid.recordIndex).get(header.dataIndex));
                        }
                    }
                }
            });


        }
    },
                    beforeshow: function updateTipBody(tip) {
                        if (!Ext.isEmpty(grid.cellIndex) && grid.cellIndex !== -1) {
                            header = grid.headerCt.getGridColumns()[grid.cellIndex];
  if(
  grid.getStore().getAt(grid.recordIndex).get(header.dataIndex) != null
  &&  grid.getStore().getAt(grid.recordIndex).get(header.dataIndex).length >0
  )
                            tip.update(grid.getStore().getAt(grid.recordIndex).get(header.dataIndex));
                        }
                    }
                }
            });

        }
    },

dockedItems: [{
        xtype: 'toolbar',
        items: [{
            iconCls: 'icon-add',
            id: 'add',
                text: '<%=bundle.getString("xxx")%>',
        handler: function() { 
        showEmailReceiveRule("<%=bundle.getString("xxx")%>");
      }
     } 
  }]
}] 
    }) ;//end grid