How to make Dependant ComboBox in ExtJS using Ajax works? My second ComboBox keeps loading
Hope you all are Ok. I have the next problem using two combos (in fact, is an example I'm trying to do, but I can't get the desired result) with ExtJS 4.

My goal is, using one combo and by selecting one of its items, the second combo displays different data (I need to accomplish this excersise to implement the Country-State-City combo set). Since all is an example, it couldn't make sense at all, but the functionallity is what I need.

My code is the next:

    <script type="text/javascript">
        Ext.require([
            'Ext.form.field.ComboBox',
            'Ext.form.FieldSet',
            'Ext.tip.QuickTipManager',
            'Ext.data.*'
        ]);

        Ext.define('State', { //Define state model
            extend: 'Ext.data.Model',
            fields: [
                { type: 'integer', name: 'conse' },
                { type: 'string', name: 'abbr' },
                { type: 'string', name: 'name' },
                { type: 'string', name: 'slogan' }
            ]
        });

        Ext.define('User', { //Define user model
            extend: 'Ext.data.Model',
            fields: [
                { name: 'Id', type: 'string' },
                { name: 'Name', type: 'string' },
            ]
        });

        Ext.onReady(function () {

            var states = [
            { "conse": 1, "abbr": "AL", "name": "Alabama", "slogan": "The Heart of Dixie" },
            { "conse": 2, "abbr": "AK", "name": "Alaska", "slogan": "The Land of the Midnight Sun" },
            { "conse": 3, "abbr": "AZ", "name": "Arizona", "slogan": "The Grand Canyon State" },
            { "conse": 4, "abbr": "AR", "name": "Arkansas", "slogan": "The Natural State" },
            { "conse": 5, "abbr": "CA", "name": "California", "slogan": "The Golden State" },
            { "conse": 6, "abbr": "CO", "name": "Colorado", "slogan": "The Mountain State" },
            { "conse": 7, "abbr": "CT", "name": "Connecticut", "slogan": "The Constitution State" },
            { "conse": 8, "abbr": "DE", "name": "Delaware", "slogan": "The First State" },
            { "conse": 9, "abbr": "DC", "name": "District of Columbia", "slogan": "The Nation's Capital" },
            { "conse": 10, "abbr": "FL", "name": "Florida", "slogan": "The Sunshine State" },
            { "conse": 11, "abbr": "GA", "name": "Georgia", "slogan": "The Peach State" },
            { "conse": 12, "abbr": "HI", "name": "Hawaii", "slogan": "The Aloha State" },
            { "conse": 13, "abbr": "ID", "name": "Idaho", "slogan": "Famous Potatoes" },
            { "conse": 14, "abbr": "IL", "name": "Illinois", "slogan": "The Prairie State" },
            { "conse": 15, "abbr": "IN", "name": "Indiana", "slogan": "The Hospitality State" },
            { "conse": 16, "abbr": "IA", "name": "Iowa", "slogan": "The Corn State" },
            { "conse": 17, "abbr": "KS", "name": "Kansas", "slogan": "The Sunflower State" },
            { "conse": 18, "abbr": "KY", "name": "Kentucky", "slogan": "The Bluegrass State" },
            { "conse": 19, "abbr": "LA", "name": "Louisiana", "slogan": "The Bayou State" },
            { "conse": 20, "abbr": "ME", "name": "Maine", "slogan": "The Pine Tree State" },
            { "conse": 21, "abbr": "MD", "name": "Maryland", "slogan": "Chesapeake State" },
            { "conse": 22, "abbr": "MA", "name": "Massachusetts", "slogan": "The Spirit of America" },
            { "conse": 23, "abbr": "MI", "name": "Michigan", "slogan": "Great Lakes State" },
            { "conse": 24, "abbr": "MN", "name": "Minnesota", "slogan": "North Star State" },
            { "conse": 25, "abbr": "MS", "name": "Mississippi", "slogan": "Magnolia State" },
            { "conse": 26, "abbr": "MO", "name": "Missouri", "slogan": "Show Me State" },
            { "conse": 27, "abbr": "MT", "name": "Montana", "slogan": "Big Sky Country" },
            { "conse": 28, "abbr": "NE", "name": "Nebraska", "slogan": "Beef State" },
            { "conse": 29, "abbr": "NV", "name": "Nevada", "slogan": "Silver State" },
            { "conse": 30, "abbr": "NH", "name": "New Hampshire", "slogan": "Granite State" },
            { "conse": 31, "abbr": "NJ", "name": "New Jersey", "slogan": "Garden State" },
            { "conse": 32, "abbr": "NM", "name": "New Mexico", "slogan": "Land of Enchantment" },
            { "conse": 33, "abbr": "NY", "name": "New York", "slogan": "Empire State" },
            { "conse": 34, "abbr": "NC", "name": "North Carolina", "slogan": "First in Freedom" },
            { "conse": 35, "abbr": "ND", "name": "North Dakota", "slogan": "Peace Garden State" },
            { "conse": 36, "abbr": "OH", "name": "Ohio", "slogan": "The Heart of it All" },
            { "conse": 37, "abbr": "OK", "name": "Oklahoma", "slogan": "Oklahoma is OK" },
            { "conse": 38, "abbr": "OR", "name": "Oregon", "slogan": "Pacific Wonderland" },
            { "conse": 49, "abbr": "PA", "name": "Pennsylvania", "slogan": "Keystone State" },
            { "conse": 40, "abbr": "RI", "name": "Rhode Island", "slogan": "Ocean State" },
            { "conse": 41, "abbr": "SC", "name": "South Carolina", "slogan": "Nothing Could be Finer" },
            { "conse": 42, "abbr": "SD", "name": "South Dakota", "slogan": "Great Faces, Great Places" },
            { "conse": 43, "abbr": "TN", "name": "Tennessee", "slogan": "Volunteer State" },
            { "conse": 44, "abbr": "TX", "name": "Texas", "slogan": "Lone Star State" },
            { "conse": 45, "abbr": "UT", "name": "Utah", "slogan": "Salt Lake State" },
            { "conse": 46, "abbr": "VT", "name": "Vermont", "slogan": "Green Mountain State" },
            { "conse": 47, "abbr": "VA", "name": "Virginia", "slogan": "Mother of States" },
            { "conse": 48, "abbr": "WA", "name": "Washington", "slogan": "Green Tree State" },
            { "conse": 49, "abbr": "WV", "name": "West Virginia", "slogan": "Mountain State" },
            { "conse": 50, "abbr": "WI", "name": "Wisconsin", "slogan": "America's Dairyland" },
            { "conse": 51, "abbr": "WY", "name": "Wyoming", "slogan": "Like No Place on Earth" }
        ];


        var store = Ext.create('Ext.data.Store', { //Store for the STATES
            model: 'State',
            data: states
        });
         
        //In this otherStore, i'll save the Categories data 
        var otherStore = Ext.create('Ext.data.Store', {
            model: 'User',
            proxy: {
                type: 'ajax',
                url: '/Categories',
                reader: {
                    type: 'json',
                    root: 'Categories'
                }
            }
        });

        var simpleCombo = Ext.create('Ext.form.field.ComboBox', {
            id: 'simpleCombo',
            store: otherStore,                        
            displayField: 'Name',
            valueField: 'Id',
            queryMode: 'local',
            triggerAction: 'all',
            emptyText: 'Select a category...',
            renderTo: 'simpleCombo',
            listeners: {
                select: function (combo, record, index) {
                    alert(combo.getValue());
                }
            }
        });

        var anotherCombo = Ext.create('Ext.form.field.ComboBox', {
            fieldLabel: 'Select a single state',
            store: store,
            displayField: 'name',
            valueField: 'conse',
            queryMode: 'local',                       
            forceSelection: true,
            triggerAction: 'all',
            emptyText: 'State',
            selectOnFocus: true,
            renderTo: 'anotherCombo'
        });

        anotherCombo.on('select',function(cmb,record,index){
            simpleCombo.enable();
            simpleCombo.clearValue();
            otherStore.load({
                params:{  
                    id:cmb.getValue()
                }  
            });  
        },this); 
    });
    </script>

