防止在表单字段上重新加载页面按在 ExtJS 中的输入答案

【问题标题】：Prevent page reload on form field press enter in ExtJS防止在表单字段上重新加载页面按在 ExtJS 中的输入
【发布时间】：2017-03-02 22:47:22
【问题描述】：

我对 ExtJS 现代工具包的表单组件有疑问。

我创建了一个没有按钮的表单（您可以在 sencha fiddle 中对其进行测试）。唯一的按钮在标题栏中，目前无法使用。

问题是：

按 Enter 提交表单。我的表单是空的，默认方法是 POST，但是当我在焦点位于我的任何字段上时按 Enter 时，我的页面正在重新加载。浏览器中的url地址字符串补充了表单字段名称，但是表单的方法是POST。

Ext.create('Ext.form.Panel', {
    renderTo: Ext.getBody(),
    requires: [
        'Ext.form.FieldSet',
        'Ext.field.Text',
        'Ext.field.TextArea',
        'Ext.TitleBar'
    ],

    items: [{
        xtype: 'titlebar',
        docked: 'top',
        title: 'Searching',
        items: [{
            iconCls: 'fa fa-search',
            iconAlign: 'right',
            text: 'Search',
            align: 'right',
            handler: function() {
                //
            }
        }]
    }, {
        xtype: 'fieldset',
        border: false,
        shadow: 'true',
        defaults: {
            value: ''
        },
        items: [{
                xtype: 'numberfield',
                label: 'Some ID',
                allowBlank: true,
                name: 'id'
            },
            {
                xtype: 'textfield',
                label: 'Some Article',
                name: 'article'
            }
        ]
    }]
});

如何防止页面重新加载？

默认情况下，我从未在 ExtJS 表单中看到过这种行为。

【问题讨论】：

ExtJs 表单永远不应该这样。当然，问题不在于您提供的代码。看起来没问题。 handler 函数是什么样的？你能提供一个小提琴的链接吗？
还有一点：你说表单提交方法是POST。您的代码没有显示这一点，而 ExtJs 中的默认提交是通过 ajax。
@LorenzMeyer Ok fiddle.sencha.com/#fiddle/1rf2 - 只需将焦点设置到文本字段并按 Enter。我认为页面不应该重新加载...我说的对吗？
这真的很奇怪。我从未见过这样的行为。不知道是不是煎茶小提琴的问题？
您的代码缺少 url 属性，这似乎是表单所必需的，但即使添加它也不会改变行为。

标签： extjs extjs6 extjs6-modern

【解决方案1】：

只需将id 替换为字段名称中的Id，它与Ext id 属性冲突

{
  xtype: 'numberfield',
  label: 'Some ID',
  allowBlank: true,
  name: 'Id'
},

【讨论】：

我读了这篇文章并确定它不正确，因为它是 name 属性，但果然，这也为我解决了同样的问题。很棒的答案，谢谢！