Dimensional Data

There are many popular JavaScript frameworks that offer a component-based approach to building web apps. However, most of these do not include any pre-built components. JavaScript developers are faced with the choice of either building these components from scratch or getting them from the community. You can develop web applications faster by using ExtWebComponents. ExtWebComponents includes 140+ pre-built and pre-tested UI components. ExtWebComponents provides all the components a developer needs to build data-intensive web apps. You get components that interact seamlessly, and are professionally built, tested and maintained. How can I build responsive designs with WebComponents? Developers can use the built-in Material design inspired theme, eliminating the need to construct custom styles and making it easy to create a fresh, modern user experience with minimal effort. Themes can also be easily modified or extended within Sencha Themer, enabling both developers and designers to create compelling themes without writing a single line of code. Fonts, colors, and padding can all be modified with ease to make components fit the motif of the application. Adaptive and responsive design enables teams to build immersive user engagement by using layouts and adaptive design features. A flexible layout manager helps to organize the display of data and content across multiple browsers, devices, and screen sizes. It helps developers to control the display of components, even for the most complex user interfaces. What are some of the features available in ExtWebComponents? Grid — Handle millions of records and provides built-in functionality such as sorting and grouping. Pivot Grid — Add powerful analytics functionality to React applications. Exporter — Export data from the standard grid or Pivot Grid to a wide variety of common formats. Layouts — Ensures the proper sizing and positioning of all components with the powerful and flexible layout system. Charts — Visually represent data with a broad range of dynamic and static charts including line, bar, and pie charts. D3 Adapter — Add sophisticated Data-Driven Documents package (D3) visualizations such as heatmaps, treemaps, sunbursts and more to your web applications. How can I integrate WebComponents with data? The robust data package included in ExtWebComponents decouples the UI components from the data layer. The data package: Allows client-side collections of data using highly functional models that offer features such as sorting and filtering. Is protocol agnostic, and can consume data from any back-end source. Comes with session management capabilities that allow several client-side operations, minimizing round-trips to the server. How can I see ExtWebComponents and GXT in Action? The following video covers using ExtWebComponents in GXT templates. It will start by showing how to quickly import ExtWebComponents into your project. Then show you how to construct a web component with an Ext JS web component. Then show you how to import your custom element into your GXT application. How can I build my own WebComponents? A web component can be considered a custom html element, like  which is constructed below. Create a custom component with 3 easy steps. Start by declaring the reusable class element with the web component construction. Then register the class for which will be used for the components construction. Once you’ve constructed and registered the component you can declare it anywhere with // 1. Define the reusable component class MyViewElement extends HTMLElement { constructor() { super(); // The components html template […]

If you’re an online service or a product, knowledge about your user base is one of the first and most important mechanisms to maintain customer retention by designing modules in accordance with customer preferences. Essentially, it will help your service generate hits and eventually boost the market value of your product or service. GraphQL is an open-source data query and manipulation language for APIs, and a runtime for fulfilling queries with existing data. It provides a complete and understandable description of the data in your API and gives clients the power to ask for exactly what they need and nothing more. GraphQL makes it easier to evolve APIs over time and enables powerful developer tools. In this blog post, we’ll look at how we can use the power of GraphQL to seamlessly create an end-to-end user information base with Sencha Ext JS. How can I quickly set up a GraphQL HTTP server? If you do not currently have an Apollo Server for GraphQL running on NodeJS you can follow this tutorial to set one up. It mainly involves installing the dependencies like this: npm install apollo-server graphql To set up the server-side responders for your GraphQL interface, you just need to define the schema that interacts with the endpoint logic. You can design the User schema as follows. const { ApolloServer, gql } = require(‘apollo-server’); const typeDefs = gql` type User { firstName: String lastName: String username: String email: String } type Query { users: [User] } `; Once you have defined the user schema, you now need to configure the relevant resolvers; user resolver in our case. Resolvers are used to define the technique for fetching the types defined in the schema. const resolvers = { Query: { users: () => users, }, }; Now, we need to start the server so that it can be used by our Sencha Ext JS client (that we will create in the next section). const server = new ApolloServer({ typeDefs, resolvers }); server.listen().then(({ url }) => { console.log(`Server ready at ${url}`); }); How can I create a GraphQL schema in Ext JS for the user information base? We now have our server up and running. Next up is the GraphQL schema definition in Sencha Ext JS. Define your schema and query as follows. type Query { getUsers( limit: Int offset: Int orderBy: String filter: String ): Users user(id: Int!): User } type User { username: String firstName: String lastName: String email: String } type Users { count: Int users: [User]! } What is an easy way to integrate GraphQL HTTP server with Sencha Ext JS client? Before initializing the Sencha application and writing a script to interact with the server using GraphQL patterns, the following dependencies must be installed. npm install –save @apollo/client npm install –save graphql Once you have installed the required dependencies, import them into the application to use them as follows. require(‘graphql’); GraphQLApp.xApolloClient = require(‘@apollo/client/core’); While launching the Sencha application, you need to create a singleton instance of Apollo Client to manage API calls and requests to the server using GraphQL patterns. Ext.define(‘GraphQLApp.GraphQL’, { alternateClassName: [‘GraphQL’], singleton: true, client: null, initClient(baseUrl) { this.client = new GraphQLApp.xApolloClient.ApolloClient({ cache: new GraphQLApp.xApolloClient.InMemoryCache({}), uri: baseUrl, defaultOptions: { query: { fetchPolicy: ‘network-only’, errorPolicy: ‘all’, }, mutate: { errorPolicy: ‘all’, }, }, }); }, }); Finally, send […]

