Hackfoofery

Alson Kemp

ExtJS 4 Models + node.js

Finally starting to play with node.js.   Also, getting back into developing with the lovely ExtJS.  ExtJS 4 added strong support for client side models.

I was thinking that it’d be nice to share a lot of code for models between the client and server.   Turns out that it’s not that difficult.   Super quick-n-dirty code below.  Now the question is: how much duplication can be removed from client and server models? I don’t want to include all server-side code in client-side code, so might do something like:

  • /common/models/user.js – ExtJS model;
  • /client/models/user.js – tune the model for client side (e.g. add a REST connection to the server);
  • /server/models/user.js – includes client/models/user.js;  overrides critical bits (e.g. the Proxy); adds a bunch of server specific code.

If all of my models are in model.*, then I can probably iterate through them and auto-generate Mongoose models when the server boots…  Fun.

This is definitely a hack, but isn’t as frighteningly ugly as I expected:

fs = require('fs');
 
// stub out a fake browser for ext-core-debug.js
navigator = {};
window = {
  navigator : 'Linux',
  attachEvent: function() {return false;}
};
navigator = {'userAgent' : 'node'};
document = {
  documentElement:'',
  getElementsByTagName : function () {return false;}};
// Helper function 
function injectJS(f) {
  eval(fs.readFileSync(f, encoding="ascii"));
}
 
//Pull in ExtJS components
injectJS('./ext-core-debug.js');
injectJS('./src/util/Filter.js');
injectJS('./src/util/Sorter.js');
injectJS('./src/util/Observable.js');
injectJS('./src/data/Connection.js');
injectJS('./src/Ajax.js');
injectJS('./src/util/Stateful.js');
injectJS('./src/util/Inflector.js');
injectJS('./src/util/MixedCollection.js');
injectJS('./src/data/ResultSet.js');
injectJS('./src/data/Batch.js');
injectJS('./src/data/Reader.js');
injectJS('./src/data/JsonReader.js');
injectJS('./src/data/Writer.js');
injectJS('./src/data/JsonWriter.js');
injectJS('./src/data/Errors.js');
injectJS('./src/data/Operation.js');
injectJS('./src/data/Proxy.js');
injectJS('./src/data/ServerProxy.js');
injectJS('./src/data/AjaxProxy.js');
injectJS('./src/data/RestProxy.js');
injectJS('./src/data/validations.js');
injectJS('./src/util/Date.js');
injectJS('./src/data/SortTypes.js');
injectJS('./src/data/Association.js');
injectJS('./src/data/Types.js');
injectJS('./src/util/Observable.js');
injectJS('./src/util/HashMap.js');
injectJS('./src/AbstractManager.js');
injectJS('./src/PluginMgr.js');
injectJS('./src/data/Field.js');
injectJS('./src/data/BelongsToAssociation.js');
injectJS('./src/data/HasManyAssociation.js');
injectJS('./src/data/PolymorphicAssociation.js');
injectJS('./src/data/Model.js');
injectJS('./src/ModelMgr.js');
 
// Register the model
Ext.regModel('models.User', {
      fields: [
          {name: 'name',  type: 'string'},
          {name: 'age',   type: 'int'},
          {name: 'phone', type: 'string'},
          {name: 'alive', type: 'boolean', defaultValue: true}
    ],
    validations: [
        {type: 'presence',  field: 'age'},
        {type: 'length',    field: 'name',     min: 2}
    ],
    changeName: function() {
        var oldName = this.get('name'),
        newName = oldName + " The Barbarian";
        this.set('name', newName);
    }
});
 
// Create an instance
var user = Ext.ModelMgr.create({
      name : 'Conan',
        age  : 24,
        phone: '555-555-5555'
}, 'models.User');
 
// Use the instance
user.changeName();
user.get('name'); //returns "Conan The Barbarian"
user.validate();
user.addEvents('changed');
user.events;
user.fireEvent('changed', 'my hair');
 
repl = require("repl");
repl.start('ExtJS> ');

Written by alson

February 22nd, 2011 at 2:50 pm

Posted in Geekery

with 9 comments

9 Responses to 'ExtJS 4 Models + node.js'

Subscribe to comments with RSS or TrackBack to 'ExtJS 4 Models + node.js'.

  1. Nice! When re-writing our app with ExtJS4 I was thinking of using Backbone.js for the server side to map to the new 4 models – but I might look at this and hopefully help make it less hacky :)

    Tane Piper

    22 Feb 11 at 3:20 pm

  2. Tane,

    Thanks. I’m also probably going to use WebSockets for the transport/Proxy, so will post if/when I get those up and running. I’ve found WebSockets + ExtJS to be really nice.

    alson

    22 Feb 11 at 4:08 pm

  3. You might want to check out DNode: https://github.com/substack/dnode

    I wrote a DNode Proxy + Store for ExtJS3, allows me to do better RPC than ExtDirect, and DNode itself uses socket.io but abstracts away the thinking of transports so you can just write javascript.

    If you’d like to see it, email me and I’ll show you the code – we can maybe have a chat about how this could be put to good use with the new stuff in ExtJS4 as I already use it heavily with my ExtJS3 app on top of CouchDB – and if I can have it so the same code is on the client and server, well I’ll be a happy man :D

    Tane Piper

    22 Feb 11 at 8:27 pm

  4. Ha! Great minds think alike: I’ve got DNode installed, was planning to get it talking to ExtJS tonight and was planning to hook it up to either Couch or MongoDB.

    Would love to swap code… Happy to set up a GitHub repo (public or private) to noodle in. Game?

    alson

    22 Feb 11 at 8:34 pm

  5. ExtJS 4 Models + node.js…

    Finally starting to play with node.js. Also, getting back into developing with the lovely ExtJS. ExtJS 4 added strong support for client side models. I was thinking that it’d be nice to share a lot of code for models between the client and server. Turn…

  6. Just an update of overrides for ext js 4.0.2:

    emptyFn = function() {return false;} window = { navigator : ‘Linux’, attachEvent: emptyFn }; navigator = {‘userAgent’ : ‘node’}; document = { documentElement:{style: {boxShadow: undefined}}, getElementsByTagName : emptyFn, attachEvent: emptyFn }; top = {};

    Grgur

    16 Jun 11 at 6:25 am

  7. Very interested in ExtJS4 data packages on both sides. Did you guys start a project on GitHub?

    Brandon Regard

    9 Aug 11 at 10:31 am

  8. Hi, I ‘m working on a project hosted at Github just about using ExtJS server-side using Node.js.

    It’s composed of * a Node module, which is basically a wrapper to the loading of Ext.core and some more useful modules, but I’ve added a couple of features to it. * a Mongo proxy, allowing data to be CRUD’ed easily.

    The project contains some examples if the documentation is not self-explanatory enough.

    I’ll be happy that you go and have a look at it, so I could have our feedback. I’m planning some enhancements, such as sandboxing ExtJS, but it would require some modifications on the Ext framework itself, so before writing anything, I’d like to discuss the actual use cases for it.

    The project is called N-Ext and is located at http://github.com/xcambar/n-ext/

    Regards,

    Xavier Cambar

    28 Aug 11 at 6:08 am

  9. It seems there is already a project worth looking at: https://github.com/xcambar/n-ext

    olecom

    7 Nov 11 at 10:44 am

Leave a Reply