Click to search on your search term.
Subscribe to Fig Leaf Tutorials


Need help with a project? Contact us at sales@figleaf.com.
From code reviews to project "jumpstarts" and full life-cycle development, we've got you covered!
Check out our case studies!
Follow us on Twitter!
Click here to join our Facebook group!

Ready to upgrade your skills? Try these instructor-led classes in Washington, DC:
Ext JS 6 Bootcamp
02/05/2018

Implementing Data Entry Forms

Page of 168

Ext.form.Panel (xtype: form) provides a standard container for forms. It is essentially a standard Ext.panel.Panel that automatically instantiates a Ext.form.Basic class for managing any Ext.form.Field objects that are added as descendants.

The following code snippet illustrates a simple form definition:

{ 
  xtype: 'form',
  bodyPadding: 5,
  items: [
	{ 
	  xtype: 'textfield',
	  name: 'firstName',
	  fieldLabel: 'First Name'
	},
   // more fields here
  ]
}

Ext 4 supports all of the standard HTML form field widgets as well as a few "rich ui" elements including an HTML WYSIWYG editor, a numeric "spinner" field, and an input field for entering a time value.

By default, forms use an "anchor" layout that enables you to automatically grow and shrink size of the ui controls based on their container's size. Note, however, that you can also use any of the Ext JS layouts in organizing your form.

Unlike Sencha Touch, Ext JS form fields have built-in support for both extensible client-side and server-side validation.

Form data may be submitted through either an AJAX form post or by transferring form field data into a Model instance and invoking Ext.data.model.Save() or Ext.data.Store.sync();

Ext JS 4 supports the following types of form fields:

  • Checkbox
  • Checkbox Group
  • Combobox
  • Date
  • Display Field
  • File
  • Hidden
  • HTML Editor
  • Number
  • Radio
  • Radio Group
  • Slider (via Ext.slider)
  • Spinner
  • Text
  • TextArea
  • Time
  • Trigger

 

Page of 168
comments powered by Disqus