我被要求在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)
很好很简单,只有当用户专注于该表单元素时它才有效.其余的时间它根本没有发射.
我感到很沮丧,因为我已经过了最后期限,只是需要它才能工作,我很快就实现了一个可以检查价值的腐朽轮询器.这是一个可怕的,丑陋的黑客.但它按预期工作.
我会在这个问题的答案中粘贴我丑陋的黑客.
“GridPanel 列绑定到 FormPanel 表单元素,以便在 GridPanel 中选择记录时,所有值都会填充到表单中。”
据我从上面的引用中了解到,该rowclick事件首先实际上触发了表单的更改。为了避免轮询,这可能是监听的地方,并最终引发您的自定义更改事件。