CODEWITHSUNDEEP
jsonextjs
user1066183
user1066183

Reputation: 2584

Extjs 3.4 populate grid after ajax call

Using Extjs 3.4 My web service respond with a json string: {"msg":"Some"} I want to populate a grid with Some .

Ext.onReady(function(){

  var store = new Ext.data.JsonStore({
     url: "my/json/url.json",
     fields: [{name:"msg"}]
  });

  function StoreLoadCallback(records, operation, success){
      if (success) {
        console.log(records);   // record is undefined
        alert(records); // show 'undefined'
      } else {
        console.log('error');
      }
  }

  function ajaxSearch_function(){
  var query = Ext.getCmp('search').getValue();
    store.load({
        params: {query: query},
        callback: StoreLoadCallback      
    }); 
  }

  var form = new Ext.FormPanel({
    defaultType: 'textfield',
    items: [{
      fieldLabel: 'search',
      name: 'search',
      id: 'search'
    }],

    buttons: [{
      text: 'Search', handler: ajaxSearch_function
    }]
  });  

  form.render('ajax-search_form');

  var grid = new Ext.grid.GridPanel({
    store: store,
    columns: [{
        id       :'title',
        header   : 'title', 
        sortable : true, 
        dataIndex: 'title'
      }],
  });

  grid.render('ajax-grid');
});

The web service respond well, I have tested with Curl. The problem is populate the grid with the json response.

Upvotes: 0

Views: 976

Answers (1)

mara-mfa
mara-mfa

Reputation: 895

If you say that records variable in callback method is undefined, there is probably a problem with parsing the response. I guess it expects array instead of one single record. Try to change the contents of the json file from {"msg" : "Some"} to [{"msg" : "Some"}]

After you cross this hurdle (i. e. the response is correctly parsed), I see that your datagrid column refer to "title" rather than "msg". Title is not a member of the store, so the columns will show empty value anyway.

Also, it is not common to start method name with capital letters (except they represent "classes"), so it is kind of nicer to call the method storeLoadCallback instead of StoreLoadCallback.

Upvotes: 1

Related Questions