Dimensional Data

Sencha Ext JS is the most comprehensive JavaScript framework for building data-intensive, cross-platform web and mobile applications for any modern device. Ext JS includes 140+ pre-integrated and tested high-performance UI components. Ext JS includes 140+ 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. Let’s take a look at 7 tips for optimizing developer productivity with Ext JS. How can I use Graph QL with Ext JS? 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. Find out more about GraphQL usage in one of the best javascript libraries. How can I build login forms with Ext JS? ExtJS provides built-in form components to quickly and easily create fully functional and validated forms. In this example, we demonstrate how to create a login/registration form within minutes with the following features. Adding textfield, numberfield, datefield Adding form validation (email, password…) Displaying form error messages Resetting values Processing form values Find out more about building Ext JS login forms. How can I debug Ext JS apps? Two of the hottest development tools available to any web developer, Visual Studio Code (VSCode) and Google Chrome, seamlessly integrate to provide the most comprehensive debugging environment known to javascript. Gone are the days of console-log mazes – now is the time for stack traces and breakpoints in your javascript development environment. Read on to learn how to efficiently step through your Ext JS application, watch variables, check function scope, and resolve issues faster. Find out more about debugging Ext JS javascript web applications. Are there benchmarks of the Ext JS framework? The overall volume of generated data has grown exponentially over the past couple of decades. As a result, modern JavaScript data grid components that manage the display and analysis of these massive data volumes have evolved. Today, there are many data grid offerings in the market that tout enhanced capabilities to display and manage analysis. But how many of them can withstand the true test of performance as it relates to “Big Data”? Find out more about Ext JS performance benchmarks. How can I use the MVVM pattern with Ext JS? Beyond what the original MVC offers, the Ext JS MVVM pattern allows for further management of the View solely into its own MVC pattern — referred to as the View Package. This consists of: 1) The Model, dealing with the interface of the app’s retrieval and data definition 2) The View addressing strictly presentational concerns such as layout and component configuration 3) The View Model managing the presenting and updating of the data for the View Find out more about js frameworks MVVM patterns with Ext JS. What is the easiest way to build accordions and steppers with Ext JS? 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. Find […]

UI development is easier for web developers if they have useful code templates and components to get things done quickly. That is why many web developers are turning to Ext JS, which offers them everything they need. Ext JS is a features-rich and high-performing JavaScript framework developed by Sencha which offers a comprehensive set of components to build stunning web and mobile UIs. Ext JS customizable UI widgets such as calendars, grids, trees, lists, forms, menus, toolbars, windows, etc., let you build cross-platform web and mobile applications. Sencha provides a useful example of various Ext JS capabilities for beginners, and this article explains everything they want to know about Ext JS examples for beginners. How do I build an Admin Dashboard in Javascript? An Administrative Dashboard provides administrators central access to important information and tools that enable them quickly view everything they need at a glance. Ext JS provides a complete and feature-rich administrative application template for you to build a powerful admin dashboard. Users need to download the Ext JS GPL version and Sencha cmd to reuse this template. Users can quickly build the Admin Dashboard sample app and build on top of it customizing the template. How do I build an Executive Dashboard in Javascript? An Executive Dashboard displays company information, including business performance, in an organized manner for company executives. Ext JS provides a responsive executive dashboard template for you to build a user-friendly executive dashboard. Users can quickly build the Executive Dashboard sample app and build on top of it customizing the template. How do I build Javascript Grid Data Binding? Binding data is the process of connecting data to a component. The Grid Data Binding example shows how to bind additional details in a detailed view for the grid upon selecting it. When data we update data, it will update the component configs automatically.  Two-way binding allows changes to the config to update associated data. How implement a live-search function for my grid? Live search is important for a table, especially if it contains a large amount of data. The live search grid example shows how you can use ‘LiveSearchGridPanel’ to search the data using a keyword or a character. You can also support searching with a regular expression and case-sensitive search. How do I lock the columns of my grid? Sometimes, you may want to lock specific columns, especially if there are several columns and you need to provide an easy scrolling experience. The Locking Grouping Summary example shows how you can easily move unlocked columns along the visible area. How do I show a calendar in my application? A calendar is a useful component of an application that you can easily show using Ext Js. It is a powerful component of Ext Js Kitchen Sink.  The detailed calendar example shows daily, weekly, and monthly calendar views with events. Users can use the Ext Js calendar package, which consists of views based on time frames, And you can implement it with or without a sencha cmd. How to build a ticket application? Ext Js ticket application demonstrates how to build an issue tracking application using MVC and data binding concepts. This example application also shows how to log in and log out using sessions, displays graphics and pie charts of ticket statuses using data […]

