Hybrid View

  1. #1
    Sencha - Support Team keckeroo's Avatar
    Join Date
    Mar 2008
    Location
    Winnipeg, Canada
    Posts
    298
    Vote Rating
    9
    keckeroo will become famous soon enough

      0  

    Default Cascading Combo Box Example

    Cascading Combo Box Example


    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.

    Code:
    //
    // 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
        ]
    });

  2. #2
    Ext User
    Join Date
    Aug 2007
    Posts
    1
    Vote Rating
    0
    vthach is on a distinguished road

      0  

    Default Would you please post the php code

    Would you please post the php code


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

    Thanks

  3. #3
    Ext User drew's Avatar
    Join Date
    Mar 2007
    Location
    Melbourne
    Posts
    95
    Vote Rating
    0
    drew is on a distinguished road

      0  

    Default


    demo/zip or screenshot would be handy!

  4. #4
    Sencha - Support Team keckeroo's Avatar
    Join Date
    Mar 2008
    Location
    Winnipeg, Canada
    Posts
    298
    Vote Rating
    9
    keckeroo will become famous soon enough

      0  

    Default


    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 ?

  5. #5
    Ext JS Premium Member
    Join Date
    Oct 2007
    Location
    Herndon, VA
    Posts
    265
    Vote Rating
    3
    durlabh is on a distinguished road

      0  

    Default


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

    My function goes like this:
    Code:
    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:
    Code:
            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.

  6. #6
    Ext User
    Join Date
    Aug 2007
    Posts
    60
    Vote Rating
    0
    mscdex is on a distinguished road

      0  

    Default


    Quote Originally Posted by durlabh View Post
    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.

  7. #7
    Ext JS Premium Member jt1088's Avatar
    Join Date
    Sep 2010
    Location
    Sarasota, FL
    Posts
    35
    Vote Rating
    0
    jt1088 is on a distinguished road

      0  

    Default


    Good post - thanks!

  8. #8
    Sencha User
    Join Date
    Feb 2011
    Posts
    2
    Vote Rating
    0
    samir2711 is on a distinguished road

      0  

    Default


    /ica/icaGetGeoData.php i don't know what query i have to write in this:
    icaGetGeoData.php

    select * from icagetGeoData.php or How can i work this is with JSON

  9. #9
    Sencha User
    Join Date
    Apr 2010
    Posts
    4
    Vote Rating
    0
    aderegil is on a distinguished road

      0  

    Default


    Hello keckeroo,

    Do you have an updated version of your code that works with Ext JS 4?

    I'm trying to make it work with version 4 with no luck.

    Thanks.
    Alfredo De Regil

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi