Cascading Combo Box Example

[keckeroo]

My *first* contribution to the examples - hopefully not the last :-)

I finally got my cascading combo boxes working perfectly (uh - and learned much in the process through trial and error). You can adapt this to interface with pretty much any sql database information you may have ... with a little more work i guess this could be configured for any amount of boxes. This example is your standard 'Country/Region/City' selection. If you have any questions feel free to drop me a line.

Note that all references are specific to my application - I prefer XML data streams - you can modify to suite your needs.

//
// Data Stores 
//

var icaGeoDataCountryStore = new Ext.data.Store({
    autoLoad: true,
    pruneModifiedRecords: true,
    url: '/ica/icaGetGeoData.php',
    reader: new Ext.data.XmlReader( { 
       record: "country",
       id: "countryName"
       }, [ 'countryId', 'countryName' ]
    )
});

var icaGeoDataRegionStore = new Ext.data.Store({
    pruneModifiedRecords: true,
    url: '/ica/icaGetGeoData.php',
    reader: new Ext.data.XmlReader( { 
       record: "region",
       id: "regionName"
       }, [ 'regionId', 'regionName' ]
    )
});

var icaGeoDataCityStore = new Ext.data.Store({
    pruneModifiedRecords: true,
    url: '/ica/icaGetGeoData.php',
    reader: new Ext.data.XmlReader({ 
       record: "city",
       id: "cityName"
       }, [ 'cityId', 'cityName' ]
    )
});

//
// GeoData Combo Box Definitions
//
var icaGeoDataCountryCB = new Ext.form.ComboBox({ 
    id: 'icaGeoDataCountry',
    name: 'country',
    fieldLabel: 'Country',
    store: icaGeoDataCountryStore,
           displayField: 'countryName',
    mode: 'local',
    width: 110,
    editable: false,
    emptyText: 'Select a country',
    triggerAction: 'all',
    listeners: {
       'select' : function(cmb, rec, idx) {
           region = Ext.getCmp('icaGeoDataRegion');
           region.clearValue();
           region.store.load({
              params: {'gd_countryname': Ext.getCmp('icaGeoDataCountry').getValue() }
           });
           region.enable();
           city = Ext.getCmp('icaGeoDataCity');
           city.clearValue();
           city.store.removeAll();
           city.disable();
       }
    }
});

var icaGeoDataRegionCB = new Ext.form.ComboBox({ 
    id: 'icaGeoDataRegion',
    name: 'region',
    fieldLabel: 'Region',
    store: icaGeoDataRegionStore,
           displayField: 'regionName',
    mode: 'local',
    width: 110,
    editable: false,
    emptyText: 'Select a region',
    triggerAction: 'all',
    disabled: true,
    listeners: {
       'select': function(cmb, data, idx) {
           city = Ext.getCmp('icaGeoDataCity');
           city.clearValue();
           city.store.load({
              params: { 
                 'gd_countryname': Ext.getCmp('icaGeoDataCountry').getValue(),
                 'gd_regionname': Ext.getCmp('icaGeoDataRegion').getValue() 
              }
           });
           city.enable();
       }
    }
});

var icaGeoDataCityCB = new Ext.form.ComboBox({ 
    id: 'icaGeoDataCity',
    name: 'city',
    fieldLabel: 'City',
    store: icaGeoDataCityStore,
           displayField: 'cityName',
    mode: 'local',
    width: 110,
    editable: false,
    emptyText: 'Select a city',
    triggerAction: 'all',
    disabled: true
});

var icaGeoDataPanel = new Ext.FormPanel({
    id: 'gdPanel',
    width: 200,
    labelWidth: 60,
    items:[
       icaGeoDataCountryCB,
       icaGeoDataRegionCB,
       icaGeoDataCityCB
    ]
});

[vthach]

I am new to js ext and PHP. Would you please post you PHP code as well?

Thanks

[drew]

demo/zip or screenshot would be handy!

[keckeroo]

Thanks for the encouragement .. i have already made modifications to the code so it can be 'self contained' and 'self aware' of its instantiation. Will be updating this shortly :-) along with a screen shot :-) Perhaps this could be a tutorial too ?

[durlabh]

Here is how I've been setting up cascading combo boxes:

My function goes like this:

Ext.ux.SetCascading = function(parent, child) {
    child.setDisabled(!parent.isValid());
    
    parent.on('change', function() {
        child.lastQuery = null;
        child.clearValue();
        child.setDisabled(!parent.isValid());
    });

    child.on('focus', function() {
        if(!child.disabled) {
            var parentValue = parent.getValue();
            var childParams = child.store.baseParams;
            if(parentValue != childParams.ScopeId) {
                childParams.ScopeId = parentValue;
                child.clearValue();
                child.lastQuery = null;
                if(child.mode != 'local') {
                    child.store.removeAll();
                }
            }
        }
    });
};

Then to setup a cascading combo, here is what I do:

        Ext.ux.SetCascading(country, place);

Working sample can be seen at http://www.durlabh.com/kundli/default.aspx

In this live example, for remote combo of birth place, I'm also using the extenstion
http://extjs.com/forum/showthread.php?t=36474

This improves the performance of remote combo. I also plan to use an extension similar to http://extjs.com/forum/showthread.php?t=36743 to improve the user experience on remote combo when they are typing in the values and just press Tab while combo's remote store is still loading.

[mscdex]

Working sample can be seen at http://www.durlabh.com/kundli/default.aspx

I'm not sure if you knew this yet or not but, when you click on the down arrow for your comboboxes on that page, they are cut off at the top by your flash header applet. Especially the birth time and birth place combos.

[durlabh]

Thanks mscdex for pointing it out. It should be working fine now.

[mihat]

I've spent few hours figuring this out ...

I made a function that returns JsonStore object. And on select I call this function with params. However this was not working. Behavior of the combo was very strange. It made a request with correct params and got a proper json response. The combo display was not changed but values behind were. I think it could be a bug, but I'm not familiar with JS or ExtJs to make such a statement.

I solve my problem by using

 modelDest.store.reload({
     params: { countryId: combo.getValue() }
 });

http://www.webeks.net/programming/ex...-combobox.html

[rogerio.carrasqueira]

Hi!

I was wondering about this extension and I'm trying to apply that on a grid. It is working good to add data to the database, but I found a problem. When I try to edit a data set that cames from the database, the child combo cannot get the ScopeId from his parent. So, the question is how to get the already selected value from the parent combo without focus on it, let me show a example:

I have states and city, if you select states the field city will change too, but if I only want to change the city value to another city on the same state, after this grid was loaded from database, how to deal with that?

Thanks,

Rogério Carrasqueira

[Spongerusher]

Hello,

I have a problem with my second xcombo (thx to durlabh) : When I select a value in the calculated dropdown list, the textfield of my combo remains blank although the right value is passed.

Any clue ?
Thx