Experiences on the Front Lines of User Interfaces and Web Development

Access Ext store by id

Today I needed to access the Ext store of a grid, inside a column renderer. That part was easy, as it is a parameter to a custom renderer:
 function my_renderer( val, meta, record, rowIdx, colIdx, store )
{
console.log( store );
return val;
}

But then I realized I needed access to that store in a click handler of the renderer, but renderers take a string that gets inserted into the DOM, so I needed a way to serialize the store object to a string (or more practically, a unique ID that I could pass to my other function). I was disapointed that Ext.data.Store objects do not have an "id" property like grids and other Ext objects. They do have an optional storeId parameter however.
 function myRender( val, meta, record, rowIndex, colIndex, store )
{
return '<a href="#" onclick="myClickHandler( \'' + value +
'\', \'' + store.storeId + '\' ); return false">' +
value + '</a>';
}

function myClickHandler( value, storeId )
{
var store = Ext.StoreMgr.key( storeId );
// do something here
store.reload();
}

The trick is to specify a storeId when initializing the store.. and then when that is specified, your store will be in the Ext.StoreMgr singleton.  You can access all your stores and look them up by id using the key() method.
comments powered by Disqus