ExtJs 4 cascading ComboBox example using Java Servlet and MySQL - Part 2

Click here for previous Chapter
In this section we are going review the various ComboBox model, views and their stores. For the ComboBox controller and the application JavaScript please read the previous chapter.

JavaScript source file for Continent Model Continent.js

Ext.define('CASCADINGCOMBO.model.Continent', {
    extend: 'Ext.data.Model',
    fields: [
             'continent',
             ]
});

JavaScript source file for Continent ComboBox view ContinentSearch.js

Ext.define('CASCADINGCOMBO.view.ContinentSearch', {
    extend: 'Ext.form.ComboBox',
    alias: 'widget.continentSearch',
    queryMode: 'local',
    displayField: 'continent',
    valueField: 'continent',
    editable: false,
    forceSelection: true,
    id: 'continentSearchBox',
    labelWidth: 150,
    fieldLabel: 'Please select a Continent',
    size: 50,
    maxLength: 50,
    name: 'myContinent',
    store: 'Continents', 
});

JavaScript source file for Continent ComboBox store Continents.js

Ext.define('CASCADINGCOMBO.store.Continents', {
    extend: 'Ext.data.Store',
    model: 'CASCADINGCOMBO.model.Continent',
    autoLoad: true,
    pageSize: 9999,
   
    proxy: {
        type: 'ajax',
        url: 'CountryServlet',
        extraParams: {
            action: 'getContinents'
        },
        reader: {
            type: 'json',
            root: 'continents',
            successProperty: 'success'
        },
     }
});

JavaScript source file for Region Model Region.js

Ext.define('CASCADINGCOMBO.model.Region', {
    extend: 'Ext.data.Model',
    fields: [
             'region',
             ]
});

JavaScript source file for Region ComboBox view RegionSearch.js

Ext.define('CASCADINGCOMBO.view.RegionSearch', {
    extend: 'Ext.form.ComboBox',
    alias: 'widget.regionSearch',
    queryMode: 'local',
    displayField: 'region',
    valueField: 'region',
    editable: false,
    forceSelection: true,
    id: 'regionSearchBox',
    labelWidth: 150,
    fieldLabel: 'Please select a Region',
    size: 50,
    maxLength: 50,
    name: 'myRegion',
    store: 'Regions',
    disabled: true
});

JavaScript source file for Region ComboBox store Regions.js

Ext.define('CASCADINGCOMBO.store.Regions', {
    extend: 'Ext.data.Store',
    model: 'CASCADINGCOMBO.model.Region',
    pageSize: 9999,
   
    proxy: {
        type: 'ajax',
        url: 'CountryServlet',
        extraParams: {
            action: 'getRegions'
        },
        reader: {
            type: 'json',
            root: 'regions',
            successProperty: 'success'
        },
     }
});

JavaScript source file for Country Model Country.js

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

JavaScript source file for Country ComboBox view CountrySearch.js

Ext.define('CASCADINGCOMBO.view.CountrySearch', {
    extend: 'Ext.form.ComboBox',
    alias: 'widget.countrySearch',
    queryMode: 'local',
    displayField: 'name',
    valueField: 'code',
    editable: false,
    forceSelection: true,
    id: 'countrySearchBox',
    labelWidth: 150,
    fieldLabel: 'Please select a Country',
    size: 50,
    maxLength: 50,
    name: 'myCountry',
    store: 'Countries',
    disabled: true
});

JavaScript source file for Country ComboBox store Countries.js

Ext.define('CASCADINGCOMBO.store.Countries', {
    extend: 'Ext.data.Store',
    model: 'CASCADINGCOMBO.model.Country',
    pageSize: 9999,
   
    proxy: {
        type: 'ajax',
        url: 'CountryServlet',
        extraParams: {
            action: 'getCountries'
        },
        reader: {
            type: 'json',
            root: 'countries',
            successProperty: 'success'
        },
     }
});

Click here for next Chapter