1. #1
    Sencha - Support Team keckeroo's Avatar
    Join Date
    Mar 2008
    Location
    Winnipeg, Canada
    Posts
    289
    Vote Rating
    6
    keckeroo is on a distinguished road

      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
    289
    Vote Rating
    6
    keckeroo is on a distinguished road

      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
    Join Date
    Oct 2007
    Location
    Herndon, VA
    Posts
    265
    Vote Rating
    3
    durlabh is on a distinguished road

      0  

    Default


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

  8. #8
    Ext User
    Join Date
    Feb 2009
    Location
    Slovenia
    Posts
    4
    Vote Rating
    0
    mihat is on a distinguished road

      0  

    Default


    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
    Code:
     modelDest.store.reload({
         params: { countryId: combo.getValue() }
     });
    
    http://www.webeks.net/programming/ex...-combobox.html

  9. #9
    Ext User
    Join Date
    Jun 2010
    Posts
    23
    Vote Rating
    0
    rogerio.carrasqueira is on a distinguished road

      0  

    Exclamation How to deal with cascade combo box on a grid with loaded values

    How to deal with cascade combo box on a grid with loaded values


    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

  10. #10
    Sencha User
    Join Date
    Aug 2009
    Posts
    25
    Vote Rating
    0
    Spongerusher is on a distinguished road

      0  

    Default


    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

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar