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




(5)

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

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

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

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


Answers

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

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

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

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


सरल तरीका:

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

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

निम्न के रूप में अपने कॉलम रेंडरर फ़ंक्शन का उपयोग करें:

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

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

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

यह खुद को दूसरे दिन समझने की कोशिश कर रहा था और क्लिक घटनाओं को काम करने के लिए एक समाधान में आया था। संक्षिप्त उत्तर यह है कि टेम्पलेट प्रस्तुत किए जाने के बाद ईवेंट श्रोताओं को सेट करने के लिए आपको .defer फ़ंक्शन का उपयोग करने की आवश्यकता है।

मैंने पाया उदाहरण यहां दिया गया है:

var resultTpl = new Ext.XTemplate(
    '<tpl for=".">',
        '<div class="search-item">',
            '<a id={[this.getLinkId()]} href="violation.aspx?violationid={slvha}">',
                '<img src="images/icons/home.gif" style="float:left;padding-right:2px">{number}&nbsp;{street}',
            '</a>',
            '<p>Owners:&nbsp;{owners}',
            '<br/>Flag Code:&nbsp;{flag}',
            '<br/>Number of Violations:&nbsp;[{summary}]</p>',
        '</div>',
    '</tpl>', {
    getLinkId: function(values) {
        var result = Ext.id();
        this.addListener.defer(1, this, [result]);
        return result;
    },
    addListener: function(id) {
        Ext.get(id).on('click', function(e){e.stopEvent(); alert('link ' + id + ' clicked');})
    }
});

Source