MODExt Tutorials

Introduction¶

Because MODExt extends an existing framework (Ext JS), its documentation has suffered because the authors of the parent framework have nothing to do with MODX, so there aren't specific examples of how to use this framework inside of MODX. The tutorials included here aim to introduce MODExt (and therefore Ext JS) and to show how it can be used both inside the MODX manager and on the front end of your sites. It is assumed that you have enough familiarity with Javascript to follow along with the examples here, and it is hoped that following along will boost your confidence enough to start doing some serious work with Ext JS inside the MODX manager or inside your own custom components.

What is Ext JS?¶

Most people have some knowledge of Javascript, and jQuery has become the king of the libraries. But know this: jQuery has its roots in developing effects and transitions for forward-facing web pages. It may not affect what you can do so much as how it looks. Ext JS has its roots in building applications. Think the MODX manager: it's a complex set of behaviors and interrelated windows that form a unified whole. jQuery was not built for stuff like that, but that's exactly where Ext JS shines. Ext JS can save developers a lot of time when it comes to constructing applications like this.

In order to help you understand MODExt and Ext JS, I invite you to think about web pages a bit differently. When you build pages with Ext JS, you sort of abandon the traditional HTML approach. It can be bewildering because you no longer need to create your pages with HTML – you can end up creating an entire page (or an entire application), just by loading up some special Javascript. That thought might be a bit unsettling for any of you who are used to the "old-fashioned" way of building a web page by hand. Think of it this way: Javascript allows you to manipulate the DOM, so when you use a powerful tool like Ext JS, your browser becomes a canvas, and a few lines of Javascript can paint it any which way. The HTML in your page may become completely secondary to what's going on in the Javascript. Just keep that in mind as we go through some of the examples here.

See Also¶

A fantastic reference for Ext JS is Jesus Garcia's Ext JS in Action.

Never mind the weird cover of a 19th-century breakdancing Frankenstein – this is a good reference. It's good for MODX in particular because it covers Ext JS version 3. It was updated in 2011.

1. Ext JS Tutorial - Message Boxes
2. Ext JS Tutorial - Ajax Include
3. Ext JS Tutorial - Animation
4. Ext JS Tutorial - Manipulating Nodes
5. Ext JS Tutorial - Panels
6. Ext JS Tutoral - Advanced Grid
7. Ext JS Tutorial - Inside a CMP