javascript - ExtJS更改事件监听器无法触发

http://twitter.com/jonathanjulian要求我在StackOverflow上发布此问题，然后其他人转发了该问题。我已经有一个丑陋的解决方案，但正在按要求发布原始问题。

所以这是背景故事。我们有一个庞大的数据库应用程序，专门将ExtJS用于客户端 View 。我们正在使用GridPanel(Ext.grid.GridPanel)作为从远程存储加载的行 View 。

在我们的每个界面中，我们还具有一个FormPanel(Ext.form.FormPanel)，用于显示允许用户从GridPanel创建或编辑记录的表单。 GridPanel列绑定(bind)到FormPanel表单元素，以便在GridPanel中选择记录时，所有值都将填充到表单中。

在每种表单上，我们都有一个表行ID(主键)的输入字段，其定义如下:

var editFormFields = [
{
     fieldLabel: 'ID',
     id: 'id_field',
     name: 'id',
     width: 100,
     readOnly: true, // the user cannot change the ID, ever.
     monitorValid: true
} /* other fields removed */
];

因此，一切都很好。这适用于我们所有的应用程序。在构建新界面时，要求我们需要使用第三方文件存储API，该API以小网页的形式提供接口(interface)，该网页已加载到IFrame中。

我将IFrame代码放在FormPanel的html参数内:

var editForm = new Ext.form.FormPanel({
   html: '<div style="width:400px;"><iframe id="upload_iframe" src="no_upload.html" width="98%" height="300"></iframe></div>',
   /* bunch of other parameters stripped for brevity */
});

因此，无论何时用户选择一条记录，我都需要将IFrame的src属性更改为我们正在使用的服务的API URL。类似于http://uploadsite.com/upload?appname=whatever&id= {$ id_of_record_selected}

我最初进入id字段(上面已粘贴)，并添加了一个更改监听器。

var editFormFields = [
{
     fieldLabel: 'ID',
     id: 'id_field',
     name: 'id',
     width: 100,
     readOnly: true, // the user cannot change the ID, ever.
     monitorValid: true,
     listeners: {
        change: function(f,new_val) {
           alert(new_val);
        }
     }
} /* other fields removed */
];

美观而简单，只是它仅在用户专注于该表单元素时才起作用。其余时间它根本无法启动。

感到沮丧的是我已经超过了最后期限，只需要按时完成工作，于是我迅速实现了一个衰变的轮询器来检查其值(value)。这是一个可怕的丑陋骇客。但是它按预期工作。

我将在这个问题的答案中贴上我的丑陋的骇客文章。

最佳答案

从上面的引言中可以理解，rowclick事件实际上是触发表单更改的真正原因。为避免轮询，可以在这里监听，并最终引发自定义更改事件。