Nowadays, a large amount of data keep generating in businesses, and sometimes they need to display that information on websites for the consumers. The common way of displaying data on a website is using an HTML table. However, showing a large amount of data in an HTML table is cumbersome, especially if it slows down the entire page load. Therefore, if you want to show a large amount of data in a table on your web page, using a grid is the best way to do that.  A grid is similar to a table in HTML elements, but it allows you to easily fetch, scroll, sort, group, and filter a large number of data rows. When loading and processing large data sets, the performance is important because it should not hinder the user experience.  A high-performing js grid has a good initial page load time which is the amount of time the grid takes to load the initial data set. It is also efficient in dynamic filtering or the time it takes to filter one column. In addition, when considering a large amount of data in a grid, users often need to scroll through various sections of the grid to see the rest of the data. This scrolling speed is a good indicator of grid performance, and high-performing grids have a good scrolling speed that amounts to seconds.  Ext JS data grid is a high-performing grid that allows loading and manipulating a massive data set within milliseconds. In most benchmarking experiments, almost all the JS grid types from different vendors have shown good initial page load time and dynamic filtering speed. However, all those grids have shown a greater variation in scrolling speed, except when viewing the first few records of the grid. the Ext JS data grid has an outstanding scrolling speed which is 300x faster than other leading data grids, which can fetch and display massive sets of data in less than one second Ext JS grid consists of two parts which are Ext. data.Store and Ext.grid.The panel. The datastore represents the data and the set of columns in the grid to render.  The data stores give Ext Js grids the capability to load data inline and load them dynamically on-demand. It also allows loading nested data, sorting, and filtering. The following example shows a simple data store specified in JSON data structure which will be loaded to Ext Js Grid. Ext.create(‘Ext.data.Store’, { storeId: “myProductStore”, fields: [‘productid’, ‘title’], data: [{ ‘productid’: ‘1’, “title”: “LindtChocalate” }, { ‘productid’: ‘2’, “title”: “Milk” },] }); Ext.grid.The panel is the key component that allows displaying a massive amount of tabular data on the client side. For example, the below code generates a simple grid with two columns. The grid will load the data we specified in the above-specified data store. The grid generated will consist of the columns specified below and the header title ‘Products .’ Under the title will show the data directly below the header title.  var columns = [{ text: ‘productid’, dataIndex: ‘productid’, flex: 1 }, { text: ‘title’, dataIndex: ‘title’, flex: 1 }]; var grid = Ext.create(‘Ext.grid.Grid’, { title: ‘Products’, store: “myProductStore”, columns: columns, layout: ‘fit’, renderTo: document.body, width: ‘100%’, height: 300 }); Raw and Column operations, rendering, and scrolling Ext JS grid consists of a rich set […]

