You are here: Home Articles ExtJS is awesome
Navigation
OpenID Log in

 

ExtJS is awesome

by Martin Aspeli last modified Sep 10, 2007 11:14 AM

Peering outside the box once more

During my recent project with Pylons, I've been experimenting with ExtJS, a JavaScript library. ExtJS is pretty impressive. The components are very polished, and the development model is sound.

Here is a short sample:

var liveSearchDataStore = new Ext.data.Store({
    proxy: new Ext.data.HttpProxy({
        url: '/skills/live_search'
    }),
    reader: new Ext.data.JsonReader({
        totalProperty: 'total_count',
        root: 'results',
        id: 'skill_id'
    }, [{name: 'skill_id'},
        {name: 'name' },
        {name: 'description'}
      ])
});

var liveSearchResultTemplate = new Ext.Template(
    '<div class="search-item">',
        '<h3>{name}</h3>',
        '{description}',
    '</div>'
);

var liveSearchControl = new Ext.form.ComboBox({
        store: liveSearchDataStore,
        displayField:'name',
        typeAhead: true,
        loadingText: 'Searching...',
        width: 570,
        pageSize:10,
        hideTrigger:false,
        tpl: liveSearchResultTemplate,
        onSelect: function(record){ // called when the user selects an item
            addSkill(record.data.skill_id, record.data.skill_name);
        }
    });
        
    liveSearchControl.applyTo('search');

This basically sets up a live-search like control, with a custom template. It uses a JSON reader (although there are XML-based options as well). Producing JSON in Pylons is readlly simple, by the way:

    @jsonify
    def live_search(self):
        ....
        return {'total_count' : total, 
                'results' : results_list}

The ExtJS documentation isn't quite as complete as I would have hoped. The generated API documentation is pretty complete, but the documentation on overarching concepts is a bit lacking. There are several good examples from which to learn, though.

ExtJS also feels a bit closed (even though it's LGPL licensed). However, it's probably more of a take-it-as-it-is black-box library than something most people would want to contribute to.

ExtJS, jQuery, KSS and Plone

I've been thinking about how we may use ExtJS in Plone. ExtJS actually works quite well with other libraries. I certainly don't think it would conflict with KSS, and it'd be possible to write KSS client-side plug-ins that rendered ExtJS components. I'd like to experiment with this a little, though. One worry is that the ExtJS components typically require a lot of setup (see the eaxmple above) in JavaScript. This API is not hard to work with, but if we were to abstract it into a set of KSS command parameters, that may be quite cumbersome. Equally, though, having a more tightly defined "Plone" version of some ExtJS controls (such as the excellent grid and tree controls) may be useful from a consistency point of view.

In our Pylons project, we used ExtJS with jQuery (there are also plug-ins for various other frameworks). jQuery is quite nice too. It's small and the syntax is both obvious and attractive. Again, it may be a good choice for creating client-side KSS plug-ins, even though it can do the events binding and simple DOM manipulation that KSS supports out of the box as well.

I found myself missing KSS sometimes too. It can be difficult (conceptually and practically) to pass information between different AJAXified parts of the page and different event handlers, and some of the page compositing operations we needed to do would've been much easier on the serer-side. In this application, I had no need to worry about graceful degradation, i18n or accessibility. I suspect I would've missed KSS even more if I did.

Back to ExtJS, though. If you haven't seen them already, the samples for the upcoming ExtJS 2.0 release (this page also includes some components available in the current release) is pretty impressive. Here are some thoughts on how we could use these in Plone:

  • The Folder Contents view should have a two-pane view like this. Instead of photos, imagine folder contents. Drag an item to a folder (which dynamically expands as you click on it) in the tree on the left to move or copy it.
  • The view of a BTree/Large Folder should be search-based. The ExtJS live-search control is very flexible, and it's easy to define how each row in the results are rendered.
  • The Grid control is really flexible. It supports inline editing, pagination, drag-and-drop, and lots of different data types. This could be useful for bulk-editing and other general grid-based editing.
  • There are various modal input and message boxes, which could be useful for general UI. For example, we could pop up an input box asking for workflow transition notes or change notes when documents are saved.

As always, the biggest challenge here is consistency and page weight. Really, the Plone community needs to standardise on a high level framework that we can leverage. 18 months ago, the debate was Prototype or MochiKit. The former seems to have fallen out of favour (and is one of the frameworks that has a habit of killing all other frameworks used on the same page, from what I've been told). However, there are now a lot of other ones.

From what I've seen (and it's impossible to properly test every single option), jQuery is a really good for the basics: event management, DOM manipulation, AJAX requests and so on; it also has various plug-ins for higher level components, but many of these are less polished. ExtJS has some seriously impressive components - very professional looking and flexible. KSS has a development model which I really like, and allows us to keep templates clean, AJAX behaviour more easily testable and enforce/encourage more consistency across Plone products

If we can solve the page weight/client-side execution time problem, I think KSS + ExtJS and/or KSS + jQuery + ExtJS would be a very attractive proposition.

Document Actions

KSS and Pylons

Posted by Anonymous User at Sep 10, 2007 02:37 PM
One of Europython 2007 talks was about KSS. Example application presented there was written in Pylons :)

I tried KSS some time ago and and I felt limited by it. Some things that I could do easily in plain JavaScript were difficult to do in KSS. These were early days of KSS and maybe I didn't know it too good but I prefered to use plain Javascript approach with JS framework (in my case YUI).
I agree that would be nice to have more JavaScript support in Plone than only KSS, as a lot of us is already using some good JS libraries/frameworks.

Re: KSS and Pylons

Posted by Martin Aspeli at Sep 10, 2007 06:31 PM
I think KSS has a particular focus: One which works well for things like Plone and is probably overkill for simple applications (like the ones I may consider writing in Pylons) that may not have quite the same range of constraints (e.g. i18n
Plone Book
Professional Plone 4 Development

I am the author of a book called Professional Plone Development. You can read more about it here.

About this site

This Plone site is kindly hosted by: 

Six Feet Up