Grid - Form and Filtering in ExtJS4 and record release.

Components we have ... [1] one grid - with table of query results [2] one form - for details when row is selected in the grid [3] one check - box The check box 'Incl' will apply a filter based on the checked value. If you selected a record and show it in the form there will be an error occuring on the handler when using the filtering on the store like this.

   }, {
     xtype : 'checkbox',
     boxLabel : 'Incl. Archive',
     handler :  function(_old, _new) {
       var filter = {};
       var _store_ = Ext.getStore('GridStore');
       // release any loaded record bound to form.
       if (!_new) {
        filter = { property : 'my_field', value : { '!=' : 'ARC'}};
        _store_.filter(filter);
       }
       else {
        _store_.clearFilter();
       }
     }

TypeError: record is undefined
createRelayer()ext-all-debug.js (line 11282)
fire()ext-all-debug.js (line 9677)
continueFireEvent(eventName="selectionchange", args=[Object { events={...}, views=[1], modes={...}, more...}, []], bubbles=undefined)ext-all-debug.js (line 11035)
fireEventArgs(eventName="selectionchange", args=[Object { events={...}, views=[1], modes={...}, more...}, []])ext-all-debug.js (line 11013)
fireEvent(eventName="selectionchange")ext-all-debug.js (line 10999)
maybeFireSelectionChange(fireEvent=true)ext-all-debug.js (line 92334)
doDeselect(records=[Object { raw={...}, modified={...}, data={...}, more...}], suppressEvent=undefined)ext-all-debug.js (line 92269)
deselect(records=Object { raw={...}, modified={...}, data={...}, more...}, suppressEvent=undefined)ext-all-debug.js (line 92155)
handler(_old=Object { xtype="checkbox", boxLabel="Incl. Archive", initialConfig={...}, more...}, 

The reason is that the form will "hold" the record that was selected in the grid. To solve this we need to deselect the record, but that's not all. We also need to prevent the 'selectionchange' event from occurring, hence suspending the events on the selection model would also need to be applied. The new handler code for the checkbox is:

     handler :  function(_old, _new) {
       var filter = {};
       var _store_ = Ext.getStore('TerritoryAddressStore');
       // release any loaded record bound to form.
       grid.getSelectionModel().suspendEvents();
       grid.getSelectionModel().deselect(form.getRecord());
       if (!_new) {
        filter = { property : 'my_field', value : { '!=' : 'ARC'}};
        _store_.filter(filter);
       }
       else {
        _store_.clearFilter();
       }
       grid.getSelectionModel().resumeEvents();
      
     }