The Sencha team is excited to announce the latest release of Ext JS version 7.5. On the heels of the 7.4 release which introduced highly requested features and upgrades including 4 new rich Grid features and quality improvements in both the toolkits, 7.5 includes many quality enhancements, usability improvements and fixes for customers reported issues. This article summarizes improvements and quality fixes in the 7.5 version of Ext JS.   Usability Improvements and Enhancements As part of the 7.5 release, we upgraded the Froala Editor and Font Awesome packages to the latest 5.14.4 version and provided out-of-the-box localization support for new grid features introduced for both the toolkits in 7.4 version, such as Multi-level Grouping, Summaries for groups and total, and Filterbar.  Froala Editor now includes track changes and markdown support. Shown: The list of Font Awesome icons, including the new icons introduced in the latest Font Awesome version (5.14.4). Showcasing the localization support of Hebrew language for new grid features introduced in the 7.4 version like filter bar, and multi level grouping and summaries.   Quality Improvements The 7.5 release includes more than 40 quality improvements for customer reported tickets. Some of the most notable improvements are for the following customer reported issues: The number column in the modern grid doesn’t have a renderer function/method.  Chart tooltips are triggered from the wrong location when innerPadding is used. pullrefresh plugin doesn’t fire load event on the bound store. Remote filters with gridfilter plugin ignores autoLoad: false. So, from 7.5 onwards, autoLoad config for store should be considered when remoteFilter/remoteSort is/are configured. If autoload:false/autoLoad is not configured and filters/sorters are set then the store won’t load until .load() is called initially. If the user wants the store to load automatically, the user has to set autoload:true config. Modern date picker not selecting the correct date. Modern combobox has multiple query issue when forceSelection:false, multiSelect: true and queryMode: ‘remote’.   Please refer to the Ext JS 7.5 release notes, for further details. Modern Toolkit – Grid Filter styling applied to the filtered column.   Version Support Support for Ext JS 7.5 in Sencha Upgrade Advisor, and Sencha Bridges (ExtReact, ExtAngular, and ExtWebComponents) has been provided. Please go to the Support Portal and download the latest versions.   What’s Next? Sencha Tools are following this release and will soon hit the market with the latest 7.5 support*. The work on Ext JS 7.6 is in full swing*! The Sencha team is pacing well on regular quarterly releases, and we are committed to delivering new features, quality, performance, usability enhancements, and improvements all along. Our goal is to provide you with continual support through quality and performance enhancements. If you have any feedback or questions, please drop in a note to us here or get in touch. *Features are not committed until completed and GA released.   Try Ext JS 7.5 We are working hard to serve our community better in all areas. Please do try out our new Ext JS 7.5:  Be sure to follow us on Twitter and our Youtube Channel for updates. Until next time, let’s build great apps and happy coding.    Looking to Upgrade to 7.5? The free-to-use Ext JS Upgrade Adviser tool helps identify code changes required to migrate to the latest Ext JS version. Give it a […]

  ExtJS or Extended JavaScript is a comprehensive JavaScript framework developed by Sencha for building comprehensive web and mobile applications. Today, you can use more than 140+ UI components like calendars, grids, trees, lists, forms, menus, toolbars, panels, windows, and hundreds of different extensions. So are you someone who is looking to build stunning web and mobile UIs using ExtJS? Then stop for a while and read through my introspection about what I wish I had known before starting this awesome journey. Why do I need to know JavaScript and OOP? To get started with ExtJS, you need basic HTML, CSS, and JavaScript programming. But, it is really helpful if you have a general idea of object-oriented programming (OOP) concepts and how to reuse code with them.  Especially if you come from a different programming background like C, C++, or Java, learning Javascript will make things much clearer when working with Ext Js. Finding an ExtJs tutorial for beginners is really helpful. Ext Js takes a Javascript first approach to reuse code with classes, similar to HTML elements and containers. So if you do not understand OOP concepts in Javascript, make sure to brush up your skills with some ebooks, tutorials, or online courses. Why is Sencha Cmd important? Sencha Cmd is the tool that automates your Sencha Ext JS applications from creating your initial project structure to generating deployable apps. Therefore, it is imperative to know about Sencha cmd, what it does and how to use it. Make sure to read through the Sencha Cmd to get familiar with it before starting development. How can I speed up the development? If you want to spend less time on manual coding and accelerate your development, consider using Sencha Architect so that you can build UIs using drag and drop features. The code that automatically generates is optimized for high performance, and you can avoid errors you do when coding manually.  How can I use the MVC design pattern? With a basic understanding of Javascript and OOP concepts, understanding Javascript design patterns is also important. Ext Js uses Model View Controller (MVC) design pattern from which its project structure has been formulated. Although it is not a must to use, I recommend better organizing your project structure. To work with MVC, know where to place your code for your UI, data, and the controller logic in your application. Therefore, it is good to know how  MVC works together to create a working web application in Ext Js.  Where to use the MVVM design pattern? Another design pattern you must be aware of is MVVM which stands for Model–View–ViewModel. Unlike MVC, the execution entry point of MVVC is the view, and it separates the development of UI using a mark-up language. The ViewModel uses the data binding technique to coordinate changes between the data model and the view. So know where to use MVC and MVVM based on what you will develop. Is implementing routing at the beginning a good idea? If you are using forward and back buttons for your website users, you will need to support routing in your application. You can use routing to track the state of your application, but it is not for storing session data. You can also create deep links to directly access a specific […]

