Easily Build Powerful Personalized Dashboards With Javascript
The Dashboard is the first screen that a user wants to see in an application. There will be the most important information for the strategy of the company. There are charts and some lists with summary data to explain the current status of the business. Today we are going to create our Dashboard with a personalized design using the power of Sass based on this example and using best practices. How to Create an Ext JS Application Using Sencha CMD based on Templates Let’s start installing and configuring Sencha CMD and then create our application from the admin template. Starting with Sencha CMD If you still don’t have Sencha CMD, you can download it for free here. Once you have it installed make sure it was installed and configured properly, running this command on terminal/shell: If it returns sencha cmd version, you are good to go. Here are more details on how to install, configure and use Sencha CMD, but this article will show all the important details. Creating the application The first thing you have to do is download the template by clicking here. The next thing to do is create your project structure and Sencha CMD can do it for you easily, just by running this command: sencha -sd /Users/fabio/sencha-sdks/ext-7.3.1 generate app -s extjs-admin-dashboard-template-master DashboardExtJS ./dashboard-extjs /Users/fabio/sencha-sdks/ext-7.3.1/ is where your Ext JS SDK folder is. extjs-admin-dashboard-template-master is the template downloaded. DashboardExtJS is the name of our application that will be our namespace for our classes. ./dashboard-extjs is the path where it will create our project structure with the needed files. Make sure when you run this command there is no error on the output. If everything was running correctly, it created your project structure. Let’s run our application with the initial structure. First navigate to your project folder: Then, run the command that will up the server on a specific port: The output of this command will show you the URL where your app will be available. For our case, it is available on http://localhost:1841/. Open it on your browser and you will see the initial app created: Why use a template? The benefits of using templates is a lot, mainly this admin dashboard template where you have the base classes and screen that you will need for your application. Project Structure Let’s understand a bit about the project structure generated, here are the important folder on our project: app is the directory where we will have our classes used on both devices (desktop and mobile). Here we can have base classes and no visual classes like Models, Stores, and some views that we will be able to reuse. classic is our directory where we have our classes used for the app running on the desktop. modern is where we save our classes that will be working to run the app through the phone. sass is where some of our important rules were defined to change the design of the app. The Dashboard In this post, we will focus only on our Dashboard and dive into some components and how it is working to make some actions. Important components to put on a dashboard are charts and lists, so let’s focus on these two kind of components. How can I Create a Line Chart with Javascript Ext […]
