First impressions last, especially when you start working with a new framework or library. Many people struggle and it difficult and frustrating. That is why Sencha has put in the time and effort to make Ext JS accessible, no matter what your skill level is. This is because on your first contact with our framework it is important that you can familiarize yourself quickly and get started running basic code examples that show you its real potential.

Today we will show you just how easy it is to get up and running with Sencha.

How to Download GPL Version

You may not know this but Ext JS has a GPL version in addition to our Ext JS Trial. It is a totally free, fully functional version. Simply put, you can build anything you want, but you have to share your code with the community.

Pretty cool.

To get started using the GPL version all you have to do is fill out this form. Once you are done, you will receive an email download link.

Getting Started

Getting started once you have downloaded the software is easy. The Ext JS documentation has a lot of guides explaining all the steps you need to run the product and start recreating its examples. To get you moving more quickly however here is the bare minimum you need to know.

Starting with Sencha CMD

If you still don’t have Sencha CMD, you can download it for free here.

Once you have it installed you need to make sure it is properly configured. To do this, run the following command on the CMD terminal/shell:

If it returns sencha cmd, you are good to go. If it doesn’t, click here. It will take you to more information on how to install, configure and use Sencha CMD. You shouldn’t need it though because we will cover the basics here.

Reusing Ext JS Templates as Our Base Application

Sencha CMD and Ext-gen use templates to help you create your applications. For example, the Executive Dashboard and Admin Dashboard are templates that you can use as a base to automatically help you through your own applications.

How to Build Executive Dashboard Example

To get started let’s check out the Executive Dashboard.

First, there is a very important trick — Open the app.json file on ext-7.0.0-gpl/templates/executive-dashboard and replace the word from ${ext.dir} to ${framework.dir}.

A single command to creates the application. Remember to use your own username :

sencha -sd /Users/fabio/sencha-sdks/ext-7.0.0-gpl generate app -s /Users/fabio/sencha-sdks/ext-7.0.0-gpl/templates/executive-dashboard ExecutiveDashboard ./executive-dashboard-extjs

• /Users/fabio/sencha-sdks/ext-7.0.0-gpl is where your Ext JS GPL SDK folder is.
• /Users/fabio/sencha-sdks/ext-7.0.0-gpl/templates/executive-dashboard is the template. In this case, we are using the executive dashboard, which means your application will start with all elements existent on it.
• ExecutiveDashboard is the name of our application. That will be our namespace for our classes.
• ./executive-dashboard-extjs is the path where we will create our project structure containing the needed files.

Done! You have created an application.

Now, let’s run the command that will call up the server on a specific port and see the result:

The output of this command will show you the URL where your app will be available. in this case, it is available on http://localhost:1841/. Open it on your browser and you will see the app created:

How to Build Admin Dashboard Example

To build an admin dashboard, all you need to do is execute the same command but change the template. The result is a perfect application for you to experiment with and create your dashboard!

Open the app.json file on ext-7.0.0-gpl/templates/admin-dashboard and replace the word from ${ext.dir} to ${framework.dir}.

sencha -sd /Users/fabio/sencha-sdks/ext-7.0.0-gpl generate app -s /Users/fabio/sencha-sdks/ext-7.0.0-gpl/templates/admin-dashboard AdminDashboard ./admin-dashboard-extjs

Run:

Open your new mobile & desktop Application at http://localhost:1841/.

What’s Next?

Now that you have learned how to download and use the Ext JS GPL version, go ahead and create your own components based on the Ext JS examples. You can even create your own app based on our templates and share them with the community. Let’s create plenty of Ext JS components to make the framework even more incredible!