Question

我被要求通过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 */
];

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

因此，每当用户选择记录时，我都需要将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 */
];

简单明了，除了它只在用户专注于该表单元素时才起作用。其余时间它根本没有开火。

感到沮丧的是我已经过了最后期限并且需要它才能工作，我很快就实现了一个可以检查价值的衰减轮询器。这是一个可怕的，丑陋的黑客。但它按预期工作。

我会在回答这个问题时粘贴我丑陋的黑客。

Answer 1

“GridPanel列绑定到 FormPanel表单元素当在中选择一条记录时 GridPanel，所有的值都是填写在表格中。“

正如我从上面的引文中理解的那样，rowclick事件实际上是首先触发对表单的更改。为了避免轮询，这可能是听取的地方，并最终提升到您的自定义更改事件。

Answer 2

这是我为解决这个问题而做的丑陋黑客：

var current_id_value = '';
var check_changes = function(offset) {
   offset = offset || 100;
   var id_value = document.getElementById('id_field').value || '';
   if ( id_value && ( id_value != current_id_value ) ) {
      current_id_value = id_value;
      change_iframe(id_value);
   } else {
      offset = offset + 50;
      if ( offset > 2500 ) {
         offset = 2500;
      } 
      setTimeout(function() { check_changes(offset); }, offset);
   }
};

var change_iframe = function(id_value) {
   if ( id_value ) {
      document.getElementById('upload_iframe').src = 'http://api/upload.php?id=' + id_value;
   } else {
      document.getElementById('upload_iframe').src = 'no_upload.html';
   }   

   setTimeout(function() { check_changes(100); }, 1500);
};

它不漂亮，但它有效。所有的老板都很开心。

Answer 3

如果您花了一些时间阅读源代码，您会看到Ext.form.Field类仅在onBlur函数中触发该更改事件

ExtJS Change Event Listener无法触发

3 个答案: