禁用 Go 按钮提交表单（Sencha Touch 2、Cordova、Android）
Posted
技术标签:
【中文标题】禁用 Go 按钮提交表单（Sencha Touch 2、Cordova、Android）【英文标题】：Disable the Go button from submitting the form (Sencha Touch 2, Cordova, Android) 【发布时间】：2013-01-15 10:58:42 【问题描述】：我有一个表单，并且有一个 button 提交它。我希望只有在点击“注册”按钮时才能执行提交。但是当用户在任何textfield 中输入一些文本并按下“Go”（又名“Enter”）按钮时。表单提交了，我对此无能为力。
在 android v2.3.6 上的 Samsung Galaxy S (GT i9000) 上发现此行为。但 Android 4 的 HTC 表现得如我所愿。
submitOnAction:false 没有帮助。
beforesubmit 也是。代码清单中的任何解决方案都不起作用。
我只是不希望表单以任何其他方式提交，除了按“注册”按钮！
文件/view/userRegistration/FormPanel.js
Ext.define('My.view.userRegistration.FormPanel',
extend: 'My.view.components.FormPanel',
xtype : 'userRegistrationForm',
config:
standardSubmit : false,
submitOnAction : false,
listeners:
beforesubmit: function(form, values, options, eOpts)
console.log('before submit fired');
return false; // returning false doesn't help
,
'> field':
keyup: function(fld, e)
//13 = user tapped 'return' button on keyboard
//10 = user tapped 'hide keyboard' on keyboard
if (e.browserEvent.keyCode == 13 || e.browserEvent.keyCode == 10)
e.stopEvent();
fld.element.dom.blur();
,
items : [
xtype: 'textfield',
name : 'firstName',
required: true,
listeners:
action: function(field, e, eOpts)
e.stopEvent();
return false;
,
keyup: function(field, e)
if (e.browserEvent.keyCode == 13 || e.browserEvent.keyCode == 10)
// GO pressed on "firstName"
e.stopEvent();
field.element.dom.blur();
return false;
,
xtype: 'button',
text : 'Register',
listeners:
tap: function(button)
var form = button.parent;
if (form.isValid())
form.onSubmit();
]
);
文件/view/components/FormPanel.js
Ext.define('My.view.components.FormPanel',
extend : 'Ext.form.Panel',
onSubmit: function()
var fieldValues = this.getValues();
// Sending fieldValues via AJAX
,
isValid: function(args)
// Validating values
);
【问题讨论】：
您可以断开注册按钮与表单字段的连接。监听按钮上的点击，然后手动提交表单（我不确定您使用的提交方法）。 【参考方案1】：问题出在onSubmit() 方法中。 sencha-touch-all-debug.js中的@private：
Ext.define('Ext.form.Panel',
// @private
onSubmit: function(e)
var me = this;
if (e && !me.getStandardSubmit())
e.stopEvent();
else
this.submit();
所以在子类中重写onSubmit() 是绝对不正确的。更正确的方法。
文件/view/components/FormPanel.js
Ext.define('My.view.components.FormPanel',
extend : 'Ext.form.Panel',
config:
standardSubmit: false,
listeners:
beforesubmit: function(form, values, options, eOpts)
// Do something with data. Send it via AJAX, for example
return false; // returning false to prevent real form.submit();
表单中的按钮应该只调用form.submit();。
文件/view/userRegistration/FormPanel.js
xtype: 'button',
text : 'Register',
handler: function()
var form = button.parent;
if (form.isValid())
form.submit();
【讨论】：
【参考方案2】：您实际上并不需要为此重写 FormPanel。在控制器中，您可以阻止来自现场的动作执行并冒泡。
Ext.define('TestApp.controller.Login',
extend: 'Ext.app.Controller',
config:
control:
'field':
action: 'onFieldAction'
,
onFieldAction: function(field, e)
// Stop event here
e.stopEvent();
e.stopPropagation();
);
我在执行此操作时遇到了一个问题。我不小心覆盖了我的 FormPanel 的默认初始化函数。如果你这样做，一切都将不起作用
Ext.define('TestApp.view.Login',
extend: 'Ext.form.Panel',
xtype: 'loginform',
config:
...
initialize: function(config)
this.callParent(arguments); // Nothing will work without this line
...
);
【讨论】：
【参考方案3】：以防万一有人需要禁用键盘上的 Enter 键或软键盘中的 Go 按钮，我找到了以下解决方案：
Ext.define('App.view.Login',
extend: 'Ext.form.Panel',
xtype: 'login',
config:
....
,
getElementConfig: function()
var config = this.callParent();
config.children.pop();
return config;
);
【讨论】：
【参考方案4】：document.addEventListener("keypress", onGoKeyDown, false);
function onGoKeyDown(e)
console.log(e);
if(e.srcElement.localName == 'input')
if (e.keyCode === 13 || e.keyCode === 10)
e.preventDefault();
【讨论】：
【参考方案5】：我不知道是否有人仍在寻找解决方案，但我想出了一个非常简单的技巧 - 捕获输入并阻止表单提交，即使用户点击“Go”或任何其他按钮/键你想要的那个。为此，只需在每个输入字段中放置一个侦听器并侦听“模糊”事件。这将在离开现场时捕获任何动作（模糊）。在 blur 侦听器事件中，在下一个字段上执行 focus()（例如在表单中切换，即，如果您在字段 1 中，则将焦点发送到 2，依此类推），直到您到达所需的提交或注册按钮。在那里，您可以进行处理、提交等。这对我有用！
【讨论】：
【参考方案6】：现在，如果我们想在提交时通过单击提交按钮或输入操作来调用 Ajax 方法，
submitOnAction : 在 FormPanel 配置中为真
在初始化方法中添加 this.callParent(arguments)，以防我们覆盖 FormPanel 的初始化方法
重写FormPanel的submit方法以添加Ajax Call
监听提交按钮的点击事件以添加 Ajax 调用
【讨论】：
以上是关于禁用 Go 按钮提交表单（Sencha Touch 2、Cordova、Android）的主要内容，如果未能解决你的问题，请参考以下文章
如何使用 Sencha Touch 2 获取表单面板和禁用选择字段
sencha touch：如何构建可编辑的 FormPanel
如何在 Sencha Touch 2 中使用 JsonP 提交表单？