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,
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();
}
}
]
});
Try to use the hideMode config option for text fields:
In this case the fields’ values will be passed as parameters.