ExtJs 3.4 - как сделать всплывающую подсказку для содержимого компонента textField, который был предварительно загружен - PullRequest
Новая
       9

ExtJs 3.4 - как сделать всплывающую подсказку для содержимого компонента textField, который был предварительно загружен

0 голосов
/ 14 сентября 2018

Это компонент, в который я пытаюсь поместить подсказку: 

this.textFieldStreet = new Ext.form.TextField({
    id          : 'idTextFieldStreet',
    fieldLabel  : 'Street',
    autoCreate  : limitChar(30,30),
    listeners   : {
         render : function(c){
            Ext.QuickTips.register({
                target : c.getEl(),
                html   : '' + Ext.getCmp('idTextFieldStreet').getValue()
                }
            });
         } 
    }
});

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

var componentFormCustomer = new ComponentFormCustomer();

Затем я устанавливаю значение как: 

componentFormCustomer.textFieldStreet.setValue('Some street info')

Теперь, вот проблема, я искал некоторые идеи, чтобы сделать это, и ничего не нашел, я не знаю, является ли это правильным способом выполнения всплывающей подсказки. Помогите!

1 Ответ

0 голосов
/ 14 сентября 2018

Решение:

Определить show слушатель для созданного tooltip. В этом слушателе получите значение textfield и update подсказка. При таком подходе содержимое всплывающей подсказки будет динамически меняться и будет отображать содержимое цели всплывающей подсказки. 

Ext.onReady(function(){
    Ext.QuickTips.init();

    var textFieldStreet = new Ext.form.TextField({
        renderTo    : Ext.getBody(),
        id          : 'idTextFieldStreet',
        fieldLabel  : 'Street',
        value       : 'Initial value',
        bodyCfg     : {
            tag: 'center',
            cls: 'x-panel-body',
            html: 'Message'
        },
        listeners   : {
            render : function(c) {
                new Ext.ToolTip({
                    target : c.getEl(),
                    listeners: {
                        'show': function (t) {
                            var value = t.target.getValue();
                            t.update(value);
                        }
                    }                   
                });
            }
        } 
    });

    var button = new Ext.Button({
        renderTo : Ext.getBody(),
        text     : 'Change Tooltip',
        handler  : function () {
            textFieldStreet.setValue('New value');
        }
    });
});

Примечания:

Протестировано с ExtJS 3.4.1.

...