2016-07-11 3 views
1

У меня есть функция для создания/рендеринга полей ввода, но я не знаю, как добавить всплывающую подсказку на нем в EXTjs6Как добавить всплывающую подсказку для текстового поля формы в extjs6

это моя функция:

createInputField: function(value, fieldsMarginBottom, readonly) { 
     var fieldStyle = this.getFieldStyle(readonly); 
     var nameField = Ext.create('Ext.form.field.Text', { 
      name: 'name', 
      readOnly: true, 
      hideLabel: true, 
      value: value, 
      width: this.fieldWidth, 
      style: { 
       marginBottom: fieldsMarginBottom + 'px' 
      }, 
      //My try which is not working 
      tooltip: { 
       trackMouse: true, 
       width: 140, 
       renderer: function(tip, item){ 
        tip.setTitle('name'); 
        tip.update('Count: '); 
       } 
      }, 
      fieldStyle: fieldStyle 
     }); 
     return nameField; 
    } 

Надеюсь, вы, парень, можете мне помочь. Если вам нужна дополнительная информация, пожалуйста, дайте мне знать, и я предоставлю. Спасибо

+0

Где в [документы] (http://docs.sencha.com/extjs/6.0.1-classic/Ext.form.field.Text.html) вы нашли 'tooltip' конфигурацию? – Alexander

+0

У меня нет. Я собирался поработать, но ничего не работает. Вы знаете, как это реализовать? –

ответ

3

Как видно из the textfield docs, поля не имеют возможности добавить всплывающую подсказку в их конфигурацию, поэтому вам придется создавать всплывающую подсказку вручную.

Если посмотреть на the docs for Ext.tip.ToolTip, как это сделать, вы можете найти небольшой пример, где вы просто должны изменить цель согласно :

var tip = Ext.create('Ext.tip.ToolTip', { 
    target: nameField.getEl(), 
    html: 'Press this button to clear the form' 
}); 
+0

Спасибо! Его мое первое время работало с EXTJS, и я не знал, что вы можете ссылаться на эту цель таким образом –

1

Над ответом является правильным. Вот пример универсальной функции, которую вы пишете один раз и используете везде, где вам нужно в проекте, используя атрибуты.

addToolTip : function (id, msg) { 
    new Ext.ToolTip({ 
      target : id, 
      dismissDelay : 0, 
      anchor : 'right', 
      html : msg 
     }); 
}; 
Смежные вопросы