extjs中如何监听textfield的改变

Posted 2023-04-07

参考技术A 可以监听change或者keyup事件,change事件是指textfield里面的数值已发生改变并失去焦点的时候触发,keyup事件是指textfield输入时按下任何键盘键后触发,keyup事件仅在enableKeyEvent配置项被设置为true时才触发此事件。 例如

xtype : 'textfield',
fieldLable : '标题',
listeners :
change : function(field,newValue,oldValue)
alert(newValue+'---'+'oldValue');



详细请参考extjs API本回答被提问者采纳 参考技术B 什么改变，分位置，大小，内容，方法都不同。

ExtJs 3.4 - 如何提示预加载的 textField 组件的内容

【中文标题】ExtJs 3.4 - 如何提示预加载的 textField 组件的内容

【英文标题】：ExtJs 3.4 - how to ToolTip a content of a textField component that was pre-loaded

【发布时间】：2018-09-13 21:32:07

【问题描述】：

这是我试图放置工具提示的组件：

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】：

解决方案：

为创建的tooltip 定义show 侦听器。在此侦听器中获取 textfield 和 update 工具提示的值。 通过这种方式，tooltip 的内容会动态变化，并会显示 tooltip 目标的内容。

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 测试。