country | Marcus Schiesser

Wouldn’t it be nice to use a combo box of flag images to select the country code of phone numbers?

If you use a country selection component that’s quite easy. Just wrap it in a re-usable component together with a textfield for the local number and the result looks like this:

And here’s the example’s source:

Ext.onReady(function(){
    var panel = new Ext.FormPanel({
        style: 'padding: 10px;',
        frame: true,
        labelWidth: 50,
        width: 400,
        
        items: [{
            fieldLabel: 'Mobile',
            xtype: 'phonefield',
            anchor: '100%',
            emptyText: '(e.g.: 423-423-423)',
            defaultCountryCode: '49',
            maskRe: /[0-9 -]/
        }]
    });
    var element = Ext.query('script[src$=phonefield.js]')[0];
    var renderElement = element.parentNode;
    panel.render(renderElement);
});

Ext.onReady(function(){

var panel = new Ext.FormPanel({

style: 'padding: 10px;',

frame: true,

labelWidth: 50,

width: 400,

items: [{

fieldLabel: 'Mobile',

xtype: 'phonefield',

anchor: '100%',

emptyText: '(e.g.: 423-423-423)',

defaultCountryCode: '49',

maskRe: /[0-9 -]/

}]

});

var element = Ext.query('script[src$=phonefield.js]')[0];

var renderElement = element.parentNode;

panel.render(renderElement);

});

Update: You can find this code and all my other ExtJS components bundled in a library called ‘extensive’. Enjoy the code and feel free to support the project by participating.

Based on the ExtJS-Tutorial on how to build a combo box with an icon, I built a component that can be used as a country selector in ExtJS.

Here you can find the code of the component:

Ext.ns('Extreme.components');

Extreme.components.CountryCombo = Ext.extend(Ext.form.ComboBox, {
    constructor: function(config){
        var data;
        if (config.phoneLabels) {
            data = [['+49', '+49', 'ux-flag-de'], ['+43', '+43', 'ux-flag-at'], ['+41', '+41', 'ux-flag-ch'], ['+352', '+352', 'ux-flag-lu'], ['+432', '+432', 'ux-flag-li']];
        }
        else {
            data = [['DE', 'Deutschland', 'ux-flag-de'], ['AT', 'Österreich', 'ux-flag-at'], ['CH', 'Schweiz', 'ux-flag-ch'], ['LU', 'Luxemburg', 'ux-flag-lu'], ['LI', 'Lichtenstein', 'ux-flag-li']];
        }
        
        Extreme.components.CountryCombo.superclass.constructor.call(this, Ext.apply({
            store: new Ext.data.SimpleStore({
                fields: ['countryCode', 'countryName', 'countryFlag'],
                data: data
            }),
            plugins: new Ext.ux.plugins.IconCombo(),
            valueField: 'countryCode',
            displayField: 'countryName',
            iconClsField: 'countryFlag',
            triggerAction: 'all',
            mode: 'local'
        }, config));
    }
});
Ext.reg('countrycombo', Extreme.components.CountryCombo);

Ext.ns('Extreme.components');

Extreme.components.CountryCombo = Ext.extend(Ext.form.ComboBox, {

constructor: function(config){

var data;

if (config.phoneLabels) {

data = [['+49', '+49', 'ux-flag-de'], ['+43', '+43', 'ux-flag-at'], ['+41', '+41', 'ux-flag-ch'], ['+352', '+352', 'ux-flag-lu'], ['+432', '+432', 'ux-flag-li']];

}

else {

data = [['DE', 'Deutschland', 'ux-flag-de'], ['AT', 'Österreich', 'ux-flag-at'], ['CH', 'Schweiz', 'ux-flag-ch'], ['LU', 'Luxemburg', 'ux-flag-lu'], ['LI', 'Lichtenstein', 'ux-flag-li']];

}

Extreme.components.CountryCombo.superclass.constructor.call(this, Ext.apply({

store: new Ext.data.SimpleStore({

fields: ['countryCode', 'countryName', 'countryFlag'],

data: data

}),

plugins: new Ext.ux.plugins.IconCombo(),

valueField: 'countryCode',

displayField: 'countryName',

iconClsField: 'countryFlag',

triggerAction: 'all',

mode: 'local'

}, config));

}

});

Ext.reg('countrycombo', Extreme.components.CountryCombo);

It’s basically just a ComboBox using the IconCombo plugin with a predefined Store. The Store is in fact a SimpleStore which contains the country codes, labels and css classes for the icons for each country.
(If you wonder about the Extreme namespace, I am right now building a little component library for ExtJS).
The country selector is registered under the xtype of ‘countrycombo’. So here’s a small example of how to use it:

Ext.onReady(function(){
	
    var form = new Ext.FormPanel({
		items: [{
			xtype: 'countrycombo',
			fieldLabel: 'Country',
            name: 'country',
			anchor: '100%'
		}],
		frame: true,
		style: 'padding: 10px;',
		width: 250,
		labelWidth: 50
	});
    
	var element = Ext.query('script[src$=country-combo.js]')[0];
	var renderElement = element.parentNode;
	form.render(renderElement);
});

Ext.onReady(function(){

var form = new Ext.FormPanel({

items: [{

xtype: 'countrycombo',

fieldLabel: 'Country',

name: 'country',

anchor: '100%'

}],

frame: true,

style: 'padding: 10px;',

width: 250,

labelWidth: 50

});

var element = Ext.query('script[src$=country-combo.js]')[0];

var renderElement = element.parentNode;

form.render(renderElement);

});

Thanks go also to FamFamFam where i retrieved the flag images.

Update: You can find this code and all my other ExtJS components bundled in a library called ‘extensive’. Enjoy the code and feel free to support the project by participating.

Tag: country

Phone number selector in ExtJS

Country selector with flag images in ExtJS