ExtJS tips

My boss always joked about being impressed by my front-end skills listed on my resume (of course I was hired to do back-end work primarily) It seems that I'm considered to be more of a back-end guy throughout my IT career even though I have built UI for every job I had, including those used by engineers in manufacturing and IT, B2B buyers and sellers, etc. I have even built a tutorial/demo of using that B2B site in Flash! After a few years of hiatus from building UI, I'm finally back in the game, "fast-forwarding" from Weblogic/NetUI (yes, that's ancient technology I used last time) to ExtJS by Sencha. I visited them earlier this year. The offices and the atmosphere was so dot-com! The web UI created with ExtJS looks very slick with tons of eye-candies (which a lot of people like) You could build a good-looking basic web app with it quickly and easily. However, there are quite a few gotchas that have to do with its association model. Let's say you are a publisher who sells magazines to your subscribers. You have a one-to-many relationship between your customer and your magazines. So you created a class for the magazine model and another for the customer model. Then specify in the customer model a hasMany relationship with magazine. This is to be used with a REST-ful webservice for CRUD of customer (along with magazine relationships)

1)  You cannot create a separate store class in which you define a REST proxy with the URL of the aforementioned webservice. Instead, the proxy must be defined within the model class. Stores for customers and magazines are implicitly created. To load these stores, call Ext.ModelManager.getModel to obtain the model object and call load(<id>) on it.

2) Query of your customer REST-ful webservice could return magazines subscribed by the customer as a JSON array, named the same as the hasMany relationship. The implicitly created store for magazines associated with the customer will be populated properly. However, when you call customer.save(), the payload to the REST proxy's URL will not include the array of subscribed magazine. To make this happen, you have to override the default JSON writer of the proxy. See the second part of this post for a generic implementation that works for all associations. Alternatively, you could just implement a customer JSON writer that handles your customer/magazine relationship only, which is much simpler: basically you implement the getRecordData function. Add the fields of customer to the data object to be returned. Also loop through the associated magazine stores and add the fields to an array inside that data object.

3) Let's say you implement a drag-and-drop UI that allows user to drag magazines between the 'subscribed' and 'not subscribed' lists. Check out this example from Sencha. Each of such list is actually an ExtJS grid panel defined with its store. However, you want the 'subscribed' grid to use the implicitly created associated magazine store at run time. The name of the method to use is not that obvious. It is 'reconfigure.' I learned that from this post.

Open another browser from a hyperlink using Javascript

This sounds like a trivial and common task but I just learned how to write that. First, include a function like this:

Then use it in the A HREF like this:

<a href="javascript:void(0)" onclick="javascript:openInNewTab('blog.00zine.com'); return false;">00zine</a>

BTW, I have also just learned the above way of publishing code on Blogger from this post, which is linked to the useful HTML encoder (turns your angle brackets to < and >)