web-dev-qa-db-fra.com

ajouter une info-bulle à la grille d'extjs pour afficher des informations complètes sur cette ligne

J'ai eu un gridview , attaché avec un modèle qui ont des champs. Mais dans ma grille, je ne montre qu’un champ, et ce que je veux, c’est que ma souris passe au-dessus de la ligne de la grille, tooltip apparaît et affiche la valeur des autres champs.

Comment puis-je faire ceci? Quelqu'un a déjà fait ça?

Quel événement de grille que je devrais créer le tooltip ? Comment puis-je accéder à ma valeur sur la ligne en survol et l'afficher dans tooltip ? Comment les jolies façons d’afficher la valeur peuvent tooltip en utilisant un élément tel que xpanel ou autre chose, ou le seul moyen d’utiliser HTML?

Aidez-moi, s'il vous plaît. Merci d'avance :)

extjstooltip
9
Alfat Saputra Harun

Utiliser le rendu dans les colonnes de la grille config. écrire une fonction qui renverra la valeur attendue au mappage de cette fonction de rendu.

Exemple de travail:

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

C'est l'endroit (metaData.tdAttr = 'data-qtip = "' + deviceDetail + '";)) où vous devez afficher les données dans l'info-bulle.

16
Hariharan

vous pouvez utiliser ci-dessous des exemples de documents 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') + '"');
        }
    }
});
5
Naresh Tank

Utilisez votre fonction de rendu de colonnes comme suit:

{
                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;
    }
0
Rohit Luthra

J'ai utilisé dans le rendu:

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

Le moyen le plus simple:

Lorsque vous déclarez la colonne, utilisez la propriété attribute:

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