ToolTip in der Grid-Zelle - ExtJs 6

Bin ich mit dem code unten, um display-Tool-Tipp für Grid-Zelle In ExtJS 6 

{
header: 'Name', 
cls: 'nameCls',
locked: true,
tdCls: 'nameTdCls',
dataIndex: 'name',
renderer: function (value, metaData, record, rowIndex, colIndex, store, view) {
    metaData.tdAttr = 'data-qtip= "' + value + '" data-qclass="tipCls" data-qwidth=200';
    return value;
}}

Wenn ich die Anwendung ausführen, es nicht zeigen Sie die QuickInfo und Anzeige unterhalb Fehlermeldung.
ToolTip in der Grid-Zelle - ExtJs 6

Jede Idee Jungs??

Vielen Dank im Voraus Jungs.

Grüße,
Mahendra

  • Es scheint der tooltip-Klasse fehlt. Haben Sie das genannt Ext.QuickTips.init();?
  • Nein, ich havent Aufruf Ext.Quicktipps.init(); wo sollte ich diese Methode aufrufen?
  • Rufen Sie es auf Ext.onReady(function(){ /*here*/ })
  • Hi @Vinod Gubala.. ich versuchte das gleiche, aber noch immer den gleichen Fehler.
InformationsquelleAutor Mahendra Athneria | 2016-09-10
  1. 7

    Haben Sie versucht, die Schaffung einer Ext.Tipp.ToolTip? Sie erstellen einen einzigen zu dienen, der als tooltip für die einzelnen Namen der Zelle (mit delegate) und aktualisieren Sie es mit dem Wert der Zelle. Richten Sie ein raster render-listener zu erstellen, der tooltip wie diese:

    render: function(grid) {
  var view = grid.getView();

  grid.tip = Ext.create('Ext.tip.ToolTip', {
    target: view.getId(),
    delegate: view.itemSelector + ' .nameTdCls',
    trackMouse: true,
    listeners: {
      beforeshow: function updateTipBody(tip) {
        var tipGridView = tip.target.component;
        var record = tipGridView.getRecord(tip.triggerElement);

        tip.update(record.get('name'));
      }
    }
  });
}

    Für ein Beispiel finden Sie in diesem Fiddle.

    • Vielen Dank für Ihre Antwort. Ich habe vergessen zu erwähnen das ein Punkt, den ich bin mit verschlossenen Gitter. In mein raster ersten 3 Spalten sind gesperrt & verbliebenen freigeschaltet werden. Für die gesperrten Spalten benutzt habe ich "locked: true" - Eigenschaft. Wenn ich das gleiche in deinem Beispiel, es funktioniert. Keine Ahnung warum es nicht funktioniert, wenn ich eine Spalte als gesperrt.
    • Überprüfen Sie die aktualisierte Geige. Ein raster verhält sich anders, wenn mit enableLocking. Die API docs für enableLocking sagen: "Eine Verriegelung raster ist verarbeitet in einer speziellen Weise. <snip> Das Panel wird lediglich ein container, der ordnet beide in ein HBox layout.". Ich habe mich verändert das Beispiel ein bisschen, vor allem durch das verschieben der render Zuhörer lockedViewConfig. Werfen Sie einen Blick.
    • Vielen Dank @Robert .. Es funktioniert nun 🙂
    InformationsquelleAutor Robert Klein Kromhof
  2. 1

    Dank für Robert Klein Kromhof!

    grid-Spalten: 

    columns: [{..., tdCls: 'tip'}]

    grid Zuhörer: 

    render: function (grid) {
                var view = grid.getView();
                grid.tip = Ext.create('Ext.tip.ToolTip', {
                    target: view.getId(),
                    delegate: view.itemSelector + ' .tip',
                    trackMouse: true,
                    listeners: {
                        beforeshow: function (tip) {
                            var tipGridView = tip.target.component;
                            var record = tipGridView.getRecord(tip.triggerElement);
                            var colname = tipGridView.getHeaderCt().getHeaderAtIndex(tip.triggerElement.cellIndex).dataIndex;
                            tip.update(record.get(colname));
                        }
                    }
                });
            },
            destroy: function (view) {
                delete view.tip;
            }
    InformationsquelleAutor helloworld1970
  3. 0

    Erstellen unabhängige Funktion und rufen Sie, wenn Sie müssen.

    JS:

    var grid = Ext.getCmp('your_grid_id');   //Enter your grid id
initToolTip(grid); //call function

initToolTip: function(grid) {
    var view = grid.view;

    //record the current cellIndex
    grid.mon(view, {
        uievent: function(type, view, cell, recordIndex, cellIndex, e) {
            grid.cellIndex = cellIndex;
            grid.recordIndex = recordIndex;
        }
    });

    grid.tip = Ext.create('Ext.tip.ToolTip', {
        target: view.el,
        delegate: '.x-grid-cell',
        trackMouse: true,
        renderTo: Ext.getBody(),
        listeners: {
            beforeshow: function updateTipBody(tip) {
                if (!Ext.isEmpty(grid.cellIndex) && grid.cellIndex !== -1) {
                    header = grid.headerCt.getGridColumns()[grid.cellIndex];
                    columnText = grid.getStore().getAt(grid.recordIndex).get(header.dataIndex);

                    tip.update(columnText);
                }
            }
        }
    });
}

    InformationsquelleAutor Sumeet Roy
Schreibe einen Kommentar