Dimensional Data

The D3 package in Sencha Ext JS is a very popular and efficient way to visualize data. There are 2 main components to the tool — the first is D3, the powerful JavaScript library that helps you easily visualize data on the web using HTML tables or SVG. Next is Ext JS, the Sencha JavaScript framework for building interactive cross-platform applications. By using D3 with Ext JS, you can build powerful data visualizations that help organizations and individuals uncover valuable insights by seeing their data more effectively. If effective, intuitive, and easy-to-implement data visualization is what you are after, read on to learn more about how you can put Ext JS and D3 to work for you.  What is D3? First off, you ask, what is D3?  D3 stands for Data-Driven Documents. It is an open-source JavaScript library for producing dynamic, readable, and interactive data visualizations in web browsers. It uses all the modern web standards, including SVG, HTML, and CSS.  What makes it effective is that you can use D3 to bind any arbitrary data to your Document Object Model (DOM) and apply data transformations from there.  D3 is incredibly flexible. For example, you can use D3 to generate an HTML table from any array of numbers. You can also use D3 to create an interactive SVG bar chart using the same data. In short, D3 lets you present your information in a visually appealing way.  More importantly, it gives you full control over the data selection process.  Three Reasons to use D3 for data visualization There are many reasons why Sencha’s D3 is the perfect tool to visualize your data. but for now, let’s stick to these 3: It’s easy to build any kind of visualization that you want.  The D3 library lets you present your complex numbers in a way that is easy for everyone to read. You can easily generate reports, it simplifies making comparisons and allows you to present your data that makes it easier to recognize patterns. It’s simple to reuse code and add specific functions. D3 is a JavaScript library with functional styles built in.  As a result, creating attractive, powerful data visualization is a breeze. It creates memorable visualizations. Data Visualizations created with D3 stand out. Whether you are working to convince investors or present findings, nothing works better than properly transformed data to uncover valuable insights. How to Build Powerful Data Visualizations with D3 and Ext JS The Sencha D3 package is completely integrated with Ext JS. The result is powerful, easily implemented data visualizations. The D3 package supports multiple component types, including Hierarchical Components, Heatmap Components, and Custom Components. Here we will look at the details of integrating the hierarchical “Sunburst” and “Zoomable Sunburst” components in Ext JS. Sunburst  The D3 sunburst component is a dynamic and compelling way to render your hierarchical data. Like a sunburst, it visualizes tree nodes as concentric wedge sectors, with the root circle in the center. It opens outward for every level of depth in the hierarchy.  To produce the visualization shown above, you have to create the Model by using the following code: Ext.define(‘KitchenSink.model.Tree’, {    extend: ‘Ext.data.TreeModel’,     fields: [        ‘name’,        ‘path’,        ‘size’,        {            […]

D3 is a powerful JavaScript library for creating amazing data visualizations. It helps you to visualize the data on the web easily using HTML tables or SVG. On the other hand, Ext JS is a JavaScript framework for building interactive cross-platform applications. By using D3 with the Ext JS apps, you can build powerful data visualizations, helping organizations and individuals uncover valuable insights effectively. In this article, you will find all the details.   What is D3? D3 stands for Data-Driven Documents. It is an open-source JavaScript library for producing dynamic, readable, and interactive data visualizations in web browsers. It utilizes modern web standards, including SVG, HTML, and CSS.  D3 can bind any arbitrary data to Document Object Model (DOM) and apply data transformation. For example, it can generate an HTML table from an array of numbers. It can use the same data to produce an interactive SVG bar chart. D3 enables you to present information in a visually appealing way. Also, it gives you full control over the data selection process.  Why should you use D3 for data visualization? You should use D3 because it helps you to build any kind of visualization that you want easily. It’s a tool that enables you to present the numbers in a readable form. Also, it helps you to generate reports easily, make comparisons effectively, and understand the pattern deeply.  D3 is a JavaScript library, which utilizes a functional style. So, you can reuse codes and add specific functions easily. As a result, you can create powerful data visualizations conveniently. D3 helps you to create memorable presentations with amazing data visualization. If you are working at a startup, you can convince investors effectively by using properly transformed data that uncover valuable insights.      How to Build Powerful Data Visualizations with D3 and Ext JS D3 can be easily integrated with Ext JS apps to produce amazing data visualizations. It supports different component types, including Hierarchical Components, Heatmap Components, and Custom Components. In this post, you will find the details of integrating the “Sunburst” and “Zoomable Sunburst” components, which fall under “Hierarchical Components,”  in the Ext JS apps. Sunburst  The D3 sunburst component provides a dynamically compelling rendering of hierarchical data. It visualizes tree nodes as concentric wedge sectors, with the root circle in the center. It opens outward for every level of depth in the hierarchy.  To produce the visualization shown above, you have to create the Model by using the following codes: Ext.define(‘KitchenSink.model.Tree’, {    extend: ‘Ext.data.TreeModel’,     fields: [        ‘name’,        ‘path’,        ‘size’,        {            name: ‘leaf’,            calculate: function(data) {                return data.root ? false : !data.children;            }        },        {            name: ‘text’,            calculate: function(data) {                return data.name;            }        }    ],     proxy: {        type: ‘ajax’,        url: ‘data/tree/tree.json’    },     idProperty: ‘path’ }); Next, you have to create the Controller. Ext.define(‘KitchenSink.view.d3.SunburstController’, {    extend: ‘Ext.app.ViewController’,    alias: ‘controller.sunburst’,     […]

Ext JS is a JavaScript framework that enables developers to build web apps for any modern device. It includes 140+ fully supported components that easily integrate with React and Angular. It features a customizable tab control to easily allow you to add powerful tabs within your Javascript application. There are a number of advanced features it supports including overflow scroller tabs, icons on tabs, and bottom tabs. Take a look at the below tips for building tabs in a Javascript application. #1. How do I implement basic tabs in Ext JS? Tabs on a component enable handy user engaging means of displaying multiple related content, one iteration of a view at a time. #2. How do I implement advanced features in tabs? There are options for anchoring the collection of tabs along any position on the perimeter of the component container, and likewise within the collection of tabs, the option of rotating the tab itself within its container. Check out this video tip on our YouTube channel: https://www.youtube.com/watch?v=SCCn3FqdMwY #3. How do I implement the overflow scroller tabs? The Tab Panel component provides the means for managing tabs in such a way where “back” and “next” buttons can allow access to tabs not readily visible within the current display, called the overflow. #4. How do I implement icons on tabs in Ext JS? Text is the most common way to signal information in a tab header, but other options, called icons, exist as well, which can be just as engaging if not more so in initiating action in an application. #5. How do I implement positioning bottom tabs in Ext JS? Tabs on a component can be configured to be docked along any position on the component’s perimeter. ExtJS has Everything you need to Create Stunning Web Applications Ext JS includes amazing UI components, such as HTML5 calendar, grids, pivot grid, D3 adapter, trees, lists, forms, menus, toolbars, panels, windows, and much more. Hundreds of user extensions are also available from the Sencha community. Find out more about Ext JS and all of the amazing HTML5 components it offers.

Sencha Ext JS allows you to accelerate web application development with an enterprise-ready framework, components and tools built to work together seamlessly. You can build Ext JS applications using drag-and-drop features and spend less time on manual coding. The IDE and Code Editor Plugins integrate Sencha frameworks into your enterprise workflow, enabling code completion, inspection, generation, navigation, refactoring and more. How do I Implement Basic Accordion Swiper in Ext JS? The Basic Accordion Swiper component provides a container used by the listswiper plugin to display information and controls when an item is swiped. How do I implement the Undoable Step Swiper? The Undoable Step Swiper allows for a hierarchy of options in a list that provide a successive series of options that can support or nullify the previous actions. How do I implement the Undoable Accordion Swiper? The Undoable Accordion Swiper provides actions that are presented as a sub-menu of options, each of which can be acted on by a subsequent cancel, delete or more general revert action. How do I implement the Basic Step Swiper? The Basic Step Swiper demonstrates different actionable options to choose from as swiping takes place. Ext JS includes a flexible layout manager to help organize the display of data and content across multiple browsers, devices, and screen sizes. It helps you to control the display of components, even for the most complex user interfaces. Ext JS also provides a responsive config system that allows application components to adapt to specific device orientation (landscape or portrait) or available browser window size. You can use all of these features with the accordion and step swipers. Ready to get started with Sencha Ext JS? It’s as easy as 1 2 3! Sencha Ext JS is the most Comprehensive JavaScript Framework and UI Component Library. Try it now!

February 23, 2021 | Kirti Joshi The Sencha team would like to announce the general availability of version 4.1 of GXT, Sencha’s comprehensive Java framework for building web apps using the GWT (formerly Google Web Toolkit) compiler. With GXT, developers can write apps in Java & compile their code into highly optimized cross-platform HTML5 code. The GXT 4.1 release addresses the top customer requested features including Support for Java 11 and Google Web Toolkit (GWT) version 2.9.0. More about the New Features Support for Java 11 & GWT 2.9 Google Web Toolkit (GWT) is an open source set of tools that allows front end developers to create browser-based JavaScript applications using Java APIs and widgets.  With GXT 4.1, users can take advantage of writing frontend and backend code using Java 11 and GWT 2.9. GWT 2.9 offers many improvements for both Java emulation and runtime fixes, and provides additional benefits in emulating Java. Writing code with Java 11 is easier. Devs can expand to the latest syntax while taking advantage of the Java SDK and streamlining their code builds.   GWT 2.9.0 was released in May 2020. Check out more details in the GWT Project Release Notes. How do I access GXT 4.1? Current customers can download GXT 4.1 using the following two options: Get access to the zip version through the Sencha support portal Download the new version through the Maven repository now hosted on MyGet. Customers can request MyGet access by submitting a ticket on the Sencha support portal and our support team will promptly guide you through this quick process. Not a GXT customer?  The fully featured GXT is available to try for free. New users can try GXT 4.1 with a free 30-day trial. Check out how the complete library of 140+ UI components can speed up your development cycles! Download GXT 30-day free trial

TL;DR GraphQL schema and ExtJS data model work together very well. Apollo Client provides a core library that can be included in ExtJS projects to easily manage GraphQL requests, adding powerful features such as in-memory caching. Here I explain a proxy implementation that fully wraps the GraphQL integration, generating requests from ExtJS models (with associations) and their values. The proxy, together with a working example, can be found here. What is GraphQL? GraphQL is a great tool for developers to control the data they need from an API: by introducing schemas, it provides a standard structure for your APIs. It requests you to define object types and fields, unlike the REST APIs that are based on a style convention. The GraphQL structured approach in remote communication allows you to use a lot of productivity tools both in server-side runtime and front-end applications. These include testing, auto-generated documentation, editing and multi-language SDKs. From the client side, the main difference with REST is the ability to send queries to the server, specifying exactly what you need rather than relying on an “unpredictable” route implementation. More about Ext JS ExtJS is a framework for Web and mobile Single Page Applications and it is quite popular for development of reach-data interfaces. It is also a first-class citizen in the front-end technologies in terms of “productivity” and ” schema” and this is the reason why GraphQL is a promising tool for ExtJS data management. At the time of writing, there is no built-in integration for GraphQL queries in the framework, but in this article we’ll  see how to integrate GraphQL in an ExtJS application in order to enable remote communication with a GraphQL back-end and benefit from of all the GraphQL features. Note: an alternative approach can be found using ExtReact taking advantage of Apollo for React integration. Here is the tech talk repo. GraphQL client library When I first introducedGraphQL, I said that one of the advantages are the productivity tools. A production-ready JS library has to be there, and the solutions out there are certainly more than a client SDK. The two options are: I chose Apollo Client because it provides a core library that is framework agnostic rather than Relay which is focused on React use-case. In addition, Apollo is a very popular platform for development of both GraphQL clients and server APIs. GraphQL server Since the implementation of GraphQL server is not in the scope of this how-to article, I  assume you have a working back-end, or you can start a new Apollo Server project from the official tutorial. This is the example schema used for this article. type Query { getUsers( limit: Int offset: Int orderBy: String filter: String ): Users user(id: Int!): User } type Mutation { createUser(createUserInput: CreateUserInput!): Int updateUser( id: Int! updateUserInput: UpdateUserInput! ): Int deleteUser(id: Int!): Int } type User { id: Int! username: String! firstName: String lastName: String role: String! email: String! areas: [Area!] } type Area { id: Int! name: String! } type Users { count: Int! users: [User!]! } input CreateUserInput { username: String! firstName: String! lastName: String! role: String! email: String! areas: [Int!]! } input UpdateUserInput { username: String firstName: String lastName: String role: String email: String areas: [Int!] password: String } ExtJS application setup The test case analysed here is based […]

Happy 2021! As we press on into the new year, we’re doubling down on our efforts to provide our amazing developer community with the product best practices, do’s and don’ts, and tips and tricks that they need to be successful with our framework. While our commitment to providing valuable content to Ext JS devs is unwavering, we realize that sometimes the best advice comes directly from you, the users who have been developing groundbreaking applications with our framework.  With this in mind, we want to reward our top contributor on StackOverflow for leading the charge in supporting Sencha users in our various StackOverflow communities (Ext JS, ExtReact, ExtWebComponents). For their dedication to bettering the Ext JS developer community, we’re awarding the user sra with a $100 Amazon gift card—congratulations! Going into 2021, we’re going to be handing out awards to our top monthly contributors at multiple random points throughout the year—keep up the good work and thanks again for your contributions.  We look forward to another awesome year with our developers! Start Contributing Get started with a free Ext JS trial.

In this Sencha roadmap post, you will find a detailed summary of what we’ve planned for calendar year 2021.The product team interacts with customers on an everyday basis. Your feedback plays a big role in driving our overall product direction! 2021 Roadmap Highlights Ext JS is King — Performance enhancements, New Grid features, Classic to modern parity features and more! Continued Innovation — WebTestIt, Ext.NET, and many more initiatives ahead. Strong Focus on Quality – GXT updates, Improved onboarding experience with new getting started resources and more! Before we get to the details of our updated roadmap, we wanted to recap what we’ve delivered in recent months. Recent Releases 7.3 Release In September 2020, we released Ext JS 7.3. The 7.3 release was a quality focused release, addressing dozens of customer requests across the modern and classic toolkits. In addition to the quality improvements, we also added a template example to the Kitchen Sink and provided new embedded examples in API Docs to increase developer productivity. Shortly after the initial 7.3 release, we released ExtReact, ExtAngular and ExtWebComponents 7.3. Key 7.3 features include:  Improvements to the Data Grid, Fields, Charts and Buttons widgets. Enhancements to Ext JS Grid scrolling experience. Many quality improvements addressing customer reported tickets. Check out the release notes for full details. New Kitchen Sink examples and directly usable ready-to-go templates for both toolkits. Over 30+ new fiddle examples in Ext JS API Docs Upgraded Froala WYSIWYG Editor to latest version 3.2.1. ExtReact, ExtAngular and ExtWebComponents for version 7.3 Sencha WebTestIt In October, we introduced a new product to Sencha’s family of products, WebTestIt. Sencha WebTestIt is a free to use, lightweight IDE and toolset optimized for creating, building, executing, and debugging UI tests for websites and web applications.  WebTestIt provides users the tools to create and build tests with popular web testing frameworks such as Selenium and Protractor. Aimed at serving the broader web test automation ecosystem, WebTestIt significantly reduces the effort associated with test management and increases the efficiency of your project’s test automation.  We plan to continue to update WebTestIt on a semi-regular basis. Download WebTestIt Sencha Ext.NET Sencha Ext.NET is a new product targeted toward the ASP.NET developer community. Sencha has partnered with the Ext.NET team to provide this offering through the Sencha line of products .Ext.NET is an advanced ASP.NET Core component framework that incorporates the Ext JS library to build cross-browser, blazing fast web applications. Ext.NET combines the two server and client side technologies (Ext JS & ASP.NET) to provide the UI controls for over 140 UI components including some amazing looking themes, and is available in three editions. GXT 4.0.4 The Sencha team recently announced the availability of a GXT 4.0.4 software patch release for our customers on maintenance. This release addresses more than a dozen customer reported tickets spanning improvements in the grid component, layout, selection, and more. The release is available for customers from the Sencha support portal. Looking ahead into Calendar Year 2021 What’s Planned for Ext JS Continuous Performance Enhancements, New Grid Features for Sencha’s best-in-class component, Modern to Classic Parity Features & More. Ext JS Classic and Modern toolkits are going to continue to be first class toolkits that will live long into the future. As you’ve seen with all of our Ext JS releases, […]

December 8, 2020 | Kirti Joshi The Sencha team would like to announce the availability of GXT 4.0.4 software patch release for our customers on maintenance. This release addresses more than a dozen customer reported tickets spanning improvements in the grid component, layout, selection, and more. Review the full list in our GXT 4.0.4 Release Notes and download this latest release from the Sencha support portal. If you have any questions, get in touch with our support team.    Developing Apps in Java?   Then GXT might be the right choice for you! GXT is a comprehensive Java framework for building web apps using Google Web Toolkit. Easily write code in Java and compile it into highly optimized HTML5 code. Try GXT for Free The fully featured GXT is available for you to try for 30-days, free of charge! See how the complete library of 140+ UI components can speed your development cycles! Download GXT 30-day free trial