View Full Version : Form and screen keyboard

22 Nov 2011, 4:49 AM

I noticed that on PR2 when I focus field and click "return" button on screen keyboard it doesn't perform blur on this field, so I have to click hide keyboard button. I tested it using sencha 2.0 PR1 and it is fine. Below you can find code I used for testing (in fact much more configurations were tested - from placing every element in config, to Ext.define everything and add on initComponent).

Ext.define('component.SomeElem', {
extend: 'Ext.Panel',
config: {
layout: 'fit',
items: [{
xtype: 'formpanel',
width: 300,
height: 200,
scrollable: false,
items: [{
xtype: 'searchfield',
name: 'productname',
placeHolder: 'Name',
clearIcon: false,
labelWidth: 0


I tried it on iPad 1gen.

Second thing is that I can't find if it's possible to post a form on click "return" button from screen keyboard using Sencha.


22 Nov 2011, 11:10 AM
Used my iPhone 4S and ST2 with the latest code in our git repo and the Done button blurs the field.

23 Nov 2011, 1:24 AM
On iPhone/iPod there's bit different situation, because you have "Done" button displayed and it's something like "hide" button (bottom right corner, keyboard icon) on iPad. For more details about keyboard layout see attached screenshot, "return" button is marked red ;) If field is wrapped in form tag "return" becomes "go" button and it's simply submit whole form.

So basically what I mean is that not firing blur on tap "return" button might be a bit inconvenient on iPad. I would also like to know if there's a way to call submit on clicking that button, which would be cool for single search fields :) For now I have to place button and bind it to do this action. Wrapping up field with form tag will do it, but it seems that Sencha never use form tag, am I right?

27 Nov 2011, 8:13 PM
Quite keen to know what the deal is here too; find any good solution Adam?


30 Nov 2011, 2:13 AM
I've found a way to perform submit on press "return", probably not the best, but works. I managed to wrap field with form tag. To do this I'm extending Ext.form.Panel with method:

getElementConfig: function () {
return {
reference: 'element',
tag: this.config.elConfig.tag,
method: "POST",
className: 'x-container',
children: [{
reference: 'innerElement',
className: 'x-inner'

Of course we have to provide action attribute which triggers certain controller and action in our app.

Anybody knows other/better way?