JavaScript
Run Code
Open in Fiddle
var frmPanel = 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() }); Ext.create('Ext.form.Panel', { title: 'Contact Info', width: 300, bodyPadding: 10, renderTo: Ext.getBody(), items: [{ xtype: 'textfield', name: 'name', fieldLabel: 'Name', allowBlank: false // requires a non-empty value }, { xtype: 'textfield', name: 'email', fieldLabel: 'Email Address', vtype: 'email' // requires value to be a valid email address format }, { xtype: 'textfield', name: 'email', fieldLabel: 'Email Address', vtype: 'email' // requires value to be a valid email address format }, { xtype: 'textfield', name: 'email', fieldLabel: 'Email Address', vtype: 'email' // requires value to be a valid email address format }, { xtype: 'textfield', name: 'email', fieldLabel: 'Email Address', vtype: 'email' // requires value to be a valid email address format }, { xtype: 'textfield', name: 'email', fieldLabel: 'Email Address', vtype: 'email' // requires value to be a valid email address format }, { xtype: 'textfield', name: 'email', fieldLabel: 'Email Address', vtype: 'email' // requires value to be a valid email address format }, { xtype: 'textfield', name: 'email', fieldLabel: 'Email Address', vtype: 'email' // requires value to be a valid email address format }, { xtype: 'textfield', name: 'email', fieldLabel: 'Email Address', vtype: 'email' // requires value to be a valid email address format }, { xtype: 'textfield', name: 'email', fieldLabel: 'Email Address', vtype: 'email' // requires value to be a valid email address format }, { xtype: 'textfield', name: 'email', fieldLabel: 'Email Address', vtype: 'email' // requires value to be a valid email address format }, { xtype: 'textfield', name: 'email', fieldLabel: 'Email Address', vtype: 'email' // requires value to be a valid email address format }, { xtype: 'textfield', name: 'email', fieldLabel: 'Email Address', vtype: 'email' // requires value to be a valid email address format }, { xtype: 'textfield', name: 'email', fieldLabel: 'Email Address', vtype: 'email' // requires value to be a valid email address format }, { xtype: 'textfield', name: 'email', fieldLabel: 'Email Address', vtype: 'email' // requires value to be a valid email address format }, { xtype: 'textfield', name: 'email', fieldLabel: 'Email Address', vtype: 'email' // requires value to be a valid email address format }, { xtype: 'textfield', name: 'email', fieldLabel: 'Email Address', vtype: 'email' // requires value to be a valid email address format }, { xtype: 'textfield', name: 'email', fieldLabel: 'Email Address', vtype: 'email' // requires value to be a valid email address format }, { xtype: 'textfield', name: 'email', fieldLabel: 'Email Address', vtype: 'email' // requires value to be a valid email address format }, { xtype: 'textfield', name: 'email', fieldLabel: 'Email Address', vtype: 'email' // requires value to be a valid email address format }, { xtype: 'textfield', name: 'email', fieldLabel: 'Email Address', vtype: 'email' // requires value to be a valid email address format }, { xtype: 'textfield', name: 'email', fieldLabel: 'Email Address', vtype: 'email' // requires value to be a valid email address format }, { xtype: 'textfield', name: 'email', fieldLabel: 'Email Address', vtype: 'email' // requires value to be a valid email address format }, { xtype: 'textfield', name: 'email', fieldLabel: 'Email Address', vtype: 'email' // requires value to be a valid email address format }, { xtype: 'textfield', name: 'email', fieldLabel: 'Email Address', vtype: 'email' // requires value to be a valid email address format }, { xtype: 'textfield', name: 'email', fieldLabel: 'Email Address', vtype: 'email' // requires value to be a valid email address format }, { xtype: 'textfield', name: 'email', fieldLabel: 'Email Address', vtype: 'email' // requires value to be a valid email address format }, { xtype: 'textfield', name: 'email', fieldLabel: 'Email Address', vtype: 'email' // requires value to be a valid email address format }, { xtype: 'textfield', name: 'email', fieldLabel: 'Email Address', vtype: 'email' // requires value to be a valid email address format }, { xtype: 'textfield', name: 'email', fieldLabel: 'Email Address', vtype: 'email' // requires value to be a valid email address format }, { xtype: 'textfield', name: 'email', fieldLabel: 'Email Address', vtype: 'email' // requires value to be a valid email address format }, { xtype: 'textfield', name: 'email', fieldLabel: 'Email Address', vtype: 'email' // requires value to be a valid email address format }, { xtype: 'textfield', name: 'email', fieldLabel: 'Email Address', vtype: 'email' // requires value to be a valid email address format }, { xtype: 'textfield', name: 'email', fieldLabel: 'Email Address', vtype: 'email' // requires value to be a valid email address format }, { xtype: 'button', text: 'Open Window', listeners: { click: function () { new Ext.Window({ autoShow: true, layout: 'fit', constrain:true, width: 400, height: 200, modal: true, closable: true, items: [frmPanel] }); } } } ] });