3

この質問には、ツールチップを追加するための答えがあります: Extjs4 set tooltip on each column hover in gridPanel

この質問に対する最も支持された回答に対するフォローアップの質問があります。これは、レンダラー関数を変更して、以下のようなツール ヒントを追加することです。

{
    xtype : 'gridcolumn',
    dataIndex : 'status',
    text : 'Status',
    renderer : function(value, metadata) {
                    metadata.tdAttr = 'data-qtip="' + value + '"';
                    return value;
                }
}

上記の実装を使用してカスタム ツールチップを設定するグリッド プラグインまたは機能が必要です。

問題は、自分のものを追加すると同時に、特定のグリッドに使用されているユーザー定義のレンダラー関数を削除しないようにするにはどうすればよいかということです。基本的に、すべてのグリッドにツールチップ機能を追加したいのですが、一部のグリッドの一部の列にカスタム レンダラーを指定する機能を削除したくはありません。

可能な代替手段は、このmetadata.tdAttr値を変更できる、侵襲性の低い別の場所だと思います。多分誰かが知っているイベント？

4

2 に答える 2

2

私は次の論理的結論に対する受け入れられた答えを取りました:

そして、これを完全に構成可能なpluginベースのソリューションにしました。使用する構成はほとんど必要ありません。そして、Sencha Architect とうまく連携します。

動機

これを調査して動作させる主な動機DateColumnは、renderer設定パラメータが としてマークされているため、Sencha Architect がパネルhiddenで変更できないようにするためです。Config私はその理由を理解しており、それが私をこの解決策に駆り立てました。これは正しい解決策であり、長期的には最も保守性と再利用性が高いと思います。

この記事の執筆時点で:

私は Sencha Architect 3.x と ExtJS 4.2.2 を使用しています。これらの機能をその環境に適用する方法が説明されています。Sencha Architect を使用しない場合は、自分でファイルを作成して管理する必要があります。あらゆるサイズの ExtJS プロジェクトで作業する場合、非常に生産的であることがわかります。

最初は実際GridPluginです：

JSResourceプロジェクトに を追加し、を に設定してurlからjs/CellToolTip.js、次のコードをその内容としてコピーします。

js/CellToolTip.js

Ext.define('Ext.grid.plugin.CellToolTip', {
    extend: 'Ext.AbstractPlugin',
    alias: 'plugin.CellQTip',
    config: {
        debug: false
    },

    init: function(grid) {

        // You may not need the scope, but if you do, this binding will
        // allow to preserve the scope configured in the column...
        var pluginRenderer = Ext.Function.bind(this.renderer, this);

        Ext.each(grid.query('gridcolumn'), function(col) {
            var renderer = col.renderer;
            col.renderer = renderer ? Ext.Function.createSequence(renderer, pluginRenderer) : pluginRenderer;
        });
    },

    renderer: function(value, metaData, record, rowIndex, colIndex, store, view) {
        var col = view.getGridColumns()[colIndex];
        var fn = this[col.itemId];
        if (fn) {
            metaData.tdAttr = fn(value, metaData, record, rowIndex, colIndex, store, view);
        }     
        return value;
    }
});

に適用する方法は次のGridPanelとおりです。

Process Configプラグインを適用するそれぞれに関数と呼ばれるものを追加GridPanelします。

これが行うことは、インターセプター関数として機能し、実際に適用される前にconfigを変更できるようにすることです。Component

processBlobInfoGridPanel: function(config) {
    var ttp = Ext.create('Ext.grid.plugin.CellToolTip', {
        createdOn: function(value, metaData, record, rowIndex, colIndex, store, view) { return 'data-qtip="' + value.toUTCString() + '"'; },
        byteSize: function(value, metaData, record, rowIndex, colIndex, store, view) { return 'data-qtip="' + value + ' bytes"'; }
    });
    config.plugins = [ttp];
    return config;
},

これらを Sencha Architect プロジェクトに追加する方法:

最初にこれが行うことは、各属性がプラグインを適用するそれぞれの属性である独自の構成で を作成することですplugin。itemIdColumn

それぞれに関連付けられている関数にはColumn、構成とまったく同じ署名がありrendererます。

ここでは、関数の実装は短く、1 行で記述されています。これは単なる一例であり、簡潔にするための例です。

ツールチップ機能の説明:

createdOnの時間としてToolTipfor eachCellを追加します。ColumnUTC

byteSize生のバイト数を詳細として表示するToolTipfor eachCellを追加します。Column

次に、構成されたプラグインのインスタンスを の に追加し、 のインスタンスをconfig返しGridPanelますconfig。

ボーナスクラス

Sencha Architect でColumnを表すSizeを作成Resourcesし、最大の適切な間隔で人間が読める形式としてバイト サイズを表示したいと考えました。そこで、これrendererを行う関数を追加しました。

Column複数のGridPanelインスタンスでこれが必要になることに気付いたので、 Class に昇格させました。

これを行う方法は、 を右クリックしてColumnを選択することPromote to Classです。次に、Sencha Architect は次のコードを作成し、パネルで指定しapp/viewたファイル名と同じ名前で、ディレクトリ内のファイルに配置します。userClassNameConfig

Ext.define('AdminApp.view.ByteSize', {
    extend: 'Ext.grid.column.Column',
    alias: 'widget.byteSize',

    itemId: 'byteSize',
    dataIndex: 'size',
    text: 'Size',
    tooltip: 'Byte size in human readable format',

    initComponent: function() {
        var me = this;

        me.callParent(arguments);
    },

    renderer: function(value, metaData, record, rowIndex, colIndex, store, view) {
        // convert bytes into a human readable format"
        var bytes = value;
        if      (bytes>=1073741824) {bytes=(bytes/1073741824).toFixed(2)+' GB';}
        else if (bytes>=1048576)    {bytes=(bytes/1048576).toFixed(2)+' MB';}
        else if (bytes>=1024)       {bytes=(bytes/1024).toFixed(2)+' KB';}
        else if (bytes>1)           {bytes=bytes+' bytes';}
        else if (bytes==1)          {bytes=bytes+' byte';}
        else                        {bytes='0 byte';}
        return bytes;
    }

});

これの元のインスタンスは、Columnこの新しいを指していますClass:

columns: [
    {
        xtype: 'byteSize',
        itemId: 'byteSize'
    }
]

GridPanelSencha Architectの他のインスタンスでこれを使用するにColumnは、この新しいクラスにリンクされているインスタンスを右クリックして、 Duplicate. 次に、複製したインスタンスをクラスGridPanelを使用するにドラッグByteSizeし、 のリストにドロップしColumnsます。次に、複製された各インスタンスを他のインスタンスとは別に構成します。

のデフォルトまたは動作に対する変更は、ByteClassすべてのインスタンスに自動的に影響します。

ロードマップ

これは、最小限実行可能な最初の実用的なソリューションであり、実行できる明らかな機能強化があります。たとえば、metaData.tdAttrそこにあるものをやみくもに上書きするのではなく、既にコンテンツがある場合に追加する場所を修正したいと考えています。

拡張は、GitHub のこの Gist に対して行われます。

于 2013-12-03T03:36:14.707 に答える