Extjs 4.2 remote filter on combobox

Question

I have a really strange problem with remote store wich looks like this:

store:

Ext.define('freetextOrder.store.Attachment', {
    extend: 'Ext.data.Store',
    model: 'freetextOrder.model.Attachment',
    autoLoad: false,
    proxy: {
        actionMethods: {
            create: "POST",
            read: "POST",
            update: "POST",
            destroy: "POST"
        },
        type: 'ajax',
        filterParam: 'filter',
        remoteFilter: true,
        autoSync: true,
        api: {
            read: 'ajax/Attachment/Cartarticle/Init',
            update: 'ajax/Attachment/Cartarticle/Update',
            create: 'ajax/Attachment/Cartarticle/Create',
            destroy: 'ajax/Attachment/Cartarticle/Destroy'
        },
        reader: {
            type: 'json',
            root: 'results',
            successProperty: 'success'
        },
        writer: {
            type: 'json',
            allowSingle: false
        },
        extraParams: {sid: config.sid}
    },
    listeners: {
        datachanged: function (store) {

            if (Ext.getCmp('attachmentGrid'))
                if (store.getCount() > 0) {
                    Ext.getCmp('attachmentGrid').show(); 
                } else {
                    Ext.getCmp('attachmentGrid').hide();
                }
        }
    }
});

model:

Ext.define('freetextOrder.model.Attachment', {
    extend: 'Ext.data.Model',
    fields: [
        {name: 'id', type: 'int'},
        {name: 'cartarticle_id', type: 'int'},
        {name: 'orig_filename', type: 'string'},
        {name: 'upload_time', type: 'date'}
    ]

});

And my mission impossible, load the filter from the store:

 {
            xtype: 'combobox',
            queryMode: 'local',
            mode: 'local',
            fieldLabel: 'template',
            id: 'attachmentTemplate',
            name: 'test',
            store: Ext.create('freetextOrder.store.Attachment'),
            valueField: 'cartarticle_id',
            displayField: 'orig_filename',
            lazyInit: false,
            editable: true,
            invalidCls: '',
            listeners: {
                afterrender: function () {
                    var combo = Ext.getCmp('attachmentTemplate')

                    combo.getStore().clearFilter(true);
                    combo.getStore().addFilter({property: 'id', value: config.options.attTemplateIds});
                    combo.getStore().load();

                    console.log(combo.getStore().getById(49));
                }
            }
        }

The problem is the event wich i am trying to use, i tried everything to make the damn thing load the store elements, but it just wont budge.

The console.log(combo.getStore().getById(49)); returns an object so the store is loaded. but somhow it fails to load into the options of the combobox it self....

WIERD PART IS:

When i go to the page and execute the code in chrome comand prompt:

                 var combo = Ext.getCmp('attachmentTemplate')

                    combo.getStore().clearFilter(true);
                    combo.getStore().addFilter({property: 'id', value: config.options.attTemplateIds});
                    combo.getStore().load();

The options get loaded. i am on the end of my rope. i have to past the config.options.attTemplateIds to the filter. tht is the only requirement. and tht value is only available where the xtype: 'combobox', is defined.

For idiot sake i even tried the most hack option setTimeout around the elements... still nothing... really strange behavior.

Answer 1

There are two things or events: the first is combo's afterRender, the second is store's load;

combo.getStore().getById(49) must use after the second event; but you put it in the combo's afterRender, while the data of store might be not already!

Answer 2

As i stumbeld on this question after a year and wasted AGAIN 4h trying to get it to work, without succes.. and after i rememberd the workaround.. im posting it for others to use.

You can use the extra params for your filtering. Just have to do somthing like this

    var store = Ext.getStore('xxxx');
    store.getProxy().setExtraParam("xxx", newValue);
    store.load();