ExtJS 4: Есть ли способ прикрепить QuickTip к полю формы?

Я пытаюсь добавить QuickTip в поле формы, но не могу найти способ заставить мой код работать. Во-первых, я пытался использовать атрибут qtipExtJS 4: Есть ли способ прикрепить QuickTip к полю формы?

{ 
     fieldLabel: 'Last Name', 
     qtip:'This tip is not showing at all', 
     name: 'last' 
    }

, а затем с помощью Ext.tip.ToolTip класс:

Ext.create('Ext.tip.ToolTip', { 
    target: 'rating_field', 
    anchor: 'right', 
    trackMouse: true, 
    html: 'This tip is not showing at all' 
}); 

Ext.QuickTips.init();

Вот jsfiddle с исходным кодом: jsfiddle

источник

2013-08-14 vero4ka

Да, используйте конфигурации inputAttrTpl и атрибут data-qtip:

{ 
    fieldLabel: 'Last Name', 
    inputAttrTpl: " data-qtip='This is my quick tip!' ", 
    name: 'last' 
}

источник

2013-08-14 22:06:48 Reimius

С помощью этого метода нет оптического индикатора что показывает, что поле формы дает быстрый наконечник. Есть ли простой способ добавить значок, если есть быстрый совет? – user2345998

Я не верю, что есть очень простой способ, но вы можете добавить CSS, чтобы изменить границу поля или что-то с соответствующей опцией конфигурации – Reimius

, которая выглядит серьезно уродливой. Почему они не могут просто «qTip:« моя подсказка »... meh –

Я нашел ответ здесь: How should I add a tooltip to an ExtJS Component?

{ 
     fieldLabel: 'Last Name', 
     qtip: "This is a tip", 
     name: 'last', 
     listeners: { 
      render: function(c) { 
       Ext.QuickTips.register({ 
        target: c.getEl(), 
        text: c.qtip 
       }); 
      } 
     } 
    }

источник

2013-08-15 16:10:47 vero4ka

Чтобы уточнить. Я хотел бы отметить, что, хотя это работает, это просто круговой способ сделать то же самое. Все, регистрирующиеся в «Ext.QuickTips.register», - это добавить атрибут data-qtip в html. Единственная реальная причина использовать этот путь вместо этого - это если вам нужен более простой способ избежать html с динамически созданным qtips. – Reimius

Использование vero4ka's answer Я написал простой плагин, который может быть использован с формами для включения QuickTips на дочерних полей.

Ext.define('Ext.form.QtipPlugin', { 
    extend: 'Ext.AbstractPlugin', 

    alias: 'plugin.qtipfields', 

    init: function (cmp) { 
     this.setCmp(cmp); 

     cmp.on('beforerender', function() { 

      var fields = cmp.query('field[qtip]'); 

      for (var i = 0; i < fields.length; i++) { 

       fields[i].on('render', this.register, this); 

      } 

     }, this); 
    }, 

    register: function (field) { 
     var obj = { 
      target: field.id 
     }; 

     if (typeof field.qtip === 'string') { 
      obj.text = field.qtip; 
     } else if (typeof field.qtip === 'object') { 
      // Allow qtip configuration objects. 
      // i.e. qtip: { text: 'hi', ... } 
      Ext.applyIf(obj, field.qtip); 
     } 

     Ext.tip.QuickTipManager.register(obj); 
    } 
});

источник

2015-04-08 15:23:51

Для любого поля формы, вы можете использовать это:

{ 
    xtype: 'textfield', // or anything else 
    autoEl: { 
     'data-qtip': 'This tip is not showing at all' 
    } 
}

источник

2017-05-18 10:12:34 Steefler35

Это работало для добавления наконечника в элемент радиогруппы. '{boxLabel: 'Flat Rate', имя: 'rate_type', inputValue: 1, autoEl: {'data-qtip': 'Один курс независимо от использования.'}},' – Quixrick

Вы также можете использовать встроенный плагин всплывающей подсказки на панели формы. в виде панели (см http://docs.sencha.com/extjs/6.5.1/classic/Ext.ux.DataTip.html):

в виде конфигурации:

plugins = [{ptype : 'datatip'}]

в поле текста конфигурации:

tooltip : "my tooltip text"

источник

2017-09-07 10:12:39

Если вы создаете подсказку динамически, то вы можете использовать ниже фрагмент кода:

txtFieldName.el.set({ "data-qtip": Ext.String.htmlDecode("Some Text") });

источник

2018-01-29 12:10:29 Nilay

ExtJS 4: Есть ли способ прикрепить QuickTip к полю формы?

ответ

Смежные вопросы