1. #1
    Ext User
    Join Date
    Aug 2008
    Posts
    5
    Vote Rating
    0
    Mat Malone is on a distinguished road

      0  

    Default Form validation with form made up of multiple dynamically added tabs

    Form validation with form made up of multiple dynamically added tabs


    I'm not sure if I'm trying to do something that isn't possible or if there's a bug in ExtJS or I'm doing something wrong (never unlikely!).

    What I have is a FormPanel object with a single TabPanel child. The TabPanel is instantiated with a single item with layout:'form'. That item has several form elements (textfields, comboboxes, etc) in it. Then the FormPanel is rendered. Based on what the user does more tabs can be added. Those tabs are created using the same function that created the initial one, so everything should be the same (except for the names/ids).

    The problem is that when I call form.getForm().isValid() it only validates the components in the initial tab. It ignores what's in the dynamically created tabs. However, if you call getValues(), it does return all the values in all the tabs correctly.

    I poked around the extjs code and I think the problem has to do with the call to this.items.each() in isValid(). It seems to only return what was initially rendered, and not what's current in the component. getValues() works ok since it checks the DOM instead of this.items. (Unfortunately I'm still to new to ExtJS to go any deeper than that.)

    I was able to solve my problem by writing my own procedure that just does a tree-traversal algorithm on the form, calling validate() on every component that has the method and returning false if anything is invalid. However, I'd love to use the complete built-in functionality if possible.

    Does anyone know what's going on here?

  2. #2
    Ext User
    Join Date
    Aug 2008
    Posts
    48
    Vote Rating
    0
    ndtreviv is on a distinguished road

      0  

    Default Similar problem

    Similar problem


    I have a very similar problem.

    I have an instantiation of FormPanel, the items array of which consists of 3 FieldSet's with auto-loading form fields. The reason I have done this is so that I can re-used the forms in other areas of the site.

    The auto-loaded content consists of a javascript that gets the FieldSet using Ext.getCmp(xxx); and then proceeds to add() form fields to that fieldset, calling doLayout() on the fieldset at the end to ensure they render correctly.

    The form fields render alright, though are all marked as invalid even though nothing has been done to fire off any validation process. When I call getForm().isValid() on a blatantly invalid form (with fields marked as invalid) it returns true! getForm().reset() doesn't reset the form, and getForm().submit() throws a kooky FireFox javascript error.

    I can only assume that fields dynamically added to the fieldsets aren't actually being considered a part of the FormPanel, and therefore the form itself.

    Is this a bug?

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

      0  

    Thumbs up Solution!

    Solution!


    Ok, I've tracked the problem back. The problem is somewhere in the separation between FormPanel and BasicForm.

    As before, I had a FormPanel, which had 3 FieldSets, which loaded their contents dynamically.

    DOM-wise, the elements were added to the FieltSets, and therefore, to the FormPanel, but logic-wise they were not being added to the BasicForm element, which is what calling FormPanel.getForm(); returns. Therefore, they were not considered part of the form, and were not taken into consideration when actions were called on the form itself.

    In order to get this to work, I had to place an add listener on the FieldSets, which looked something like this:
    Code:
    listeners: {
       scope: this,
       add: function(t, c, i){
          AW.form.RegistrationForm.getForm().add(c);
          AW.form.RegistrationForm.getForm().clearInvalid();
       }
    }
    Seems like a bit of a hack to me. If anyone has a better way of doing it, then please let me know!
    Otherwise, perhaps this should be sorted out by the fabulous Ext development team?

    Namely: Please enable Form fields dynamically added to a child of a FormPanel to be added to the FormPanel's BasicForm derivative, thus to be taken into account when form actions are called!

    Cheers,
    ndtreviv

  4. #4
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,508
    Vote Rating
    56
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    I have a Feature Request which asks for this complete with an implementation which another poster (I forget who) is using: http://extjs.com/forum/showthread.php?t=41093

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

      0  

    Default


    That sounds like the same issue I ran into. Thanks for the link.

Thread Participants: 2