Ext.form.field.comBobox Tooltip sur les éléments

Question

ci-dessous est le code COMBO:

Ext.define('Grade', {
    extend: 'Ext.data.Model',
    fields: [
        { name: 'id', type: 'int' },
        { name: 'name', type: 'string' }
    ]
});
 
Ext.define('GradeCombo', {
    extend: 'Ext.form.field.ComboBox',
    alias: 'widget.gradecombo',
    queryMode: 'local',
    valueField: 'id',
    displayField: 'name',
    store: {
        model: 'Grade',
        data: [
            { id: 1, name: 'A' },
            { id: 2, name: 'B' },
            { id: 3, name: 'C' }
        ]
    }
});

et voici le code de mise en page pour combo:

Ext.onReady(function(){

Ext.widget('panel', {
    renderTo: 'pan1',
    title: 'Basic Panel',
    width:300,
    height:100,
    defaults: {
        bodyPadding: 10,
        border: false,
        xtype: 'panel',
        layout: 'anchor'
    },
    layout: 'hbox',
    items: [{
                  fieldLabel: 'Grade',
                  xtype: 'gradecombo',
                  width: 234
           }]            
});  
});

Je souhaite afficher le message d'info-bulle pour la description de chaque note lorsque l'utilisateur navigue sur la souris sur la liste déroulante des éléments combus.Voici la description Store:

var store = ['Marks between 70 and 80', 'Marks between 60 and 70', 'Marks between 50 and 60'];

S'il vous plaît laissez-moi savoir comment y parvenir.

Cordialement,

Answer 1

Je ne crois pas qu'il y ait une propriété ToolTip qui peut être définie par défaut, mais vous pouvez personnaliser complètement ce qui s'affiche dans la liste déroulante de la méthode de GetinnertPL de la propriété de ListConfig de Combobox ListConfig similaire à celui:

     listConfig: {
            loadingText: 'Searching...',
            emptyText: 'No matching posts found.',
            // Custom rendering template for each item
            getInnerTpl: function() {
                return '<a class="search-item" href="http://www.sencha.com/forum/showthread.php?t={topicId}&p={id}">' +
                    '<h3><span>{[Ext.Date.format(values.lastPost, "M j, Y")]}<br />by {author}</span>{title}</h3>' +
                    '{excerpt}' +
                '</a>';
            }
        }

Code complet d'échantillon: http://docs.sencha.com/ext-js/4-1/extjs-build/examples/form/forum-search.js

et surtout le but lui-même.Ajoutez l'attribut HTML suivant à n'importe quel élément que vous créez dans votre modèle: DATA-QTIP="Ceci est une pointe rapide du balisage!"Vous pouvez contrôler davantage votre info-bulle en suivant ces directives: http://docs.sencha.com/ext-js/4-1/#!/api/ext.tip.quicktipmanager