Build UI Compositely with ExtJS

Posted 2012-06-14
Written by Matt Frost
Category code

A few years back I had a project where the client had a fair amount of tabular data with sort requirements, inline editing requirements, and all the other excitement that comes with presenting tabular data. I had worked through the prototype with some custom jQuery, the client liked it so we went forward with it. A few weeks later, I had met with one of my contacts and he said they were having issues with the browsers crashing after a certain point. We came to the conclusion that an HTML grid with custom jQuery wasn't going to fit their needs.

In enters ExtJS, I bought myself a book and starting hacking my way through it.  The learning curve wasn't as bad as I initially thought, I had a few grids to do an a few modal popups with forms to put together and that was essentially it. The way I approached the project, after doing some reading, some coding, and some failing was that ExtJS applications can be built in a very composite way.

For example, when I built the main table for the application, I knew I was going to use the Ext.EditorGrid; once I figured out the components needed to build a grid it came together pretty easily. So I needed a column model and a data source - 2 good start points.

    var cm = new Ext.grid.ColumnModel({         
        columns:[{
            header:'id',
            dataIndex:'id',
            hidden:true
        },{
            header:'First Name',
            dataIndex:'first_name',
            width:70,
            resizeable:true,
            sortable:true,
       },{
            header:'Last Name',
            dataIndex:'last_name',
            width:70,
            resizeable:true,
            sortable:true
        }];
    });

There's a column model that sets up a grid with a sortable, resizeable first name and last name column and a hidden id column. Pretty straight forward.

    var store = new Ext.data.JsonStore({
        root:'people',
        totalProperty:'total',
        fields:['id','first_name','last_name'],
        autoLoad:true,
        proxy: new Ext.data.HttpProxy({
            url:'path/to/json'
        })
    });

This creates a data source that has the root of people, a property called total, and the definition of all the fields. This is where the dataIndex from the columnModel comes from.

    var grid = new Ext.grid.EditorGridPanel({
        title:'My Example Grid',
        cm:cm,
        store:store,
        height:600,
        width:100%,
    });

Here's your grid that will pull in your column model, data store and not do much else. As you might expect with this type of composition, the views are built this way as well. So you would end up throwing that grid into a viewable region, and those viewable regions would make up the Viewport. To see all that in action, take a look at my code over on Github - it's a very small example, but I've found the more and more I used it the more I enjoyed using it.

Comments

There are no comments

Posting comments after has been disabled.