उस पंक्ति के बारे में पूरी जानकारी दिखाने के लिए extjs ग्रिड पर टूलटिप जोड़ें




tooltip (4)

आप नीचे सेेंका दस्तावेज़ों से उदाहरण का उपयोग कर सकते हैं

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') + '"');
        }
    }
});

मेरे पास ग्रिडव्यू था , यह एक मॉडल के साथ जुड़ा था जिसमें कुछ फ़ील्ड हैं लेकिन मेरी ग्रिड में मैं सिर्फ एक फ़ील्ड दिखाता हूं, और मुझे क्या चाहिए जब मेरी माउस ग्रिड पंक्ति में होवर करें, टूलटिप दिखाई देगा और अन्य फ़ील्ड मान दिखाएंगे।

मैं यह कैसे कर सकता हूँ? किसी ने कभी ऐसा किया?

क्या ग्रिड घटना है कि मुझे टूलटिप बनाना चाहिए? मैं हॉवर पंक्ति मूल्य पर कैसे पहुंच सकता हूं और इसे टूलटिप पर दिखा सकता हूं? मूल्य दिखाने के लिए अच्छी तरीके कैसे हो सकते हैं, जैसे कि एक्सपेनल या कुछ चीज़ों का उपयोग कर टूलटिप , या एकमात्र तरीका HTML का प्रयोग कर सकता है?

क्रिप्या मेरि सहायता करे। अग्रिम में धन्यवाद :)


ग्रिड कॉलम कॉन्फ़िग में रेंडरर का उपयोग करें एक फ़ंक्शन लिखें जो कि रेंडरर फ़ंक्शन मैपिंग के लिए अपेक्षित मूल्य वापस करेगा।

नमूना काम उदाहरण:

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;
}

यह जगह है (मेटाडेटा.आईटीटीआर = 'डेटा-क्यूटीपी =' '+ डिवाइसडिटर +' "';) जहां आपको टूलटिप में डेटा दिखाने की आवश्यकता है


मैं रेंडरर में उपयोग किया था:

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

सरल तरीका:

जब आप कॉलम की घोषणा करते हैं तो गुण attribute उपयोग करें:

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