ClearDataBuilder for Ext JS 4.1

ClearDataBuilder for Ext JS 4.1 has arrived! The URL for Eclipse plugin update is

What Has Changed
In addition to Ext JS 4.1 support, we introduce much simplified project wizard. Prior versions of CDB required you to create a generic Dynamic Web Project with CDB-specific facets. Now you explicitly create ClearDataBuilder ExtJS Project:

From here you have a clear choice: create a brand new project or piggy-back on one of the pre-built example ones:

The wizard will present you just one dialog. That dialog will contain all settings your project needs.
Let’s look at each of the project types one by one.

Java Example Project

This is the simplest project to setup and the dialog contains only two settings, which are required by all project types: Ext JS Location and Target Runtime.

The first one lets you choose between embedding Ext JS inside your app or point to an external Ext JS URL. To embed Ext JS you select “Browse…” and navigate to Ext JS location on your hard drive. Alternatively you may point to a local URL on your own server or to a Sencha CDN. In the latter case you will be constrained to use production version of the Ext JS.

With the second setting you are indicating a deployment server. Keep in mind, though, that we do not do any testing beyond Tomcat:

The rest – deployment of the example sources is done automatically.

MyBatis and Hibernate Example Projects

If you select MyBatis or Hibernate Example project, you will have to provide one additional setting: location of the folder where wizard deploys the HSQLDB database cleardb that is used by the example application. Keep in mind that you will have to explicitly start the database:

Non Example Project

For regular projects you will have to select the persistence type: MyBatis, Hibernate or None.
You will be able to optionally include Spring support, unless you use MyBatis persistance: we plug MyBatis via Spring so here you do not have a choice. Finally, you will need to select a connection:

That’s it for now. I will be presenting the Ext JS 4.1 and CDB for ExtJS on the Fifth Annual Farata’s Symposium, so join us there.


Avoiding Duplicate Suffixes in Ext JS MVC

One of the most appealing features of Ext JS 4 is the fact that it has all you need to develop your application using the MVC architecture. You don’t need to add any third party MVC framework to your Ext JS application. In your controllers, that you attach to the application, you simply declare the class names for your store and a view. In return, Ext JS generates the controller’s getter methods to access the store and view instances and also allows controllers to intercept events that may happen anywhere inside the views. You are not forced to use MVC, but since it is convenient and does not cost much. I just finished preparing a 100% MVC sample for the upcoming release of the Ext JS version of our Clear Data Builder code generator.

Convention over configuration is the only price you pay for implementing MVC in your application. Just follow the strict folder names – controller, view, store, model. It’s not too expensive, is it? In fact, I like it.

That said, dare you to name a store class as Ext leaves you one on one with eyebrow-raising controller code like this.getCustomerStoreStore(). In other words, Ext is appending the Store suffix for stores, Model for models and so on, softly suggesting that you should stay away from using your own suffixes.

Now, if you are anything like me, you get an instant acid reflux at multiple classes with the same core name like MyApp.model.x.y.z.Customer,, and, perhaps, MyApp.controller.x.y.z.Customer and others, especially when you jump between them in one editor. Do not worry – all you need to treat the “condition” is to override the createGetters method of the before your application starts, for instance – this way:

    enabled: true

    function () {{
            createGetters: function(type, refs) {
                type = Ext.String.capitalize(type);
                Ext.Array.each(refs, function(ref) {
                    var fn = 'get',
                          parts = ref.split('.'),

                    // Handle namespaced class names. E.g. feed.Add becomes getFeedAddView etc.
                    Ext.Array.each(parts, function(part) {
                        fn += Ext.String.capitalize(part);
                    // --- Prevent StoreStore-like suffixes --- 
                    pos = fn.length - type.length;
                    if (pos<=0 || fn.substring(pos)!==type) {          
                        fn += type;
                    if (!this[fn]) {
                        this[fn] = Ext.Function.pass(this['get' + type], [ref], this);
                    // Execute it right away
            // --- Start your application when done 
                name: 'MyApp',
                controllers: [

To learn more about the proper way of architecting enterprise applications attend our 2 day Flex-to-ExtJs workshop on April 19-20, 2012. Enter Victor as a promo code to get $100 off the price.


UPDATE: See our post Why and How to use Ext JS Overrides that illustrates the most elegant Ext JS overriding technique.