Scroll Top

Create & build Sencha ExtJS project using Sencha Cmd

Problem Statement

In a typical Sencha ExtJS based enterprise project, we create various JS+CSS files and it becomes cumbersome to manage them during the development because they need to be listed in the proper order in the index.html file and for every addition of a file, we need to add it to the index.html, as well. After the development is done, we minify all the JS and CSS files to have better loading performance, and go back and modify the index.html file to use the minified files rather than individual files. After the introduction of the new Class System in ExtJS, this tedious task has been taken care by the framework and the developer is not required to do all that, anymore. This is a big relief. However, the new Class System expects a specific folder structure so that it can load the classes, dynamically, and is based on the MVC architecture. To make this managing of folder structure effortless and leverage the same for the minification, Sencha has provided a tool – Sencha Cmd. So, as long as you plan to use the MVC architecture offered by Sencha ExtJS, Sencha Cmd is a must tool to create, build and package your application.

The scope of the article

This article provides you steps to set up Sencha ExtJS project using Sencha Cmd with an example to create a registration form. The article will cover how we can generate a skeleton application using Sencha Cmd, how we create entities – model, view, controller, and store, and how we can build the application to get the minified JS and CSS out.

Pre-requisites:

  1.  Java Run-time Environment 1.6  or above
  2. ExtJs 4.1.1a or above
  3. Sencha Cmd 3.0 or above

Step 1: Install Sencha Cmd

1)  Extract the zip and double click on .exe file.

2) After running the command, you must see similar type of suggestions

Image

Click on Next> button

Image

After successful installation, it shows below message.

Image

Click on Finish button

3) Once all the above steps are done successfully, go to command line and enter command “sencha”. You must see suggestions for command as shown below.

Image

Step 2: Generate project structure using Sencha Cmd: 

1) Create sample Sencha ExtJs project structure with following command.

2) Project structure generated by above command will have the following structure:

Image

Step 3: Create sample model, view and controller using Sencha Cmd:

1)  Go to project path and create sample controller through Sencha Cmd.

With above command, it should create controller with name Main

2)  Create Model using following command

With above command, it will create model with name Server and with field name and type as string

3)  Create sample view using following command (ExtJs Specific. Doesn’t work for touch )

Above command will create a sample view with name specified.

Note: No other parameters available for creating view and controller except name.
Note: We cannot create store using Sencha Cmd.

Step 4: Create a registration form:

  1. Edit app.js and add registrationform xtype in viewport as an item.

2. Create a view file with name Registration in app/view folder.

Sample code:

3)  In the example, to show content in combobox,  store was specified. Hence, Create a store, with the name Server, which is specified in the combo box’s store.

Sample Code:

4)  In above code, proxy was set and data is being retrieved from JSON file. So create a JSON file in data folder.

Sample JSON data:

Run the application:

Now, run the application in your server. You should be able to see the registration form view similar to following output.

Image

Click on dropdown to see JSON data.

Image

Step 5: Packaging Application:

Packaging decreases the loading time of your application. Here are the steps to package your app using Sencha Cmd.

Go to your project folder and execute the following command.

Once, above command was executed, it should create a build folder in main project structure.

The structure looks like:

Image

all-classes.js contains the whole code related to application. You can run the application by navigating browser to packaged location.

Summary: This article has provided steps to create and build Sencha ExtJS project using Sencha Cmd with an example to create a registration form.

References:

Leave a comment

Privacy Preferences
When you visit our website, it may store information through your browser from specific services, usually in form of cookies. Here you can change your privacy preferences. Please note that blocking some types of cookies may impact your experience on our website and the services we offer.