EXTJS防止表单中回车触发提交

时间:2022-07-23
本文章向大家介绍EXTJS防止表单中回车触发提交,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

版本

7.0 modern toolkit

现象

在formpanel下的字段中使用回车时会自动触发form标签提交,导致跳转

源码

  • Ext.form.Panel
getTemplate: function() {
    var template = this.callParent();

    // 为实现标准的表单提交,加入了一个隐藏的input标签,类型为submit
    // 浏览器检查到此form字段回车会自动触发submit对象的click事件提交
    template.push({
        tag: 'input',
        type: 'submit',
        cls: Ext.baseCSSPrefix + 'hidden-submit'
    });

    return template;
},
initialize: function() {
  this.callParent();
  	// 此处对form元素增加监听submit事件
  	// 但是实际设置formpanel.standardSubmit=true, 表单字段回车并不会触发此事件,而是通过onFieldAction触发提交
    this.element.on('submit', 'onSubmit', this);
},

生成的html为

浏览器会自动响应表单字段回车事件并触发表单提交。

解决

Ext.define('common.overrides.Ext.form.Panel', {
    override: 'Ext.form.Panel',
    getTemplate: function() {
        var template = this.callParent();
        // 删除submit对象
        template.pop();
        return template;
    }
}