As the web gets more technologically advanced, websites and applications have gotten more robust too. Modern-day web applications are powerful in their processing capabilities and don’t even require blazing fast internet speeds. However, there are many instances of a web product failing to achieve its deserved audience. An overwhelming number of these instances owe their failure to a poor interface. Users no longer experience the web just on their laptops or desktops. Nowadays, internet surfing has become more common on handheld devices like tablets and smartphones. Therefore, websites need to deliver a satisfactory user experience on all different kinds of devices. To achieve this, their UI needs to have a user-centric design approach. UI and UX aspects of applications have gained focus in recent times. Enterprises have begun investing in dedicated positions to build a good UI. However, tools like Sencha ExtAngular give you a library of pre-implemented UI components that you can easily integrate into your front-end. Such tools save vast amounts of time and effort while making a clean and efficient UI possible. This article explains how UI components work and why their inclusion can give your website the needed visual flair to attract a broader user base. Why Should You Take A Component-based Approach To Building Your UI? In today’s times, applications are no longer a monolithic piece of technology. Several pieces are working under the hood and handling their specific responsibilities to deliver a seamless experience. Modularity has become a rising requirement from developers and has led to the advent of technologies like microservices. With a modular approach, each component can be developed, maintained, and upgraded individually. By including UI components into your front-end, you get to enjoy a modular visual layout. Pieces can be exchanged with more robust replacements without hurting the whole arrangement. What Benefits Come With Including UI Components Into Your Website? While it may seem like a straightforward task, creating a satisfying UI can involve some of the most crucial decision-making related to the whole product. The UI and UX are often deciding factors of the product’s success, and its design carries the weight of this responsibility. Therefore, the creators of the UI are doing an essential task and need to use the best resources. You can cut much of the hassle and directly implement visually appealing features by opting for quality pre-developed UI components. Many UI components offer you the facility of customizing their color themes and textures, so you have complete control over the result. Involving the right UI components can be just the choice that takes your application’s visuals to a new level. What Should You Look For When Choosing UI Components? Pre-developed UI components are hardly a new concept. A wide range of options is available for almost all popular front-end technologies. However, you cannot just select any random UI component to go on your website if you decide to use them. You will need to ensure certain aspects to confidently involve them in your front-end and achieve your desired goals. Some of the most crucial characteristics that you should look out for when selecting your UI components are given below: Seamless Integration With Front-End While many websites may have a similar visual look, almost all aim to implement a unique front-end to stand out and have their […]

