O'Reilly logo

Ext JS Essentials by Stuart Ashworth, Andrew Duncan

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Inputting data with forms

A key aspect of web applications is forms. Being able to input data into our system is imperative, and as such, Ext JS has form components to suit all types of input that can be easily bound to our data models and related views.

In this section, we will expand on our product grid and allow users to edit products through a simple form.

Defining a form

We define our product form as we would any other view—by creating a file (in this case named view/product/ProductForm.js) and calling Ext.define within it. We extend the Ext.form.Panel class and give it an xtype of product—ProductForm:

Ext.define('BizDash.view.product.ProductForm', {
  extend: 'Ext.form.Panel',
  xtype: 'product-ProductForm'
});

Within our form, we want to have input ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required