9

gridviewがあり、いくつかのフィールドを持つモデルが添付されていました。しかし、私のグリッドでは 1 つのフィールドを表示するだけです。マウスをグリッド行に合わせると、ツールチップが表示され、他のフィールドの値が表示されます。

これどうやってするの？誰もこれをやったことがありますか？

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

私を助けてください。前もって感謝します ：）

4

5 に答える 5

16

グリッド列構成でレンダラーを使用します。そのレンダラー関数マッピングに期待される値を返す関数を作成します。

サンプル作業例:

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 = 'data-qtip="' + deviceDetail + '"';) です。

于 2013-08-19T13:36:32.080 に答える
5

あなたはsenchaドキュメントから以下の例を使用することができます

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') + '"');
        }
    }
});
于 2013-08-19T10:19:21.313 に答える
0

列レンダラー関数を次のように使用します。

{
                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;
    }
于 2016-04-19T04:51:28.033 に答える
0

私はレンダラーで使用しました：

function(value,metadata,record){
    metadata.attr = 'ext:qtip="' + val + '"';
}
于 2015-04-03T13:40:40.983 に答える