Ext.ux.data.ObjectStore

[JEBriggs]

I've developed a set of classes that make it easier to adapt client-side data models to ExtJS UI Components. This might be useful any of the following are true:


You have a complex client-side data model.
You want to implement a client-side domain model.
You have complex views of your data.
You have multiple views of the same data.


See the following related posts which touch on my motivations:

http://www.extjs.com/forum/showthread.php?t=34674
http://www.extjs.com/forum/showthread.php?t=34993
http://www.extjs.com/forum/showthread.php?t=35288

This is experimental code. I extend the Ext.data.Record class to map to existing data structures rather than create copies of data.

The classes:

ux.data.ObjectRecord. Implements get and set functions to use an AdapterMap that defines a mapping between fields in the record and underlying properties in a data model.

ux.data.ObjectMap. Like a RecordType, maintains an array of mapped data fields.

ux.data.Field. Extends Ext.data.Field and adds support for getting and setting values on an object using a mapping.

ux.data.ObjectStore. Simplifies the loading of mapped data records.

Fixes.js contains changes to GridView, Store, Record, and BasicForm to support extending the Record class.

An demo/test program is included. Here is a screen shot.

http://www.athenz-cdn.com/ext/ux-adapter.png



This work is based on ExtJS 2.1.

Here's the code:

Get the code (http://www.athenz-cdn.com/ext/adapter.zip)

[JEBriggs]

These classes have significantly simplified my application.

http://www.athenz-cdn.com/ext/uml.png

[JEBriggs]

I've added a simple reflection utility to these extension classes. This addition is obviously not rocket science and there may be a better way to do "reflection", but here it is:



Ext.namespace('Ext.ux.util');

Ext.ux.util.Reflection = function(){

return {
/** Creates getter function */
createGetter : function(expression){
var fx = new Function("obj", "return obj." + expression);
return fx;
},

/** Creates setter function */
createSetter: function(expression){
var fx = new Function("obj", "value", "obj." + expression + " = value;");
return fx;
}
};
}();


I'm just going to keep on enhancing this little set of classes until I get a star. My self-esteem is hanging on a thread ;)