View Full Version : [SOLVED] Best practice for attaching listeners to data store (the Ext Designer way)?

15 Jun 2010, 12:59 PM
Pardon my newbie inquiry but how would I structure a descendant of an already-defined JsonStore (via the Ext Designer) so that I can attach some listeners? Is that even the recommended best practice? Or would any and all listeners go in the viewport.js file? Please provide a complete example if possible for those of us who are still learning this new way of doing things.

SDMonthYearStore = Ext.extend(Ext.data.JsonStore, {
constructor: function(cfg) {
cfg = cfg || {};
StormDatMonthYearStore.superclass.constructor.call(this, Ext.apply({
storeId: 'MonthYearStore',
root: 'Data',
idProperty: 'ID',
totalProperty: 'TotalCount',
autoSave: false,
url: '/sd/api.svc/lookup/MonthYearData',
autoLoad: true,
restful: false,
sortField: 'ID',
sortDir: 'DESC',

listeners: {
load: console.log,
loadexception: console.log

fields: [
name: 'ID',
type: 'string'
name: 'Text',
type: 'string'
}, cfg));
new SDMonthYearStore();

15 Jun 2010, 2:45 PM
bind it to a component. use your components store property to access the store directly.

for instance

grid.store.on( { 'load' : console.log, 'loadexception' : console.log } );

15 Jun 2010, 3:03 PM
Alright, that makes sense! What about binding several components to the same store - is that a good practice or no?

Also, thanks for being kind and responding to this and my other question!

15 Jun 2010, 9:46 PM
nightwish you're welcome...

there is no restriction how many component you can bind to same store. it maybe useful sometimes but you should remember if you filter a store you'll see your every-component will be filtered. if you reload it same happens. if you bind a paging toolbar, same haapens (actually this is just filtering)... so, if you need independent data you'll need independent stores...

if you bind a store to more than a component there is no importance how you access the store. when you access to the store you via component's store property, actually you just access to a pointer which points to the store. so you can still user the grid.store.on approach...

one other way is binding a variable to store's instance. without it, store works because when you assign a storeId to a store it auto-registers itself to storeManager. then components checks their store property if a string value assigned. if so, it just calls a statement like this to access to store.

var MonthYearStore = Ext.storeMgr.get( 'MonthYearStore' );

so you can alse use this approach to access store. also you can alter the last line of generated store file to bind a variable to the store's instance.

var MonthYearStore = New new SDMonthYearStore();

i hope those info suits your need. see you.

16 Jun 2010, 7:44 AM
Thanks, joey, you are a champ! This was very clear and helpful!

18 Jun 2010, 8:02 AM
Thanks joey.

One of the great things about stores is that you can bind them to multiple components at the same time. In fact, that's how PagingToolbar works...it and, say, a GridPanel both bind to the same store, thus giving you the paging effect in a GridPanel. But as joey stated, all components bound to a store will obviously see the effects of any filtering, sorting, etc. that happens to the data in the store. Usually if you're binding to more than on component intently, then that behavior is actually what you want. Just need to consider it, that's all.