How to reuse Ext JS models and stores in Sencha Touch 2

After another day of Sencha Touch (version 2), I discovered that it is a little less compatible with Ext JS then hoped for. It is quite annoying that Ext JS models and stores are not compatible with Sencha Touch 2. And as I don't want to code them twice when building an Ext JS and Touch application, I looked for a solution and found it.

Another search on the internet helped me to find this article: link.

It shows code for making Sencha Touch components compatible with Ext JS. But I am interested in the other way around. So I modified the source code. The original article shows the code in Coffeescript, but here the samples are plain JavaScript. The samples are limited to model and controller.

The compatibility script

Following script has to be loaded prior to application start. This can be done to put it at the top of your app.js, but I recommend to put it a separate JavaScript file and include it in your HTML. The only flaw it the "Touch" test. It will not hold until version 3 arrives. It would be nice when Sencha would add the framework name to the Ext.version object.

window.Sencha = (function() {
    var isTouch, _ref, _ref1;
    isTouch = !!((_ref = Ext.getVersion("touch")) != null ? (_ref1 = _ref.version) != null ? _ref1.match(/2./) : void 0 : void 0);
    return {
        isTouch: isTouch,
        isExtJS: !isTouch
    };
})();

Sencha.modelCompatibility = Sencha.isExtJS ? function(x) {
    return x;
} : function(classConfig) {
    if (!classConfig.hasOwnProperty('config'))
        classConfig.config = {};
    classConfig.config['fields'] = classConfig.fields;
    delete classConfig.fields;
    return classConfig;
};

Sencha.storeCompatibility = Sencha.isExtJS ? function(x) {
    return x;
} : function(classConfig) {

    if (classConfig.hasOwnProperty('proxy')) {
        if (classConfig.proxy.hasOwnProperty('reader')) {
            if (classConfig.proxy.reader.hasOwnProperty('root')) {
                classConfig.proxy.reader.rootProperty = classConfig.proxy.reader.root;
                delete classConfig.proxy.reader.root;
            }
        }
    }
    return classConfig;
};

The Ext JS model definition

Now we make a slight modification to the Ext JS model. We are going to embed into the global function Sencha.modelCompatibility, which we just created.

Ext.define('ArtikelAuswahl', Sencha.modelCompatibility({
    extend: 'Ext.data.Model',
    fields: ['ar_artikel_nr', 'ar_bez1', 'ar_bez2', 'ar_bez3', 'ar_bez4', 'ar_hash']
}));

The Ext JS store definition

The same we do with the Ext JS store. We embed it into the function Sencha.StoreCompatibility.

Ext.define('Ext.data.Store', Sencha.storeCompatibility({
    model: 'ArtikelAuswahl',
    proxy: {
        type: 'ajax',
        actionMethods: {
            read: 'POST'
        },
        url: 'someurl/to/server',
        reader: {
            root: 'records',
            totalProperty: 'total',
            type: 'json'
        },
        extraParams: {
            'parameter': 'load_artikel_ce',
        }
   },
   autoLoad: false
}));

By embedding the model and the store the configurations are dynamically converted to Sencha Touch 2 syntax. If you don't want to convert, you can leave the "Sencha" functions out.

When to use it

• when you want to use models and stores in Ext JS and Sencha Touch, but only want to have 1 repository.
• when you are an Ext JS die hard and don't want to commit to Sencha Touch standards

When not to use it

• when you use your models and stores only in Sencha Touch 2.
• when you only develop in Sencha Touch 2.
• if you want to be really sure. Any coming updates of Sencha Touch or Ext JS could make this small converter incompatible.

Links

CoffeeScript
Convert CoffeeScript to JavaScript
Robust, reusable Sencha Touch and Ext JS code