ExtJs 3.4：为组合框设置工具提示 [英] ExtJs 3.4 : Set tool tip for combo box

问题描述

我有一个 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 
}）; 
  

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

解决方案

我需要一个适用于我的组合框的工具提示。 / div>

您可以在侦听器中为 combobox 创建 Ext.ToolTip / code>事件和 tooltip 目标可以定义combobox元素。

  var combo = new Ext.form.ComboBox（{
 mode：'local'，
 renderTo：Ext.getBody（），
 store：new Ext.data.ArrayStore {
 id：0，
 fields：[
'myId'，
'displayText'
]，
 data：[[1，'item1' ]，
 listener：{
 render：function（c）{
 new Ext.ToolTip（{
 target ：c.getEl（），
 html：'Tooltip content'
}）; 
} 
}，
 valueField：'myId'，
 displayField ：'displayText'
}）; 
  

示例： https://fiddle.sencha.com/#fiddle/2q6

I have an ExtJs combo box as following. I am using ExtJS 3.4. I need to set hover text for this combo box. i.e. when user hover over this combo box, message text should appear.

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

I know there is a way to set this tool tip messages for combo box items of the drop down menu. But I don't want it. I want a tool tip for my combo box.

How should I do that ?

解决方案

You can create Ext.ToolTip in listener for combobox render event and as tooltip target you can define combobox element.

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

Fiddle with example: https://fiddle.sencha.com/#fiddle/2q6

这篇关于ExtJs 3.4：为组合框设置工具提示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！