[ExtJs 3.3] Own Store class extended from Ext.data.JsonStore doesn't work

[pret]

Hi all! I have a strange problem with a class that extends Ext.data.JsonStore:

ENCFax.module.user.Store = Ext.extend( Ext.data.JsonStore, {
	autoLoad:			true,
	root:				'rows',
	idProperty:			'id',
	fields:				ENCFax.module.user.Record,
	proxy:				new Ext.data.HttpProxy( {
		api:				{
			read:				ENCFax.URL.USER.GET,
			create:				ENCFax.URL.USER.CREATE,
			update:				ENCFax.URL.USER.UPDATE,
			destroy:			ENCFax.URL.USER.DELETE
		}
	} )
} );

Ext.reg( 'encfax.user.store', ENCFax.module.user.Store );

Then I create a GridPanel inside a Window (also, another class that extends from Ext.grid.GridPanel):

w = new Ext.Window( {
		id:				windowID,
		title:			translations.USER.TITLE,
		width:			700,
		height:			350,
		layout:			'fit',
		autoScroll:		true,
		items:			[ { 
			xtype: 			'encfax.user.gridPanel',
			id:				'encfax-user-grid',
			iconCls: 		'icon-user-group',
			fbar:			[ {
				text:			translations.USER.FORM.NEW.TITLE,
				handler:		this.showUserNewFormWindow.createDelegate( this ),
				iconCls:		'icon-user-add'
			} ],
			store:			{ 
				xtype:				'encfax.user.store'
			}
 		} ],
		closeAction:	'hide'
} );

It does create the window with the grid panel, and even it fires the GET request to load the Store, but the store is empty even after the load. The strangest part is that if I don't use my own JsonStore class and I pass a config object to the store option with the xtype "jsonstore" with exactly the same config that my own JsonStore class.. it works:

w = new Ext.Window( {
		id:				windowID,
		title:			translations.USER.TITLE,
		width:			700,
		height:			350,
		layout:			'fit',
		autoScroll:		true,
		items:			[ { 
			xtype: 			'encfax.user.gridPanel',
			id:				'encfax-user-grid',
			iconCls: 		'icon-user-group',
			fbar:			[ {
				text:			translations.USER.FORM.NEW.TITLE,
				handler:		this.showUserNewFormWindow.createDelegate( this ),
				iconCls:		'icon-user-add'
			} ],
			store:			{ 
                                // SAME configuration than my own JsonStore class!
				xtype:				'jsonstore',
                                autoLoad:			true,
	                        root:				'rows',
	                        idProperty:			'id',
	                        fields:				ENCFax.module.user.Record,
	                        proxy:				new Ext.data.HttpProxy( {
		                api:				{
			               read:				ENCFax.URL.USER.GET,
			               create:				ENCFax.URL.USER.CREATE,
			               update:				ENCFax.URL.USER.UPDATE,
			               destroy:			ENCFax.URL.USER.DELETE
		}
	} )
			}
 		} ],
		closeAction:	'hide'
} );

What could be the problem here?


Thanks!

[Condor]

You can't specify complex properties like 'fields' and 'proxy' in the prototype. You need to move them to the constructor, e.g.

ENCFax.module.user.Store = Ext.extend(Ext.data.JsonStore, {
  constructor: function(config) {
    ENCFax.module.user.Store.superclass.constructor.call(Ext.apply({
      autoLoad: true,
      root: 'rows',
      idProperty: 'id',
      fields: ENCFax.module.user.Record,
      proxy: new Ext.data.HttpProxy({
        api:				{
          read: ENCFax.URL.USER.GET,
          create: ENCFax.URL.USER.CREATE,
          update: ENCFax.URL.USER.UPDATE,
          destroy: ENCFax.URL.USER.DELETE
        }
      })
    }, config));
  }
});

[pret]

You can't specify complex properties like 'fields' and 'proxy' in the prototype. You need to move them to the constructor, e.g.

ENCFax.module.user.Store = Ext.extend(Ext.data.JsonStore, {
  constructor: function(config) {
    ENCFax.module.user.Store.superclass.constructor.call(Ext.apply({
      autoLoad: true,
      root: 'rows',
      idProperty: 'id',
      fields: ENCFax.module.user.Record,
      proxy: new Ext.data.HttpProxy({
        api:				{
          read: ENCFax.URL.USER.GET,
          create: ENCFax.URL.USER.CREATE,
          update: ENCFax.URL.USER.UPDATE,
          destroy: ENCFax.URL.USER.DELETE
        }
      })
    }, config));
  }
});

It works like a charm thanks a lot!

How can I determine which arguments can be specified in the prototype, and which ones should be in the constructor? or for simplicity's sake is better to always put the configs in the constructor?



Again, thanks a lot!

[Condor]

Complex types (objects, arrays etc.): NEVER.
Simple types (string, int, boolean): Probably.

But in general I would recommend to always use the constructor (or initComponent for components).

[pret]

That tip helps a LOT. It will make me prevent a lot of bugs like the one I posted here.


Thank you very much!

[Sundara Bharathi]

The post was helpful. Thanks for the [email protected], I too have a similar issue. I have posted a new thread on this.