Чуть больше чем просто блог :)

Вывод хинта рядом с кнопкой

Всплывающие подсказки над кнопками могут выводится не только при наведении на кнопку, но и по событию. Сейчас мы и рассмотрим данный вариант.

 

var ourToolTip = new Ext.QuickTip({
    html : "Текст всплывающего окна",
    width : 200,
    anchor : 'top',
    anchorToTarget : true,
    style : 'text-align:center',
    dismissDelay : 4000, // задержка вывода окна в секундах,
                         // после которой подсказка будет закрыта автоматически.

    /*
     * Вариант  вывода 1: для жесткой привязки к ID кнопки
     * ВНИМАНИЕ! параметр "target" должен обязательно
     *           присутствовать и в 1м и во 2м случаи.
     *           Будут менятся только ф-ции вывода подсказок.
     */
    target: '__BUTTON_ID__', // нужно указать для привязки
    
    /*
     * Вариант вывода 2
     * Дополнительное управление позицией
     * для расчета координат нужного нам места для вывода
     * подсказки относительно координат кнопки
     */
     getTargetXY: function () {
        var btn = Ext.getCmp('__BUTTON_ID__');
        var x = btn.getPosition()[0];
        var y = btn.getPosition()[1];
        return [x - (this.width - btn.getWidth()) / 2, y - 35 - btn.getHeight()];
    }
});

Теперь создадим форму:

var formPanel = new Ext.form.FormPanel({
    itemId : 'form',
    border : false,
    frame : true,
    autoHeight : true,
    items : [item-1, item-2, ... item-n],
    buttons : {
        id : '__BUTTON_ID__',
        text : "Текст на кнопке",
        iconCls : 'icon-16',
        tooltip : ourToolTip
    }
});

Для вызова подсказки используя ВАРИАНТ 1:

ourToolTip.showBy('__BUTTON_ID__');
Вторым параметром можем указать вывод места подсказки относительно кнопки:
tl     The top left corner (default)
t      The center of the top edge
tr     The top right corner
l      The center of the left edge
c      In the center of the element
r      The center of the right edge
bl     The bottom left corner
b      The center of the bottom edge
br     The bottom right corner

Для вызова подсказки используя ВАРИАНТ 2:

ourToolTip.getTargetXY(); // задаем координаты вывода подсказки
ourToolTip.show(); // вызов отображения подсказки

Оставить комментарий

Убедитесь, что вы вводите (*) необходимую информацию, где нужно
HTML-коды запрещены

Авторизация