Ok, let me explain what I'm trying to do, what is working and what doesn't.
States are loaded into otherCombo. There, when I select one ot its items, I send the conse value to the server (MVC in .NET, which is working fine for the purpose, and so I'm not putting code of it). The conse value says how many Items will be loaded into simpleCombo.
The first time, all seems to work fine. Here is the picture:
![First time selecting otherCombo][1]
<br/>I selected Arizona (Item number 3), so 3 Items are loaded. Ok, that one worked fine, but, the second time I choose other item from otherCombo:

![enter image description here][2]

By choosing Alaska (item number 2), 2 items are loaded, all right? But, something wrong is happening, 'cause it looks like something is still being loaded, but you can see that the data has been correctly changed.

That's my problem. I've watched different examples, and it's supose to be working.

Hope you can help me! :D

Thank you very much in advance.

  [1]: http://i.stack.imgur.com/IiesM.jpg
  [2]: http://i.stack.imgur.com/Z0vD9.jpg
How to make Dependant ComboBox in ExtJS using Ajax works? My second ComboBox keeps loading
===

Hope you all are Ok. I have the next problem using two combos (in fact, is an example I'm trying to do, but I can't get the desired result) with ExtJS 4.

My goal is, using one combo and by selecting one of its items, the second combo displays different data (I need to accomplish this excersise to implement the Country-State-City combo set). Since all is an example, it couldn't make sense at all, but the functionallity is what I need.

My code is the next:

    <script type="text/javascript">
        Ext.require([
            'Ext.form.field.ComboBox',
            'Ext.form.FieldSet',
            'Ext.tip.QuickTipManager',
            'Ext.data.*'
        ]);

        Ext.define('State', { //Define state model
            extend: 'Ext.data.Model',
            fields: [
                { type: 'integer', name: 'conse' },
                { type: 'string', name: 'abbr' },
                { type: 'string', name: 'name' },
                { type: 'string', name: 'slogan' }
            ]
        });

        Ext.define('User', { //Define user model
            extend: 'Ext.data.Model',
            fields: [
                { name: 'Id', type: 'string' },
                { name: 'Name', type: 'string' },
            ]
        });

        Ext.onReady(function () {

            var states = [
            { "conse": 1, "abbr": "AL", "name": "Alabama", "slogan": "The Heart of Dixie" },
            { "conse": 2, "abbr": "AK", "name": "Alaska", "slogan": "The Land of the Midnight Sun" },
            { "conse": 3, "abbr": "AZ", "name": "Arizona", "slogan": "The Grand Canyon State" },
            { "conse": 4, "abbr": "AR", "name": "Arkansas", "slogan": "The Natural State" },
            { "conse": 5, "abbr": "CA", "name": "California", "slogan": "The Golden State" },
            { "conse": 6, "abbr": "CO", "name": "Colorado", "slogan": "The Mountain State" },
            { "conse": 7, "abbr": "CT", "name": "Connecticut", "slogan": "The Constitution State" },
            { "conse": 8, "abbr": "DE", "name": "Delaware", "slogan": "The First State" },
            { "conse": 9, "abbr": "DC", "name": "District of Columbia", "slogan": "The Nation's Capital" },
            { "conse": 10, "abbr": "FL", "name": "Florida", "slogan": "The Sunshine State" },
            { "conse": 11, "abbr": "GA", "name": "Georgia", "slogan": "The Peach State" },
            { "conse": 12, "abbr": "HI", "name": "Hawaii", "slogan": "The Aloha State" },
            { "conse": 13, "abbr": "ID", "name": "Idaho", "slogan": "Famous Potatoes" },
            { "conse": 14, "abbr": "IL", "name": "Illinois", "slogan": "The Prairie State" },
            { "conse": 15, "abbr": "IN", "name": "Indiana", "slogan": "The Hospitality State" },
            { "conse": 16, "abbr": "IA", "name": "Iowa", "slogan": "The Corn State" },
            { "conse": 17, "abbr": "KS", "name": "Kansas", "slogan": "The Sunflower State" },
            { "conse": 18, "abbr": "KY", "name": "Kentucky", "slogan": "The Bluegrass State" },
            { "conse": 19, "abbr": "LA", "name": "Louisiana", "slogan": "The Bayou State" },
            { "conse": 20, "abbr": "ME", "name": "Maine", "slogan": "The Pine Tree State" },
            { "conse": 21, "abbr": "MD", "name": "Maryland", "slogan": "Chesapeake State" },
            { "conse": 22, "abbr": "MA", "name": "Massachusetts", "slogan": "The Spirit of America" },
            { "conse": 23, "abbr": "MI", "name": "Michigan", "slogan": "Great Lakes State" },
            { "conse": 24, "abbr": "MN", "name": "Minnesota", "slogan": "North Star State" },
            { "conse": 25, "abbr": "MS", "name": "Mississippi", "slogan": "Magnolia State" },
            { "conse": 26, "abbr": "MO", "name": "Missouri", "slogan": "Show Me State" },
            { "conse": 27, "abbr": "MT", "name": "Montana", "slogan": "Big Sky Country" },
            { "conse": 28, "abbr": "NE", "name": "Nebraska", "slogan": "Beef State" },
            { "conse": 29, "abbr": "NV", "name": "Nevada", "slogan": "Silver State" },
            { "conse": 30, "abbr": "NH", "name": "New Hampshire", "slogan": "Granite State" },
            { "conse": 31, "abbr": "NJ", "name": "New Jersey", "slogan": "Garden State" },
            { "conse": 32, "abbr": "NM", "name": "New Mexico", "slogan": "Land of Enchantment" },
            { "conse": 33, "abbr": "NY", "name": "New York", "slogan": "Empire State" },
            { "conse": 34, "abbr": "NC", "name": "North Carolina", "slogan": "First in Freedom" },
            { "conse": 35, "abbr": "ND", "name": "North Dakota", "slogan": "Peace Garden State" },
            { "conse": 36, "abbr": "OH", "name": "Ohio", "slogan": "The Heart of it All" },
            { "conse": 37, "abbr": "OK", "name": "Oklahoma", "slogan": "Oklahoma is OK" },
            { "conse": 38, "abbr": "OR", "name": "Oregon", "slogan": "Pacific Wonderland" },
            { "conse": 49, "abbr": "PA", "name": "Pennsylvania", "slogan": "Keystone State" },
            { "conse": 40, "abbr": "RI", "name": "Rhode Island", "slogan": "Ocean State" },
            { "conse": 41, "abbr": "SC", "name": "South Carolina", "slogan": "Nothing Could be Finer" },
            { "conse": 42, "abbr": "SD", "name": "South Dakota", "slogan": "Great Faces, Great Places" },
            { "conse": 43, "abbr": "TN", "name": "Tennessee", "slogan": "Volunteer State" },
            { "conse": 44, "abbr": "TX", "name": "Texas", "slogan": "Lone Star State" },
            { "conse": 45, "abbr": "UT", "name": "Utah", "slogan": "Salt Lake State" },
            { "conse": 46, "abbr": "VT", "name": "Vermont", "slogan": "Green Mountain State" },
            { "conse": 47, "abbr": "VA", "name": "Virginia", "slogan": "Mother of States" },
            { "conse": 48, "abbr": "WA", "name": "Washington", "slogan": "Green Tree State" },
            { "conse": 49, "abbr": "WV", "name": "West Virginia", "slogan": "Mountain State" },
            { "conse": 50, "abbr": "WI", "name": "Wisconsin", "slogan": "America's Dairyland" },
            { "conse": 51, "abbr": "WY", "name": "Wyoming", "slogan": "Like No Place on Earth" }
        ];


        var store = Ext.create('Ext.data.Store', { //Store for the STATES
            model: 'State',
            data: states
        });
         
        //In this otherStore, i'll save the Categories data 
        var otherStore = Ext.create('Ext.data.Store', {
            model: 'User',
            proxy: {
                type: 'ajax',
                url: '/Categories',
                reader: {
                    type: 'json',
                    root: 'Categories'
                }
            }
        });

        var simpleCombo = Ext.create('Ext.form.field.ComboBox', {
            id: 'simpleCombo',
            store: otherStore,                        
            displayField: 'Name',
            valueField: 'Id',
            queryMode: 'local',
            triggerAction: 'all',
            emptyText: 'Select a category...',
            renderTo: 'simpleCombo',
            listeners: {
                select: function (combo, record, index) {
                    alert(combo.getValue());
                }
            }
        });

        var anotherCombo = Ext.create('Ext.form.field.ComboBox', {
            fieldLabel: 'Select a single state',
            store: store,
            displayField: 'name',
            valueField: 'conse',
            queryMode: 'local',                       
            forceSelection: true,
            triggerAction: 'all',
            emptyText: 'State',
            selectOnFocus: true,
            renderTo: 'anotherCombo'
        });

        anotherCombo.on('select',function(cmb,record,index){
            simpleCombo.enable();
            simpleCombo.clearValue();
            otherStore.load({
                params:{  
                    id:cmb.getValue()
                }  
            });  
        },this); 
    });
    </script>

Ok, let me explain what I'm trying to do, what is working and what doesn't.
States are loaded into otherCombo. There, when I select one ot its items, I send the conse value to the server (MVC in .NET, which is working fine for the purpose, and so I'm not putting code of it). The conse value says how many Items will be loaded into simpleCombo.
The first time, all seems to work fine. Here is the picture:
![First time selecting otherCombo][1]
<br/>I selected Arizona (Item number 3), so 3 Items are loaded. Ok, that one worked fine, but, the second time I choose other item from otherCombo:

![enter image description here][2]

By choosing Alaska (item number 2), 2 items are loaded, all right? But, something wrong is happening, 'cause it looks like something is still being loaded, but you can see that the data has been correctly changed.

That's my problem. I've watched different examples, and it's supose to be working.

Hope you can help me! :D

Thank you very much in advance.

  [1]: http://i.stack.imgur.com/IiesM.jpg
  [2]: http://i.stack.imgur.com/Z0vD9.jpg