1. #1
    Sencha Premium Member
    Join Date
    Aug 2008
    Posts
    142
    Vote Rating
    0
    vayumahesh is on a distinguished road

      0  

    Default How to make Textarea/Textbox required only on checkbox checked

    How to make Textarea/Textbox required only on checkbox checked


    I have a checkbox and textarea on formPanel. I need to make textarea required only if check box has been checked. How do I do that ? I would like to display error box if validation fails and also bring focus to the textarea.

    Here is my formPanel code.

    Code:
     
        var eqTrExpChk = new Ext.form.Checkbox({
         fieldLabel: 'Equivalent Training/Experience',
         name: 'eqTrExpChk',
         checked: false
        }); 
     
        var engrComments = new Ext.form.TextArea({
         fieldLabel: 'Comments/Details',
         name: 'engrComments',
         value: dsSelfMon.getAt(0).data.engrComments,
         width:300,
         height:50,
         maxLength:250
        });
     
    var formPanel_self = new Ext.FormPanel({
        name: 'reviewActions',
        autoScroll: true,
        method: 'POST',
        labelWidth: 175,
        bodyStyle:'padding:10px;',
        border:true,
        margins:'5 5 5 0',
        items: [eqTrExpChk,engrComments],
        buttons:
        [
         {
          text: ' Update',
          iconCls:'save',
          formBind:true,
          handler : function()
          { ... some Code ... }   
         }
        ]
    });

  2. #2
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    94
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    Try:

    Code:
    var engrComments = new Ext.form.TextArea({
      fieldLabel: 'Comments/Details',
      name: 'engrComments',
      value: dsSelfMon.getAt(0).data.engrComments,
      width:300,
      height:50,
      maxLength:250
    });
    
    var eqTrExpChk = new Ext.form.Checkbox({
      fieldLabel: 'Equivalent Training/Experience',
      name: 'eqTrExpChk',
      checked: false,
      listeners: {
        check: function(cb, checked) {
          engrComments.allowBlank = !checked;
          engrComments.validate();
        }
      }
    });

  3. #3
    Sencha Premium Member
    Join Date
    Aug 2008
    Posts
    142
    Vote Rating
    0
    vayumahesh is on a distinguished road

      0  

    Default


    That worked. ExtJs is so good ....

Thread Participants: 1