Extjs - Loading Grid when call

Question

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

My Controller

xmlhttp.open("GET", "AdvSearch.php?search_name=" + search_name, true);
xmlhttp.send(null);

My PHP script

 if (!$con) {
     throw new Exception("Error in connection to DB");
 }

 $query = "SELECT name, gender FROM students  WHERE name ILIKE '%$search_name%' ";
 $result = pg_query($query);
 while ($row = pg_fetch_array($result)) {
     $Arr[] = array('name' => $row[0], 'gender' => $row[1]);
 }
 $searchResult_list = array();
 $searchResult_list['success'] = true;
 $searchResult_list['Arr'] = $Arr;

 $searchResult_list['totalCount'] = count($searchResult_list['Arr']);

 echo json_encode($searchResult_list);


 if (!$result)
     die("Error in query: ".pg_last_error());



 pg_close($con);

I think we will need the code describing how you make the call to your search web service using the search form as well. It should be as easy as calling AdvSearchPost.load({params: searchObject}); — Stephen Tremaine

Stephen Tremaine Stephen Tremaine · Accepted Answer · 2012-11-28T20:02:32

Alright...I think I can help but it will require a slightly different line of thinking than what you're doing right now.

When you created the store, you gave it a proxy that can be used to make AJAX calls. It did not make it track ajax calls to the defined url. So when you defined your store, and gave it an id, it registered an instance of that store inside the store manager. You should then use the proxy of that store to load data into it like so in your controller:

Controller:

//Get a reference to the store that the view references
var store = Ext.data.StoreManager.lookup('advSearchStore');

//Load data into the store using it's configured proxy
store.load({
    params: {
        search_name: search_name
    }
});

Assuming everything is set up right in the proxy (it looks good) and that the server gets and responds to the request correctly, the proxy you set up should decode the JSON data that your web service returns, decode it into a javascript object, get the Arr property, and convert each item into an instance of the defined model. It will then add these to the grid automatically and you should have the intended result.

Extjs - Loading Grid when call

2 Answers

Controller: