Подсказка Ext.form.field.ComboBox для элементов

Ниже приведен комбо-код:

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

А вот код макета для комбо:

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

Я хочу отображать всплывающую подсказку для описания каждой оценки, когда пользователь наводит указатель мыши на раскрывающийся список комбинированных элементов. Вот описание магазина:

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

Пожалуйста, дайте мне знать, как этого добиться.

С уважением,


person user182944    schedule 30.09.2012    source источник


Ответы (1)


Я не верю, что есть свойство всплывающей подсказки, которое можно установить по умолчанию, но вы можете полностью настроить то, что отображается в раскрывающемся списке, переопределив метод getInnerTpl свойства listConfig со списком следующим образом:

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

полный пример кода: http://docs.sencha.com/ext-js/4-1/extjs-build/examples/form/forum-search.js

И самое главное сам наконечник. Добавьте следующий атрибут html к любому элементу, который вы создаете в своем шаблоне: data-qtip="Это быстрый совет по разметке!" Вы можете дополнительно управлять своей всплывающей подсказкой, следуя этим рекомендациям: http://docs.sencha.com/ext-js/4-1/#!/api/Ext.tip.QuickTipManager

person dbrin    schedule 02.10.2012
comment
Спасибо! Мне помогло! - person გენო მუმლაძე; 09.09.2020