Results 1 to 6 of 6

Thread: Simple override for marking required fields

  1. #1
    Ext User zhegwood's Avatar
    Join Date
    Dec 2007
    Location
    Boulder, CO Suburbia (Lafayette)
    Posts
    388

    Default Simple override for marking required fields

    You'll just need to add 'required:true' to the field config and optionally a reqCfg param if you don't want a red asterisk. Seems useful so I thought I'd share.

    Code:
    Ext.override(Ext.form.Field,{
      /*
      * true if field is required
      */
      required: false,
    
      /*
      *  default required marker is a red asterisk
      */
      reqCfg: { tag: "span",style: "color:#f00;padding-left:2px;",html: "*" },
    	
      onRender : function(ct, position){
        if(!this.el){
          var cfg = this.getAutoCreate();
          if(!cfg.name){
            cfg.name = this.name || this.id;
          }
          if(this.inputType){
            cfg.type = this.inputType;
          }
          this.autoEl = cfg;
        }
        Ext.form.Field.superclass.onRender.call(this, ct, position);
            
        var type = this.el.dom.type;
        if(type){
          if(type == 'password'){
            type = 'text';
          }
          this.el.addClass('x-form-'+type);
        }
        if(this.readOnly){
          this.el.dom.readOnly = true;
        }
        if(this.tabIndex !== undefined){
          this.el.dom.setAttribute('tabIndex', this.tabIndex);
        }
    
        this.el.addClass([this.fieldClass, this.cls]);
    		
        if (this.required) {
          var dh = Ext.DomHelper;
          dh.append(this.el.dom.parentNode,this.reqCfg);
        }
      }
    });

  2. #2
    Sencha User
    Join Date
    Nov 2008
    Location
    Currently Mexico
    Posts
    133

    Default

    Nice, but beware: It puts the asterisk on hidden fields and the asterisk is misaligned on combo boxes and checkboxes (didn't tried with other type of fields)

  3. #3

    Default

    I picked this or something like it up somewhere on the forums. It simply modifies the label, which should always align correctly:

    Code:
    Ext.apply(Ext.layout.FormLayout.prototype, {
        originalRenderItem:Ext.layout.FormLayout.prototype.renderItem,
        renderItem:function(c, position, target){
            if(c && !c.rendered && c.isFormField && c.fieldLabel && c.requiredField === true) {
                c.fieldLabel = c.fieldLabel + " <span class=\"req\">*</span>";
            }
            this.originalRenderItem.apply(this, arguments);
        }
    });

  4. #4
    Ext JS Premium Member cbetancourt's Avatar
    Join Date
    Mar 2007
    Location
    Doylestown, Pennsylvania
    Posts
    53

    Default

    @jsonb885: Small mod to yours. I replaced c.requiredField with c.allowBlank and avoid hidden fields.
    I've also wrapped the field label in the span. CSS is applied to the field instead of using an asterisk.

    Code:
    Ext.apply(Ext.layout.FormLayout.prototype, {
       originalRenderItem: Ext.layout.FormLayout.prototype.renderItem,
       renderItem: function(c, position, target) {
          if (c && !c.rendered && c.isFormField && !c.allowBlank && c.inputType!=='hidden') {
             c.fieldLabel = '<span class=\"x-required\">' + c.fieldLabel + '</span>';	
          }
          this.originalRenderItem.apply(this, arguments);	
       }
    });
    Code:
    /* CSS */
    .x-required {
       font-weight: bold;
       color: #15428b;
    }
    Last edited by cbetancourt; 26 May 2010 at 5:51 PM. Reason: tabs made the code hard to read

  5. #5
    Sencha Premium User wemerson.januario's Avatar
    Join Date
    Nov 2008
    Location
    Goiânia - GO, Brazil
    Posts
    902

    Default nice

    both good
    Wemerson Januario @JanuarioCoder
    Novanti Tecnologia, Sencha MVP/ Ext JS Consultant
    ____________________________________________
    Hire me on UpWork:

    GitHub
    https://github.com/wemersonjanuario

    Treinamento e Consultoria Ext JS. QUALIFIQUE-SE JÁ!

  6. #6
    Touch Premium Member
    Join Date
    Jan 2011
    Location
    Lisbon, Portugal
    Posts
    192

    Default

    Hi,

    Anyone has a Ext JS 4.0 version for this ?

    Joao Maia

Posting Permissions

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