Blog Archive

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

Click here for previous Chapter
In this chapter we are going to define all various ComboBox views and their stores. For the ComboBox controller and the application JavaScript please read the previous chapter.


ExtJs 4 ComboBox using Java Servlet JSON object and MySQL database

JavaScript source file for ExtJs ComboBox with LOCAL query view LocalCountrySearch.js

Ext.define('COMBO.view.LocalCountrySearch', {
    extend: 'Ext.form.ComboBox',
    alias: 'widget.localCountrySearch',
    queryMode: 'local',
    displayField: 'name',
    valueField: 'code',  
    forceSelection: true,
    id: 'countrySearchBox',
    labelWidth: 150,
    fieldLabel: 'Please select a Country',
    size: 50,
    maxLength: 50,
    allowBlank : false,
    name: 'localCountry',
    store: 'LocalCountries' 
   
});

JavaScript source file for ExtJs ComboBox with LOCAL query store LocalCountries.js

Ext.define('COMBO.store.LocalCountries', {
    extend: 'Ext.data.Store',
    model: 'COMBO.model.Country',
    autoLoad: true,
    pageSize: 9999,
   
    proxy: {
        type: 'ajax',
        url: 'CountryServlet',
        reader: {
            type: 'json',
            root: 'countries',
            successProperty: 'success'
        },
     },
     
     listeners: {
            load: function () {
                //this sets the default value to USA after the store loads
                var combo = Ext.getCmp('countrySearchBox');
                combo.setValue("USA");
            }
         }
});

ExtJs 4 ComboBox using Java Servlet JSON object and MySQL database

JavaScript source file for ExtJs ComboBox with REMOTE query view RemoteCountries.js

Ext.define('COMBO.view.RemoteCountrySearch', {
    extend: 'Ext.form.ComboBox',
    alias: 'widget.remoteCountrySearch',
    queryMode: 'remote',
    displayField: 'name',
    valueField: 'code',  
    forceSelection: true,
    id: 'countryBox',
    labelWidth: 150,
    fieldLabel: 'Please select a Country',
    size: 50,
    maxLength: 50,
    allowBlank : false,
    name: 'remoteCountry',
    store: 'RemoteCountries',
    minChars: 1,
    hideTrigger:true
   
});

JavaScript source file for ExtJs ComboBox with REMOTE query store RemoteCountries.js

Ext.define('COMBO.store.RemoteCountries', {
    extend: 'Ext.data.Store',
    model: 'COMBO.model.Country',
    autoLoad: true,
    pageSize: 9999,
   
    proxy: {
        type: 'ajax',
        url: 'CountryServlet',
        reader: {
            type: 'json',
            root: 'countries',
            totalProperty: 'totalCount',
            successProperty: 'success'
        },
     },
     
});

ExtJs 4 ComboBox using Java Servlet JSON object and MySQL database

JavaScript source file for ExtJs ComboBox with CUSTOM Template view FancyCountrySearch.js

Ext.define('COMBO.view.FancyCountrySearch', {
    extend: 'Ext.form.ComboBox',
    alias: 'widget.fancyCountrySearch',
    queryMode: 'remote',
    displayField: 'name',
    valueField: 'code',  
    forceSelection: true,
    id: 'countryBox2',
    labelWidth: 150,
    fieldLabel: 'Please select a Country',
    size: 75,
    maxLength: 75,
    allowBlank : false,
    name: 'fancyCountry',
    store: 'FancyCountries',
    minChars: 1,
    hideTrigger:true,
   
    listConfig: {
        loadingText: 'Searching...',
        emptyText: 'No matching countries found!',

        // Custom rendering template for each country
        getInnerTpl: function() {
            return  '<a class="search-countries" href="http://en.wikipedia.org/wiki/{name}">' +
                    '<h4><span><b>Continent:</b> {continent}</span>{name} - ({code})</h4>' +
                    'Region: {region}<br/>GNP: {gnp}';
        }
    },
    pageSize: 5
   
});

JavaScript source file for ExtJs ComboBox with CUSTOM Template store FancyCountries.js

Ext.define('COMBO.store.FancyCountries', {
    extend: 'Ext.data.Store',
    model: 'COMBO.model.Country',
    autoLoad: true,
    pageSize: 5,
   
    proxy: {
        type: 'ajax',
        url: 'CountryServlet',
        reader: {
            type: 'json',
            root: 'countries',
            totalProperty: 'totalCount',
            successProperty: 'success'
        },
     },
     
});

Click here for next Chapter