Due to JavaScript’s low barrier of entry, it is the most popular programming language for building web applications. On that note, there are many remarkable JavaScript frameworks built to make your app development process easier. The Sencha Ext JS JavaScript framework is one of the most powerful and can turbocharge your development.  Sencha Ext JS is also the most comprehensive JavaScript framework for building data-intensive, cross-platform web and mobile applications for any modern device. It includes 140+ pre-integrated and tested high-performance UI components.  That said, considering the numerous Javascript use cases, it is generally an interpreted language. And, in today’s world, where time is of the essence, you cannot overstate the need for seamless and fast applications. To this end, Sencha Ext JS supports Rest APIs. With this framework, you can easily access APIs to turbocharge your web apps. Head over and check out the Sencha Ext JS documentation for making a REST API call. Let’s look at 20 powerful APIs that can boost your Javascript apps.  Ipstack The ipstack API is a powerful, real-time IP to geolocation API capable of looking up accurate location data and assessing security threats originating from risky IP addresses. It delivers results within milliseconds in JSON or XML format. With this API, you can locate website visitors at first glance and adjust your user experience and application accordingly. Userstack Userstack offers a real-time, easy-to-use REST API interface capable of parsing User-Agent strings to accurately detect device, browser and operating system information. Implementing the JSON/XML API in your frontend or backend system will give you all the tools you need to take control of your website’s or application’s user experience and the customer journey that goes with it. https://userstack.com/ Positionstack The positionstack API was built to offer a straightforward and reliable solution for forward and reverse geocoding, covering more than 2 billion places and addresses worldwide. Its results can be delivered in JSON, XML or geocode-specific GeoJSON. Also, Average API response times range between 10ms and 100ms depending on the size of your request. https://positionstack.com/ Languagelayer Languagelayer is a simple and powerful REST API built to efficiently match text of any length to its corresponding language, cross-referencing single words, expressions and grammatical constructions, as well as taking into account any existing accents, dialects and other linguistic deviations. https://languagelayer.com/ ipapi  ipapi provides an easy-to-use API interface allowing customers to look up various pieces of information IPv4 and IPv6 addresses are associated with. For each IP address processed, the API returns more than 45 unique data points, such as location data, connection data, ISP information, time zone, currency and security assessment data. This API is REST-based, lookup requests are made using straightforward HTTP GET URLs and results are returned in lightweight JSON or XML format within a matter of a few milliseconds. https://ipapi.com/ Mailboxlayer  Mailboxlayer offers a simple REST-based JSON API enabling you to thoroughly check and verify email addresses right at the point of entry into your system. In addition to checking the syntax, the actual existence of an email address using MX-Records and the Simple Mail Transfer Protocol (SMTP), and detecting whether or not the requested mailbox is configured to catch all incoming mail traffic, the mailboxlayer API is linked to a number of regularly updated databases containing all available email providers, which simplifies the […]

