View Full Version : ExtJS / CouchDB integration

23 Feb 2010, 2:22 PM
Hi all,

I've reworked the extension originally published here: http://www.extjs.com/forum/showthread.php?t=37599

This version of the file is now compatible with >= Ext 3.0.3 (including Ext 3.2.0), and CouchDB >= 0.10.0 (including 0.11)

The generic store is split into 2 classes - a read-only store, and a mutable store. The main reason for this is to allow read-only grids to use the read-only store without having to worry about whether all the fields are defined on the store (as if mutable, it will only send back the fields you've explicitly added to the store
Distinguished between the need for a view store (which in most cases will be read-only, and therefore requires far fewer fields to be defined), and a form store (where all the fields that exist on both the existing document, and rendering form need to be declared)
The form store also overrides the readRecords method to take the incoming document JSON and restructure it to be compatible with the usual JsonReader implementation (though I'm not really sure this is the best way ... the other obvious possibility is simply to return the record as is pretty much - Thoughts anyone???). Note also that the form store simply loads a single document, but this is deliberate since any document can have any fields on it - loading more than 1 could lose data in the general case.
Read-only views can be constructed without specifying the store - it will be created based on the fields in the column model
Fixes applied to the store implementations to manage updating the _rev field on save, and the _id field on create (this doesn't work perfectly it seems as my EditorGridPanel instances save a new record immediately which I'm assuming is something wrong in this logic)

Instructions on how to setup the sample can be found at http://www.extjs.com/forum/showthread.php?t=37599 (NOTE! You will need to use Ext >= 3.0.3 and use the ext-CouchDB.js attached here)

The vague to-do list at the moment looks something like:

Add docs on the FormPanel stuff
Make sure that all uses of Store work (e.g. combo boxes)
Get paging stores supported

8 Feb 2011, 11:25 AM
Steve, thank you for contributing this CouchDB extension. I am having some trouble, though. Referring to your example post:

At the moment, there's no official example/test page, as I just have a test database, and very basic test application (all of which are in the attached ZIP file). To get this running, you'll need to take the file called "test1.couch", and just copy to the CouchDB database dir (usually /usr/local/var/log/couchdb)...The name of the DB file in your zip archive is test.couch, not test1.couch (just a typo I assume, no biggie). I copied test.couch to the correct CouchDB folder (I am using CouchDB 1.0.1 on Windows) and it shows up correctly in Futon. However, there are no regular nor design documents in the database. Is this intended? Your app makes this request: "http://localhost:5984/test/_design/undefined/_view/location/all". When it does this, I get this error from CouchDB:


Also copy the ext-test1 directory to the www root for CouchDB (usually /usr/local/share/couchdb/www/) - add a copy of Ext 2.2 to the js/ext directory, then start CouchDB and point your browser at http://localhost:5984/_utils/ext-test/index.htmlI copied the above files in the correct directory, including the updated "ext-CouchDB.js" file (version .12) and EXTjs files (version 3.2.1). I ran your App from the URL above except with the correct folder name "ext-test1" (just a typo I assume, no biggie). Your test App does indeed run using the correct EXTjs widgets. However, when "add a new location" with the App, "test.couch" appears to get corrupted. When viewing test.couch in Futon afterward, I get the following errors:

"Error: {{noproc,{gen_server,call,[<0.9907.0>,{add,<0.15108.0>}]}},

<<"{couch_httpd_auth, cookie_authentication_handler}">>}}]},


"An error occurred retrieving a list of all documents: {gen_server,call,[<0.9903.0>,{pread_iolist,20647},infinity]}"

Again, CouchDB is reporting: {"error":"not_found","reason":"missing"}

I assume this is because there are needed view functions and other code missing in a design document that is not present in the database. Could you please check into this when you have a chance?


8 Feb 2011, 12:25 PM
So there are a few issues here:

1. The test.couch DB file was generated with (IIRC) CouchDb 0.10 - I know that CouchDB made some binary incompatible changes in the on-disk format of the DB files between there are 1.0. As a result the DB won't work straight off with Couch 1.0.

2. Not sure why the request to the server contains the design doc name "undefined" - that does suggest that something's changed under the hood that I didn't notice - or that I fixed something on my copy but didn't update the ZIP here.

SCRATCH THIS - 3. The final problem (the Couch stack trace) indicates that the server is requiring authentication for the requests to the server (or maybe that DB), which hasn't happened yet. Right now, my code doesn't deal with this case very well (just dies probably), but it could/should detect the 401 and popup an authentication dialog.
The stack trace is I think an indication that the format of test.couch isn't accepted by the newer CouchDB server

I'll recheck everything and publish a new version of the ZIP example.

8 Feb 2011, 1:18 PM
I'm attaching a slightly different version here. I believe it's the same ext-CouchDB.js as before, but packaged a bit differently.

ext-test-couchapp.zip - this contains all the code etc. for the test application (MINUS the ExtJS distribution). To use this, you'll need to place a copy of ExtJS in the ..../ext-test/_attachments/js/ext folder. Then, install couchapp (instructions here http://www.couchapp.org/page/index) and push the application to the DB by running couchapp push http://localhost:5984/ext-test from the root directory of the app.

There will be no locations to start with, but on the 2nd tab, you can add new locations, and "Save all" to persist them.

I can't attach a complete Couch database file due to the size limitations on attachments here.

8 Feb 2011, 3:43 PM
I also like how you adopted the "couchapp" approach. This is a nice way of developing rich GUI apps that can be distributed/replicated with the database.

Nice work! Thanks again.

23 Mar 2011, 1:31 PM

Just curious about something... have you been playing around with the ExtJS 4 pre-release? I have been experimenting with ver. 5 a bit. I wonder, are you considering a new approach for integrating CouchDB into the new ExtJS 4 MVC architecture? Would it be a good idea to create a custom CouchDB "data proxy" class, or have you been successful using out of the box stuff in ExtJS 4?



13 Jul 2011, 11:15 AM
Hello All,

I finally completed a Tutorial series that demonstrates how to use the new MVC pattern and associations classes of ExtJS-4 with CouchDB by means of Peter Muller's software patch. The series includes an introductory write-up, several video screencasts, and some other resources. You can read all about it and view the screencasts here:


I probably made some mistakes and perhaps mis-spoke here and there, so please feel free to offer constructive criticism. You can post comments on my Blog post. My intention is to help both CouchDB users and/or ExtJS-4 users get a jump start with building an MVC client/server CRUD application using document databases as an alternative to relational databases.

Peter Muller created a software patch for ExtJS-4 and Sencha Touch that makes working with de-normalized databases much easier. I find it is a very maintainable solution for me. If Peter's software patch is something that will work for you, please request from Sencha devs that the patch be integrated into an official release of ExtJS-4 and Sencha Touch in the future. The thread is being watched by Ed Spencer, as he is curious to see the demand. To add your voice, get the patch, or report issues, please post a comment in Peter's thread here:


Hope this fills a need... Thanks.