Results 1 to 7 of 7

Thread: How to disable textboxes ?

  1. #1
    Sencha User
    Join Date
    Nov 2011
    Location
    India
    Posts
    83
    Answers
    1
    Vote Rating
    0
      0  

    Default How to disable textboxes ?

    It should be fairly simple but for some reason I am not able to do it. I have two radio buttons and two corresponding text boxes. I want to toggle their enable/ disable based on radio selections. here is how I am approaching this:

    Code:
    var name = new Ext.form.TextField({       //text box 1
        fieldLabel:'Name',
        name:'txt-name',
        id:"id-name"
    });
    
    this.form= new Ext.FormPanel({                    //simple form. contains 2 text boxes and a radio group of 2 buttons
        border:false,
        defaults:{xtype:'textfield'},
        items:[
            radios,
            name,
            {
                fieldLabel:'Email',              //second text box
                name:'txt-email', 
                value:'', 
                id:"id-email",
                disabled: true
            }
        ]
    });
    
    var radios = new Ext.form.RadioGroup({
        fieldLabel: 'Enter either',                        
         columns: 2, //muestra los radiobuttons en dos columnas
         items: [
              {boxLabel: 'Name', id: 'rbName', name: 'framework', inputValue: 'nameValue', checked: true},
              {boxLabel: 'Email id', id: 'rbEmail', name: 'framework', inputValue: 'emailValue'}
         ],
         listeners:{                          //the listener event for the radio group
           change : function (cmp,newVal,oldVal){
                 var obj = Ext.get('rbName');
                if(Ext.get('rbName').getValue()){               //getValue() returns a Boolean for a radio button
                   Ext.get('id-name').dom.disabled = false;  //i think here is the problem
                  Ext.get('id-name').focus();
                  Ext.get('id-email').dom.disabled = true;
                }else{
                  Ext.get('id-name').dom.disabled = true;
                  Ext.get('id-email').dom.disabled = false;
                  Ext.get('id-email').focus();
                }
          }
         }
    });

    According to the above logic the change even will fire twice - one for each radio button, because a single click will toggle both values. I am almost sure that dom.disabled is not the correct approach. But I do not know how to disable. Can someone please guide. Thanks.

  2. #2
    Sencha User tobiu's Avatar
    Join Date
    May 2007
    Location
    Munich (Germany)
    Posts
    2,750
    Answers
    130
    Vote Rating
    128
      0  

    Default

    Code:
    Ext.getCmp('id-name').setDisabled(true);
    i also recommend to use itemId istead of dom ids and use the component query to get your fields.
    Best regards
    Tobias Uhlig

  3. #3
    Sencha User
    Join Date
    Nov 2011
    Location
    India
    Posts
    83
    Answers
    1
    Vote Rating
    0
      0  

    Default

    tobiu

    Thanks for the reply.

    setDisabled seems to be a method of Ext.form.field.Text rather than Ext.Element - which in my case, is returned by Ext.get('id-name'). I get the following error.

    Object #<an Object> has no method 'setDisabled'
    any workarounds ?

  4. #4
    Sencha User tobiu's Avatar
    Join Date
    May 2007
    Location
    Munich (Germany)
    Posts
    2,750
    Answers
    130
    Vote Rating
    128
      0  

    Default

    just copied your code without looking exactly

    HTML Code:
    getCmp
    is your friend, see updated posting above.
    Best regards
    Tobias Uhlig

  5. #5
    Sencha User
    Join Date
    Nov 2011
    Location
    India
    Posts
    83
    Answers
    1
    Vote Rating
    0
      0  

    Default

    That was rather lame on my part. Yes, ext.getCmp seems to work. Can you please tell the basic difference between getCmp and get. Also, what advantages does itemId have over id. If the answer requires much of your time, any useful link will be fine. Thanks

  6. #6
    Sencha User tobiu's Avatar
    Join Date
    May 2007
    Location
    Munich (Germany)
    Posts
    2,750
    Answers
    130
    Vote Rating
    128
      0  

    Default

    component query:
    http://docs.sencha.com/ext-js/4-0/#!...ComponentQuery

    itemId has the big advantage, that it does not have to be unique (like each window getting a saveBtn).
    if you create more than one dom node with the same id you get into trouble.

    http://docs.sencha.com/ext-js/4-0/#!/api/Ext-method-get
    http://docs.sencha.com/ext-js/4-0/#!...-method-getCmp
    read this carefully.
    Best regards
    Tobias Uhlig

  7. #7
    Sencha User
    Join Date
    Nov 2011
    Location
    India
    Posts
    83
    Answers
    1
    Vote Rating
    0
      0  

    Default

    Thanks for the links

Posting Permissions

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