Getting Reader Undefined error while loading JSON data into combobox in EXTJS

I have two dropdowns, on changing the value of one dropdown it should populate value in another dropdown. I am making ajax call using JSON and I am getting response as well. But after getting response, values not getting loaded into store of second combo box. Getting error: Reader undefined Below is my code:

//Second COMBO Description

  var AGENT_NAME_Field = Ext.create('Ext.form.field.ComboBox', {
    id: 'AGENT_NAME',
    name: 'AGENT_NAME',       
    width: 300,
    displayField: 'name',
    store: agentNameStore,
    queryMode: 'local',
    allowBlank: false,
    listConfig: {
        getInnerTpl: function() {
            return '<div data-qtip="{name}">{name}</div>';
        }
    }
}); 

// Store for second combo

 var agentNameStore = Ext.create('Ext.data.Store', {
  proxy: {
    type: 'ajax',
    url : 'name.json',
    reader: new Ext.data.JsonReader({
        totalProperty: 'results',
        root:'items'
    }, [{name: 'name'}, {name: 'name'}])

}

}); 

// This is how I am making ajax call and FUNCTION_NAME_Field is first combo

 FUNCTION_NAME_Field.on('select', function() {
    AGENT_NAME_Field.reset();
    agentNameStore.proxy= new Ext.data.HttpProxy({url: '/omsWeb/navigation/getAgent.htm?id='+FUNCTION_NAME_Field.getValue()}开发者_JS百科);
    agentNameStore.load();
});

I traced the logs, I am getting the response as success but after that its throwing error: Reader undefined. Am I missing something? Or is something wrong? Could anyone please help. Thanks Praveen

You are redefining your proxy without including a reader definition. Not sure why you are even doing that to begin with -- each combo should already have its own preconfigured store+proxy+reader. I'm not sure why you're changing it on the fly.

Try this:

1. remove this string:

   agentNameStore.proxy= new Ext.data.HttpProxy({url: '/omsWeb/navigation/getAgent.htm?id='+FUNCTION_NAME_Field.getValue()});
   

2. and replace url value in proxy of your store:

   url: '/omsWeb/navigation/getAgent.htm?id='+ Ext.ComponentManager.get(ID).getValue()}
   

where ID is id of FUNCTION_NAME_Field

Edited:

Check this example i created for you

Ext.onReady(function() {

  var ds = Ext.create('Ext.data.Store', {
      pageSize: 10,
      proxy: {
        type: 'jsonp',
        url : 'http://www.sencha.com/forum/topics-remote.php',
        reader: {
          type: 'json',
          root: 'topics',
          totalProperty: 'totalCount'
        }
      },

      fields: [
        {name: 'id', mapping: 'post_id'},
        {name: 'title', mapping: 'topic_title'},
        {name: 'topicId', mapping: 'topic_id'},
        {name: 'author', mapping: 'author'},
        {name: 'lastPost', mapping: 'post_time', type: 'date', dateFormat: 'timestamp'},
        {name: 'excerpt', mapping: 'post_text'}
      ]
  });

  var ds2 = Ext.create('Ext.data.Store', {
      pageSize: 10,
      fields: [
        {name: 'id', mapping: 'id'},
      ]
  });

  var cb1 = Ext.create('Ext.form.ComboBox', {
      id: 'cb1',
      fieldLabel: 'TEST',
      store: ds,
      displayField: 'title',
      valueField: 'id',
      multiSelect: false,
      renderTo: Ext.getBody()
  });

  var cb2 = Ext.create('Ext.form.ComboBox', {
      disabled : true,
      id: 'cb2',
      fieldLabel: 'TEST2',
      store: ds2,
      displayField: 'title',
      valueField: 'id',
      renderTo: Ext.getBody()
  });

  cb1.on('select', function(combo, value) {
      cb2.enable();       
      ds2.load();     
  });

  ds2.on('beforeload', function(store, operation) {
      alert(Ext.ComponentManager.get('cb1').getValue());
      this.setProxy(Ext.create('Ext.data.proxy.Ajax', {
            url : '/omsWeb/navigation/getAgent.htm',
            extraParams : {
                id: Ext.ComponentManager.get('cb1').getValue()
            }
          }));
  },ds2);
})