Extjs5 grid cell tooltips

extjs 5中grid中每一个单元格 都显示 tooltips

var store = Ext.create('Ext.data.ArrayStore', {
    fields: ['company', 'price', 'change'],
    data: [
        ['3m Co',                               71.72, 0.02],
        ['Alcoa Inc',                           29.01, 0.42],
        ['Altria Group Inc',                    83.81, 0.28],
        ['American Express Company',            52.55, 0.01],
        ['American International Group, Inc.',  64.13, 0.31],
        ['AT&T Inc.',                           31.61, -0.48]
    ]
});
var grid = Ext.create('Ext.grid.Panel', {
    title: 'Array Grid',
    viewConfig: {
        stripeRows: true,
        enableTextSelection: true,
        listeners: {
            render: function(view) {
                view.tip = Ext.create('Ext.tip.ToolTip', {
                    // The overall target element.
                    target: view.el,
                    // Each grid row causes its own seperate show and hide.
                    delegate: view.cellSelector,
                    // Moving within the row should not hide the tip.
                    trackMouse: true,
                    // Render immediately so that tip.body can be referenced prior to the first show.
                    renderTo: Ext.getBody(),
                    listeners: {
                        // Change content dynamically depending on which element triggered the show.
                        beforeshow: function (tip) {
                            var trigger = tip.triggerElement,
                                parent = tip.triggerElement.parentElement,
                                columnTitle = view.getHeaderByCell(trigger).text,
                                columnDataIndex = view.getHeaderByCell(trigger).dataIndex,
                                columnText = view.getRecord(parent).get(columnDataIndex);
                            if (columnDataIndex == 'status') {
                                return false;
                            }
                            if (columnText && columnText.toString()){
                                tip.update("<b>" + columnTitle + ":</b> " + columnText.toString());
                            } else {
                                return false;
                            }
                        }
                    }
                });
            }
        }
    },

    store: store,
    columns: [
        {text: 'Company', flex: 1, dataIndex: 'company'},
        {text: 'Price', width: 75, dataIndex: 'price'},
        {text: 'Change', width: 75, dataIndex: 'change'}
    ],
    height: 200,
    width: 400,
    renderTo: Ext.getBody()
});