View Full Version : Filter results from store based on textfield change

15 Jul 2013, 1:00 PM
Hey guys,

I have a grid with over a thousand rows and when you select one of the rows, a window pops up so you can edit and overwrite certain fields. What I'm looking to do is as the user changes the 'id' field I want to be able to see if that 'id' exists, and if it does it will trigger a message box, requiring the user to make a decision. I've tried a few different functions such as change and a validator function and i've also tried filtering what's in the store under 'id' but I think my syntax might be off. Can anyone shed some light please?

16 Jul 2013, 2:45 AM
You can add a change listener to your textfield:

textfield.on('change', function(field, newValue, oldValue) {
// here you can then use findRecord with newValue
var record = store.findRecord(id, newValue, 0, false, true, true); // for exact match only

Check documentation of findRecord (http://docs.sencha.com/extjs/4.2.0/#!/api/Ext.data.Store-method-findRecord) and its options.

16 Jul 2013, 5:47 AM
Code looks good, let me give this a try. Thank you very much!

16 Jul 2013, 7:42 AM
There still seems to be an issue, my code is below:

xtype: 'textfield'
,id: 'id'
,name: 'id'
,fieldLabel: 'Id'
,width: 350
,listeners: {
change: function(field, newValue, oldValue) {
var store = Ext.getStore('Users.FormStore');
var textField = Ext.getCmp('id');
var record = store.findRecord(textField, newValue, 0, false, true, true);
if(record) {
title: 'Id Error',
msg: 'Id already exists,' +
'do you wish to proceed?',
buttons: Ext.Msg.YESNOCANCEL,
icon: Ext.Msg.Question,
fn: function(btn) {
if(btn == 'no') {

'Users.FormStore' is my storeId
I tried using textField.on('change'.... but I think my syntax was off or something because it was giving me an error. Does my code look okay?

16 Jul 2013, 11:08 AM
on which line does the error occur. try to debug using Firebug. Also, please dont use 'id' as id.

16 Jul 2013, 12:56 PM
I am getting an undefined store when I try to load it with:

callback: function(records, operation, success) {
if(success) {
console.log("store: " + records.data);

my form store config (in the same file):

storeId: 'Users.FormStore'
,refDataLists: ['userList']

and my store itself:

Ext.define('Users', {
extend: 'BaseStore'
,model: 'Users'
,remoteSort: true
,pageSize: 20

,proxy: {
type: 'ajax'
,url: contextRoot + '/users/list.htm?alt=json'
,actionMethods: 'POST'
,simpleSortMode: true
,pageParam: undefined
,reader: {
type: 'json'
,root: 'users'
,successProperty: 'success'
,totalProperty: 'totalCount'

,sorters: [{
property: 'id'
,direction: 'DESC'

I also have a UserController which uses the store property and defines it as 'Users' and I'm wondering if that might be causing an issue.

16 Jul 2013, 1:00 PM
I am not sure but i think the defines have to be unique throughout the application. Using duplicate names there might cause a problem (similarly, using duplicate ids can cause problems and its recommended not to use id property).