Skip to content

May 4, 2011

9

How to remove comma from ExtJS CompositeField

by Joe Kuan

By default, ExtJS (3.2.1) CompositeField class inserts comma between each field. However, you may want to remove the comma in some occasions, eg a group of radio buttons and one of the radio buttons next to an input field.

You can simply override a class method, buildLabel, as follows to omit the comma:

       xtype: 'compositefield',
       buildLabel: function(segments) { return segments.join(""); },
       labelSeparator: '',
       items: [{
           .....
9 Comments Post a comment
  1. Colibri
    Apr 17 2012

    Hello, could you show the code that you used to put radio buttons next to an input field ?
    Thanks.

    Reply
    • Joe Kuan
      Apr 17 2012

      Here you are:


      xtype : 'compositefield',
      buildLabel : function(segments) {
      return segments.join("");
      },
      labelSeparator : '',
      items : [{
      xtype : 'radio',
      name : 'time_spec',
      boxLabel : 'Specific date',
      handler : function(radio, checked) {
      ....
      }
      }, {
      xtype : 'datefield',
      width : 100,
      ....
      }]

      Reply
  2. Colibri
    Apr 17 2012

    Ok, I see. But do all the radio buttons belong to the same radiogroup ?

    Reply
    • Joe Kuan
      Apr 17 2012

      I don’t use RadioGroup class because I only need a single column of radio buttons.

      It’s just like this.

      fieldLabel : ‘Time’,
      xtype : ‘radio’,
      name : ‘time_spec’,
      boxLabel : ‘Same Date & Time’,
      inputValue : ‘same_time’
      }, {
      xtype : ‘radio’,
      name : ‘time_spec’,
      inputValue : ‘yesterday’,
      boxLabel : ‘Same time previous day’
      }, {
      xtype : ‘radio’,
      name : ‘time_spec’,
      inputValue : ‘lastweek’,
      boxLabel : ‘Same time previous week’
      }, {

      Reply
  3. Colibri
    May 25 2012

    Hello, I’m sorry to insist on bothering you but I can’t get it to work as show on your picture at the top :-)
    Eveything in my CompositeField is displayed on 1 single line, so my radios are not vertically stacked up.
    Could you share the whole piece of code necessary to get what’s shown on the picture.
    Thanks a lot!

    Reply
    • Joe Kuan
      May 25 2012

      Ok, email me your code (kuan.joe@gmail.com) and I’ll have a look.

      Reply
      • Colibri
        May 29 2012

        Have a look on this JSFiddle I’ve just made :
        http://jsfiddle.net/BsFem/1/

      • Joe Kuan
        Jun 1 2012

        I have looked at your jsFiddle sample. The 2nd approach is fine and that’s what I did. The only difference is that I use boxLabel.

      • Colibri
        Jun 1 2012

        Well, the second approach is still a workaround, because it involves 2 separate fields.
        I wanted to build a single class for this field, unfortunately with that solution that is not possible.
        Thanks for your help anyway!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Note: HTML is allowed. Your email address will never be published.

Subscribe to comments

%d bloggers like this: