Extjs5 grid cell tooltips

男娘i 2022-08-19 14:29 172阅读 0赞

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

发表评论取消回复

表情：

评论列表（有 0 条评论，172人围观）

还没有评论，来说两句吧...

相关阅读

相关 Extjs5.x grid row 背景色修改

这里有两种方式实现 1.custom css Ext.util.CSS.createStyleSheet(''.concat( '.test_c

男娘i/ 2022年09月21日 11:39/ 0 赞/ 143 阅读

相关 Extjs5 grid cell tooltips

extjs 5中grid中每一个单元格都显示 tooltips var store = Ext.create('Ext.data.ArrayStore', {

男娘i/ 2022年08月19日 14:29/ 0 赞/ 173 阅读

相关 Extjs之Grid详细

Grid的展示选中排序选中事件。附图： ![221709505699.jpg][] 代码： <script type="text/javascript">

小鱼儿/ 2022年08月10日 05:55/ 0 赞/ 219 阅读

相关【jQwidgets】Grid Cells Formatting

[http://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxgrid/jquery-grid

﹏ヽ暗。殇╰゛Y/ 2022年08月05日 17:30/ 0 赞/ 309 阅读

相关 ExtJs grid导出Excel

下载资源（内附简单说明）：[http://download.csdn.net/detail/lishk314/8962187][http_download.csdn.net_d

向右看齐/ 2022年08月03日 11:53/ 0 赞/ 228 阅读

相关 Extjs Grid 中文排序

Ext.data.Store.prototype.createComparator = function(sorters){ return func

叁歲伎倆/ 2022年08月01日 00:28/ 0 赞/ 187 阅读

相关 ExtJS grid一些属性说明

转自： [http://hi.baidu.com/yebing0736/blog/item/cd27f6dd8373a1a9cd1166f2.html][http_hi.ba

￡神魔★判官ぃ/ 2022年07月10日 08:29/ 0 赞/ 293 阅读

相关 extjs grid隐藏表头

Ext.define('V5.auditoper.rule.view.FuncGrid', { extend: 'Ext.grid.Panel',

以你之姓@/ 2022年06月14日 11:45/ 0 赞/ 385 阅读

相关 Extjs grid表头换行

声明：本博文用于学习总结及工作心得在grid中添加afterrender事件： afterrender: function (grid) {

朱雀/ 2022年06月12日 02:09/ 0 赞/ 304 阅读

相关 ExtJS 4 Grid组件

我们正在努力为ExtJS4做准备,到目前为止,我们已经发布了3个开发者预览版,我们的目标是争取在4到6周内或争取更快的时间内发布最终版本。在最近的开发者预览版，我们首次发布了

悠悠/ 2022年05月15日 05:12/ 0 赞/ 276 阅读