View Full Version : Best way to Filter-out Store1 records from Store 2

15 May 2014, 7:25 PM

(Extjs 4.x)

If I have two Stores (1 and 2), what is the best way to delete all records in Store 2 that are present in Store 1?

FYI, I tried to create two functions: Function 1 to iterate the first store and push the column value to second function... Function 2 that execute store2.filterBy() to return records that is not equal to the column value passed to it. The problem with this approach is that if store 1 has 2 records, only the last record was taken out in store 2... It seems that I need to commit changes in store 2 whenever it is called but I don't know what store method to call (if possible)... and where to put this method.

Here is the code snippet I used for Store 1 and Store 2:

var user_ID = record.data.userID;
var store = Ext.getCmp('assignedCustomerPanel').getStore();
var store2 = Ext.getCmp('otherCustomerPanel').getStore();


callback : function(records, options, success) {

if (success) {

store.filterBy(function (record1)
var theUserID = record1.data.userID;
if(user_ID == theUserID)
console.log ('Returned to STORE -------------------------');
return record;


//Show the hidden panels:


// Delete customers from Other Customers if they are already assigned to the user:

function deleteRecordFromOtherCustomer(theCustomerID){

store2.filterBy(function (record2)
if(theCustomerID != record2.data.customerNumber)
console.log ('Include = ' + record2.data.customerNumber);
return record2;
} else {

console.log ('Did not include = ' + record2.data.customerNumber);


16 May 2014, 12:13 AM
Anyway, I think I should not mess up with FilterBy... as it only do what it is designed to be (as a filter).

I used store.each() to iterate the second store and remove each record as it matches that of store1.

I put the code for store2 in here for reference:

var store2 = Ext.getCmp('otherCustomerPanel').getStore();
var allRecords = store2.snapshot || store2.data;
allRecords.each(function (record) {
if (record.data.customerNumber == theCustomerID) {

This is for newbies like me. :) I hope someone could validate if this is the way to go. Cheers!

16 May 2014, 4:59 AM
The only problem there: You should never directly access data or snapshot properties of the store. Use store.each() to iterate through records, record.get('fieldName') to the the value of one field or record.getData() to get data of all record fields.

16 May 2014, 6:43 PM
Hi Saki,

Thanks for the reply.

I read store.each and found out: "When store is filtered, only loops over the filtered records."

My usecase is to get the unfiltered (complete) records as if the store was loaded the first time, that's why I used the snapshot data...

Store 1 is a list of items which come from Store 2.
User can click an item in Store 1 and "put it back" to Store 2.
So what I did is to iterate each item in Store 1 and remove those in Store 2.
On Store 1 Grid's Itemclick event, I just call this same function...
at first, I used store.each().... but since the record was already filtered-out in Store 2, it returns undefined.
so i opted for the snapshot.

I could have opted to use grid.getRemovedRecords() and insert it in Store 2 in its original ordinal sequence using grid.insert(index, record)... but I still need to track the record index as it was deleted.

Only if Extjs has a grid.putbackRemovedRecord(columnName:columnValue).... which will undelete the Record and place it in its rightful index in the Store :D Cheers!

16 May 2014, 11:38 PM
Yeah, I understand the logic and I also sometimes go down to private properties and method If I need to. There's one risk though: Upgrade of Ext can break the app. And, unfortunately, this is not only a theoretical risk I had to suffer from the "pain of upgrade" many times.

Therefore, when I see that somebody (including myself) accesses private props, I feel I have to mention it to point out that risk. All is fine, if it works and you are aware of the risk.

16 May 2014, 11:54 PM
Thanks for the heads up.
I'll take note of this when I refactor the code in Ext 5 (when it's released and available in architect).