Regardless of whether you are a beginner developer or an expert, we all need help sometimes. Help can come in many ways, such as a quick answer to a query or a piece of working code that exactly does what you require. Many developers tend to look out for help when they need it and spend extra time looking for the help. However, experienced developers keep helpful resources, and tools close from the start. While development frameworks are only one example of a helpful resource that can elevate your coding experience, they are pretty popular. By utilizing frameworks in your projects, you can save essential resources like time and effort that you can spend on better coding. Additionally, most frameworks come with documentation to help you in case of any confusion. Depending on how you have structured the application, frameworks can even add to code efficiency and readability. Frameworks like Sencha ExtJS have developed a name within the developer community for its ease-of-use and quality implementations. It can serve as the perfect framework for exploring if you are new to using them for web applications. We believe ExtJS is one of the best Javascript frameworks available. This article helps you go through Sencha ExtJS, what main features it offers, and why you should gain vital experience coding with frameworks. Do You Always Need Frameworks To Build Applications? In the past, software development was a tedious and intensive process. It often required implementing standard fundamental functionalities from scratch every time developers build a product. Therefore much of their effort went into creating the basics, and the actual work started only after. Once the community realized just how counter-productive this approach was, efforts started pouring into creating packaged implementations that could be simply imported and used. Once early developers invented the first frameworks, developers and enterprises witnessed a massive increase in productivity throughout. Now teams could create applications with a much better development velocity and fewer risks. After all, frameworks allowed them to build unique new features into products since they took care of the basic ones. Nowadays, using frameworks has become a staple, especially for enterprise-level applications. You can utilize front-end development frameworks to create beautiful user interfaces, and back-end frameworks enable you to develop powerful functionalities. While you may not always need frameworks, they make things much more manageable. What Is Missing From Most JS Frameworks Currently Available? If you are up for it, there are hundreds of options available that claim to be the best JavaScript framework for you. While many of them indeed deliver on most of their promises, they often end up lacking on one front or the other. Sometimes it involves poor documentation or learning resources for users to get comfortable developing using the framework. Other times, the web applications get further complicated due to the approach which the framework takes. Some of the main concerns many users raise with frameworks include: Poor Underlying Layout: Many frameworks have a poorly designed back-end, making it harder to understand and utilize. Inadequate Learning Resources: Frameworks often don’t create the necessary learning resources for reference. Unpredictable Performance & Delivery: Frameworks often optimize when needed but may not necessarily do so every time. Not Optimized For Mobile: Developers need to be assured that their applications will be easily usable on […]

Sencha GRUI Delivers Rich and High Performance Grids For React Applications – Sencha.com Sencha Home / Blog / News / Sencha GRUI Delivers Rich and High Performance Grids For React Applications

UI components are central to any front-end project. They are the medium for effective interaction between your customer base and your app. In addition to making your app’s functionality accessible, a good UI increases user engagement. Simply put, UI components are the key to meeting your users’ expectations. Because UI is so important, your front-end developers always need to approach UI design in a way that improves user experience. One of the best practices is to make sure you are consistent when you choose UI interface elements. This is especially true when it comes to your input controls and navigation elements. By standardizing them, you make things easier for your users — a consistent UI reduces your user’s learning curve. This is because they don’t have to spend too much time learning how to navigate your site. This, in turn, results in happy and satisfied customers who are more engaged with your app. In essence, consistent UI design eliminates confusion. That is because users usually assume that the basic, universal rules that apply outside of your app or website also apply to your website. For example, when users see the grey button beside a pop-up, they automatically assume clicking it will close that pop-up. Since there are many components involved in web app development, the best way to design consistent and quick UI components and speed up the development is to use frameworks that support a component-based approach. Frameworks like Angular, React, and Vue. Unfortunately, these frameworks don’t have built-in components, so developers either have to build them from scratch or get them from the community. This is where a tool like Sencha ExtWebComponents comes in handy. What is Sencha ExtWebComponents? Sencha ExtWebComponents is an efficient framework-agnostic UI component tool. It helps front-end developers develop web applications faster. Sencha ExtWebComponents has over 115 pre-built UI components so that you don’t have to start from scratch. From charts (bar, line, area, column, etc.) as well as grids, trees, forms, and layouts, it has everything a front-end developer needs to build an interactive web app. In addition, all of the components work together seamlessly in any application. Using Sencha ExtWebComponents also reduces dependencies and ongoing maintenance. Finally, it comes with great tutorials, docs, and examples to help you get started quickly. Which Frameworks does ExtWebComponents Support? Sencha ExtWebComponents is a versatile tool. It also supports several frameworks. This means you can add both modern and classic Angular, React, and Vue components to your existing apps. Similarly, you can build a create-react-app or ExtAngular App from scratch with modern or classic components. You can also use Modern ExtWebComponents or Classic ExtWebComponents in your existing JavaScript apps. How do Sencha ExtWebComponents UI components work? Here are some of the UI components most commonly used in apps and websites: Grid Grids are great when you want to show a large amount of tabular data on the client-side of your web app. Sencha ExtWebComponents offers various Grids Th3se include the basic grid, locking grid, and grouped grid. It also comes with add-ons, like filtering, the row expander, and summary rows. Finally, you can sort your grids by ascending or descending order. The Grid component in Sencha ExtWebComponents helps organizations handle thousands of records efficiently. Below is an example of a Basic Grid created with Sencha ExtWebComponents: […]

