Extjs - Loading Grid when call

[Oxii]

I have form and grid. the user must enter data in form fields then display related records in the grid. I want to implement a search form, e.g: user will type the name and gender of the student, then will get a grid of all students have the same name and gender.
So, I use ajax to send form fields value to PHP and then creat a json_encode wich will be used in grid store.
I am really not sure if my idea is good. But I haven't found another way to do that.
The problem is when I set autoLoad to true in the store, the grid automatically filled with all data - not just what I asked for -
So, I understand that I have to set autoLoad to false, but then the result not shown in the grid even it returned successfully in the firebug!

I don't know what to do.

My View:{

xtype: 'panel',
layout: "fit",
id: 'searchResult',
flex: 7,
title: '<div style="text-align:center;"/>SearchResultGrid</div>',
items:
 [{
xtype: 'gridpanel', 
        store: 'advSearchStore', 
                                           id: 'AdvSearch-grid', 
                                          columns: 
[{
xtype: 
'gridcolumn', 
                                                   dataIndex: 'name',
align: 'right', 
text: 'name' }
,
{ 
xtype: 'gridcolumn', 
                                                   dataIndex: 'gender',
align: 'right',
text: 'gender'
}],
viewConfig: 
{                                               id : 'Arr',
emptyText: 'noResult'},
                                            requires: 
['MyApp.PrintSave_toolbar'],       dockedItems: [       {      xtype: 'PrintSave_tb',                                                     dock: 'bottom', }  ]   }     ]       },

My Store and Model:

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

   proxy: 
{ 
       type: 'ajax', 
       url: 'AdvSearch.php',
        reader: 
{ 
           type: 'json', 
           root: 'Arr',
            totalProperty: 'totalCount'
        }    }, 
   fields:
 [        { name: 'name'},
        { name: 'type_and_cargo'}    ]
});
    
Ext.create('Ext.data.Store', 
{   pageSize: 10, 
  autoLoad: false, 
  model: 'AdvSearchPost', 
  storeId: 'AdvSearchPost'})

;

[flanders]

You can of course leave the autoLoad in, if it works well. This might give the user more the idea that he is filtering. But thats a design choice. However, if you don't set autoLoad, you do have to set remoteFiltering.

What you need to do is when the user is ready filling out your form and presses a button (or listen to change events from the fields - whatever u want) to filter() the store. If you have initially loaded all data this will perform local filtering on the local data. If you autoLoad : false and remoteFiltering: true, this will generate a request to your serverside with the parameters you provided to filter attached.

Okay thats fairly abstract, example:

filterButton.on('click', function(button) {
    yourStore.filter([{
      property: 'name',
      value: 'AapNootMies'
    },{
      property: 'gender',
      value: 'male'
    }]
});