View Full Version : Help extending JsonStore for Rails

31 Jul 2009, 2:23 PM
I am using Ruby on Rails on the server side of my app, which provides a uniform controller interface via JSON over HTTP. I decided to create a "RailsStore" class to encapsulate the Rails interface for use with my ExtJS app as much as possible. I plan to concentrate the error-handling and as much of the Rails-specific stuff within this derived class as possible to keep the rest of the client-side app clean and Rails-independent (in case I want to switch to something other than Rails in the future as a back-end, for example, and to make the code more maintainable).

However, I quickly realized that Ext.JsonStore isn't an Ext Component, so things are a bit different than the usual Ext.Extend examples. The constructor is working fine and is building the Rails-compatible URL and other class members correctly (from what I can see in Firebug); however, I'm seeing this error in Firebug Console:

this.addEvents is not a function

Any ideas why the constructor succeeds and then this error occurs (apparently thrown as the grid object instantiates the RailsStore object within the grid's "store:" statement within the "initComponent() function for the derived grid class?

Thanks in advance for suggestions.


I'm referencing this RailsStore object as the "store" for a grid:

store:new ww.RailsStore({
authToken: authToken,
{name:'name', type:'string'}
,{name:'id', type:'string'}
,{name:'updated_at', type:'string'}
,{name:'created_at', type:'string'}


* Railsstore.js - Rails data store interface object, uses JSON to communicate
* with Rails controllers to access Rails model information. This object is
* used to handle all ExtJS to Rails communications and provide user error-
* messages.
* Copyright (c) 2009 ConXentric, Inc. All Rights Reserved
ww.RailsStore = Ext.extend(Ext.data.JsonStore, {
// User-configurable options (defaults)
authToken:'no-auth-token', // replace w/ valid auth token
loadMaskConfig : { 'default' : 'Saving...' },
model: 'model-name',
root: 'root-name',
id:'your-id', // replace with your unique id
url: '/RailsStore-undefined-url', // should be properly initialized
action: 'getall', // default Rails action
totalProperty: 'results', // JSON total record count fieldname
remoteSort: true, // server-side sorting on
sortInfo: {field: 'id', direction: 'ASC'},
fields: [ // override w/ your specific fields
{ name:'id', type:'string'} // all Rails objects have ID fields

constructor: function(config){
this.root = config.model; // set mandatory config options
this.model = config.model;
this.authToken = config.authToken;
this.id = config.id;
this.url = '/' + config.model + '/' + this.action + '?format=json&authenticity_token=' + config.authToken;

// Copy configured listeners into *this* object so that the base class's
// constructor will add them.
this.listeners = config.listeners;

// Call parent/superclass constructor


31 Jul 2009, 10:48 PM
Well, I figured it out. Needed to separate the constructor from the Ext.extend call (the ExtJS 1.x way of extending classes) to extend a non-Component class


ww.RailsStore = function(config) {

this.model = config.model;
if( !config.action )
this.action = 'getall'; // default to getall action
this.url = '/' + config.model + '/' + this.action + '?format=json&authenticity_token=' + config.authToken;

this.fields = config.fields;
this.remoteSort = true;
this.sortInfo = {field: 'id', direction: 'ASC'};
this.loadMaskConfig = { 'default' : 'Saving...' };

// Call parent/superclass constructor
ww.RailsStore.superclass.constructor.call(this, config);
} // end of ww.RailsStore constructor

// Add class overrides and new members
Ext.extend(ww.RailsStore, Ext.data.JsonStore, {
// overrides and additional RailStore methods go here