title: ExtJS:based on combobox values hide and unhide the fields and pass it to springMVC
body: <p>I have two dropdowns in extjs,based on the first dropdwon,the second dropdown populates.This is working fine and i am able to pass the values to springMVC,but problem comes when i have to hide/unhide the textfields based on the second dropdown,hiding/unhiding works fine,but i am unable to pass the parametrs to SpringMVC.
  Here is my .js files.
  Could anybody tell where i have to correct,</p>
  
  <pre><code>Ext.Loader.setConfig({
  enabled: true
  });
  Ext.require(['*']);
  
  var country = Ext.create('Ext.data.Store', {
  fields: ['abbr', 'name'],
  data: [{
      "abbr": "USA",
      "name": "USA"
  }, {
      "abbr": "UK",
      "name": "UK"
  },
  
  
  ]
  });
  
  var states = Ext.create('Ext.data.Store', {
  fields: ['id', 'abbr', 'name'],
  data: [{
      "id": "New York",
      "abbr": "USA",
      "name": "New York"
  }, {
      "id": "New Jersey",
      "abbr": "USA",
      "name": "New Jersey"
  }, {
      "id": "London",
      "abbr": "UK",
      "name": "London"
  }, {
      "id": "Hampshire",
      "abbr": "UK",
      "name": "Hampshire"
  }]
  });
  Ext.define('App.view.countryPanel', {
  extend: 'Ext.form.Panel',
  alias: 'widget.CountryPanel',
  id: 'countrypanel',
  
  
  title: 'Country',
  frame: true,
  width: 400,
  fieldDefaults: {
      labelWidth: 200
  },
  bodyPadding: '15 16 10',
  
  height: 200,
  id: 'countrypanel',
  
  method: 'POST',
  
  
  
  
  items: [
  
  
  
  {
      xtype: 'combo',
      id: 'con',
      name: 'con',
      fieldLabel: 'Country',
      displayField: 'name',
  
      emptyText: 'Select a Country',
      valueField: 'abbr',
      store: country,
      listeners: {
          'select': {
              fn: function (combo, value) {
  
                  var comboState = Ext.getCmp('statelist');
                  comboState.bindStore(states);
                  comboState.clearValue();
                  comboState.store.filter('abbr', combo.getValue());
  
                  states = Ext.create('Ext.data.Store', {
                      fields: ['id', 'abbr', 'name'],
                      data: [{
                          "id": "New York",
                          "abbr": "USA",
                          "name": "New York"
                      }, {
                          "id": "New Jersey",
                          "abbr": "USA",
                          "name": "New Jersey"
                      }, {
                          "id": "London",
                          "abbr": "UK",
                          "name": "London"
                      }, {
                          "id": "Hampshire",
                          "abbr": "UK",
                          "name": "Hampshire"
                      }]
                  });
  
  
  
              }
          }
      }
  }, {
      xtype: 'combo',
      id: 'statelist',
      name: 'statelist',
      fieldLabel: 'Stated',
      displayField: 'name',
      emptyText: 'Select states',
      valueField: 'id',
      store: states,
      listeners: {
          'select': {
              fn: function (combo, value) {
                  var sample = combo.getValue();
  
  
  
  
                  if (sample == 'London') {
  
  
                      Ext.getCmp('Tower').getEl().show();
  
  
                  } else {
  
                      Ext.getCmp('Tower').getEl().hide();
                      Ext.getCmp('Liberty').getEl().show();
  
                  }
  
  
                  var comboState = Ext.getCmp('statelist');
                  comboState.bindStore(states);
                  comboState.clearValue();
                  comboState.store.filter('abbr', combo.getValue());
  
  
  
              }
          }
      }
  }, {
      xtype: 'textfield',
      id: 'Tower',
      name: 'Tower',
      fieldLabel: 'ClockTower',
      hidden: true,
  
      allowBlank: false
  
  }, {
      xtype: 'textfield',
      id: 'Liberty',
      name: 'Liberty',
      fieldLabel: 'Liberty',
      hidden: true,
      minWidth: 20,
      allowBlank: false
  
  }],
  buttonAlign: 'center',
  buttons: [
  
  {
      text: 'Submit',
      handler: function () {
  
          var sspanel = Ext.getCmp('countrypanel');
          var form = sspanel.getForm();
  
  
          form.submit({
  
  
              url: 'country.htm',
  
  
              success: function (form, action) {
  
  
                  Ext.Msg.alert('Success');
  
  
  
  
              },
  
              failure: function (form, action) {
  
                  Ext.Msg.alert('failure');
              }
  
  
  
          });
  
  
      }
  
  },
  
  {
  
      text: 'Reset',
      handler: function () {
          var sspanel = Ext.getCmp('countrypanel');
          var form = sspanel.getForm();
          form.reset();
      }
  }
  
  ]
  
  });
  </code></pre>