Using ExtJS 101

I’ve started to try and work on a new twitter extra using oAuth, and for that I wanted to use ExtJS (or rather: modExt) to style/create the workspace.

I’m just flabbergasted how to do that tho.


When I figure it out I’m willing to write up a lil’ to give back, but at this moment in time I just have no idea how to work with it, so any tips / examples are welcome.


( I must admit I’d have yet to look at other CMPs like Quip, but this post may serve as a reminder that this is a topic that could use more documentation ).

What I could find so far: http://rtfm.modx.com/display/revolution/MODExt and its subs.

Honestly, we’re not going to doc ExtJS - that would be silly and a waste of time. Most people can easily find their documentation via the Sencha website.

That said, the docs could definitely be expanded on *how* to implement ExtJS into MODx Custom Manager Pages (although there is quite a bit more on there than people give credit for).

The best resource, always, will be to look at existing code. Looking at modExtra, Batcher, Quip, Discuss, Gallery, PackMan and others should give you plenty of examples of how to do it. Like the old adage: "Code is documentation."

I knew zero of building CMP’s, have a Java background and knew bits and pieces of Javascript. After two months of hard work I managed to put together quite an impressive application (I’ll post some details on it soon) in the manager workspace. Complete with tab panes, popup windows, tree views, grid views, Ajax calls, my own subclasses of ModExtra widgets and database access to custom tables. I found ModExtra/ExtJs a joy to work with and rock solid, when I got my head around its architecture.

From a documentation point of view, I think that’s where the bottleneck is: there’s no architectural overview of how the components all tie together so you end up struggling on several levels and it is a steep hill to climb. But with a bit of determination and - as suggested by Shaun - one of the existing project as a starting point doable. I used modExtra and Doodles (the other ones are more complicated and maybe not suitable to use as a reference project). These are relatively simple use cases with just one object/entity. I copied the whole lot of modExtra and started making changes to suit my needs and adding functionality as I went along. I’ve posted quite a few questions on this topic and the answers by Shaun and others should provide help for stumbling blocks you might encounter. See here: http://modxcms.com/forums/index.php/board,178.0.html

Further, the Sencha forums are a good resource for info, as is the ExtJS API. Definitely must-have is a good Javascript debugger (Chrome Javascript console or Firefox Firebug). Also handy is a PHP debugger.

Good luck.