更改侦听器在 extjs 中不起作用

Posted 2023-02-22

【中文标题】更改侦听器在 extjs 中不起作用

【英文标题】：change listener doesnt work in extjs

【发布时间】：2015-04-10 18:02:21

【问题描述】：

我有一个动态表单，我想在更改字段值时添加一个侦听器，但我无法做到这一点。我添加了一个单击侦听器，但是当我将其更改为更改时它不起作用。

提前致谢。

下面是代码：

panel = Ext.define('MyApp.view.dynamicform.Form', 
        extend: 'Ext.form.Panel',
        alias: 'widget.dynamicformform',

        title: title,
        id: 'dynamicform.Form',
        bodyPadding: 5,
        autoScroll: true,
        layout: 'auto',

        defaults: 
            anchor: '100%'
        ,
        dockedItems: [],
        items : genItems(storeData),
        listeners: 
            afterrender: function (comp) 
                var element = comp.getEl();
                element.on('change', function(e,el) 
                    alert('blabla')
                );
            
            ,          
            initComponent : function() 
                this.callParent(arguments);
            

        );

当我编写单击而不是更改时，它可以完美运行。我不明白我做错了什么。

【问题讨论】：

当它被传递到 afterrender 监听器时，'comp' 到底是什么。查看您的代码，我会说它是面板本身？

是的，它是面板@mindparse

嗯，我很确定 extjs 中的面板没有更改事件。通常，该事件用于组合框或复选框等输入。

genItems() 中也返回了什么？

genItems() 生成组合框和微调器

【参考方案1】：

您为其添加侦听器的 afterrender 事件纯粹是针对面板组件的。因此，尝试附加更改事件是行不通的，因为您尝试在面板上执行此操作：

afterrender: function (comp) 
                var element = comp.getEl();
                //element is the panel here, not child items such as spinners...
                element.on('change', function(e,el) 
                    alert('blabla')
                );
            

您说单击有效，但我认为这只是因为您单击了面板上的任何位置，包括您正在呈现的子项。相反，在 genItems() 中返回的子项需要包含更改事件侦听器配置。

编辑

您可以在 afterrender 事件中循环遍历 comp 上的子项，对于任何微调器等，以这种方式添加更改事件。

【讨论】：

谢谢你。当我得到子元素并添加监听器时，它就可以工作了。