Quickly Build Powerful Executive And Admin Dashboards With Javascript

First impressions are especially important when beginning to work with a new framework or library. Many people are struggling, and it is difficult and frustrating for them. That is why Sencha has taken the time and effort to make Ext JS accessible to all users, regardless of skill level. This is because it is critical that on your first encounter with our framework, you are able to quickly familiarize yourself with it and begin running basic code examples that demonstrate its true potential.

In this post, we’ll show you how simple it is to get started with the Sencha Ext JS Javascript Web Framework, which can help your company build Executive And Admin Dashboards in no time!

How do I 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.

How do I 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:

sencha

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.

Is Reusing Ext JS Templates as Our Base Application possible?

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 do I Build the 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:

sencha app watch

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 do I Build the 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:

sencha app watch

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

How can I get started with the Sencha Ext JS GPL version?

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!