How to insert data in EXTJS grid?

Question

I have a EXTJS form with a search text box, search button and grid control. Once form generated on search button click event I post an AJAX request to the servlet get JSON data back and need to put it into the grid. How do I put data into the grid after the form rendered? I am new to this programming thing. Sample code is greatly appreciated.

Ext.onReady(function(){

    Ext.QuickTips.init();

    var xmlhttp = new getXMLObject();
    var result = null; 


    //Search 
    var searchNum = function(){         
      if(xmlhttp) {  
          var srItem = Ext.getCmp("srItem").getValue();

          xmlhttp.open("POST","searchServlet", true);
          xmlhttp.onreadystatechange = 
              function(){
                    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {  
                        result = JSON.parse(xmlhttp.responseText);  
                        // returns data in JSON Fromat[{column1:11, column2:11, column3:11}];                       
                    }
             };  

            //handleServerResponse;
            xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
            xmlhttp.send("srItem=" + srItem.trim()); 
       }    
    };



    // MODEL    
    Ext.define('SearchGrid', {
        extend: 'Ext.data.Model',
        fields: [
           {name:'column1'},
           {name: 'column2'},
           {name: 'column3'}
        ]
    });



    // create the data store
    var store = Ext.create('Ext.data.JsonStore', {
        model: 'SearchGrid',
        data: result
    });


    /*===========================================
     * Generate a Form
     *===========================================
     */
    var search = Ext.create('Ext.form.Panel', {
        frame:true,
        title: 'Form',
        bodyStyle:'padding:5px 5px 0',
        width: 400,
        fieldDefaults: {
            msgTarget: 'side',
            labelWidth: 100
        },
        defaultType: 'textfield',
        defaults: {
            anchor: '80%'
        },

        items: [{
            fieldLabel: 'Search Number',
            name: 'srItem',
            id: 'srItem',
            allowBlank:false
        },
        {
            xtype: 'gridpanel',
            store: store,
            stateful: true,
            title: 'My Grid Panel',
            height: 200,
            width: 400,
            columns: [
                {
                    xtype: 'gridcolumn',
                    dataIndex: 'column1',
                    text: 'Column 1'
                },
                {
                    xtype: 'gridcolumn',
                    dataIndex: 'column2',
                    text: 'Column 2'                        
                },
                {
                    xtype: 'gridcolumn',
                    dataIndex: 'column3',
                    text: 'Column 3'
                }
            ],
            viewConfig: {
                stripeRows: true,
                enableTextSelection: true
            }
        }

        ],

        buttons: [{
            text: 'Search',
            handler: function(){
                if(search.getForm().isValid()){
                    search();
                }
            }
        }]
    });


    search.render("searchForm");    
});

Answer 1

I don't quite get the idea behind this:

//Search 
var searchNum = function(){         
  if(xmlhttp) {  
      var srItem = Ext.getCmp("srItem").getValue();

      xmlhttp.open("POST","searchServlet", true);
      xmlhttp.onreadystatechange = 
          function(){
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {  
                    result = JSON.parse(xmlhttp.responseText);  
                    // returns data in JSON Fromat[{column1:11, column2:11, column3:11}];                       
                }
         };  

        //handleServerResponse;
        xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        xmlhttp.send("srItem=" + srItem.trim()); 
   }    
};

Can't you use a proxy with store? It would automatically reload data into grid on store.load(), and you'd be able to specify proxy parameters to be added to query.

var store = Ext.create('Ext.data.JsonStore', {
    model: 'SearchGrid',
    autoLoad: true,
    proxy: {
       type:'ajax',
       method:'POST',
       url:'searchServlet',
       extraParams: {
          param1: 'String to be sent in POST array with key name "param1"'
       }
    },
    reader: {
       type:'json',
       root:'data'
    }
});

Json would have to look like this:

{
     data: [
         {column1:11, column2:11, column3:11},
         {column1:22, column2:22, column3:22}
     ]
}

Answer 2

Discalimer: I'd used EXTJS 2.x version not after that.

With what you have already written, the solution could be something like

result = JSON.parse(xmlhttp.responseText);
for (var i = 0; i < result.length; i++){
    store.add(result[i]);
}

But AFAIK this is not the proper way to do this
There is no need to use raw XMLHTTPrequest since Ext provides a wrapper for ajax and for stores loads data from a remote source you can use a proxy based store