Ext.extend and Conquer

Today it was a very productive day.

I’ve redesigned several problematic screens of an application into more functional versions, working much faster, providing more information to the end user and – the best thing – with a very consistent appearance on their layout.

ExtJS provides some nice features to standardize its components by extending its standard classes.

The simplest way to do that is like what I show on the code snippet below. It simply provides some default values – that can be easily overriden when the custom component is instantiated – that help with the implementation of sets of components.

var myCustomCombo = new Ext.extend(
    Ext.form.ComboBox,
    {
        width: 180,
        mode: "local", // I load the data manually from the store.
        triggerAction: "all",
        emptyText: 'Choose an option...',
        autoSelect: false,
      editable: false
    }
);
Ext.reg('mycustomcombo', myCustomCombo);

I did custom implementations of panels, forms, combo boxes and grids. With that, I make only slightly variations from one case to the other – imagine addresses, where you have several different components from the country up to the zip code for a street, avenue, square, etc.

The new layout also made it possible to eliminate different pages and consolidate all the information on a single page where all records could be browsed, edited, removed or new records could be added to the database.

On the backend – my TurboGears application – my code also shrunk considerably as I didn’t have to make some convoluted queries to get the information. All modules were better decoupled and obtaining the information using AJAX – or better AJAJ since I don’t use XML but use JSON – much easier through a cleaner interface.

Summing up: it was a complete redesign of a whole module in a day. Some hundreds of lines of code eliminated and functionality added to the system.

I hope that tomorrow the day becomes as productive as today.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s