Whether you are an individual or a business, organizing your personal or professional time with effective scheduling is an important part of being efficient. Most people organize their days using a calendar of some sort. If you are keeping track of your next Zoom meeting, tracking your deadlines, or trying to remember a co-worker’s birthday, calendars keep you on track. They help you avoid the unpleasant surprise and embarrassment of missed appointments. However, to be truly useful, a calendar also has to be available. That means having access to your scheduling information or personal calendar on all of your devices, not just your laptop or company desktop. This demand for always-there calendar information has spurred the development of a number of complex web calendar components. While it may be difficult to choose and implement the one that is right for you there is an easy solution — the Ext JS calendar component. The Ext JS calendar has all the high-end scheduling features you will ever need. These include creating or moving events with drag and drop, easy Google Calendar account connection, and much more!  With Ext JS, you can easily build and drop the calendar perfect for you straight to your app. Today we are going to implement a powerful calendar in a few steps that cover all the important details and use best practices. How can I get Getting Started with Sencha CMD? The first step, as always begins, in 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 Calendar ./calendar-extjs /Users/fabio/sencha-sdks/ext-7.4.0/ is where your Ext JS folder is. Calendar is the name of our application and the namespace for our classes. ./calendar-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 that 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: 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 […]

Powerful Data Visualization Using JavaScript Carousels And NASA APIs Copy – Sencha.com Sencha Home / Blog / Ext JS / Powerful Data Visualization Using JavaScript Carousels And NASA APIs Copy

