Sencha provides an example of various Ext JS capabilities for beginners, and this article explains everything they need to know about Ext JS examples for beginners that can help you in the future when building applications. So let’s keep learning and getting used to it!
Table of Contents
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.
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.
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 binding,
and shows comments for each assigned ticket.
How do I make my application accessible for everyone?
How do I easily test how my components work with different themes?
Ext Js bundled Ext Js themes offer different themes such as Neptune, Triton, Crisp, Crip Touch, Classic, etc. You can test every component, including Basic Panel, Grid, Progress bars, Form widgets, etc., against these themes From the Theme Viewer example by selecting the theme you want.
A folder structure of your directories is usually represented by a tree modal which sometimes will have complex tree structures depending on the levels of subfolders. Ext Js enables showcasing a folder structure using the TreeGrid component. The locking TreeGrid example shows an advanced TreeGrid with locked columns, multiple headers, keyboard navigation, and many more.
How can I show my images in a window?
The Ext Js DataView enables dynamically rendering components from different data sources, such as when you want to show images, messages, tweets, etc., in one view. The DataView example shows how you can use Ext. view.View demonstrating useful functionalities with extensions such as selecting multiple images, creating editable labels using Ext.ux.DataView.LabelEditor, and drag selection Ext.ux.DataView.DragSelector.
How add animations to my views?
Animated plugging is useful for scenarios such as showing different results to the users when filtering data based on different conditions. The Animated DataView example shows how you can do it using Ext.ux.DataView.Animated plugin animating the changes to the UI.
How do I add a progress bar to my application?
A progress bar is an essential component for many parts of your application. Ext Js has a ProgressBar class from which you can build different types of progress bars. The basic progress bar has a built-in progress text, and waiting bars are suitable for long operations. In addition, you can build a progress bar applying the customizations you want. The progress bar example demonstrates progress bars’ work in Ext Js applications.
How do I add a progress bar to my application?
As a progress bar, a slider is another component many applications need. Ext Js slider example demonstrates how different types of Ext Js sliders work, such as basic, snapping, vertical, slider with tip, CSS customized slider, etc. Each slider will support keyboard adjustments, and verticle sliders can have more than one thumbs.
Excited to get started with Ext Js?
Sencha Ext Js consists of a comprehensive set of functionalities that enable you to build complete applications. This article explained some of the important topics in Ext JS examples that you can extend to your application. It consists of useful demonstrations of component combination examples, Grids, Trees, Drag and Drop, DataView, and many other examples to get your self stated with building powerful apps with Sencha Ext JS.