Programmers Sample Guide: ExtJs 4 cascading ComboBox example using Java Servlet and MySQL

This tutorial will walk you thru creating cascading ComboBoxes, basically html <SELECT> drop down that are linked to each other. When the value in one changes it will then load the other one based on the selected value of the first. The example below uses a MySQL database and Java Servlet to send JSON objects back to ExtJs. It has the following ComboBoxes

Continent
Region
Country

ExtJs 4 cascading ComboBox example using Java Servlet

Application starting point index.html

<html>
<head>
    <title>ExtJs 4 Cascading Combo Boxes Example using Java Servlet</title>

    <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">
   
    <script type="text/javascript" src="extjs/ext-all-debug.js"></script>
    <script type="text/javascript" src="app.js"></script>

</head>
<body></body>
</html>

Application JavaScript file app.js

Ext.Loader.setConfig({ 
    enabled: true 
    });

Ext.override(Ext.LoadMask, {
    onHide: function() {
         this.callParent();
    }
});

Ext.application({
    name: 'CASCADINGCOMBO',

    appFolder: 'app',
   
    controllers: [
                  'Countries'
              ],

    launch: function() {
        Ext.create('Ext.container.Viewport', {
            items: [
                {
                    xtype: 'label',
                    html: '<b>ExtJs 4 Cascading ComboBoxes drill down to a Country</b>'
                },
                {
                    xtype: 'continentSearch',
                    flex: 1
                },
                {
                    xtype: 'regionSearch',
                    flex: 1
                },
                {
                    xtype: 'countrySearch',
                    flex: 1
                },
            ]
        });
    }
});

JavaScript source file for the application controller Countries.js

Ext.define('CASCADINGCOMBO.controller.Countries', {
            extend : 'Ext.app.Controller',

            //define the stores
            stores : ['Continents','Regions','Countries'],
            //define the models
            models : ['Continent','Region','Country'],
            //define the views
            views : ['ContinentSearch','RegionSearch','CountrySearch'],
            refs: [{
                    ref: 'myContinentBox', 
                    selector: 'continentSearch'
                    },
                    {
                    ref: 'myRegionBox', 
                    selector: 'regionSearch'
                    },
                    {
                    ref: 'myCountryBox', 
                    selector: 'countrySearch'
                    }
            ],  
           
            init : function() {
                this.control({
                   
                    'viewport' : {
                        render : this.onPanelRendered
                    },
                    'continentSearch' : {
                        select : this.onContinentSelect
                    },
                    'regionSearch' : {
                        select : this.onRegionSelect
                    }
                });
            },

            onPanelRendered : function() {
                //just a console log to show when the panel si rendered
                console.log('The panel was rendered');
            },
           
            onContinentSelect : function(obj) {
                console.log('Continent is selected');
                var regionBox = this.getMyRegionBox();
                regionBox.getStore().load({
                    params: {'continent': obj.getValue()},
                    callback: function(records, operation, success) {
                            console.log(success);
                       }
                });
                regionBox.enable();
                regionBox.clearValue();
                regionBox.clearInvalid();
               
                var countryBox = this.getMyCountryBox();
                countryBox.clearValue();
                countryBox.clearInvalid();
                countryBox.disable();
            },
           
            onRegionSelect : function(obj) {
                console.log('Region is selected');
                var continentBox = this.getMyContinentBox();
                var countryBox = this.getMyCountryBox();
                countryBox.getStore().load({
                    params: {
                        'continent': continentBox.getValue(),
                        'region': obj.getValue()
                    },
                    callback: function(records, operation, success) {
                            console.log(success);
                       }
                });
                countryBox.enable();
                countryBox.clearValue();
                countryBox.clearInvalid();
               
            }
    });

Click here for next Chapter

Programmers Sample Guide

ExtJs 4 cascading ComboBox example using Java Servlet and MySQL

Application starting point index.html

Application JavaScript file app.js

JavaScript source file for the application controller Countries.js

No comments:

Post a Comment