ExtJS Change Event Listener无法触发

Eri*_*son 6 javascript extjs

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

所以这是背景故事.我们有一个庞大的数据库应用程序,它专门用于客户端视图的ExtJS.我们使用GridPanel(Ext.grid.GridPanel)来处理从远程存储加载的行视图.

在我们的每个接口中,我们还有一个FormPanel(Ext.form.FormPanel),它显示一个允许用户从GridPanel创建或编辑记录的表单.GridPanel列绑定到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 */
];
Run Code Online (Sandbox Code Playgroud)

所以,这一切都很好,很好.这适用于我们所有的应用程序.在构建新界面时,要求我们需要使用第三方文件存储API,该API以在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 */
});
Run Code Online (Sandbox Code Playgroud)

因此,每当用户选择记录时,我都需要将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 */
];
Run Code Online (Sandbox Code Playgroud)

很好很简单,只有当用户专注于该表单元素时它才有效.其余的时间它根本没有发射.

我感到很沮丧,因为我已经过了最后期限,只是需要它才能工作,我很快就实现了一个可以检查价值的腐朽轮询器.这是一个可怕的,丑陋的黑客.但它按预期工作.

我会在这个问题的答案中粘贴我丑陋的黑客.

Tew*_*ewr 4

“GridPanel 列绑定到 FormPanel 表单元素,以便在 GridPanel 中选择记录时,所有值都会填充到表单中。”

据我从上面的引用中了解到,该rowclick事件首先实际上触发了表单的更改。为了避免轮询,这可能是监听的地方,并最终引发您的自定义更改事件。

  • 仅供参考,通常最好绑定到 SelectionModel 的更改事件而不是网格的单击事件。这样键盘导航将触发相同的处理程序。 (3认同)