web application

Release Announcement: GXT 4.1 is here!

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

Read More

How to use GraphQL with Ext JS—A Tutorial

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

Read More

Thanking the Community for their Contributions—StackOverflow Winner Announcement!

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.

Read More

Building an Infinite Data Grid with Ext JS—Webinar Q&A Recap

Thanks everyone for attending my recent webinar on December 17, 2020 – Building an Infinite Data Grid with Ext JS. In this blog post, I am answering the questions that we got during the webinar. 1 – Can we set the number of total records to runtime? We have a table where there are many records inserted every 2 minutes. Yes, since you dynamically send the total count of records as you make a server call for a page of data, those calls can return a ‘real time’ total. You can use the dynamically sent total to resize the grid scrollbar after each retrieval of data from the server 2 – What is the developer “editor” you are using? I use the Visual Studio Code editor from Microsoft – you can download it from the web here: https://code.visualstudio.com/ 3 – What version is the earliest version that supported BuffererStore/BufferedRenderer? The BufferedRenderer has been available since Ext JS version 5.0.0 – see this page for details: https://docs.sencha.com/extjs/7.3.1/classic/Ext.grid.Panel.html#cfg-bufferedRenderer 4 – What is the difference of this BuffererStore/BufferedRenderer approach (obviously, user experience is a bit different) compared to ‘old fashioned way’ of having a toolbar over a grid and using pagination? The ‘old fashioned way’ of using a paging toolbar is still a good way to display a large grid with a lot of data, but there will be a differing user experience as a user moves from page to page. With a paging toolbar and a lot of pages, it is difficult to get to a specific section of the data, ie, the middle of the data. With an ‘infinite grid’ approach to displaying the data, the scrollbar fully displays the context of what page you are on, and moving to a certain page (like the middle of the grid’s data) is more intuitive 5 – Is it possible to make infinite grid with scrolling to top and adding new data on top of grid? Yes, you can data to the grid and then react to the data in a buffered grid. If you are adding data to the top if the grid, and the grid dynamically changes, you would need to make a decision as to weather you programmatically move the scrollbar vs leaving it Lehrer it would be after the new data. 6 – In the modern toolkit, what is the correct way to reload a virtual store driving an infinite grid? I use reload() on the store but this always loads the first page twice and the first request seems to stall the loading. In the modern toolkit, the virtual store has the equivalent functionality as the Buffered store for the classic toolkit – further information on the virtual store can be found here: https://docs.sencha.com/extjs/7.3.1/modern/Ext.data.virtual.Store.html   Thanks again for attending, and if you have any questions beyond these, please feel free to send me an email and I can respond to you. I look forward to you joining me on future webinars!

Read More

Sencha 2021 Roadmap Update

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

Read More

GXT 4.0.4 Patch Release is Available

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

Read More

A Peek at the Many New and Exciting Data Grid Features in Ext JS 7.4

The entire Sencha team is hard at work getting Ext JS 7.4 release complete and in your hands. We plan to have this out pretty soon, but wanted to take this opportunity to provide you with the details of the several new features (yes, there are many, and you won’t be disappointed!) that the release brings.*Please note that features are not committed until completed and GA released.* So here we go … Ext JS 7.4 includes new Data Grid features and addresses some solid improvements and enhancements to both Classic and Modern Toolkits. Multi-level Grouping Group data on multiple levels with the advanced Multi-Grouping feature. Easily add one or more desired fields to the group and the Grid Panel can display the data based on that grouping. Here is an example of a header menu that allows users to change grouping on the fly. Multi-level Grouping for Ext JS Classic Toolkit   Multi-level Grouping for Ext JS Modern Toolkit   Grouping Panel The Grouping Panel allows users to drag-and-drop the desired columns to the grouping panel section. Use this feature to quickly perform operations such as sort, remove, move or change the order of the grouped fields. Grouping Panel for Ext JS Classic Toolkit   Grouping Panel for Ext JS Modern Toolkit   Summaries for Grid Groups and Total The new Grid Summary feature will allow users to define functions for aggregation such as Sum, Min, Max, Average, Count, and more for each column. The feature also allows users to set the position of the group summary for easy viewing.Available for Classic and Modern Toolkit   Filterbar We are adding a new docked bar under the grid headers which will allow the filtered fields and configurations for each column to be easily viewable. The feature will be present in both toolkits. New KitchenSink Examples We’ll be adding new Grid examples to demonstrate how to configure and use the cool new Grid features in Ext JS 7.4. Coming soon! Other Enhancements Ext JS 7.4 will address over a dozen other enhancements and improvements that will benefit all our users. We know you are eagerly waiting to try out these new enhancements. Our team is working hard to get these coveted Grid features to you.*Please note that features are not committed until completed and GA released.*Stay tuned for release updates coming soon! New Data Grid Examples In the meantime, check out this brand new collection of interactive Grid examples and see how you could use them to enhance your application. Grid Classic Examples                         Grid Modern Examples If you haven’t already, check out the performant Ext JS Grid in action with this Interactive Grid Performance Analyzer Haven’t tried Ext JS Data Grid yet? Try a 30-day free trial of Ext JS and check out the power and scalability of the Ext JS Grid for yourself. Ext JS trial is available via public npm or through an easy zip download. Get started and build your first app in 3 easy steps. Download Ext JS 30-day free trialGet a snapshot of the Grid FeaturesExplore More Learning Materials Lock in Your 7.4 Presale Discount Time is ticking, don’t wait to grab your presale discount. Contact your account manager to unlock you discount or get […]

