は、私はそれがいくつかのフィールドを持っているモデルを添付し<em>GridViewの</em>を、持っていた

Question

その行についての完全な情報を表示するにはExtJSのグリッドにツールチップを追加します。しかし、私のグリッドでは、1つのフィールドだけを表示し、私のマウスがグリッドの行にマウスを移動するとツールチップが表示され、他のフィールドの値が表示されます。

どうすればいいですか？誰もこれをやったことがありますか？

私はツールチップを作成する必要がありますどのようなグリッドイベント？どのようにして私のホバリング行の値にアクセスし、のツールチップに表示できますか？値を表示するにはどのように素敵な方法は、ツールチップxpanelか何かのようなアイテムを使用することができ、または唯一の方法は、HTMLを使用していますか？

私を助けてください。

Answer 1

使用レンダラを使用することができます。そのレンダラー関数のマッピングに期待値を返す関数を記述します。

サンプル実施例は：

columns: [{ 
      text  : 'Device Name' 
      ,dataIndex: 'name' 
      ,renderer : function(value, metadata,record) { 
            return getExpandableImage(value, metadata,record); 
        } 
      }] 



function getExpandableImage(value, metaData,record){ 
    var deviceDetail = record.get('deviceName') + " " + record.get('description'); 
    metaData.tdAttr = 'data-qtip="' + deviceDetail + '"'; 
    return value; 
} 

これは（metaData.tdAttr = 'データ-Qティップ= "' + deviceDetail + '"';）場所であるあなたがツールチップ内のデータを表示する必要が

Answer 2

:)事前に感謝あなたは煎茶文書から例の下にグリッド列の設定で

http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.tip.ToolTip

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

var view = grid.getView(); 
var tip = Ext.create('Ext.tip.ToolTip', { 
    // The overall target element. 
    target: view.el, 
    // Each grid row causes its own separate show and hide. 
    delegate: view.itemSelector, 
    // 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 updateTipBody(tip) { 
      tip.update('Over company "' + view.getRecord(tip.triggerElement).get('company') + '"'); 
     } 
    } 
}); 

Answer 3

最も簡単な方法：

あなたは列がプロパティattributeを使用宣言：

{ 
    field: "nameField", 
    width: "150px", 
    title: "My Field", 
    attributes: { title: "#=data.nameField#" } 
} 

Answer 4

私は、レンダラで使用される：

function(value,metadata,record){ 
    metadata.attr = 'ext:qtip="' + val + '"'; 
} 

Answer 5

を次のように列レンダラー機能を使用します。ヘルプの人のための

{ 
       id  :'data', 
       header : 'Data', 
       width : 160, 
       sortable : true, 
       dataIndex: 'data', 
       renderer : function(value, metadata,record) { 
        return setTooltip(value, metadata,record); 
       } 
      } 


    function setTooltip(value, metaData, record){ 
     var deviceDetail = record.get('data') + ": " + record.get('description'); 
     metaData.attr='ext:qtip="' + deviceDetail + '"'; 
     console.log("deviceDetail: " + deviceDetail); 
     return value; 
    }