Results 1 to 4 of 4

Thread: simple "if" statement?

  1. #1
    Ext User
    Join Date
    Oct 2010
    Posts
    27

    Default simple "if" statement?

    Hi. I want to have a question in my form determine the next part of the form and was wondering if anyone else had done anything like this? Basically, I want one part of the form the ask the viewers gender, then determined by the answer given the next part of the form will ask the viewers title (mr, mrs, etc).

    any help hugely appreciated....

  2. #2
    Sencha User gcallaghan's Avatar
    Join Date
    Apr 2010
    Location
    Cupertino, Ca
    Posts
    247

    Default

    I think you can accomplish this with a listener on the form that waits for the gender radio buttons to be "checked"

    When that happens, depending on the value of the radio buttons, the listener can show/hide the fields associated with each individual gender. After showing or hiding the fields, the form should call doComponentLayout().

    some pseudoCode...

    Code:
    MyForm = new Ext.Form({
        listeners:{
            check:function(field){
                 var name = field.getName();
                 if (name == 'gender'){
                     var value = field.getValue();
                     if (value == 'male'){this.showMaleFields();}
                     else {this.showFemaleFields();}
                 } 
            }
        }
     items:[
        new Ext.form.Radio({name:'gender', value:"male"}),
        new Ext.form.Fieldset(
            hidden:true,
            items:[
                new Ext.form.Field({name:'MaleField1'}),
                new Ext.form.Field({name:'MaleField2'}),
                new Ext.form.Field({name:'MaleField3'})
            ]
        ),
        new Ext.form.Fieldset(
            hidden:true,
           items:[
                new Ext.form.Field({name:'femaleField1'}),
                new Ext.form.Field({name:'femaleField2'}),
                new Ext.form.Field({name:'femaleField3'})
            ]
        ),
    ],
       showMaleFields:function(){
           this.items.get(2).hide();
           this.items.get(1).show();
           this.doComponentLayout();
       },
       showFemaleFields:function(){
           this.items.get(1).hide();
           this.items.get(2).show();
           this.doComponentLayout();
       },
    
    });
    This is definitely not copy and pasteable, but it should get you on your way.

  3. #3
    Ext User
    Join Date
    Oct 2010
    Posts
    27

    Default

    Thanks gcallaghan - Very helpful.

  4. #4
    Sencha User jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    DC Area =)
    Posts
    16,364

    Default

    I would use xtypes instead of instantiating new instances of components. You will save tons of code in your app tier.

Similar Threads

  1. Replies: 3
    Last Post: 28 Oct 2009, 6:38 AM
  2. [Resolved] Simple form Ext.getCmp returns "undefined"
    By bainsbury in forum Ext 3.x: Help & Discussion
    Replies: 2
    Last Post: 3 Sep 2009, 10:34 AM
  3. replace the "south" with the "new Ext.StatusBar" in "layout:'border'"
    By ealpha in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 18 May 2008, 8:28 PM
  4. null error on "this.el" statement in IE7 (waow)
    By Jacob in forum Ext 1.x: Help & Discussion
    Replies: 5
    Last Post: 8 Nov 2007, 9:08 AM

Posting Permissions

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