Read More

Sencha News: November Edition

  [Blog] From the General Manager’s Desk 2020 is nearly through, and what a year it’s been! Get a look into the mind of our General Manager, Kegan Blumenthal, with our latest blog as he takes a look back at what’s new and what’s next for Sencha for the remainder of the year. There’s still plenty of surprises in store that we wouldn’t want you to miss—so be sure to give this GM update a read! [Read the Blog]   [Webinar On-Demand] Analyzing Ext JS Apps with Chrome Performance Tools Even the best-built application is bound to experience the occasional dip in performance—if you’ve ever clicked a button or selected a row in a grid in an Ext JS app, only for it to take longer than desired for the action to complete, you know what we’re talking about. Fortunately, Chrome developer tools enable devs to diagnose what’s hindering their application’s performance—and we’re here to show you how to utilize them. Sencha product expert Marc Gusmano provided an in-depth look at the performance panel and how you can apply this tool to your own application—check it out! [Watch On-Demand]   [Product Release] Blazing Fast Web App Development for ASP.NET—Ext.NET Has Arrived Building great looking and blazing fast web apps with ASP.NET Core technology and Ext JS has never been easier! Our team is excited to introduce Sencha Ext.NET—an advanced ASP.NET Core UI framework that incorporates the powerful component library for efficient and scalable web & mobile app development. If you’re an ASP.NET dev, Ext.NET is the perfect choice for your app development: Drop-and-go components Cross-browser & Cross-platform support Simplified client-to-server communication Flexible layout manager and responsive config system Out-of-the-box modern themes And so much more! Learn everything there is to know about the latest addition to our Sencha product suite by checking out the release blog: [Read the Release Blog]   [Webinar On-Demand] How and When to Use Trees in Your Ext JS App Trees are an essential component for Ext JS developers to utilize when showing grouped, hierarchical, and drill-down data—and we want to enable you to do just that. Sencha product expert Max Rahder returned by popular demand to host a live demonstration where Ext JS devs learned to configure trees, organize and detch tree data, update and manipulate tree nodes, use tree plugins, and more for both the modern and classic toolkits. The whole presentation is available to view at your leisure—check it out! [Watch On-Demand]   [Free Guide] Secure Your Software Pipeline with a Safer Front-end The deepest concern haunting most enterprises is the security aspect of software development—particularly around security monitoring, maintenance and ownership.  Threats to mission-critical applications need immediate intervention and can add more time, money and resources to an already complex software pipeline. In our latest free guide, Securing Your Software Pipeline with a Safer Front-end Framework Solution, you’ll learn what security vulnerabilities are, what types of vulnerabilities you need to be on the lookout for with open source, and how adopting a safer front-end framework solution could protect your application development. [Get Your Free Copy]   [Video Guide] Getting Started with Ext JS in 3 Easy Steps Getting started with the latest and greatest version of Ext JS has never been easier—our new video guide is here to walk you through the […]

Read More

From the GM’s Desk November 2020

Kegan Blumenthal,GM of Sencha Inc. While 2020 has been turbulent, to say the least, I am proud to say the Sencha team has been proceeding business as usual; sticking to the original roadmap and even pushing out new products and initiatives along the way. As we head into the end of the year and on to 2021, we want to do everything we can to help empower your teams’ velocity. We’re happy to announce the End of Year Incentives beginning today until 12/31/20. There isn’t a one-size-fits-all approach but we’re more flexible than ever and eager to help where we can. Before I get into that, I’d like to highlight some of the progress we’ve achieved this year so far: Recent Release 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. Free Tool: WebTestIt 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. And best of all, it’s completely FREE to use! Download it today at https://www.sencha.com/products/webtestit/download/ Upcoming Ext JS 7.4 Release The Sencha team is very excited about the upcoming 7.4 release, the biggest Sencha release in the last 12 months. For the Sencha Ext JS 7.4 release, targeted for this quarter, we plan to add some very exciting features to our best-in-class component, the grid. This includes the following features: Multi-level grouping: Advanced multi-level grouping provides data grouping on multiple levels Grouping panel: Easily drag and drop columns for grouping Summaries for groups and total: Quickly define functions for aggregation such as sum, min, max count, and more per column Filterbar: Quickly filter data in the grid using the new grid header filter bar container *Please note that features are not committed until completed and GA released.* Upcoming GXT Release The GXT 4.0.4 release, targeted for this quarter, includes a number of quality improvements for customer reported issues.Please note that features are not committed until completed and GA released. Get your End of Year Incentives! Our licensing options are flexible to fit your team. Whether you have 1 or multiple teams, 1 or dozens of developers, we can tailor a plan to fit your unique needs. We even have the option to provide an Annual plan or Perpetual license making it even more customizable for you. Additionally, we have introduced a Sencha Ext JS UNLIMITED plan to support organization-wide development with an easier license activation mechanism and seat management. To unlock your personal incentives, please reach out to your Account Manager (or me!) as soon as possible: Andy Serda (US Manager/OEMs): [email protected]Nathan Harper (West Coast US): [email protected]James Walker (East Coast US): [email protected]Lynn Geronimo (EMEA): [email protected]Patricia Pena (DACH): [email protected]James Cho (APAC): [email protected]

Read More