ext3.0 grid 提示

最新推荐文章于 2025-08-12 10:08:08 发布

原创最新推荐文章于 2025-08-12 10:08:08 发布 · 143 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#EXT

Extjs 专栏收录该内容

39 篇文章

订阅专栏

本文介绍如何使用ExtJS框架为网格视图中的每一行添加动态提示框。通过监听渲染事件，捕获网格的存储和视图，并创建ToolTip组件来显示特定记录ID，实现了鼠标悬停时显示对应行数据的功能。

var myGrid = new Ext.grid.gridPanel(gridConfig);
myGrid.on('render', function(grid) {
    var store = grid.getStore();  // Capture the Store.

    var view = grid.getView();    // Capture the GridView.

    myGrid.tip = new Ext.ToolTip({
        target: view.mainBody,    // The overall target element.

        delegate: '.x-grid3-row', // Each grid row causes its own seperate show and hide.

        trackMouse: true,         // Moving within the row should not hide the tip.

        renderTo: document.body,  // Render immediately so that tip.body can be referenced prior to the first show.

        listeners: {              // Change content dynamically depending on which element triggered the show.

            beforeshow: function updateTipBody(tip) {
                var rowIndex = view.findRowIndex(tip.triggerElement);
                tip.body.dom.innerHTML = "Over Record ID " + store.getAt(rowIndex).id;
            }
        }
    });
});