Как я должен добавить всплывающую подсказку к компоненту ExtJS?

ProgramBox

Как я должен добавить всплывающую подсказку к компоненту ExtJS?

Post author:admin
Запись опубликована:9 мая, 2023
Post category:Вопросы по программированию

#extjs #tooltip

#extjs #всплывающая подсказка

Вопрос:

Я создаю компонент ExtJS, и я хочу, чтобы он использовал всплывающую подсказку QuickTips. Если я создаю элемент с помощью DomHelper, я могу установить всплывающую подсказку, не парясь. Однако, если я создам компонент, подобный

 new BoxComponent({
  qtip: "This is a tip"
});

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

 new BoxComponent({
  qtip: "This is a tip",
  listeners: {
    rendered: function(c){
      Ext.QuickTips.register({
        target: c.getEl(),
        text: c.qtip
      }
    }
});

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

Ответ №1:

В ExtJS 4.2.1 я могу добавить подсказку к флажку таким образом:

 new Ext.form.field.Checkbox({
  ...
  tip: 'This is a tip',
  listeners: {
    render: function(c) {
      Ext.create('Ext.tip.ToolTip', {
        target: c.getEl(),
        html: c.tip 
      });
    }
  });

Ответ №2:

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

1. Хорошо, я новичок во всем этом. Я едва понимаю разницу между «компонентами» и «элементами» (у компонента есть элемент, верно?). Что я хочу сделать, так это создать на моей странице вещь, которая имеет а) всплывающую подсказку и б) обработчик кликов. Я хотел бы иметь возможность сделать это примерно с двумя строками кода — я неразумен?

2. Компонент — это то, что другие фреймворки называют виджетом, и состоит из вложенных элементов (которые в основном являются оболочками для узлов DOM). Если вам часто нужны компоненты с всплывающими подсказками, вы можете рассмотреть возможность создания плагина, чтобы вы могли довольно просто использовать plugins: [ComponentQickTipPlugin], qtip: "This is a tip" — это две строки 😉

3. К сожалению, звучит так, что короткая версия звучит так: «да, это должно быть проще, и нет, это не так». 🙁

4. итак, я должен добавить 8 строк кода для каждой всплывающей подсказки в моих компонентах?

5. @OliverWatkins Да:/ Или переопределите Ext.component своей индивидуальной версией, которая включает поддержку всплывающих подсказок.

Ответ №3:

Это должно сработать :

 new BoxComponent({
 tooltip: new Ext.ToolTip({
        title: 'Example Tooltip title',
            text: 'Example Tooltip text'

    }),
  listeners: {
    rendered: function(c){
      Ext.QuickTips.register({
        target: c.getEl(),
        text: c.qtip
      }
    }
});

Ответ №4:

Hrm. Я взглянул на то, как Ext.Button это делается, передавая tooltip вызов конфигурации setTooltip под капотом.

Непроверенный, но я думаю, что ваш лучший выбор — это что-то вроде:

 Ext.Component.prototype._onRender = Ext.Component.prototype.onRender;
Ext.override(Ext.Component, {
  onRender: Ext.Component.prototype._onRender.createSequence(function(ct, position) {
    // setTooltip code adapted from Ext.Button, looking at tooltip property
  });
});

Ответ №5:

Я думаю, что это лучший способ в Extjs 4:

вы должны добавить прослушиватель afterrender, затем, когда ваш компонент уже создан, вы можете добавить всплывающую подсказку следующим образом:

 listeners : {
    afterrender : function(obj) {
        if (this.max != null amp;amp; this.ave != null amp;amp; this.min != null) {
            obj.tip = Ext.create('Ext.tip.ToolTip', {
                        target : obj.getEl().getAttribute("id"),
                        trackMouse : true,
                        renderTo : document.body,
                        html : this.htmlTip,
                        title : this.title
                    });
        }
    }
}

Я надеюсь, что это поможет.

Ответ №6:

Самый простой способ — установить атрибут ‘data-qtip’ для основного элемента компонента:

 {
    xtype: 'box',
    autoEl: {
        'data-qtip': "Tooltip text"
    }
}

Обязательно включите qtips при запуске приложения:

 Ext.tip.QuickTipManager.init();

Ответ №7:

Я всегда использую этот способ в ExtJS 3

 listeners: {
    render: function(c) {
        Ext.QuickTips.register({
            target: c,
            text: 'Enter '-1' for a 1 time only'
        });
    }
}

Ответ №8:

Этот способ работает идеально! Попробуйте! (Extjs 4.2)

 var boxComponent = Ext.create('Ext.Component', {
  id: 'id111',
  html: '<img src="js/extjs/resources/cb-theme/images/shared/icon-question.png">',
  width: 20,
  height: 20,
  margin: '0 0 0 10'
});

Ext.tip.QuickTipManager.init();

Ext.tip.QuickTipManager.register({
  target: 'id111',
  title: 'My Tooltip',
  text: 'This tooltip was added in code',
  width: 100,
  dismissDelay: 10000 // Hide after 10 seconds hover
});

Ответ №9:

 {
    xtype: 'checkbox',
    fieldLabel: 'Test Label',
    name: 'data_field',
    autoEl: {
        tag: 'div',
        'data-qtip': 'This is a tip'
    }
}

Ответ №10:

 {
    xtype: 'checkbox',
    tip: 'This is a tip',
    listeners: {
        render: function(c) {
            Ext.create('Ext.tip.ToolTip', {
                target: c.getEl(),
                html: c.tip
            });
        }
    }
}