Carousels are a great way to allow users to swipe through multiple full-screen pages. A carousel shows only one of its pages at a time but allows you to browse through other pages using a swipe gesture. You can think of a carousel as a single active item, with the rest of the items stretching away left and right. Indicator dots visualize how many available screens are available to swipe through. In this blog post, we’ll look at how we can use NASA APIs to create beautiful JavaScript image carousels for powerful data visualization and analysis. How can I get images from NASA APIs? NASA provides a bunch of APIs to access a variety of astronomical data such as APOD, Asteroids NeoWs, DONKI, Earth, EONET, EPIC, Exoplanet, etc. To use these APIs, you need to have an access token. You can create your access token by registering onto the NASA portal with your email address and password. For demonstration activities throughout this tutorial, we will use the following API calls to NASA to get the images for our Sencha carousel. APOD (current day) APOD (specific day) Earth imagery APOD API (current day) let request = new XMLHttpRequest(); request.open(“GET”, “https://api.nasa.gov/planetary/apod?api_key=”); request.send(); request.onload = () => { if (request.status === 200) { // by default the response comes in the string format, we need to parse the data into JSON console.log(JSON.parse(request.response)); } else { console.log(`error ${request.status} ${request.statusText}`); } }; In the code above, we are calling NASA’s planetary APOD API with no optional query parameters. It means that it will return the astronomical picture of the day for the current day. Notice that the api_key query parameter specifies a placeholder in the above code snippet which should be replaced with your personal API access token before making the API call. Earth Imagery API let request = new XMLHttpRequest(); request.open(“GET”, “https://api.nasa.gov/planetary/earth/imagery?lon=100.75&lat=1.5&date=2014-02-01&api_key=”); request.send(); request.onload = () => { if (request.status === 200) { // by default the response comes in the string format, we need to parse the data into JSON console.log(JSON.parse(request.response)); } else { console.log(`error ${request.status} ${request.statusText}`); } }; In the above code, we are calling NASA’s earth imagery API with a bunch of query parameters. The API will return an earth image at the specified latitude and longitude values. Notice that the api_key query parameter specifies a placeholder in the above code snippet which should be replaced with your personal API access token before making the API call. APOD API (specific day) let request = new XMLHttpRequest(); request.open(“GET”, “https://api.nasa.gov/planetary/apod?date=2020-05-05&api_key=”); request.send(); request.onload = () => { if (request.status === 200) { // by default the response comes in the string format, we need to parse the data into JSON console.log(JSON.parse(request.response)); } else { console.log(`error ${request.status} ${request.statusText}`); } };   In the above code, we are calling NASA’s planetary APOD API with the date as an optional query parameter. It means that it will return the astronomical picture of the day for the specified day. Notice that the api_key query parameter specifies a placeholder in the above code snippet which should be replaced with your personal API access token before making the API call. You can find numerous other NASA APIs at api.nasa.gov. How can I set up a simple horizontal carousel? The response of each API call we used above will either return a link […]

Turbocharge Your JavaScript Grids with Locked Columns, Infinite Scrolling, and Sparklines – Sencha.com Sencha Home / Blog / Ext JS / Turbocharge Your JavaScript Grids with Locked Columns, Infinite Scrolling, and Sparklines

AI and machine learning are becoming more and more important in the world of business every day. AI is particularly useful in helping businesses predict trends, like sales forecasts or consumer behavior. Machine learning on the other hand can help a salesforce follow up on sales calls or even predict when customers may be ready to convert. There are plenty of ways AI can help you, but it doesn’t happen on its own. Exploratory data analysis is one of the first steps in developing any machine learning or AI app. It helps data scientists gain key insights and discover trends within numbers. Trends that might not be obvious otherwise. Data visualization is also a key part of exploratory data analysis. In addition, effective data presentation can help companies develop good marketing strategies and promote long-term growth. If you are looking to improve the way your business visualizes its data, FusionCharts is an extensive library that includes 100+ charts and 2000+maps that can be easily integrated into a Javascript app. It has a wide variety of options for creating interactive charts and dashboards, which can be customized according to your data and application. If all this interests you, then read on to find out how you can integrate a FusionCharts presentation in Sencha’s ExtJS app. This blog will teach you how to create a multi-series 2D column chart and a multi-series spline chart. Both these charts are shown below:   Multi-Series Chart (left), Multi-Series Spline (right) The Data Source The data for this app is taken from Global Health Observatory resources run by the World Health Organization. It shows the life expectancy of both males and females in Pakistan, along with the combined data for both groups. The data has been retrieved from the following URL with the given parameters: https://apps.who.int/gho/athena/api/GHO/WHOSIS_000001.json?filter=COUNTRY:PAK&profile=simple With the above query, a JSON object is returned. A part of the JSON text is shown below: { … “fact”: [ { “dim”: { “PUBLISHSTATE”: “Published”, “GHO”: “Life expectancy at birth (years)”, “SEX”: “Male”, “REGION”: “Eastern Mediterranean”, “COUNTRY”: “Pakistan”, “YEAR”: “2000” }, “Value”: “59.3” }, …. } We’ll use the data in the ‘fact’ key to draw the chart or spline. What Are the Steps For Integrating FusionCharts With ExtJS Below are four easy steps that you can follow to develop an ExtJS app with FusionCharts. It is assumed that you already have ExtJS or its trial version installed on your machine. Step 1: Create an Empty ExtJS Project To begin, you need to generate a minimal desktop application using the Ext JS Modern Toolkit. If you are new to Sencha, you can create an empty project by typing at the console: ext-gen app -i Next, follow the instructions at the prompt. Make sure to name your project chart and select the moderndesktopminimal option. You can follow this tutorial to better understanding how to generate a minimal desktop app using the modern toolkit. I have chosen to place all my project files in a folder called fusioncharts-extjs-demo. Step 2: Include FusionCharts Library Open the index.html file located in the main project directory. Add these lines anywhere in the header to include FusionCharts support for rendering charts and themes. Step 3: Add the Main View In the main view, we’ll add the following: The main App heading Two buttons for selecting […]

When it comes to displaying information there are few JavaScript components as important, or as useful as the Grid. It is one of the primary tools developers use to display, and, more importantly, allow users to view, sort, and interact with large data sets. As a tool, JavaScript Grids allow developers to modernize and accelerate business processes by simplifying the way their users work with data. Grids allow us to render large sets of information without lagging or freezing. They also help considerably reduce the amount of time we spend managing our data. In this article, we will show you how to improve your JavaScript Grids with sorting, grouping, and filtering using Sencha Ext JS. Now, let’s dive in. What is Sencha Ext JS? Sencha Ext JS is a powerful framework for developing cross-platform web and mobile applications. It supports over 150 UI elements, including grids, pivot grids, and D3 adapters. It helps you to develop data-intensive apps quickly and conveniently. How can I Turbocharge my JavaScript Grids with Sorting? One of the reasons the grids are so necessary is that they allow us to determine exactly how data is viewed. With Ext JS Grids, your options are almost unlimited — you can sort your data either by configuration or under program control. You also can perform both single-column and multi-column sorting. Here is an example of single-column sorting: To create the sorting shown above, you have to follow these steps: 1. First, you have to specify the view of the app. Then extend Grid, and specify title and items. 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’);         }     }] }], 2. Next, you have to sort the data via configuration. 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’}} }, 3. Then you have to define the columns. For more information on how to do this check the source code. 4. Finally, add this code: Ext.application({ name: ‘MyApp’, mainView: ‘MyApp.view.Main’ }); Source Code: You can play with the code on Fiddle. Next, let’s look at multiple-column sorting. All you have to do to achieve this is add multiple sorters via configuration. Here is an example: Source Code: You can find the source code right here. How can I Turbocharge my JavaScript Grids with Grouping? Grids have a grouped config that allows you to conveniently group columns. Here is an example of how to make it happen: To create the grouping shown above, simply follow these steps: 1. Specify the view of the app and title. Also, extend the Grid. Ext.define(‘MyApp.view.Main’, {     extend: ‘Ext.grid.Grid’,     title: ‘Reykjavik Flight Departures’, 2. Set grouped to true. grouped: true, 3. Now, you have to specify the columns. You can find everything on the source code. 4. Next, you have to define the store. store: {         type: ‘store’,         autoLoad: true,         fields: [{name: ‘date’,type: ‘date’,dateFormat: ‘j. M’}],         proxy: {type: ‘ajax’,url: ‘departures.json’,reader: {rootProperty: ‘results’}}     }     }); 5. Then add this code: […]

