Dimensional Data

The login functionality of an application is the first thing most people see when they go to use a product. It is the most essential, inevitable, and foundational part of any software system out there. A developer who is working on an application often looks for quick and easy ways in which they can build the login part of an application, and focus most of the energy on implementing the actual business logic. In this blog post, we’ll see a quick overview of how we can rapidly build a login system for your JavaScript dashboards using Sencha Ext JS. For a more in-depth version of this guide see the documentation. How can I generate an app using Sencha CMD? Sencha allows you to generate an application boilerplate using the Sencha CMD. Run the following command in your terminal or CLI to generate a LoginApp boilerplate code. sencha -sdk /path/to/ExtSDK generate app LoginApp ./LoginApp Once you have generated the app, navigate to {appRoot}/app.js and remove the mainView config from the application config. We are doing this because we want to perform some validations and evaluations before deciding the initial view when the application loads. For example, there is no need to instantiate the Main view if the user is logged out of the system. At this point, when we have removed the mainView config, the browser shows a blank page upon refreshing the page. This is because the app does not know which view to instantiate yet. We handle this by adding plugins: ‘viewport’ line to {appRoot}/app/view/main/Main.js file. How can I create the login view components? After handling all the configurations and setup prerequisites, navigate to app/view folder inside the LoginApp folder and create a new directory called login. Inside this new directory, create two files Login.js and LoginController.js. Your directory structure should look somewhat like this now. How to generate the login window in my application? To create the login window, open the {appRoot}/app/view/login/Login.js file and define the Login class as follows. Ext.define(‘LoginApp.view.login.Login’, { extend: ‘Ext.window.Window’, xtype: ‘login’ }); In the above code, we essentially extended the Ext.window.Window class to create our own Login class to be further in the application. Let’s add some basic dependencies and properties that our Login class should rely on. requires: [ ‘LoginApp.view.login.LoginController’, ‘Ext.form.Panel’ ], controller: ‘login’, bodyPadding: 10, title: ‘Login Window’, closable: false, autoShow: true Now comes the actual UI part. We need to create a form containing at least three entities in total; username text field, password text field, and login button itself. items: { xtype: ‘form’, reference: ‘form’, items: [{ xtype: ‘textfield’, name: ‘username’, fieldLabel: ‘Username’, allowBlank: false }, { xtype: ‘textfield’, name: ‘password’, inputType: ‘password’, fieldLabel: ‘Password’, allowBlank: false }, { xtype: ‘displayfield’, hideEmptyLabel: false, value: ‘Enter any non-blank password’ }], buttons: [{ text: ‘Login’, formBind: true, listeners: { click: ‘onLoginClick’ } }] } All in all, the final code for in Login.js file should look like below. Ext.define(‘LoginApp.view.login.Login’, { extend: ‘Ext.window.Window’, xtype: ‘login’, requires: [ ‘LoginApp.view.login.LoginController’, ‘Ext.form.Panel’ ], controller: ‘login’, bodyPadding: 10, title: ‘Login Window’, closable: false, autoShow: true, items: { xtype: ‘form’, reference: ‘form’, items: [{ xtype: ‘textfield’, name: ‘username’, fieldLabel: ‘Username’, allowBlank: false }, { xtype: ‘textfield’, name: ‘password’, inputType: ‘password’, fieldLabel: ‘Password’, allowBlank: false }, { xtype: ‘displayfield’, hideEmptyLabel: false, value: ‘Enter any non-blank password’ }], buttons: [{ […]

As businesses and individuals move increasingly online, they accumulate large volumes of data in the form of digital images. If you have found yourself in this position, then you are definitely aware that to efficiently organize, analyze, and edit your images takes plenty of time. It takes so much time, in fact, that often the only good solution is for you to develop your own high-quality software to ease the ever-increasing load. Thankfully, there are tools available to you that speed things up, and they do it using AI and machine learning. They perceive and recognize objects within your images and automatically label them appropriately. In addition to being very useful for organizing your directories full of digital images, they also help you search for and discover the important information contained within your images. DeepAI.org has created a number of these machine learning and computer vision technology tools. DenseCap API in particular scans and adds captions to your images by identifying objects they contain. Most importantly, DenseCap API is fast. It takes seconds to scan and caption even your largest images. If building your own AI and machine learning apps interests you, then read on to find out how you can quickly build a Sencha Ext JS app that automatically labels objects in an image. Let’s get started building an app that looks like this: What is the DenseCap API by DeepAI? So what does the DenseCap API do? Simply put, the DenseCap API takes your image input and returns a JSON object that contains information about each item or object it detects within the image. For object it identifies it returns the following three attributes: Object label Confidence value of the object Coordinates/bounding box of the object within the image. The great thing about DeepAI is that the API key is provided for free. You can use this key to try out their interface and once you run out of a fixed number of queries, you can get your own key. To see it in action for yourself, first, open the command line in Sencha Cmd and type the following: curl -F ‘image=https://images.pexels.com/photos/4198322/pexels-photo-4198322.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260’ -H ‘api-key:42638949-3cf9-486b-a063-eaf5f4df0634’ https://api.deepai.org/api/densecap Pasted below is a part of the JSON text that the API returns. The API actually identifies more objects for this image, but we are only showing two of them below to help you gain an understanding of how the API works:  {   “id”: “26f9959b-2001-4f98-a648-99c6f8856190”,     “output”: {         “captions”: [             {                 “caption”: “a white plate with a white frosting”,                 “bounding_box”: [                     420,                     189,                     578,                     589                 ],                 “confidence”: 0.9974018335342407             },             {                 “caption”: “a small orange bowl”,                 “bounding_box”: [         […]

At Sencha, we are proud of our solutions. More importantly, however, we are proud of our customers,  who are our most valuable assets. That’s why today we would like to share some of our greatest customer success stories. Read on for some of our favorite case studies explaining how a few well-known organizations have harnessed the power of  Sencha development tools. Customer Success Stories We have seen and documented plenty of customer success stories at Sencha, but, that said, there are always a few that stand out. These are the case studies that we would like to share with you today — studies that demonstrate the power of our platforms and what you can achieve with our products in the real world. In these examples, we show you how Sencha products have proven themselves as scalable, affordable, and effective across a variety of industries from scientific research and robotics to vending machine manufacture. Whether you are a market leader or just starting out, read on to find out how developing with Sencha makes good sense. Ticketmaster Manages Event Ticket Sales Ticketmaster’s case study shows how Sencha ExtReact helped this international event ticket seller develop a platform that manages ticket sales around the world. From the biggest events in sport to the theatre and concerts you would love to see, Ticketmaster is probably where you turn to make it happen. They share how easy it was to implement ExtReact to streamline and improve their grid. In addition, they explain how efficiently they were able to work and manipulate their data with ExtReact without having to create new components from scratch. Finally, find out how we helped them take their new components and easily define and apply their corporate style. Read full case study. University At Buffalo Improves Scientific Research SUNY Buffalo explains their decision to use Ext JS components to develop their new bioinformatics and life sciences research platform instead of creating their own. Ext JS helped them create robust, highly-perfomant end-user interfaces. Their REDFly web app is built with Ext JS and is the perfect example of the incredible efficiency and speed you can achieve developing with Ext JS components. Read full case study. Kaseware Combats Cyber Crime Kaseware’s case study shows how they used Ext JS to enforce security on their codebase. In a comparison of Ext JS widgets with Angular widgets, Kaseware discovered you can’t always be certain Angular widgets are maintainable and secure. Ext JS gave them secure and configurable components for their application, without them having to resort to a third-party library or framework to achieve specific features — it’s all there in Ext JS. As if security wasn’t enough, Ext JS customizable of components allowed Kaseware the freedom and flexibility to style their components exactly like they wanted. Read full case study. Las Cumbres Robotic Advancements Las Cumbres’ case study describes how Sencha GTX enabled them to create a sophisticated control interface. With a highly customizable and intelligent interface designed using Sencha GXT, LCO’s operations team controls and monitors thousands of telemetric data points and telescope controls. The high-level abstraction attracted them to Sencha GTX for the availability of its components. LCO took advantage of the native buttons, tabs, and trees in Sencha GTX to create a great user interface to visualize and monitor a […]

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