View Full Version : Show Country Flag & Name in form field

20 Jun 2010, 2:51 AM
I'm rather new to Ext and JavaScript (C & C++ Builder background). However I am enjoying learning and using Ext (great framework by team and supporting developers) and this is my first contribution...so I would welcome any advise to improve the code.

I have created a new xtype 'disablecntryfld'.


The idea behind this is to simply display the associated country flag together with the country name in a form field. This is more suited to a form field which is disable only, hence the name disablecntryfld and in fact the field is forced to be disabled. Why this restriction? Well...if the user overwrites the original country name then flag would be incorrect.

The flag is displayed using CSS and to set the flag's class name, use the public function setIconCls passing the name of the class. See example below. This also keeps the extension short and simple.

Of course this extension could be developed to function more intelligently by including the use of a store (local or remote)...but for my needs, right now, this is good enough.


Ext.ux.form.DisableCountryField = Ext.extend(Ext.form.TextField, {
emptyClass : 'ux-country-field-empty',
initComponent:function() {
//force field to disable
this.disabled = true;
// call parent initComponent
Ext.ux.form.DisableCountryField.superclass.initComponent.apply(this, arguments);
}, // eo function initComponent

onRender:function(ct, position) {
// call parent onRender
Ext.ux.form.DisableCountryField.superclass.onRender.apply(this, arguments);

// adjust styles
this.wrap = this.el.wrap({cls: 'x-form-field-wrap x-form-field-trigger-wrap'});
{tag: "img", src: Ext.BLANK_IMAGE_URL});
//add div to display country flag
this.flagIcon = Ext.DomHelper.append(this.el.up('div.x-form-field-wrap'),
{tag: 'div', style:'position:absolute; width:25px; height:15px'}
}, // end of function onRender

setIconCls : function(cls) {
if(this.flagIcon) {
this.flagIcon.className = 'ux-country-field-icon ' + cls;
}, // end of function setIconCls

* Clears any flag currently set in the field
clearValue : function(){
Ext.ux.form.DisableCountryField.superclass.clearValue.apply(this, arguments);
} // end of function clearValue

// register xtype
Ext.reg('disablecntryfld', Ext.ux.form.DisableCountryField);

// end of file

CSS used are:

.ux-country-field-input {
padding-left: 25px;

.ux-country-field-empty {
padding-left: 2px;

.x-form-field-wrap .ux-country-field-icon {
top: 3px;
left: 2px;
background-repeat: no-repeat ! important;
background-position: 3px 50% ! important;

I have defined the CSS for the flags:

.ux-flag-gb {
background-image:url(../images/flags/gb.png) !important;
.ux-flag-jm {
background-image:url(../images/flags/jm.png) !important;

Create form field:
items: [{
xtype : 'disablecntryfld',
fieldLabel : 'Country',
id : 'edtCountryName',
name : 'edtCountryName'

To set form field in my popup window:
Ext.getCmp('edtCountryName').setValue('United Kingdom');

I hope this may be useful to others ;)

P.S. this extension is developed using Ext-3.2.0

26 Jun 2010, 4:49 PM

You're maybe also interessted in this IconComboBox: http://www.sencha.com/learn/Tutorial:Writing_Ext_2_Plugins