Getting started with ExtJS and the CouchDB API.

ExtJS

ExtJS is a javascript library that has the idea of data stores for accessing the data. The provided ExtJS data stores will pull data from a url, but require custom coding for each insert/update/delete as most frameworks don't have a consistent API for each different data type. So updates only occur to ExtJS data stores in memory and callbacks for user functions. Since CouchDB has a consistent API for every document and a flat schema, the data store can be updated to perform these actions in a simple and consistent manner.

Simple Data Store

This data store assumes a database named 'databasenamehere' and a view of 'locations/all', with a simple map to find all documents that contain a location field.

Here is the call to create the data store:

var store = new Ext.ux.data.CouchStore({
    db:    'databasenamehere',
    view:  'locations/all',
    fields: [
        {name: '_id'        },  // I'd love to get rid of this as well
        {name: '_rev'       },  // ditto
        {name: 'location'   },
        {name: 'address',   },
        {name: 'latitude',  type: 'float'},
        {name: 'longitude', type: 'float'}
    ]
});
Ext.ux.store.load({});

After the load call, all the documents are fetched into the store.

An add becomes as follows:

x = new store.record({
  location : 'work',
   address  : '123 over the rainbox'
});

store.add(x);

An update is as follows:

    var r = store.getAt(0);
    r.set('location', 'Yahoo!');
    store.commitChanges();

And finally deleting a document:

   var r = store.getAt(0);
   store.remove(r);

CouchStore JavaScript

This is the javascript code used to create the data store object that is compatible with CouchDB. This snippet was generated using ExtJS 2.1 and CouchDB 0.7.3a662588

/**
The MIT License

Copyright (c) 2008, Shawn P. Garbett (www.garbett.org), Jonathan Hicks

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.

 */

Ext.namespace('Ext.ux', 'Ext.ux.data');

Ext.ux.data.CouchReader = function(meta, recordType){
  meta = meta || {};
  Ext.ux.data.CouchReader.superclass.constructor.call(this, meta, recordType || meta.fields);
};
Ext.extend(Ext.ux.data.CouchReader, Ext.data.JsonReader, {
  /**
   * This override is primarily to default .value on values.
   * Why so much copying is required seems like poor desing on the extjs libraries part
   */
  readRecords : function(o)
  {          
    /**
     * After any data loads, the raw JSON data is available for further custom processing.  If no data is
     * loaded or there is a load exception this property will be undefined.
     * @type Object
     */
    this.jsonData = o;
    if(o.metaData)
    {
        delete this.ef;
        this.meta = o.metaData;
        this.recordType = Ext.data.Record.create(o.metaData.fields);
        this.onMetaChange(this.meta, this.recordType, o);
    }
    var s = this.meta, Record = this.recordType,
        f = Record.prototype.fields, fi = f.items, fl = f.length;

    // Generate extraction functions for the totalProperty, the root, the id, and for each field
    if (!this.ef)
    {
      if(s.totalProperty)   { this.getTotal   = this.getJsonAccessor(s.totalProperty);   }
      if(s.successProperty) { this.getSuccess = this.getJsonAccessor(s.successProperty); }
      this.getRoot = s.root ? this.getJsonAccessor(s.root) : function(p){return p;};

      if (s.id)
      {
        var g = this.getJsonAccessor(s.id);
        this.getId = function(rec)
        {
          var r = g(rec);
          return (r === undefined || r === "") ? null : r;
        };
      }
      else
      {
        this.getId = function(){return null;};
      }
      <a href="this.ef">this.ef</a> = [];
      for(var i = 0; i < fl; i++)
      {
        f = fi[i];
// This is the magic line... All this copying for this one line UGH!!!
        var map = (f.mapping !== undefined && f.mapping !== null) ? f.mapping : 'value.'+f.name;
        this.ef[i] = this.getJsonAccessor(map);
      }
    }

    var root = this.getRoot(o), c = root.length, totalRecords = c, success = true;
    if(s.totalProperty)
    {
          var v = parseInt(this.getTotal(o), 10);
          if(!isNaN(v))
          {
              totalRecords = v;
          }
    }
    if(s.successProperty)
    {
          var v = this.getSuccess(o);
          if(v === false || v === 'false')
          {
              success = false;
          }
    }

    var records = [];

    for(var i = 0; i < c; i++)
    {
      var n = root[i];
      var values = {};
      var id = this.getId(n);
      for(var j = 0; j < fl; j++)
      {
        f = fi[j];
        var v = this.ef[j](n);
        values[f.name] = f.convert((v !== undefined) ? v : f.defaultValue, n);
      }
      var record = new Record(values, id);
      record.json = n;
      records[i] = record;
    }

    return {
        success : success,
        records : records,
        totalRecords : totalRecords
    };
  }
});

Ext.ux.data.CouchStore = function(c) {
  var url = (c.url === undefined || c.url === null) ? '/'+c.db+'/_view/'+c.view : c.url;
  Ext.ux.data.CouchStore.superclass.constructor.call(
    this,
    Ext.apply(c, {
      root: 'rows',
      totalProperty: 'total_rows',
      url: url,
      proxy:  !c.data ? new Ext.data.HttpProxy({url: url}) : undefined,
      reader: new Ext.ux.data.CouchReader(c, c.fields)
  }));
  this.addListener('update', function(store, record, operation) {

    if(operation != Ext.data.Record.COMMIT) return;

    Ext.Ajax.request({
      url: '/'+store.db+'/'+record.data._id,
      method: 'PUT',
      jsonData: record.data,
      waitMsg: (store.waitMsg === undefined || store.waitMsg === null) ? 'Saving Data...' : store.waitMsg
    });
  });
  this.addListener('remove', function(store, record, index) {
    Ext.Ajax.request({
      url: '/'+store.db+'/'+record.data._id+'?rev='+record.data._rev,
      method: 'DELETE',
      waitMsg: (store.waitMsg === undefined || store.waitMsg === null) ? 'Deleting Data...' : store.waitMsg
    });
  });
  this.addListener('add', function(store, records, index){
    for(var i=0; i<records.length; i++) {
      record = records[i];
      Ext.Ajax.request({
        url: '/'+store.db,
        method: 'POST',
        jsonData: record.data,
        waitMsg: (store.waitMsg === undefined || store.waitMsg === null) ? 'Adding Data...' : store.waitMsg
      });
    }    
  });

  // Disable caching till I can figure out what to do with _dc, contact couchdb guys
  this.proxy.conn.disableCaching = false;

  // Create a record creation helper
  this.record = Ext.data.Record.create(this.fields);
}
Ext.extend(Ext.ux.data.CouchStore, Ext.data.Store);