The following learning pathway will help you get started building MVC-based Web applications using the Sencha Ext JS framework.
- (Download) Download Ext JS 4 — Sencha
-
(Video) Ext JS 4 - The Most Advanced JavaScript Framework for Web Apps (2:00) — docs.sencha.com on April 25, 2011
Ext JS 4 represents a major upgrade of the flagship Sencha JavaScript framework, which is used by more than one million developers to create amazing cross-browser app experiences that execute with precision and performance. Highlights of the release include major enhancements to the drawing and charting capabilities of Ext JS, comprehensive cross-browser support, and an improved data package — all based on a modern architecture. -
(Video) Introducing Ext JS 4 (38:18) — docs.sencha.com on December 10, 2010
Ext JS 4 is a major advance in JavaScript frameworks providing significantly expanded and refactored functionality in practically every area of the product. It's faster, easier and more stable. -
(Video) Ext JS 4.1 - Build Amazing Apps with Web Standards (1:06:40) — Ted Patrick on May 14, 2012
Learn about new features in the 4.1 release of our popular JavaScript framework, Ext JS. Follow Ted Patrick as he gives an Ext JS 4.1 sample app walkthrough, and provides an overview of the Ext JS framework structure and licensing model. -
(Blog) HelloWorld with Ext JS 4 — Samuel Asher Rivello on June 21, 2012
For readers who are new to Sencha but coming from a Flex background, this guest blog post provides useful context and reference to familiarize yourself with how Flex concepts map to Sencha concepts. Typically, a Hello World program illustrates the quickest way to get anything (such as text) on the screen and publishing (or compiling) without errors. In this post, I have also added a few things. We see a Sencha component (Viewport), Sencha classpathing (src), a custom super class, a custom subclass, and an example of a mixin class (similar to multiple inheritance). -
(Guide) Getting Started with Ext JS 4 — docs.sencha.com
This introduction to Ext JS 4 explains how you can get started with creating your first application. -
(Tutorial) Ext JS Essentials — Brian Moeskau on July 11, 2011
Anyone new to using the Ext library or trying to learn more about it has come to the right place. This tutorial will walk through Ext basic concepts and how to get a dynamic page up and running quickly. It is assumed that the reader has some Javascript experience and a basic understanding of the HTML document object model (DOM). If not, you may want to begin with some general references first. -
(Blog) Countdown to Ext JS 4: Dynamic Loading and New Class System — Ed Spencer on January 19, 2011
Today we're unveiling the first in a series of new features coming in Ext JS 4 – a brand new class system. Follow along with our blog series as we continue the countdown to Ext JS 4. -
(Guide) The Class System — docs.sencha.com
This manual is intended for any developer who wants to create new or extend existing classes with the new class system in Ext JS 4.x. -
(Video) The Sencha Class System (52:30) — Jacky Nguyen on December 10, 2011
Ext JS 4.x and Sencha Touch 2.0 went through a huge refactoring from the ground up with the new class system. It combines the familiar class-based programming style with the dynamic nature of JavaScript into a robust architecture which stands behind every single class written in the frameworks. This session will give you a complete picture of everything our new foundation has to offer as well as their benefits and best practices. -
(Video) Ext.each explained (9:58) — Jay Garcia on February 26, 2010
Jay Garcia explains the Ext.each function. -
(Video) Ext.extend explained (7:35) — Jay Garcia on Apr 1, 2008
Jay Garcia explains an important concept in Ext JS: that of the Ext.extend function. -
(Video) Ext.apply explained (7:37) — Jay Garcia on May 26, 2008
Jay Garcia explains the Ext.apply function. -
(Guide) Layouts and Containers — docs.sencha.com
The layout system handles the sizing and positioning of every component in your application. -
(Video) Ext JS 4.1: Layouts, Performance, and API updates (43:04) — Don Griffin on December 10, 2011
Improving layout and rendering performance is a major focus of Ext JS 4.1. This session will discuss some of these details and how they might impact your application, custom components and custom layouts. Beyond these largely invisible features, Ext JS 4.1 has other exciting enhancements. We will also cover: improvements to Grid, Border layout, XTemplate, Data and the class system. -
(Video) The Ext JS 4 Layout System (47:27) — Jamie Avins on December 17, 2010
Ext JS 4 has a fully refactored layout engine with higher efficiency and performance. During this session, you'll learn all the in-depth details with a hands-on coding review of the updated ContainerLayouts and newly introduced ComponentLayouts. -
(Guide) Components — docs.sencha.com
A simple example, and videos, about how to create components in Ext JS. -
(Blog) Ext JS 4 Grid Components — Brian Moeskau on March 14, 2011
The grid components have been rewritten from the ground up for Ext JS 4 and will provide numerous benefits over the 3.x versions. The 4.0 grid includes greatly improved performance and flexibility, so extending it and adding new functionality will be easier than ever. Here's a rundown of the most important new features. -
(Guide) The Grid Component — docs.sencha.com
The grid provides a great way to view lots of data at once, formatted exactly how you need it. -
(Blog) First Look at Ext JS 4.2 Grid — Arthur Kay on December 11, 2012
The release of Ext JS 4.2 beta delivers significantly faster performance of our Grid component. Check out the performance enhancements we’ve made in buffered rendering that allow this feature to be used in more situations with much less configuration. Developers who build apps featuring large data sets should see a dramatic increase in responsiveness thanks to these optimizations. -
(Guide) Trees — docs.sencha.com
Tree and grid now both extend from the same base class. All of the benefits of grid can now be used on trees. -
(Blog) Countdown to Ext JS 4: Data Package — Ed Spencer on January 21, 2011
Follow along with our blog series as we continue the countdown to Ext JS 4. Today Ext JS 4 lead, Ed Spencer takes you through our significantly improved Data Package. -
(Guide) The Data Package — docs.sencha.com
The data package is what loads and saves all of the data in your application. -
(Blog) Sencha Basics: An Introduction to Data Stores — David Kaneda on June 23, 2011
The process of building a complex web application has evolved a lot over the past few years, largely thanks to the ever-evolving browser landscape. Many server-side and native application development paradigms — including MVC, layout systems, and data stores — are moving to frontend web technology like JavaScript. This article will take a brief, high-level, look at data stores, and how they can be used to reduce your development time and future-proof your applications. -
(Blog) Using Ext Loader for Your Application — Jay Garcia on June 27, 2011
Brand new to Ext JS 4.0 is a class Loader system that makes use of the new dependency system. These two powerful new features allow you to create extensive applications that allow the browser to download digest code as necessary. -
(Guide) The Form Package — docs.sencha.com
The Form package enables you to create powerful forms backed with the Ext Data package. -
(Guide) Drag and Drop — docs.sencha.com
This guide explains how to use the drag and drop system. -
(Video) Ext JS 4 Panel Docked Items (14:01) — Jay Garcia on Aug 15, 2011
Jay Garcia from Modus/Create demonstrates the new Ext JS 4.0dockedItemsconfiguration property and some workarounds. -
(Video) Building Multi-device Apps with Sencha Complete (58:15) — Daniel Gallo on November 5, 2012
Daniel Gallo, Sencha's sales engineer in the UK presents how to build an application for managing customers with a .Net/MS SQL backend with Sencha Touch and Sencha Ext JS powering the front end HTML5 interfaces. -
(Video) Accelerate your multi-device application development with Sencha Complete (46:45) — Chris Dawes on November 30, 2012
Learn how easy it is to build desktop and mobile applications with Sencha Complete. In this one-hour webinar, Sencha tech expert Chris Dawes will show you the power of using Sencha Architect, Sencha Ext JS, and Sencha Touch by building a multi-device-ready app. -
(Documentation) Sencha Try — try.sencha.com
-
(Forums) Ext JS 4.x Community Forums — www.sencha.com
-
(Learning Pathway) Migrating Ext JS Apps Learning Pathway — Sencha
-
(Documentation) Ext JS API Documentation — docs.sencha.com
-
(Video) Creating Ext JS Extensions and Components (46:32) — Mats Bryntse on December 17, 2010
One of the great benefits of developing in Ext JS is its clean extensibility. This lets you create reusable components easily that other developers can simply drop into their own applications with minimal effort. In this session, you'll learn how to create a re-usable component for Ext JS, and I'll describe my own experience creating Ext Scheduler - the scheduling component for Ext JS. -
(Guide) Keyboard Navigation — docs.sencha.com
This guide explains how to use the keyboard navigation system. -
(Learning Pathway) Architecting Sencha Apps using MVC Learning Pathway — Sencha
-
(Video) Debugging Your Ext JS Code (45:07) — Aaron Conran, Jarred Nicholls on December 22, 2010
-
(Blog) Infinite Grid Scrolling in Ext JS 4 — Ed Spencer on May 10, 2011
The Grid is one of the most powerful aspects of Ext JS. And in Ext JS 4, we’ve made it even more powerful, with Grids that can scroll indefinitely with an infinite amount of rows. Ed Spencer goes in depth in our latest Ext JS 4 tutorial. -
(Guide) Drawing and Charting — docs.sencha.com
The drawing and charting packages enable you to create cross browser and cross device graphics in a versatile way. -
(Video) Sencha Charting & Visualization (36:39) — Jamie Avins, Nicolas Garcia Belmonte on December 9, 2011
Learn how to make beautiful and interactive charts for both Ext JS 4 and Sencha Touch - without a browser plugin in sight. -
(Video) Charting & Data Visualization in Ext JS 4 (49:52) — Jamie Avins on December 10, 2010
The exciting future of full JavaScript-powered charts and data visualizations coming in Ext JS 4.0! No Flash required!
-
(Blog) Creating Native Applications with Sencha Desktop Packager — Ariya Hidayat on November 26, 2012
Sencha Desktop Packager is a new product, included with the Sencha Complete: Team bundle, which enables you to take your existing Ext JS web application and package it as a native desktop application. From here, you may deliver your application to your customers who are running Windows and Mac OS X. -
(Video) Sencha Desktop Packager Walkthrough (2:56) — Ariya Hidayat on November 13, 2012
Engineering Director Ariya Hidayat gives a walkthrough of the benefits and features of the Sencha Desktop Packager, showing how easy it is to enable web applications to be built in to desktop apps, leverage native APIs and leverage full HTML5 capabilities. -
(Video) Advanced Templates for Ext JS (48:04) — James Brantly on December 16, 2010
In this session you'll learn how to go beyond basic templating and harness the power of XTemplate to create complex, data-bound HTML. We'll show you how to use XTemplate in ways you didn't think were possible. Among other topics, we'll look at JavaScript member functions, recursive templates, subtemplates, and layouts for lists. -
(Guide) Localization in Ext JS — docs.sencha.com
This guide explains how to localize your application for multiple languages. -
(Blog) Ext JS 4.1 Performance — Nige "Animal" White on July 03, 2012
In this article, we will review several factors that affect performance of an Ext JS application. -
(Guide) Performance Guide — docs.sencha.com
Best practices and concepts for creating performant Ext JS apps. -
(Blog) Optimizing Ext JS 4.1-based Applications — Don Griffin on March 1, 2012
Sencha improved performance with Ext JS 4.1, but when it comes to optimal performance of Ext JS-based applications, that's only part of the battle. The rest comes from optimizing applications for performance, which often includes making a few changes so your code can take advantage of Ext JS enhancements. -
(Community) JavaScript Performance Tips & Tricks — Grgur Grisogono (moduscreate.com) on July 31, 2012
Some say spending time developing for performance is not worth it when hardware upgrades are usually a cheaper alternative. If I would tell them that spending 10 minutes reading this could save more than 50 new upgrades with simple code improvements that account for a 50x+ performance increase, do you think they would listen? -
(Community) JavaScript Performance Tips (Video) (36:39) — Jay Garcia (moduscreate.com) on October 8, 2012
Filmed at our NoVa JS meetup on 10/2/2012, Grgur Grisogono discusses JavaScript Performance tips. This video goes along with Grgur’s recent ... -
(Community) localStorage Caching of Reference Data with ExtJS — Aaron Smith (moduscreate.com) on October 15, 2012
Do you have a ton of reference data that needs to load with your app? Lots of combo boxes with mostly static data? Previously I had used a custom ... -
(Community) Expert Ext JS: Reading and Writing Structured Data — Aaron Smith (moduscreate.com) on July 9, 2012
Often times front-end developers don't have the option to change server-side behavior. This can be highly frustrating. I'll discuss a few ... -
(Community) Expert Ext JS: Managing Model Associations Across Independent API Calls — Aaron Smith (moduscreate.com) on July 9, 2012
A few weeks back, Rob Boerman reached out to us with questions about creating linkages between models. As our de facto Associations expert, I ... -
(Community) Expert Ext JS: Associations in Forms — Aaron Smith (moduscreate.com) on June 18, 2012
Associations were a major addition to the data package in Ext JS 4 and, to me at least, appeared to be a great answer to problems I had faced ... -
(Blog) Countdown to Ext JS 4: Anatomy of a Model — Ed Spencer on February 08, 2011
If you follow Ext JS, chances are you already know that we have a brand new data package for Ext JS 4. The new data package builds on existing principles while adding a huge number of new capabilities. Follow along as Ed Spencer reveals more about this powerful feature of Ext JS 4. -
(Community) Expert Ext JS: Model Integration in Forms — Aaron Smith (moduscreate.com) on June 11, 2012
In Ext JS 4, the data package received a lot of attention and the improvements made were, for the most part, quite impressive. However, the ... -
(Learning Pathway) Theming Sencha Apps Learning Pathway — Sencha
-
(Video) Ext JS 4: Advanced Expert Techniques (47:23) — Rich Waters on December 11, 2011
This session will take a detailed look into a variety of internal and less known properties of Ext JS. Topics range from component lifecycles to properties such as renderTpl, renderSelectors, childEls, renderData, and mon. Other topics include delegated events (where the framework utilizes it, and where you should be using them in your code) and many useful utility classes like MixedCollection, DelayedTask, TaskRunner, and more. -
(Video) Application Security for RIAs (42:02) — John Wilander on December 10, 2011
In this session, you'll learn about the top 10 security risks in web applications, and, with demos, how REST backends and rich JavaScript applications map to these risks. Current and upcoming countermeasures include new HTTP headers, double submit cookies, and escaping input client-side to avoid DOM-based XSS. We'll look at each of these, discuss the techniques you'll want to add to your developer toolbox, and how to build reasonable security processes into an agile team environment. -
(Video) Architecting for the Enterprise (27:27) — Doug Hendricks on December 30, 2010
Adopting early planning and architectural design strategies is essential to create scalable Enterprise apps that are ready to meet the demands of dynamic workforces, and can scale to meet future business needs. You'll learn how to leverage class-based UI development within evolving Agile/Waterfall development methodologies and how Ext.Direct, Connect, and Ext.data packages can assist with integration. We'll also review best practices for strong, unit-tested foundation classes that will support your 'next' enterprise solution. -
(Guide) Mapping a Grid to a MySQL table using Direct and PHP, Part 1 of 2 — docs.sencha.com
In this tutorial we will be looking at how to build a table, or 'grid', that receives its data from a MySQL database. It's aimed at people who have some familiarity with JavaScript, PHP and MySQL but are new to the Ext JS framework. -
(Guide) How to map an Ext 4 Grid to a MySQL table using Ext Direct and PHP, Part 2 of 2: CRUD — docs.sencha.com
In the last tutorial we created a grid that pulled information from a MySQL database using Ext Direct. Through the power and simplicity of grids we created what was essentially a glorified table (albeit 'turbocharged'). To add to the dynamism that grids present to us we'll be adding CRUD (Create, Read, Update, Delete) capabilities as well. A typical scenario that benefits from this is backend interfaces where a client might want to do anything from update someone's address or rename a blog post. -
(Guide) Editable Grid with Node.js, Part 1 of 2 — docs.sencha.com
The Grid is a powerful way to display tabular data. It is an ideal solution for displaying dynamic data from a database. It can also allow users to edit the fields of the data displayed in the grid. Changes to the dataset can be easily saved back to the server. This guide describes how to create this functionality using Ext's MVC application architecture. -
(Guide) Editable Grid with Node.js, Part 2 of 2 — docs.sencha.com
Since we already have the Read operation working from part 1, we are left with the Create, Update, and Delete operations to implement. Let's start with updating existing movies in our grid. -
(Video) Advanced Server Integration with Data and Direct (37:40) — Aaron Conran on December 16, 2010
Many Ext JS developers have yet to take advantage of Ext Direct to directly call server methods from the browser. During this session, you'll learn how to leverage Ext.Direct's existing functionality to make accessing your server data easier while eliminating common boiler-plate code. This session will spend more time on introductory material. The session repeat on Tuesday will spend more time on advanced material including developing routers, using ColdFusion as an example. -
(Guide) Loading data from an AMF data source — docs.sencha.com
Action Message Format (AMF) is a compact binary format used by Adobe Flash/Flex to serialize ActionScript object graphs. AMF is typically used to encode messages that are sent between an Adobe Flash client and a remote service. AMF is only a serialization technology, not a transport, so AMF encoded binary data can be used with any transport such as HTTP or HTTPS. This guide will show you how to use Ext JS and AJAX to consume AMF data sent over HTTP right inside a web browser, with no need for a Flash plugin. This guide assumes you are already somewhat familiar with the Ext JS Data Package and Grids. -
(Guide) Using SOAP Services in Ext JS — docs.sencha.com
SOAP (Simple Object Access Protocol) is a Web Services standard built on HTTP and XML. The SOAP Proxy and Ext.data.soap.Reader provide a convenient way to create a SOAP request, and load the SOAP response into a Ext.data.Store. This guide will show you how to use the SOAP Proxy and Reader to load data from and save data to a fictional SOAP service that provides information about blenders. This guide assumes a basic knowledge of the Ext JS Data Package. -
(Blog) Taking a look at the new Sencha SOAP Data Proxy — Kevin Kazmierczak on September 27, 2012
The Sencha data package offers a number of different proxies to connect your application to all kinds of data. With the release of Ext JS 4.1.2 in Sencha Complete: Team, developers can now point to SOAP web services. With SOAP being one of the most popular web service protocols out there, this will allow developers a new option for connecting their applications to data. The SOAP proxy works just like the other proxies, all you need to do is configure the proxy on your store, and you don't have to worry about the details of handling the communication requests. -
(Blog) The New Sencha Eclipse Plugin — Aditya Bansod on September 25, 2012
We've been working on various tools that make a Sencha developer's life easier, and we started with Sencha Architect. Our new plugin makes it even easier to use Architect by providing a full set of code completion and code assistance features for Eclipse. -
(Video) The "In Action" Pattern for RIA Development (29:31) — Jay Garcia on January 7, 2011
With RIAs growing in complexity, JavaScript developers today have to make tough choices on how to organize their code and do so in a manner that both allows for growth and ease of management. Often the wrong choices are made, impacting the maintenance cycles of the applications. In this session, we'll discuss exactly how to organize your code from ground up by exploring popular patterns used by today's industry leaders. -
(Video) JavaScript: Advanced Scoping & Other Puzzles (46:05) — Doug Hendricks on December 30, 2010
In this session, we'll review the fundamentals of JavaScript variable scope and common "execution context" (scope) challenges associated with early/late binding of event handlers, specifically within complex Ext JS layouts. We'll also bring several patterns (namespaced references, Function closures, inline references, ref/refOwner, and the "Poor-man's message bus") to bear on the bowl of soup we call "scope." -
(Learning Pathway) Testing Sencha Apps Learning Pathway — Sencha
-
(Video) Designing for Accessibility with ARIA (36:38) — Aaron Conran on December 15, 2010
ARIA is an accessibility standard that provides capabilities such as screen-reader access to application functionality. During this session, we'll take a tour of the latest accessibility enhancements to Ext JS and Ext GWT including improved keyboard navigation, ARIA and focus management. We'll also discuss how government standards like Section 508 may apply to your organization. -
(Learning Pathway) Sencha Cmd Learning Pathway — Sencha
-
(Book) Ext JS in Action, Second Edition (Manning Press) — Jesus Garcia, Jacob K. Andresen, and Grgur Grisogono on February 2013
Ext JS in Action, Second Edition teaches Ext JS from the ground up. You'll start with a quick overview of the framework and then explore the core components by diving into complete examples, engaging illustrations, and crisp, straightforward explanations. You'll feel like you have an expert guide right at your elbow teaching you important Ext techniques and offering insight into its inner workings. Along the way, you'll learn the best practices for building and scaling full-featured web applications, including how to customize and build Ext widgets. -
(Book) Ext JS 4 Web Application Development Cookbook (Packt Publishing) — Andrew Duncan, Stuart Ashworth on August 2012
Ext JS 4 Web Application Development Cookbook works through the framework from the fundamentals to advanced features and application design. More than 130 detailed and practical recipes demonstrate all of the key widgets and features the framework has to offer. With this book, and the Ext JS framework, learn how to develop truly interactive and responsive web applications. -
(Book) Ext JS First Look (Packt Publishing) — Loiane Groner on January 2012
Ext JS 4 First Look teaches you the main functional areas of Ext JS 4 that have significant new features, explains the new features and how to use them, while highlighting the differences between Ext JS 4 and the previous versions.