2

I have a problem with ExtJS modern toolkit's Form component.

I create a form with no buttons (you can test it in sencha fiddle). The only button is in the titlebar and it isn't working at the moment.

The problem is :

Form submission on pressing Enter. My form is empty, default method is POST, but my page is reloading when I press Enter while the focus is on any of my fields. Url address string in browser complemented form field names, but the form's method is 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'
            }
        ]
    }]
});

How to prevent page reloading?

I've never seen this behaviour in ExtJS form's by default.

Narendra Jadhav
  • 10,052
  • 15
  • 33
  • 44
Andrew Koshkin
  • 446
  • 3
  • 16
  • An ExtJs form never should behave like this. For sure, the problem is not in the code you provided. It looks okay. What does the `handler` function look like? Can you provide a link to a fiddle? – Lorenz Meyer Mar 05 '17 at 15:23
  • Another point : you say the form submit method be POST. Your code doesn't show this, while the default submission in ExtJs is through ajax. – Lorenz Meyer Mar 05 '17 at 15:25
  • @LorenzMeyer Ok https://fiddle.sencha.com/#fiddle/1rf2 - just set focus to textfield and press enter. I think page SHOULD NOT be reloaded... Am I right? – Andrew Koshkin Mar 06 '17 at 12:04
  • This is really very strange. I never saw such a behavior. I wonder if it is a problem of the Sencha fiddle ? – Lorenz Meyer Mar 07 '17 at 12:02
  • Your code has just the `url` property missing, what seems required for a form, but even adding it does not change the behavior. – Lorenz Meyer Mar 07 '17 at 12:03

1 Answers1

4

Just replace id with something else could be Id in field name, it is conflicting with Ext id property

{
  xtype: 'numberfield',
  label: 'Some ID',
  allowBlank: true,
  name: 'Id'
},
amansinghgusain
  • 764
  • 5
  • 17
  • I read this and was sure it was incorrect because it was the `name` property, but sure enough, this solved the same problem for me too. Awesome answer, thanks! – Josh Sep 18 '18 at 00:12