1. #1
    Ext User
    Join Date
    Aug 2008
    Posts
    3
    Vote Rating
    0
    Mathachew is on a distinguished road

      0  

    Default Enable/disable button after validation

    Enable/disable button after validation


    Hello, I'm new to using Ext JS and am having the hardest time doing such a simple, simple thing. Normally I would perform this task in jQuery since it's what I code with, and have been for over a year, but even that is having no effect.

    I have a form that is being created using Ext.FormPanel. My buttons attribute contains two buttons: Save and Cancel. By default I want Save to be disabled when the form is loaded because I want to validate the required fields before allowing the user to submit. My validation is in place, and all that's left is to determine if the button should be enabled or disabled. Here's the buttons setup:

    Code:
    buttons: [{
        text: 'Save',
        id: 'cRegisterSave',
        disabled: true,
        handler: submitNewUser
    },{
        text: 'Cancel',
        id: 'cRegisterCancel',
        handler: showLogin
    }]
    Initially I was under the impression that cRegisterSave would be the id of my button, so I kept trying to modify that element's attributes, but no dice. I eventually realized that id of the button was generated in some type of order, while the specified id was applied to the table it was contained in. I've gone as far as trying to apply specific attributes to the button using its id (ext-gen39), but again, I'm not getting the desired results. I have the functionality in place to track validation on required fields and when to check if all fields are valid to allow the form to be submitted:

    Code:
    $('#ext-gen39').attr('disabled', (valid ? false : true)).parent().attr('unselectable', (valid ? 'off' : 'on'));
    valid's value is either true or false and ext-gen39 is the id of the button. I'm using jQuery to disable it, yet it doesn't disable and I can still click on it. It's been a pretty frustrating experience trying to learn how to effectively use Ext JS for such a simple task. While the API is chock full of information, it took me about 30 minutes to finally find out how to properly select cRegisterSave (not from ExtJS.com). I really feel that it lacks the simplistic examples that something like jQuery has, where it's all there in front of you to see how to accomplish 'this', 'that' and 'that' in a minute or two, if not seconds. Anyways, this is somewhat of a lament, but I really want to figure out how to properly and effectively get this working because the web app is going to heavily use ExtJS, so the more I know, the better.

    Thanks!

  2. #2
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    16,778
    Vote Rating
    598
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      1  

    Default


    To manipulate the button you need to get an access to the object instance, you can't just access it via the DOM:

    Code:
    Ext.getCmp('cRegisterSave').disable();
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  3. #3
    Ext User
    Join Date
    Aug 2008
    Posts
    3
    Vote Rating
    0
    Mathachew is on a distinguished road

      0  

    Default


    Quote Originally Posted by evant View Post
    To manipulate the button you need to get an access to the object instance, you can't just access it via the DOM:

    Code:
    Ext.getCmp('cRegisterSave').disable();
    Thank you, this got it working. Is it a restriction or limitation of sorts that prevents me from enabling the button using $('#buttonId')?

  4. #4
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    87
    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


    An Ext.Button instance and a <BUTTON> element are 2 separate things (actually an Ext.Button holds a reference to the <BUTTON> DOM element).

    When using Ext JS you should always try to use the component instances and not the DOM elements, because Ext JS knows how to handle changes in components, but it doesn't get notified of every change in DOM elements.

  5. #5
    Ext User
    Join Date
    Aug 2008
    Posts
    3
    Vote Rating
    0
    Mathachew is on a distinguished road

      0  

    Default


    That makes sense, and I figured from the start that that was likely the right way to go, I just couldn't find proper documentation that spelled it out clearly. Thanks again

  6. #6
    Ext User
    Join Date
    Jul 2007
    Location
    Florida
    Posts
    9,996
    Vote Rating
    5
    mjlecomte will become famous soon enough mjlecomte will become famous soon enough

      0  

    Default


    Quote Originally Posted by Mathachew View Post
    I just couldn't find proper documentation that spelled it out clearly. Thanks again
    http://extjs.com/forum/showthread.php?t=40317
    now that you understand better, you are in a good place to make suggestion citing where you looked etc. so you can help the next guy.

Thread Participants: 3