Question

我有一个ExtJs组合框如下。我正在使用ExtJS 3.4。我需要为这个组合框设置悬停文本。即当用户将鼠标悬停在此组合框上时，应显示消息文本。

new Ext.form.ComboBox({
        store : driverStore,
        displayField : 'dName',
        valueField : 'dName',
        fieldLabel : 'Driver Name',
        id : 'drivercombo',
        allowBlank : false,
        typeAhead : true,
        forceSelection : true,
        mode : 'local',
        triggerAction : 'all',
        selectOnFocus : true,
        editable : false,
        hidden : false,
        disabled : true,
        minChars : 1,
        hideLabel : true,
        style : 'marginleft:10px',
        //width : 147,
        emptyText : 'Driver Name',
        flex : 1
    });

我知道有一种方法可以为下拉菜单中的组合框项目设置此工具提示消息。但我不想要它。我想为我的组合框提供一个工具提示。

我该怎么做？

Answer 1

您可以在Ext.ToolTip combobox事件的监听器中创建render，并且可以在tooltip目标中定义组合框元素。

var combo = new Ext.form.ComboBox({
    mode: 'local',
    renderTo: Ext.getBody(),
    store: new Ext.data.ArrayStore({
        id: 0,
        fields: [
            'myId',
            'displayText'
        ],
        data: [[1, 'item1'], [2, 'item2']]
    }),
    listeners: {
        render: function(c) {
          new Ext.ToolTip({
            target: c.getEl(),
            html: 'Tooltip content'
          });
        }
    },    
    valueField: 'myId',
    displayField: 'displayText'
});

举例说明： https://fiddle.sencha.com/#fiddle/2q6

Answer 2

将它放在我工作的组合框的监听器中。

Ext.onReady(function() {

Ext.QuickTips.init();
    var combo = new Ext.form.ComboBox({
        mode: 'local',
        renderTo: Ext.getBody(),
        store: new Ext.data.ArrayStore({
            id: 0,
            fields: ['id', 'displaytext'],
            data: [
                [1, 'Vinayak']
            ]
        }),
        listeners: {
            render: function(c) {
                 Ext.QuickTips.register({ target: this.getEl(), 
                 text: 'Tooltip Data' });
            }
        },
        valueField: 'id',
        displayField: 'displaytext'
    });

});

你必须写

Ext.QuickTips.init();在Ext.Ready

ExtJs 3.4：设置组合框的工具提示

2 个答案: