Dimensional Data

Here we go with one more post about the power of Artificial Intelligence (AI) and Machine Learning (ML) using object and facial recognition! Today we are going to implement a really awesome application that can Identify objects and faces through your webcam. The application will teach the machine to save aspects of an object or face to and then tell you what or who it sees on camera. That’s incredible! We will be working based on this Google lab post using TensorFlow.js. and, of course, applying  Ext JS best practice as usual. How can I get Getting Started with Sencha CMD? If you still don’t have Sencha CMD, you can download it for free here. Once you have it installed you can make sure you have it properly installed and configured by running this command on terminal/shell: If it returns the 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. How can I create the Sencha application? The first thing you want to do is create your project structure. Sencha CMD can do this for you easily–all you need to do is run this command. If you have any questions, take a look at the bullet points below. They explain what everything in the command does and what you will need to change to personalize your application. sencha -sdk /Users/fabio/sencha-sdks/ext-7.4.0/ generate app modern TeachableMachine ./teachable-machine-extjs /Users/fabio/sencha-sdks/ext-7.4.0/ is where your Ext JS folder is. TeachableMachine is the name of our application and the namespace for our classes. ./teachable-machine-extjs is the path for our project structure and the necessary files. modern is the toolkit for our application. Make sure when you run this command there is no error on the output. If there is no error, and everything runs correctly, you have successfully created your project structure. To be sure, however, let’s run our application with the initial structure. To do this, first navigate to your project folder: $ cd teachable-machine-extjs/ Then, run the command to open the server on a specific port: The output of this command will return the URL where your app is available. In this case, it is running on  http://localhost:1841/. When you open it on your browser you will see a screen like this: How can I clean up the Sencha project? Once you have your basic project running, you can clean it up by removing the files and components that you don’t need. Use the command shown below to delete your unwanted files. While deleting, keep another terminal open and have the Sencha app running because it will update the application automatically: $ rm app/model/* app/store/* app/view/main/List.* With that done, let’s clean up our classes in app/view/main. Make sure your three classes look like this: Main.js: /** * This class is the main view for the application. It is specified in app.js as the * “mainView” property. That setting causes an instance of this class to be created and * added to the Viewport container. */ Ext.define(‘TeachableMachine.view.main.Main’, { extend: ‘Ext.Panel’, xtype: ‘app-main’, controller: ‘main’, viewModel: ‘main’ }); MainController.js: /** * This class is the controller for the main view for the application. It is specified as * the “controller” of the Main view class. */ Ext.define(‘TeachableMachine.view.main.MainController’, { extend: […]

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 […]

