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'
});