We’re pleased to announce that Sencha Tooling 7.4 EA is now available to all Ext JS Pro and Premium customers. In this pack, we have new updates and improvements for Sencha Architect, Sencha Themer, Upgrade Adviser, Sencha Test, and Sencha Cmd. What’s New in Architect 4.3 With Architect 4.3, you can visually build apps using new Ext JS 7.4 grid features such as Grid Multi-Grouping level, Grid Filter Bar, Grouping Summary, and totals for both classic and modern toolkits, as well as build projects with Cmd 7.4. This release will enable you to quickly build sophisticated web applications using Ext JS 7.4. Enhance your Ext JS Grids by using new Ext JS 7.4 Grid Features Ext JS 7.4 delivers some amazing new capabilities for Grid in Classic and Modern toolkits. With Sencha Architect 4.3, you can visually build Ext JS apps with new configs and plugins for Grid, delivering rich Grid experiences in your applications. Migrating to Ext JS 7.4 framework The architect provides options to easily upgrade applications to Ext JS 7.4 that were built using older versions of the framework. You can upgrade to the latest version of the Ext JS framework when you right-click on ‘Library’ in the Resources section of Sencha Architect. Bug Fixes and Performance Improvements With 13+ bug fixes, this release brings a solid set of improvements that the Sencha Architect users have been waiting for.Please see the Sencha Architect 4.3 release notesArchitect 4.3 has an updated Electron (version 11.3), which delivers performance improvements and stability and Mac M1 processor support. Try and Share Your Feedback Feedback will be reviewed by the Sencha product and engineering team. We look forward to reading your comments What’s New in Themer 1.4 Sencha Themer 1.4 provides many bug fixes and improvements, which you can review here. In addition to these updates, we are also very excited to announce the following additions. Support for Ext JS 7.4.0 and Cmd 7.4 Themer now supports Ext JS 7.4.0, which includes many bug fixes and continued improvements regarding Modern and Classic toolkits. For the classic toolkit, styling support for the new Ext.grid.feature.AdvancedGrouping feature and the Ext.grid.plugin.filterbar.FilterBar plugin has been added in the form of two new components available in the left navigation bar under the Grid section. These are named “Advanced Grouping” and “Grid Filter Bar”. For the modern toolkit, styling support for the new Ext.grid.TreeGrouped grid and the Ext.grid.plugin.filterbar.FilterBar plugin has been added in the form of two new components available in the left navigation bar under the Grid section. These are named “Tree Grouped Grid” and “Grid Filter Bar” Bug Fixes and Performance Improvements Themer 1.4 has an updated Electron (version 12.0.11), which delivers performance improvements and stability. Mac M1 processor – Support for arm64 has been added for Electron. Please see the Sencha Themer 1.4 release notes. Try and Share Your Feedback Feedback will be reviewed by the Sencha product and engineering team. We look forward to reading your comments. What’s New in Sencha Test 2.4 Sencha Test 2.4.0 brings a number of enhancements and bug fixes. These are detailed in the Release Notes. Sencha Test notable features Sencha Test Studio has been upgraded to Electron 11 Sencha Test included Chrome drivers have been updated to 86-90 The Generic Web Driver has been fixed Mac M1 processor – […]