We are excited to announce the availability of Sencha Ext JS 6.5 Classic tutorials to the Sencha Ext JS community.
If you are already a user of SenchaTutorials, get started with Overview.
If you are not a user, sign up for free and access 350+ in-depth tutorials on different versions of Ext JS.
This release covers different aspects of Ext JS 6.5 – Classic framework to give you a complete understanding of how things work and how you can build an enterprise grade Ext JS application. The tutorials have been created in a way that you can start from anywhere. So, whether you are someone who likes to learn systematically, from start to end or someone who likes to learn based on the problem that you are trying to solve, you will find the structure and flow relevant to your style of learning. Here is what the release has for Ext JS 6.5 – Classic toolkit.
Fundamentals
The tutorial covers the basic building blocks (foundation classes) of the framework to work with – elements and DOM. Also, it covers the utility classes that would help you to detect the platform where the application is running, the browser and their features.
Event Handling
This topic covers the event model of the Ext JS framework and explains how to fire event and handle events. You will learn about both the DOM element events and Ext JS component events. Also, it covers the tutorials like how to disable the default event handlers that a browser registers for events, how to buffer the events, and more.
Additionally, you will learn about how to define your own custom events, fire them and register handlers.
Component
Ext JS UI widgets are referred to as components. E.g. Window component, Tree component, Button component, etc. A component is a JavaScript object that contains the information required by the framework to carry out its work, effectively. E.g. it contains the state of the component, events handlers, HTML elements, etc. The tutorials show you what are the different ways that you can define components and when to use which approach.
Since, the framework constructs a component, simply calling the delete on the object reference will not release the related resources properly. Also, every component in Ext JS goes through different stages to initialize/render/destroy any component. This tutorial will cover the lifecycle of a component and how we shall define new components.
Containers and Layouts
Containers are components that have child items. E.g. a form panel containing text fields. And, when we add child items to it we also need to tell the framework, some way, how those child items shall be positioned on the screen and what shall be their dimensions. The calculation of the position and dimension is taken care of by layouts. In this tutorial, you will learn about different types of containers that Ext JS offers and different layouts that you shall use to let the container position the child items properly. This will help you construct complex application layouts/structures and ensure that your application is able to adapt to different screen sizes.
Grids
This tutorial is dedicated to the grid component of Ext JS. Grid is one of the widely used and most comprehensive components. The tutorials explain how to work with the grid component and its capabilities – such as Row action, Editable grid, Infinite grid, Grouping, Column locking, Cell styling, Grouped header and Pagination.
Forms
Form panel component will be the focal point for this tutorial covering everything that you need to know about form related use cases. The tutorials explain how to create forms, how to populate data into the fields using a model, how to populate a model with form field values, how to send the form data to a data sources, how to validate form fields, how to do cross-field validation and more.
Ajax
The tutorial shows how to make Ajax requests in Ext JS and how to work with Ajax response. It also talks about the related events that the framework fires which you can use to register handlers and have a better way to report errors.
Client-side data management
Data package is one of the unique capability of the framework as compared to others. This tutorial is dedicated to Ext JS’ capabilities to manage client-side data. The tutorial explains how you can interface with different data sources – such as REST, JSONP, etc., work with different types of data – XML, JSON – how to validate incoming data, how to transform data, and how to share data across multiple components.
Custom Views
Ext JS comes will lots of out-of-box components that help you build any kind of UI presentation. E.g. form panel, tree panel, menus, message box, etc. However, there would be instances when your UI screen cannot be created using those components, as you may have to create a custom screen. For these cases, the framework provides you with template classes, which can be used to create custom interactive views. In this tutorial, you would see what those classes are and how to create custom views using them and also make your user interact with them.
UI State Management
State Management is very handy when you need to persist the UI state across application refresh/reload so that your user gets to where he/she was before refresh/reload. This tutorial explains State Management in Ext JS, the related classes and how you can implement state management in your application.
History Management
This is all about bookmarking and getting the browser’s Back/Forward button linked to the application state.
Application Architecture
This tutorial covers two architectures – MVC (Model-View-Controller) and MVVM (Model-View-View-Model) – and related classes offered by the framework. This is instrumental in building client-side MVC/MVVM architecture based application so that you can leverage all the benefits of these architectures. The tutorials describe each architecture separately and give recommendation about when to apply which one. And, then it takes each of the architectures and explains how to go about implementing your application.
Internationalization
Covers the Internationalization (i18N) support in the framework and what needs to be done to support additional localization capabilities. It also explains the different deployment strategies around internationalization/localization and how you can design and implement your application matching a particular strategy.
Drag and Drop
This tutorial is all about drag and drops feature. Since, in Ext JS, you work with components and each component can be represented by one or more element, it is important to learn how the components can participate in drag-n-drop. The tutorial covers the element as well as a component level drag-n-drop facility available in the framework.
Drawing
If you are looking at building a sketching app using Ext JS or want to know how to create custom drawings and work with SVG, this tutorial will explain all of these and much more about the drawing feature of Ext JS.
Chart
This tutorial is all about the different types of charts – cartesian, polar and spacefilling – and explains how to create different series – such as, line, area, scatter, etc. – to visualize your data. It also explains the possible customizations and theming aspect to create a custom looking charts that go well with your application theme or branding.
Keyboard Navigation
This tutorial explains how to implement keyboard support in your application. It describes how to handle keyboard events and work with navigation keys to let your user navigate through your application for better usability.
Happy learning!