The D3 package in Sencha Ext JS boasts several powerful components. By utilizing them, you can create amazing data visualizations that can help your business uncover valuable insights both easily and conveniently. In this post, we will discuss three of the most useful Ext JS native components: Treemap, Heatmap, and Pivot Heatmap. Let’s dive in. What is D3?   D3 (Data Driven Components) is a powerful JavaScript library. It enables you to produce dynamic and interactive data visualizations in the web browser, utilizing modern web standards. These standards include SVG, HTML, and CSS. Best of all, D3 is open-source, so you can use it without spending a single penny. How to Visualize Data Using D3 and JavaScript Because the Sencha D3 JavaScript package is fully integrated with Ext JS, you can create powerful data visualizations and implement them into your Ext JS web applications with ease. Although there are many different component types in the D3 package, in this post, we will discuss only Treemaps, Heatmaps, and Pivot Heatmaps. D3 Treemap The D3-treemap is a powerful component that recursively subdivides areas into rectangles, where the area of any node in a tree corresponds to its comparative value. Let’s take a look at this example: To create the visualization shown above, simply follow these steps: 1. First, you have to create the model: Ext.define(‘KitchenSink.model.Stock’, { extend: ‘Ext.data.TreeModel’,   fields: [ ‘name’, ‘description’, ‘cap’, { name: ‘leaf’, calculate: function(data) { return data.root ? false : !data.children; } }, { name: ‘change’, calculate: function() { return (-5 + Math.random() * 10).toFixed(2); // percentages } }, { name: ‘expanded’, type: ‘boolean’, defaultValue: true } ],   proxy: { type: ‘ajax’, url: ‘data/tree/stocks.json’ }   }); Here, you are adding different fields, including name, field, description, leaf, and change. 2. Next, you have to create the View. To do so, add the following code: Ext.define(‘KitchenSink.view.d3.TreeMap’, { extend: ‘Ext.panel.Panel’, xtype: ‘d3-view-treemap’, controller: ‘treemap’,   requires: [ ‘KitchenSink.view.d3.StocksViewModel’, ‘Ext.d3.hierarchy.TreeMap’ ],   width: 930, height: 600,   profiles: { classic: { width: 930, companyPanelWidth: 215 }, neptune: { width: 930, companyPanelWidth: 215 }, graphite: { width: 1000, companyPanelWidth: 300 }, ‘classic-material’: { width: 1000, companyPanelWidth: 300 } },   layout: ‘border’,   viewModel: { type: ‘stocks’ },   items: [ { xtype: ‘treepanel’, region: ‘west’, title: ‘Companies’, split: true, splitterResize: false, collapsible: true, minWidth: 100, width: 215, useArrows: true, displayField: ‘name’, rootVisible: false, bind: { store: ‘{store}’, selection: ‘{selection}’, focused: ‘{selection}’ }, tbar: { xtype: ‘segmentedbutton’, width: ‘100%’, items: [ { text: ‘Market Cap’, pressed: true }, { text: ‘Uniform’ } ], listeners: { toggle: ‘onNodeValueToggle’ } } }, { xtype: ‘panel’, region: ‘center’, layout: ‘fit’, items: { xtype: ‘d3-treemap’, reference: ‘treemap’, rootVisible: false, interactions: { type: ‘panzoom’, zoom: { doubleTap: false } }, bind: { store: ‘{store}’, selection: ‘{selection}’ }, nodeValue: ‘cap’, noParentValue: true, scaleLabels: true, colorAxis: { scale: { type: ‘linear’, domain: [-5, 0, 5], range: [‘#E45649’, ‘#ECECEC’, ‘#50A14F’] }, field: ‘change’, processor: function(axis, scale, node, field) { var record = node.data;   return record.isLeaf() ? scale(record.get(field)) : ‘#ececec’; } } } } ] }); 3. Once you are don there, you have to create the View Model: Ext.define(‘KitchenSink.view.d3.StocksViewModel’, { extend: ‘Ext.app.ViewModel’,   requires: [ ‘KitchenSink.model.Tree’, ‘Ext.data.TreeStore’ ],   alias: ‘viewmodel.stocks’,   stores: { store: { type: ‘tree’, model: ‘KitchenSink.model.Stock’, autoLoad: true } },   data: […]

A well-built admin dashboard can significantly increase the productivity of your business. With Sencha Ext JS, you can create responsive admin dashboards easily, allowing your company to discover valuable insights into your data at a glance. The benefits are clear, with a better understanding of your data, you can make more timely and informed business decisions. In this post, you will find all the details you need to get started on your admin dashboard. What is Sencha Ext JS? Sencha Ext JS is a very powerful JavaScript library. It excels in allowing you to quickly create feature-rich web applications. To help you do this, it includes over 140 UI components, including the D3 adapter, grids, and panels. More importantly, Sencha Ext JS supports cross-platform functionality so you can use it to build web apps for any modern device, like desktop PCs, laptops, and smartphones. How to Build a Responsive Admin Dashboard with Sencha Because it supports the MVC architecture, creating admin dashboards is pretty easy with Sencha Ext JS.  Let’s explore the possibilities, starting with this example: To build the dashboard shown above, you have to follow these steps: Create the Model 1. Create a new directory, called the model. Go inside the folder. Then create the email directory. Inside the new folder, create an Email.js file and add these codes: Ext.define(‘Admin.model.email.Email’, { extend: ‘Admin.model.Base’,   fields: [ { type: ‘int’, name: ‘id’ }, { name: ‘read’ }, { type: ‘string’, name: ‘title’ }, { name: ‘user_id’ }, { type: ‘string’, name: ‘contents’ }, { type: ‘string’, name: ‘from’ }, { name: ‘has_attachments’ }, { name: ‘attachments’ }, { name: ‘received_on’, type: ‘date’ }, { name: ‘favorite’ } ] }); Here, you are adding various fields, including id, title, and content. 2. Next, create a Friend.js file and add this code: Ext.define(‘Admin.model.email.Friend’, { extend: ‘Admin.model.Base’,   fields: [ { type: ‘int’, name: ‘id’ }, { type: ‘string’, name: ‘name’ }, { type: ‘string’, name: ‘thumbnail’ }, { type: ‘boolean’, name: ‘online’ } ] }); 3. When you are done, go back to the model folder and create the faq directory. Inside the new folder, create your Category.js file and add the following: Ext.define(‘Admin.model.faq.Category’, { extend: ‘Admin.model.Base’,   fields: [ { type: ‘string’, name: ‘name’ } ],   hasMany: { name: ‘questions’, model: ‘faq.Question’ } }); 4. Create Question.js file and add these codes: Ext.define(‘Admin.model.faq.Question’, { extend: ‘Admin.model.Base’,   fields: [ { type: ‘string’, name: ‘name’ } ] }); 5. After that, go back to the model folder. Then create the search directory. Inside the new folder, create your Attachment.js file and add this code: Ext.define(‘Admin.model.search.Attachment’, { extend: ‘Admin.model.Base’,   fields: [ { type: ‘int’, name: ‘id’ }, { type: ‘string’, name: ‘url’ }, { type: ‘string’, name: ‘title’ } ] }); 6. Ok, now create your Result.js file and add this code: Ext.define(‘Admin.model.search.Result’, { extend: ‘Admin.model.Base’,   fields: [ { type: ‘int’, name: ‘id’ }, { type: ‘string’, name: ‘title’ }, { type: ‘string’, name: ‘thumbnail’ }, { type: ‘string’, name: ‘url’ }, { type: ‘string’, name: ‘content’ } ],   hasMany: { name: ‘attachments’, model: ‘search.Attachment’ } }); 7. We are almost there. Create your User.js file and add these lines: Ext.define(‘Admin.model.search.User’, { extend: ‘Admin.model.Base’,   fields: [ { type: ‘int’, name: ‘identifier’ }, { type: ‘string’, name: ‘fullname’ […]

  Images are everywhere. Whether on the internet, our phones, or even in our day-to-day lives, most people amass huge volumes of data in the form of digital images of varying quality. Any library of digital images, personal or public, is likely to contain low-quality or blurry images. Unfortunately, however, these can problematic to view or, or worse, to analyze. In particularly bad cases, you need to zoom to better see or analyze parts of an image, but even then the image may lack the detail or resolution to do this effectively.  For this reason, having an automated and intelligent tool that can upscale and create high-quality, high-resolution images is remarkably useful. Enter DeepAI’s Super Resolution API. It uses machine learning (ML) and AI techniques to upscale images into higher resolutions without compromising their quality or losing their content. DeepAI’s Super Resolution AI can generate an upscaled version of an image within seconds. If this sounds useful, let’s take a look at how you can quickly build a Sencha Ext JS app that upscales any image you input by calling the DeepAI Super Resolution API. Once we are done, your final app will look like this: What is the DeepAI Super Resolution API? To understand the DeepAI Super Resolution API, once you have your prerequisites installed type the following at the command prompt: curl -F ‘image=https://upload.wikimedia.org/wikipedia/commons/thumb/c/c4/Tulipa_orphanidea_060506.jpg/260px-Tulipa_orphanidea_060506.jpg’ -H ‘api-key:quickstart-QUdJIGlzIGNvbWluZy4uLi4K’ https://api.deepai.org/api/torch-srgan This command accepts the URL of an input image and submits an API key to generate a new version of the image with a higher resolution and better quality. If you get it right, the response from the API looks like this: {   “id”: “025c64f7-a610-4ee5-aa33-b215d703c595”,   “output_url”: “https://api.deepai.org/job-view-file/025c64f7-a610-4ee5-aa33-b215d703c595/outputs/output.jpg”} As you can see, it returns a response that is a JSON object with the URL of the upscaled image. Better yet, not only is the input image enlarged 4 times, it has also has improved in quality. One thing you need to be aware of though, is that with DeepAI APIs, you only get a quick start API key with a set number of queries. Once your trial expires, you have to get your own API key. How can I upscaling images using AI in Javascript? If you think this is useful, here are 4 easy steps that you can follow to build your own application in a matter of minutes. Step 1: Create an Ext JS Minimal Desktop Application To develop an app to upscale any image you input, first create a blank minimal desktop application in EXT JS. If you are new to Sencha’s Ext JS framework, you can follow this tutorial to create a minimal desktop application from the command prompt. I have chosen to create all my files in a folder called super-res and I call the app superRes. Step 2: Include the DeepAI Package To include the DeepAI package, open the index.html file located in the main directory and add the following line anywhere in the header of the HTML: Step 3: Create the Main View In the main view, we have the following: A text field for the URL of the input image An area to display the input image A button labelled ‘Upscale Image’ A text field to display the URL of the output upscaled image An area to display the output image To get started, […]

As a developer, we understand how hard is to test all possible problems of an application, and always if you make an important change on your project you probably would be afraid if the application will be broken after merging your code to production, right? Not counting a lot of time you have to spend with many of tests, since basic and more complex to make sure that your new version will be running perfectly. To solve this problem let’s know the great Sencha WebTestIt what is a great and powerful tool and totally free to use on your project and have great productivity saving time and avoiding big problems like bugs blowing up for the user. How can I test Javascript Applications automatically? As a first step, download and install the Sencha WebTestIt here. Follow the steps and you will receive an email with the link to download the product. Extract the file and install it on your machine simply following the very easy steps that the installer will show you. All steps to install are here. Once you have Sencha WebTestIt installed, open it and click on New Project button and then give it a name like my-first-test. Finally, you can define the language that you will create your tests. For this post, we will select Java. After that, click on the button Save to create the new project and start working on it. You can learn more about the UI of the product here. It will explain each tab and what it is used for. How easy is to to start a Simple Test Project? For this project, we will be testing the Ext JS Admin Dashboard but running it locally and we will be focused on the Email page, the List component specifically that we created easily based on templates on this post. You can also test any Web Application or Web Site independently of the technology or framework used to create it. How to create Objects with Sencha WebTestIt Click on New Page Object File to store the element selectors to get the component references to access on our test and give it the name EmailListPo.java. How can I simulate User Actions on a Test? Here we are going to create the actions that our automated test will run against our Email List. Let’s create an action to simulate the user clicking on the icon heart to remove the email from favorites and check if the cell on the grid was changed based on the cell red mark that Ext JS uses to identify if the value was changed on that cell then we will understand that the record was updated locally as a  non-favorite message. Follow these steps: Select the EmailListPo file from your project’s pageobjects folder. On tab Elements click on Add element. Give it the name iconHeart On selector, type .x-grid-cell-inner .fa-heart referring to the heart icon in the grid cell Click on close to save the selector Drag iconHeart  into the Code tab after getTitle method to it create a new method with our new element. It will open a context menu, click on Do then Click on element option The UI will create automatically the method to simulate the click on the heart. Save the file. How can I write a Javascript test? Let’s create […]

The D3 package in Sencha ExtJS enables you to create interactive data visualization easily. By utilizing it, you can present the data more effectively in your web application. As a result, individuals and companies can easily uncover valuable insights. In this post, you will know the details of creating powerful data visualizations using two components: D3 Pack and D3 Hierarchy. What is D3? D3 (Data Driven Components) is an open-source JavaScript library. It enables you to create interactive data visualizations in web browsers using SVG, HTML5, and CSS. D3 allows you to bind any kind of data to the Document Object Model (DOM) and make the data interactive by applying data-driven transformation effectively. It supports a plethora of APIs. As a result, you can create and implement beautiful data visualization to your web application easily. How can I build Interactive Data Visualization with D3 and Ext JS? The Sencha D3 package is completely integrated with Ext JS. So, you can build interactive data visualization conveniently. Also, you can implement it with your Ext JS web application quickly. There are various component types in the D3 package. But in this tutorial, we will focus on two types of components: D3 Pack and D3 Words. D3 Pack As the name suggests, this component utilizes D3’s pack layout. It enables you to visualize hierarchical data as an enclosure diagram. Here is an example: To create the visualization shown above, you have to follow these steps: 1. First, you have to create the View using these codes: Ext.define(‘KitchenSink.view.d3.Pack’, { extend: ‘Ext.panel.Panel’, xtype: ‘d3-view-pack’, controller: ‘pack’,   requires: [ ‘KitchenSink.view.d3.TreeViewModel’, ‘Ext.d3.hierarchy.Pack’ ],   width: 930, height: 900, layout: ‘fit’,   viewModel: { type: ‘tree’ },   items: { xtype: ‘d3-pack’, padding: 20, bind: { store: ‘{store}’ }, tooltip: { renderer: ‘onTooltip’ } }   }); Here, you are defining the height and width of the visualization. Also, you are binding the data to store. 2. Next, you have to create the Controller. Simply add these codes:Ext.define(‘KitchenSink.view.d3.PackController’, { extend: ‘Ext.app.ViewController’, alias: ‘controller.pack’,   requires: [ ‘Ext.util.Format’ ],   onTooltip: function (component, tooltip, node, element, event) { var size = node.get(‘size’), n = node.childNodes.length;   if (size) { tooltip.setHtml(Ext.util.Format.fileSize(size)); } else { tooltip.setHtml(n + ‘ file’ + (n === 1 ? ” : ‘s’) + ‘ inside.’); } }   }); Here, you are defining the function for specifying the size of the nodes. You can find the demo here. D3 Words With the D3 Words component, you can visualize the frequently used words through a customized word cloud where a parent circles contain the child ones. Here is an example: The visualization reveals the most used words of a novel, called “Treasure Island.” You can create it quickly by simply following these steps: 1. Create the View with these codes: Ext.define(‘KitchenSink.view.d3.Words’, { extend: ‘Ext.panel.Panel’, xtype: ‘d3-view-words’, controller: ‘words’,   requires: [ ‘KitchenSink.view.d3.TreeViewModel’, ‘Ext.d3.hierarchy.Pack’ ],   width: 930, height: 900,   layout: ‘fit’, title: ‘”Treasure Island”‘s most used words’,   items: { xtype: ‘d3-pack’, reference: ‘pack’, padding: 0, nodeText: ‘word’, nodeValue: function (node) { // Instead of using `nodeValue: ‘count’` as a config, // take a qubic root of the ‘count’ to downplay // differences in the relative size of nodes. return Math.pow(node.data.count, 1/3); }, colorAxis: { // For this example, we want all nodes to have […]

The Sencha Team is excited to announce the release of our Sencha Ext JS 7.4, the latest milestone version update for our best-in-class JavaScript framework.  This release includes many highly requested features and upgrades including 4 new rich Grid features, and addresses 15 customer reported tickets for both Classic and Modern Toolkit. What’s New in Ext JS 7.4   Multi-level Grouping The MultiGrouping grid feature allows the Grid Panel to display the Store data that is grouped by multiple groupers. Here is an example of what it looks like:   Classic Toolkit Feature   Modern Toolkit Plugin Grouping Panel This plugin allows your end-users to drag and drop grid columns to the grouping panel section that is visible above the grid panel. The user can move the dimensions in the grouping panel in which order he/she wants. Classic Toolkit Plugin Summaries for groups and total Quickly define functions for aggregation such as sum, min, max count and more per column. Grouping Summary in Classic Toolkit. Grouping Summary in Modern Toolkit. Filterbar This classic and modern toolkit plugin will add a docked bar under the grid headers and depending on the grid columns configuration, filter fields will be added. Filterbar in Classic Toolkit. Filterbar in Modern Toolkit. New KitchenSink examples Ext JS 7.4 will bring new Grid examples in KitchenSink to help show how to configure and use the new 4 Grid features. Modern – Multi level grouping and Summaries Modern – Grid Filterbar Classic – Multi level grouping and Summaries Classic – Grid Filterbar   Bug Fixes With 15 bug fixes, this release brings a solid set of improvements that the Ext JS users have been waiting for. Please see the Ext JS 7.4 release notes ExtGen and Sencha Cmd ExtGen 7.4 and Sencha Cmd have been updated to support Ext JS 7.4. With Open Tooling, @sencha/[email protected], you can unlock many build features of Sencha Cmd by passing environment options through your npm scripts. These options are then sent to Sencha Cmd via Sencha’s custom webpack plugin. You now can enable the dynamic package loader from your scripts by passing an environment variable through the webpack plugin: –env.cmdopts=–uses. You may recognize this is the same flag used by Sencha Cmd CLI. Sencha’s custom webpack plugin exposes the variable cmdopts to your npm scripts. Within the webpack plugin, this variable is parsed into an array of build options for Sencha Cmd. Building for testing is also available by Cmd Opts. Explore the Building npm based Applications docs for more information.   What’s Next? The engineering team is pacing well on regular quarterly releases and we are committed to delivering new features, quality, performance and usability enhancements and improvements all along.  The work on supporting Ext JS 7.4 in Sencha Architect, Sencha Themer, Sencha Upgrade Advisor and Sencha Bridges (ExtReact, ExtAngular and ExtWebComponents) is in full swing*! Our goal is to provide you with continual support through quality and performance enhancements. If you have any feedback or questions, drop us a note here or get in touch.   *Features are not committed until completed and GA released. Try Ext JS 7.4

A much-used term, Data Manipulation is the process of querying modifying data. It refers to the technique of adjusting data to make it more organized and easier to read. While many consider data manipulation difficult and complex, it does not need to be. With the Ext JS Grid, you can easily group, sort, and filter data using JavaScript. In this tutorial, you will find all the details. What is the Ext JS Grid? The “Grid” is one of the centerpieces of Sencha Ext JS. With it, you can easily fetch, sort, and filter a large amount of data. To make this possible, the Ext JS grid consists of two main components – an Ext Data Store full of data and a set of columns to render. How to Group Data with the Ext JS Grid Sorting Data in Multiple Columns Let’s say that you are building a flight booking web application. As a part of the app, you want your users to be able to sort multiple columns including Date, Airline, and Schedule, to help them find the best flights. Take a look at the illustration below: To implement the sort functionality to your web app using Ext JS, simply add the following code: Ext.define(‘MyApp.view.Main’, { extend: ‘Ext.grid.Grid’, title: ‘Reykjavik Flight Departures’,   multiColumnSort: true,   store: {       // Two property sort via store configuration     sorters: [{         property: ‘airline’     }, {         property: ‘destination’     }],       type: ‘store’,     autoLoad: true,     fields: [{name: ‘date’,type: ‘date’,dateFormat: ‘j. M’}],     proxy: {type: ‘ajax’,url: ‘departures.json’,reader: {rootProperty: ‘results’}} },   columns: [{     xtype: ‘datecolumn’,     text: ‘Date’,     dataIndex: ‘date’,     format: ‘M j’,     width: 60 }, {     xtype: ‘column’, // This is the default column xtype     text: ‘Airline’,     dataIndex: ‘airline’ }, {     text: ‘To’,     dataIndex: ‘to’ }, {     text: ‘Scheduled’,     dataIndex: ‘plannedDeparture’,     align: ‘center’ }, {     text: ‘Status’,     dataIndex: ‘realDeparture’,     flex: 1 }],   }); Ext.application({ name: ‘MyApp’, mainView: ‘MyApp.view.Main’ }); Once you understand the basics, you can experiment with the code using Sencha Fiddle. How can I sort Data in a Single Column? Now that you have the multiple column sort down pat, let’s look at another use case. Say that you want your users to find their flights by clicking the SORT ON DESTINATION text and sort the destination data into just a single column: To do it, you have to use the following code: Ext.define(‘MyApp.view.Main’, { extend: ‘Ext.grid.Grid’, title: ‘Reykjavik Flight Departures’, items: [{     docked: ‘top’,     xtype: ‘toolbar’,     items: [{         text: ‘Sort on destination’,         handler: function(button){             // Sort under program control             button.up(‘grid’).getStore().sort(‘to’);         }     }] }], store: {       // Sort via store configuration     sorters: [{         property: ‘airline’     }],       type: ‘store’,     autoLoad: true,     fields: [{name: ‘date’,type: ‘date’,dateFormat: ‘j. M’}],     proxy: {type: ‘ajax’,url: ‘departures.json’,reader: {rootProperty: ‘results’}} },   columns: [{     xtype: ‘datecolumn’,     text: ‘Date’,     dataIndex: ‘date’,     format: ‘M j’,     width: 60 }, {     xtype: ‘column’, // This is the default column xtype     text: ‘Airline’,     dataIndex: ‘airline’ }, {     text: ‘To’,     dataIndex: ‘to’ }, {     text: ‘Scheduled’,     dataIndex: ‘plannedDeparture’,     align: ‘center’ […]

  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 […]