Blog Archive

ExtJs 4 ComboBox tutorial using Java Servlet, JSON and MySQL database

A ComboBox is like a combination of a traditional HTML text <input> field and a <select> field; the user is able to type freely into the field, and/or pick values from a dropdown selection list. The user can input any value by default, even if it does not appear in the selection list; to prevent free-form values and restrict them to items in the list, set forceSelection to true.

The selection list's options are populated from any Ext.data.Store, including remote stores. The data items in the store are mapped to each option's displayed text and backing value via the valueField and displayField configurations, respectively.

The most important configuration of the ComboBox is the queryMode. The mode in which the ComboBox uses the configured Store. Acceptable values are:
  • remote
    • In queryMode: 'remote', the ComboBox loads its Store dynamically based upon user interaction.This is typically used for "autocomplete" type inputs, and after the user finishes typing, the Store is loaded.
    • A parameter containing the typed string is sent in the load request. The default parameter name for the input string is query, but this can be configured using the queryParam config.
    • In queryMode: 'remote', the Store may be configured with remoteFilter: true, and further filters may be programatically added to the Store which are then passed with every load request which allows the server to further refine the returned dataset.
    • Typically, in an autocomplete situation, hideTrigger is configured true because it has no meaning for autocomplete.
  • local
    • ComboBox loads local data, Local data doesn't mean that the Store is loading local data. The store can load data using Ajax but when you type inside the ComboBox it doesn't send any request using Ajax, just does a local query within the existing data loaded in the store.
Tip: queryMode = remote is useful when doing a query over a very large dataset!



ExtJs 4 ComboBox using Java Servlet JSON object and MySQL database

In the example below we are going to implement 3 different types of ComboBoxes.
  • ExtJs ComboBox with LOCAL query
  • ExtJs ComboBox with REMOTE query
  • ExtJs ComboBox with CUSTOM Template and REMOTE query

All the examples use MySQL database and Java Servlet Ajax Request to load the data as a JSON object

Application starting point index.html

<html>
<head>
    <title>ExtJs 4 ComboBox Example </title>

    <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">
    
    <!-- Custom style sheet for ComboBox display layout -->
    <style type="text/css">
        .search-countries {
            padding: 5px 10px;
            white-space: normal;
            color: #555;
            text-decoration: none;
            display: block;
            overflow: hidden;
        }

        .search-countries h4 {
            display: block;
            font: inherit;
            font-weight: bold;
            color: #222;
        }

        .search-countries h4 span {
            float: right;
            font-weight: normal;
            margin:0 0 5px 5px;
            width: 150px;
            clear: none;
        }
   </style>
    
    <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.application({
    name: 'COMBO',

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

    launch: function() {
        Ext.create('Ext.container.Viewport', {
            items: [
                {
                    xtype: 'label',
                    text: ' '
                },    
                {
                    xtype: 'label',
                    html: '<b>ExtJs ComboBox with LOCAL query</b>'
                },
                 
                {
                    xtype: 'localCountrySearch',
                    flex: 1
                },
                {
                    xtype: 'label',
                    text: ' '
                },    
                {
                    xtype: 'label',
                    html: '<b>ExtJs ComboBox with REMOTE query</b>'
                },
                {
                    xtype: 'remoteCountrySearch',
                    flex: 1
                },
                {
                    xtype: 'label',
                    text: ' '
                },    
                {
                    xtype: 'label',
                    html: '<b>ExtJs ComboBox with CUSTOM Template and REMOTE query</b>'
                },
                 
                {
                    xtype: 'fancyCountrySearch',
                    flex: 1
                },
            ]
        });
    }
});

JavaScript source file for country model Country.js

Ext.define('COMBO.model.Country', {
    extend: 'Ext.data.Model',
    fields: [
             'code',
             'name',
             'continent',
             'region',
             'lifeExpectancy',
             'gnp'
             ]
});

JavaScript source file for the application controller Countries.js

Ext.define('COMBO.model.Country', {
    extend: 'Ext.data.Model',
    fields: [
             'code',
             'name',
             'continent',
             'region',
             'lifeExpectancy',
             'gnp'
             ]
});Ext.define('COMBO.controller.Countries', {
            extend : 'Ext.app.Controller',

            //define the stores
            stores : ['LocalCountries','RemoteCountries','FancyCountries'],
            //define the models
            models : ['Country'],
            //define the views
            views : ['LocalCountrySearch','RemoteCountrySearch','FancyCountrySearch'],
           
            init : function() {
                this.control({
                   
                    'viewport' : {
                        render : this.onPanelRendered
                    },
                    //When the ComboBox is selected
                    'localCountrySearch' : {
                        select : this.onCountrySelect
                    }
                   
                });
            },

            onPanelRendered : function() {
                //just a console log to show when the panel si rendered
                console.log('The panel was rendered');
            },
           
            onCountrySelect : function(obj, records) {
                console.log('country was selected in the ComboBox');
               
                //if you set the ComboxBox to multiselect then the values will 
                //separated by the delimiter (default delimiter is a comma)
                Ext.MessageBox.alert('Selected Country', obj.getValue());
               
                //If you need access to other values in the store record based
                //on your selection in the ComboBox then loop thru the records
                Ext.each(records, function(eachCountry){
                    console.log(eachCountry);
                    Ext.MessageBox.alert('Selected Country', 
                    'Country Code: ' + eachCountry.data.code + '<br/>' +
                    'Country Name: ' + eachCountry.data.name
                    );
                })
            }
           
    });

Click here for next Chapter