CODEWITHSUNDEEP
extjs
Michael Phelps
Michael Phelps

Reputation: 3601

Create form by Ext.FormPanel

form= new Ext.FormPanel({ 
    renderTo: Ext.query(".foo")[0], 
    items:[]

});

In firebug HTML-code :

<div class="foo" id="ext-gen1008">
<div id="form-1014" class="x-panel x-panel-default" role="form" style="width: 1024px; height: 2px;">
<div id="form-1014-body" class="x-panel-body x-panel-body-default x-panel-body-default" style="left: 0px; top: 0px;">
<div class="x-clear" role="presentation" id="ext-gen1011"></div>
</div>
</div>
</div>

Where is the form tag? Or is there no form tag and is this form submit by Ajax?

Upvotes: 4

Views: 11046

Answers (1)

VDP
VDP

Reputation: 6420

You shouldn't care about html. ExtJS is a javascript framework that takes care of those things for you. (You shouldn't write tag dependent code? In future releases sencha could modify it and you will have to rewrite/update your code if you do.)

If you provide the form with an url parameter, you can just call .submit() on your form to submit the values.

Here you find an example in the documentation

The documentation's example:

Ext.create('Ext.form.Panel', {
    title: 'Simple Form',
    bodyPadding: 5,
    width: 350,

    // The form will submit an AJAX request to this URL when submitted
    url: 'save-form.php',

    // Fields will be arranged vertically, stretched to full width
    layout: 'anchor',
    defaults: {
        anchor: '100%'
    },

    // The fields
    defaultType: 'textfield',
    items: [{
        fieldLabel: 'First Name',
        name: 'first',
        allowBlank: false
    },{
        fieldLabel: 'Last Name',
        name: 'last',
        allowBlank: false
    }],

    // Reset and Submit buttons
    buttons: [{
        text: 'Reset',
        handler: function() {
            this.up('form').getForm().reset();
        }
    }, {
        text: 'Submit',
        formBind: true, //only enabled once the form is valid
        disabled: true,
        handler: function() {
            var form = this.up('form').getForm();
            if (form.isValid()) {
                form.submit({
                    success: function(form, action) {
                       Ext.Msg.alert('Success', action.result.msg);
                    },
                    failure: function(form, action) {
                        Ext.Msg.alert('Failed', action.result.msg);
                    }
                });
            }
        }
    }],
    renderTo: Ext.getBody()
});

Unrelated but helpful, before Ext 4.x we used the new keyword to create new components, now it's advised to use Ext.create. And instead of Ext.extend, we use Ext.define now and add an extend parameter.

Upgrade Guide

Upvotes: 4

Related Questions