Can I prevent an attempt to post form data when using formpanel instead of panel?

[nixta]

Hi,

I have an application which displays a searchfield. The action on the searchfield takes the value of the field and passes it to my own service which geocodes the address and returns a geolocation.

If I contain the searchfield in a panel, it all works well, but in iOS the keyboard shows "Return" instead of "Search". So, I change the panel out for a formpanel, and while the iOS keyboard looks right, my browser console shows the following error:

Uncaught Error: [ERROR][Ext.data.Connection#request] No URL specified
Ext.define.doWrite - sencha-touch-all-debug.js:26123
Ext.define.write - sencha-touch-all-debug.js:18494
Ext.define.log - sencha-touch-all-debug.js:18368
(anonymous function) - sencha-touch-all-debug.js:18386
Ext.define.setOptions - sencha-touch-all-debug.js:30007
Ext.define.request - sencha-touch-all-debug.js:29782
Ext.define.doBeforeSubmit - sencha-touch-all-debug.js:71520
Ext.define.doFire - sencha-touch-all-debug.js:17389
Ext.define.fire - sencha-touch-all-debug.js:17316
Ext.define.doDispatchEvent - sencha-touch-all-debug.js:22436
Ext.define.dispatchEvent - sencha-touch-all-debug.js:22417
Ext.define.doFireEvent - sencha-touch-all-debug.js:26678
Ext.define.fireAction - sencha-touch-all-debug.js:26667
Ext.define.submit - sencha-touch-all-debug.js:71501
Ext.define.onSubmit - sencha-touch-all-debug.js:71396
Ext.define.doFire - sencha-touch-all-debug.js:17389
Ext.define.fire - sencha-touch-all-debug.js:17316
Ext.define.doDispatchEvent - sencha-touch-all-debug.js:22436
Ext.define.dispatch - sencha-touch-all-debug.js:17754
Base.implement.callParent - sencha-touch-all-debug.js:4541
Ext.define.dispatch - sencha-touch-all-debug.js:23161
Ext.define.doPublish - sencha-touch-all-debug.js:23203
Ext.define.publish - sencha-touch-all-debug.js:23168
Ext.define.onEvent - sencha-touch-all-debug.js:23296
method - sencha-touch-all-debug.js:3125

I'm using 2.0.1-rc. This did not happen in 2.0.

Note, the app seems to work despite the console error, but I don't like seeing errors where there were none before.

Clearly an attempt is being made to post the form. I've tried setting submitOnAction to false, but this doesn't help.

(btw: setting standardSubmit to true is even worse, which makes perfect sense in retrospect)

Any thoughts?

Nick.

[mitchellsimoens]

Think this is browser behavior triggering it off. You can cancel submission via the beforesubmit event:

new Ext.form.Panel({
    fullscreen : true,
    items      : [
        {
            xtype : 'searchfield',
            label : 'Test'
        }
    ],
    listeners : {
        beforesubmit : function() {
            return false;
        }
    }
});

[nixta]

Thanks Mitchell,

Unfortunately it seems not. beforesubmit isn't even called in my test (at least, the breakpoint I set isn't hit).

Here's the full definition of the formpanel (it's the first item in a panel in a navigationview).

{
    xtype:'formpanel',
    id:'singleLineAddressPanel',
    submitOnAction: false,
    left:10,
    right: 10,
    top:10,
    scrollable:false,
    padding:0,
    centered: true,
    hidden: true,
    modal: true,
    hideOnMaskTap: true,
    showAnimation: 'fadeIn',
    hideAnimation: 'fadeOut',
    items:
    [
        {
            xtype:'searchfield',
            id:'singleLineAddress',
            //value:'450 West Randolph Street, Chicago',
            value:'222 Mason Street, San Francisco',
            //value:'50 5th St., San Francisco',
            padding:0,
            listeners: {
                action: function(c,e,o) {
                    var mapView = c.up('#mainViewPanel').down('#mainPizzaMap');
                    c.up('#singleLineAddressPanel').hide();
                    mapView.locateToAddress(c.getValue());
                    return false;
                },
                clearicontap: function(c,e,o) {
                    // The keyboard hides on the iPhone when you click clear.
                    // That's not like native behaviour.
                    c.focus();
                    return false;
                }                            
            }
        }
    ],
    listeners : {
        beforesubmit : function() {
            return false;
        }
    },
    zIndex:'40'
}

Any thoughts?

Nick.

[mitchellsimoens]

Stopped the error for me using 2.0.1 RC

[nixta]

Any idea why the beforesubmit handler might not be getting called then?

[nixta]

If I hook into the beforesubmit event from the Controller via the refs and control items rather than inline in the listeners, then it works.

Any thoughts on why that might be?

Cheers,

Nick.