Forms are a vital part of any digital product that we see today. They are a great way to interact with the users and record their input. They also play a significant role in capturing valuable user feedback as well. Due to its benefits and use cases, many application developers look for quick and easy ways to create business process forms and focus more of their energy on implementing business logic over the design. In this blog post, we’ll look at how we can make use of Sencha Ext JS and quickly create impressive process forms for our own use cases. Which types of fields are available for creating forms with Sencha Ext JS? Sencha Ext JS has an entire namespace Ext.form.field dedicated to providing form controls. It has a standard set of field types that you can use to create an end-to-end form panel. These field types include Checkbox, ComboBox, Date, Display, File, Hidden, HtmlEditor, Number, Radio, Text, TextArea, and Time. For detailed information about these fields, check out their individual documentation. How can I do validations based on field types? Client-side validations are equally important as server-side schema and data validations. They help in the identification of incorrect or insufficient information before making API calls to the server. Hence, resulting in lesser network traffic due to correct API calls. Sencha Ext JS supports two types of validations namely built-in and custom validations. Ext JS has its own set of apparent validation rules for some field types. For instance, in a Date field, if incorrect data is entered which can not be actually converted into the Date instance, Ext JS internally detects it and provides meaningful hints and error messages for the user to rectify their data. With Ext JS, it is fairly easy to change the location of the error message. The following code snippet will move the error message from the default tooltip to a piece of text under the field itself. { xtype: ‘datefield’, fieldLabel: ‘Date of Birth’, name: ‘birthDate’, msgTarget: ‘under’, // location of the error message invalidText: ‘”{0}” bad. “{1}” good.’ // custom error message text } The resulting error message will look like follows. While built-in validations are smooth, straightforward, and time-saving, they can be used every time with every field type. Some validation requirements cannot be met using these built-in validation rules. The simplest way to implement a custom validation is to use the Text Field’s regex configuration to apply validation rules and the maskRe configuration to limit which characters can be typed into the field. Following is an example of a Text Field that validates a time. { xtype: ‘textfield’, fieldLabel: ‘Last Login Time’, name: ‘loginTime’, regex: ‘/^([1-9]|1[0-9]):([0-5][0-9])(sm)$/i’, maskRe: ‘/[ds:amp]/i’, invalidText: ‘Not a valid time. Must be in the format “12:34 PM”.’ } The best part about Ext JS is that it allows you to create reusable validation classes that you can use in your application multiple times without duplicating the code. Following is an example of a validation class that does exactly the same thing i.e. it validates time, but with reusable configurations. // custom Vtype for vtype:’time’ var timeTest = ‘/^([1-9]|1[0-9]):([0-5][0-9])(sm)$/i’; Ext.apply(Ext.form.field.VTypes, { // vtype validation function time: function(val, field) { return timeTest.test(val); }, // vtype Text property: The error text to display when the validation function returns false timeText: ‘Not […]