1

マウスをグリッドセルの上に置いたときに、グリッドセルの上にカスタムツールチップ（メニューなど）を表示するにはどうすればよいですか？各セルはツールチップに異なるメニュー項目を持つことができるため、動的である必要があります。リッスンするイベントと、通常のテキスト文字列やHTMLテンプレートベースのツールチップの代わりにカスタムメニューを使用する方法を知る必要があります。

4

2 に答える 2

0

ツールチップを追加するグリッドを取得します。

var grid = Ext.componentQuery.query('grid[itemId=name_of_grid]')[0];

ツールチップの作成中に、クラス名とツールチップが表示されるターゲットを渡します。

grid.tip = Ext.Create('Ext.tip.Tooltip',{
title : 'title',
itemId : 'itemId',
target : grid.el,
delegate : 'x-grid-cell' // the cell class in which the tooltip has to be triggered
trackMouse : true,
renderTo : Ext.getBody()});

ツールチップのレンダリングを処理する関数を作成します

var tipRenderer = function (e, t, grid){
e.stopEvent();
var tipbody = '<h5> helo </h5>';
grid.tip.update(tipbody);
grid.tip.show();
});

ここで、mouseover イベントでヒントを上げます。

grid.getEl().on('mouseover', function(e,t,a){
    tipRenderer(e,t,grid);
}, null, {delegate:targetClass});

注: これらのコードはすべて、グリッドがレンダリングされた後に実行する必要があります。

シャクティ

于 2013-03-14T10:49:14.943 に答える
0

次のコードは、関連するレコードと共に各グリッド行のヒント オブジェクトを提供します。

listeners: {
      render: function(grid) {
            grid.view.tip = Ext.create('Ext.tip.ToolTip', {
            target: grid.getEl(),
            // Each grid row causes its own seperate show and hide.
            delegate: ".x-grid-cell-last",
            items: [], // add items later based on the record
            // 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 rec = grid.view.getRecord(Ext.get(tip.triggerElement).findParentNode('.x-grid-row'));                        
                        grid.fireEvent('rowhover', tip, rec);
                        return true;
                }}
        });
     }}

次に、コントローラー クラスでホバー イベントをリッスンし、好きなものをヒント コンテナーに追加できます。あなたの場合、渡されたrecレコードからカスタム メニューを構成し、それをヒントに追加できます。rowhoverイベントでこの関数を呼び出します。

function onHover(tip, rec) {
    var me = this,
    tip.removeAll(true) // autodestroy
    tip.add(Ext.create('Ext.menu.Menu',{
        items:[/* your config here */]              
       );
}

ヒント オブジェクトの代わりに、グリッドのリスナーでメニュー オブジェクトを直接構成することもできると思います。

于 2013-06-20T10:07:55.853 に答える