怎么为extjs的combobox添加监听器？

Posted 2023-04-07

做的是一个关于地图的下拉框，下拉框里有不同的比例尺，当选中时就向后台发送请求改变地图大小。。现在怎么为combobox写监听器监听选择了哪个选项？监听器应该写在哪？。。
var scale = new Ext.form.ComboBox(
id:'scale',
xtype:'combo',
mode : 'local',
width:120,
fieldLabel:'目标图层',
displayField:'bilichi',
valueField:'num',
store:new Ext.data.SimpleStore(
fields:['bilichi','num'],
data:[['1:10000','10000'],['1:25000','25000'],['1:50000','50000'],['1:250000','250000'],['1:500000','500000'],['1:1000000','1000000']]
),
triggerAction:'all',
emptyText:'请选择比例尺',

selectOnFocus:'true'
)

extjs 事件监听 都是在 创建这个 组件时，组件属性里 写上
listeners:
select: function() 这里写触发后的动作 ,
...
change: function() 这里写触发后的动作

其中这些function 都有一些回调参数的，你在写的时候，可以参考api文档，了解每个参数的意义，使用起来会更加方便和完善；
另外 给组件添加事件监听，也可以动态的添加，比如：
combobox.on('select',function() 这个function 和上面所讲的function 是同样的 );
extjs所有的组件都是用 .on('监听器名称',function()回调函数 ) 来动态添加... 参考技术A 加监听器有几种方式的,看你喜欢哪种了
1,在selectOnFocus:'true'下加上onSelect:function()代码
2,listener:
'select':function()

3,scale.on('select',fuction())本回答被提问者采纳 参考技术B scale.on('select',function()
var vl=scale.getValue();
//接下来就可以做你的后台请求什么的了
)

ExtJS：如何让用户在 Combobox 中输入不在商店中的值

【中文标题】ExtJS：如何让用户在 Combobox 中输入不在商店中的值

【英文标题】：ExtJS: How to let user enter a value in Combobox that is not in store

【发布时间】：2015-11-10 14:40:04

【问题描述】：

我有一个组合框，它是各种地址的列表。选择任何地址时，选择事件会在地图上绘制此地址。我想以这样的方式更改此程序，如果用户输入的地址不属于 Combo 商店的一部分，则该地址仍应绘制在地图上。我不需要修改组合商店。如何才能做到这一点？什么事件监听器可以触发这样的事件？我需要切换到文本字段吗？

                xtype: 'combobox',
                name: 'address1',
                style: 
                    marginLeft: '15px'
                ,
                store: Ext.create('MyStore'),
                valueField: 'address',
                displayField: 'address',
                triggerAction: 'all',
                emptyText: 'Select Address',
                typeAhead: true,
                minChars: 2,
                typeAheadDelay: 100,
                queryMode: 'remote',
                width: 300,
                queryParam: 'searchAddress',
                hideTrigger:true,
                listeners:                         
                    select: function(combo, records, eOpts)
                        //Plot the address from records[0].data.address
                    
                
               

【问题讨论】：

用户如何表明他们想要绘制地址？

您要么必须要求用户明确表明他们想要绘制地址（例如按 Enter 或单击某些东西），要么您的组合需要更加聪明和体贴，检查是否是用户已经输入的是一个有效的地址，可以绘制，一旦出现这种情况就绘制它。

@Drake -“您的组合需要更加聪明和体贴，检查用户输入的是否是可以绘制的有效地址并在这种情况下绘制它” - 如何我这样做？

这将涉及在用户键入时对后端应用程序进行后台 AJAX 调用。它会检查地址是否有效，在这种情况下，“绘制它”响应将被发送回组合。另外，请检查this example。您可以在下拉列表中显示与用户输入匹配的有效地址，并让他们选择他们想要绘制的内容。

@Drake - 目前，我不需要担心输入的有效性。我所需要的是，如果用户试图在组合中输入的值，商店不存在，仍然将值发送到绘图函数。我不确定哪种事件可以捕获此操作并获取用户输入的文本

【参考方案1】：

用户可以按回车键来指示地址是 选择或输入。目前，specialkey 事件不能总是 捕获它，因为在输入而不是输入输入的值时，它 选择存储中的第一个值

specialkey 如果显示下拉列表，则不会被捕获。这是因为事件是在keydown 上模拟的，下拉列表有意停止，如here 所示。

仍然有办法对用户输入做出反应：

方法一

使用自定义的onFieldMutation 方法，如下所示：

Ext.define('MyCombo', 
    extend: 'Ext.form.ComboBox',
    onFieldMutation: function(e) 
        if (e.getKey() === e.ENTER) 
            // Call address plotting method here
        
        return this.callParent(arguments);
    
);

方法二

使用keyup：

listeners: 
    keyup: 
        fn: function(e) 
            if (e.getKey() === e.ENTER) 
                // Call address plotting method here
            
        ,
        element: 'inputEl'
    

查看这两种方法的实际效果：https://fiddle.sencha.com/#fiddle/sdf

【讨论】：

谢谢@Drake！这就是我实现的code listeners: keyup: function(me, e, eOpts) if (e.getKey() === e.ENTER) //plot address element: 'inputEl' , select : function(combo, records, eOpts) //绘图地址

@KavitaC //这里调用地址绘图方法是什么意思？