EXTJS Filtering HasOne Associations

Question

I have a grid with a custom renderer, see below

{                 text: 'Last Name',
                    dataIndex:'LastName',
                    renderer: function(v, m, r) {
                        return r.getDemographic().get('LastName');
                    }           
                }

I would like to be able to filter out the property when a user types, I have the following

{
                    fieldLabel: 'Last Name',
                    emptyText: 'Last Name',
                    listeners: {
                        change: function (field, newValue, oldValue, options) {

                            var grid = Ext.getCmp('Grid');
                            grid.store.clearFilter();


                            grid.store.filter([
                                { property: "Demographic.LastName", value: newValue }
                            ]);
                        }
                    }



                }

Problem is, the Property isn't what it is and I am unable to find what the property that I need to bind to is called. The model is the following

Ext.define('Test', {
    extend: 'Ext.data.Model',

    fields: [
       'id'
    ],


        { type: 'hasOne', model: 'Demographic', associationKey: 'Demographic', getterName: 'getDemographic' }]

});

Answer 1

Use filter method with function:

grid.store.clearFilter(true);
grid.store.filter({ filterFn: function(item) { 
     return item.getDemographic().get('LastName') == newValue; 
    }
});

http://docs.sencha.com/extjs/4.1.1/#!/api/Ext.data.Store-method-clearFilter

Answer 2

Since it is an hasOne association you can try to add an additional field with a mapping to Demographic.LastName to your Test model that you can use for filtering directly on the Test model.

Ext.define('Test', {
    extend: 'Ext.data.Model',

    fields: [
       'id',
       {name: 'MappedLastName', mapping: 'Demographic.LastName'}
    ],

    { type: 'hasOne', model: 'Demographic', associationKey: 'Demographic', getterName: 'getDemographic' }]

});

Then you can use this for filtering

grid.store.filter([
      { property: "MappedLastName", value: newValue }
]);