Results 1 to 2 of 2

Thread: Show Country Flag & Name in form field

  1. #1
    Ext JS Premium Member
    Join Date
    Oct 2007
    Posts
    11
    Vote Rating
    2
      0  

    Default Show Country Flag & Name in form field

    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'.

    disablecountryfield.jpg

    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.

    Extension:
    Code:
    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'});
          this.wrap.applyStyles({position:'relative'});
          this.el.addClass('ux-country-field-input');
          Ext.DomHelper.append(this.el.up('div.x-form-field-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);        
          this.setIconCls('');
        } // end of function clearValue 
    });
     
    // register xtype
    Ext.reg('disablecntryfld', Ext.ux.form.DisableCountryField);
     
    // end of file
    CSS used are:
    Code:
    .ux-country-field-input {
        padding-left: 25px;
    }
    
    .ux-country-field-empty {
        padding-left: 2px;
        color:gray;
    }
    
    .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:
    Code:
    .ux-flag-gb {
        background-image:url(../images/flags/gb.png) !important;
    }
    .ux-flag-jm {
        background-image:url(../images/flags/jm.png) !important;
    }
    etc...
    Create form field:
    Code:
          items:  [{
            xtype       : 'disablecntryfld',
            fieldLabel  : 'Country',
            id            : 'edtCountryName',
            name       : 'edtCountryName'
          },{
    To set form field in my popup window:
    Code:
        Ext.getCmp('edtCountryName').setValue('United Kingdom');
        Ext.getCmp('edtCountryName').setIconCls('ux-flag-gb');
    I hope this may be useful to others

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

  2. #2
    Sencha User Dumas's Avatar
    Join Date
    Dec 2008
    Location
    Vienna, Austria
    Posts
    589
    Vote Rating
    10
      0  

    Default

    Hey!

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

    regards,
    Roland

Similar Threads

  1. dirty flag (reg triangle) for each field of a record?
    By Debbie in forum Ext 2.x: Help & Discussion
    Replies: 2
    Last Post: 8 Dec 2011, 2:23 PM
  2. Field labels don't show up & model transfer
    By TheBerliner in forum Ext 3.x: Help & Discussion
    Replies: 4
    Last Post: 27 Aug 2009, 4:23 AM
  3. Tree&Grid&form&struts&spring&hibernate
    By vxi in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 25 Dec 2007, 10:49 PM
  4. [solved] Form Field 'show' event
    By aarcro in forum Ext 2.x: Help & Discussion
    Replies: 2
    Last Post: 29 Nov 2007, 9:19 AM
  5. Private method && adding hidden field to form
    By kape123 in forum Ext 1.x: Help & Discussion
    Replies: 0
    Last Post: 23 Sep 2007, 1:59 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •