ExtJS 4 rendering new grid based on a combobox selection

Question

I have a grid which uses a remote store and remote pagination because I have too many records.The store for the main grid is:

Ext.define('ArD.store.RecordsListStore', {

    extend: 'Ext.data.Store',
    model: 'ArD.model.RecordsListModel',

    autoLoad: true,
    autoSync: true,
    remoteSort: true,
    remoteFilter: true,

    pageSize: 15,


    proxy: {
        type: 'ajax',
        actionMethods: 'POST',
        api: {
            read:  g_settings.baseUrl + 'index.php/recordslist/getAll',

            destroy: g_settings.baseUrl + 'index.php/recordslist/deleteRecord'
        },
        reader: {
            type: 'json',
            root: 'data',
            totalProperty: 'totalCount',
            successProperty: 'success'  
        },
        writer: {
            root: 'data',
            writeAllFields: true,
            encode: true
        }
    }


});

then I populate my grid and and it's all fine. But the problem is that I have a combobox which looks like this:

{
                            xtype: 'combo',
                            id: 'records_list_form_id',
                            emptyText: 'Choose Form',
                            editable: false,
                            store: 'FilterRecordsByForm',
                            displayField: 'title',
                            valueField: 'id',
                            lastQuery: '',
                            triggerAction: 'all',
                            queryMode: 'remote',
                            typeAhead: false,
                            width: 200,
                            listeners: {
                                select: this._filterRecords
                            }
                        }

And when I select something from the combobox there's the function :

_filterRecords: function()
    {
        var recStore =  Ext.getStore('RecordsListStore');
        var a = Ext.getCmp('records_list_form_id').getValue( );
        var rec = Ext.getStore('FilterRecordsByForm').getAt(a);
        console.log(recStore);
    },

mostly just trying some things but I can get the ID of the selected element from the combobox and that is where I am.

What I need is having the id to make a new query usign my AJAX api (PHP/SQL backend) and populate the grid with the info related with this id. In my case I have 1:M relations so when I pass the Id i expect M records which I want to render on the place of the old grid.

Thanks

Leron

sha sha · Accepted Answer · 2012-04-22T11:52:51

Use filter() method. Provide information that you need to filter by and store object will automatically request updated info from the server (you already have remoteFilter configured).

ExtJS 4 rendering new grid based on a combobox selection

2 Answers