1

私はextjs4.1を使用しています。dataviewを使用したマウスオーバーのツールチップについて説明する多くのスレッドを調べました。ただし、グリッドの任意の行にマウスオーバーすると、「この行をダブルクリック」のようなテキストを表示する必要があります...この関数は別のスレッドから遠く離れています...しかし、グリッド内では機能しません

function renderTip(value, metaData, record, rowIdx, colIdx, store) {
                metaData.tdAttr = 'data-qtip="' + value + '"';
                return value;
        };

更新-これは私のグリッドです

Ext.define('GridViewApp.view.GridViewApp', {
alias: 'widget.gridviewapp',
width: 800,
title: 'My Grid Panel',
grid: null,
store: null,
layout: {
    type: 'anchor'
},
constructor: function () {

    this.callParent(arguments);

    var store = Ext.create('Ext.data.Store', {

        storeId: 'myData',
        scope: this,
        fields: [
        { name: 'Q1', type: 'int' },
        { name: 'Q2', type: 'int' },
        { name: 'Q3', type: 'int' },
        { name: 'Q4', type: 'int' },
        { name: 'Q5', type: 'int' },
        { name: 'Improvements', type: 'string' },
        { name: 'Comments', type: 'string' }
        ],

        sorters: [
            {
                //property: 'myData',
                direct: 'ASC'
            }
         ],

        proxy: {
            type: 'ajax',
            scope: this,
            url: 'GridView/writeRecord',
            reader: {
                type: 'json',
                root: 'myTable',
                idProperty: 'ID'

                }
        } 
    });

    store.load();   
    this.grid = Ext.create('Ext.grid.Panel', {
        title: 'GridView App',
        store: this.store,
        columns: [
            {header: 'Q1', width: 100,
        sortable: true, dataIndex: 'Q1'
                    },
        { header: 'Q2', width: 100,
            sortable: true, dataIndex: 'Q2'
        },
        { header: 'Q3', width: 100,
            sortable: true, dataIndex: 'Q3'
        },
                    { header: 'Q4', width: 100,
                        sortable: true, dataIndex: 'Q4'
                    },
                    { header: 'Improvements', width: 200,
                        sortable: true, dataIndex: 'Improvements'
                    },
                    { header: 'Comments', width: 200,
                        sortable: true, dataIndex: 'Comments'
                    }
    ],
        stripeRows: true,
        width: 800,
        renderTo: Ext.getBody()
    });

    this.add(this.grid);
    this.grid.getView().getEl().set({ 'data-qtip': 'Double click me' });
}
});

更新-実用的なソリューションこれをグリッド上のリスナーに追加すると、機能します

 itemmouseenter: function (view, record, item) {
                        Ext.fly(item).set({ 'data-qtip': 'Hello' });
                    },
4

1 に答える 1

1

このレンダラーが各列レンダラーとしてアタッチされている場合、tipは機能するはずです。Ext.QuickTips.init()コードのどこかに呼び出しがあるかどうかを確認します。ベローは、グローバルツールチップをビューにアタッチすることでグリッドにアタッチする簡単な方法だと思います。

grid.getView().getEl().set({ 'data-qtip': 'Double click me' });
Ext.QuickTips.init();

作業サンプル： http： //jsfiddle.net/GCRA5/

于 2012-11-20T09:16:01.633 に答える