PDA

View Full Version : Question regarding a Combobox/Store dependant on another Combobox/Store



Steve_Terry
25 Mar 2012, 9:18 PM
Hi there,

Currently I have 2 comboboxes and 2 stores such that they are setup as follows (for example)...

Combox 1: carManufacturerCombo
Store 1: carManufacturerStore

Combobox 2: carModelCombo
Store 2: carModelStore

What I was hoping to achieve (as you might have already guessed) was that when a (car manufacturer) selection is made with the 1st Combobox (carManufactorCombo) that it will populate the 2nd Combobox (carModelCombo) with a list of car models associated with that car manufacturer.

Note: Cars is just a clean example I have described similar to what I'm working with in my program.

The carManufacturerStore uses an ajax request so that when the app is launched, it queries the database for all car manufacturers and then loads that data into the carManufacturerCombo (this is working correctly).

The carModelStore also uses an ajax request (which eventually queries a database to retrieve all car models associated with that car manufacturer) although this store is set to not autoload. This store is only suppose to load when the user selects a car manufacturer in the carManufacturerCombo.

The problem is that the 2nd combobox (carModelCombo) is not being populated correctly.

How I have it implemented is that I have used the "change" event for the 1st combobox (carManufacturerCombo) which executes the function below so that when a change is made (aka a car manufacturer is selected) than it will load the carModelStore which will populate the carModelCombo with all car models of that car manufacturer.



ifCarManufacturerSelected: function()
{
//Set variable to the name of the car manufacturer selected
var carManufacturerName = Ext.getCmp('carManufacturerCombo').getValue();

//Output the name of the car manufacturer
console.log(carManufacturerName);

//1st attempt which didn't work correctly
//Ext.getCmp('carModelCombo').store.getProxy().extraParams.carManufacturer = Ext.getCmp('carManufacturerCombo').getValue();

//2nd attempt which also doesn't work correctly
Ext.getCmp('carModelCombo').store.load( function({Ext.getCmp('carModelCombo').store.proxy.extraParams.carManufacturer = carManufacturerName });
}


What I am actually receiving with "console.log(carManufacturerName)" is the actual name of the car manufacturer selected however when I attempt to load the carModelStore it is not loading correctly because the 2nd attempt show above is producing a null value instead of the actual carManufacturerName value.

I'm a bit confused how I am actually receiving a null value since...

1) The function won't even execute if a value isn't selected so therefore I should never be getting a null value

2) When I checked the value with "console.log(carManufacturerName)" it still gives me the correct selected value

So the almost 2 code lines later the value changes from the actual selected value to a null value.

I have tried other methods which also didn't work so I'm wondering if there is a known approach to solving this problem of using 2 comboboxes.

vietits
25 Mar 2012, 10:23 PM
ifCarManufacturerSelected: function()
{
//Set variable to the name of the car manufacturer selected
var carManufacturerName = Ext.getCmp('carManufacturerCombo').getValue();


//Output the name of the car manufacturer
console.log(carManufacturerName);


//1st attempt which didn't work correctly
//Ext.getCmp('carModelCombo').store.getProxy().extraParams.carManufacturer = Ext.getCmp('carManufacturerCombo').getValue();


//2nd attempt which also doesn't work correctly
//Ext.getCmp('carModelCombo').store.load( function({Ext.getCmp('carModelCombo').store.proxy.extraParams.carManufacturer = carManufacturerName });
Ext.getCmp('carModelCombo').getStore().load({
params: {
carManufacturer: carManufacturerName
}
});
}

Steve_Terry
26 Mar 2012, 7:19 AM
@vietits

Hmmmm, still getting a null value.

My carModelStore proxy is defined as such...



proxy:
{
type: 'ajax',

//Servlet url
url: '/carExampleServlet',

//POST method of Servlet
method: 'POST',

extraParams:
{
//send "retrieveCarModels" request to Servlet
operationRequested: "retrieveCarModels"
},

//Reader will interrupt the response from servlet
reader:
{
//array type format
type: 'array'
}
},


So is that possibly causing a confliction if I do (highlighted in red below)...



ifCarManufacturerSelected: function()
{
//Set variable to the name of the car manufacturer selected
var carManufacturerName = Ext.getCmp('carManufacturerCombo').getValue();

//Output the name of the car manufacturer
console.log(carManufacturerName);

Ext.getCmp('carModelCombo').getStore().load(
{
extraParams:
{
carManufacturer: carManufacturerName
}
});
}


On the Servlet end, what is occurring is that I am first receiving the "retrieveCarModels" value
from the parameter "operationRequested" and following that is the parameter "carManufacturer" which
is still displaying a null value.

I want to be able to send 2 request parameters over to the Servlet (1st for defining what operation I want to do aka retrieve car models, and 2nd for the car manufacturer for which to retrieve the car models from).

I have been able to do that before for a standard ajax request (of even passing up to 8+ parameters to the servlet) but it seems as soon as I attempt to modify the proxy associated with a store, it doesn't work correctly (hence the 2 parameter returning a null value once it reaches the Servlet).

vietits
26 Mar 2012, 7:39 AM
Use params instead of extraParams with <store>.load(). Re-check my fix in previous post.