3 Replies Latest reply on Nov 26, 2012 3:38 AM by minisanu

    Disabling a tab in a dialog dynamically

    EbodaWill

      I have a dialog with three tabs. There is a selection dropdown on first tab. Based on what selection I make here, one of the second or third tab should be greyed out. So that the user only has one tab left to edit out of second or third one. Has someone done similar thing before?

        • 1. Re: Disabling a tab in a dialog dynamically
          CQQuest Level 1

          Take a look at list component under libs

           

          /libs/foundation/components/list/dialog/items/list/items/listFrom/listeners

          1 person found this helpful
          • 2. Re: Disabling a tab in a dialog dynamically
            rush_pawan Level 4

            I suggest to refer above location '/libs/foundation/components/list/dialog/items/list/items/listFrom/listeners' and create similar node structure in your component. Now the listerner methods mentioned in above location will not help you to complete your task, to do so follow below steps.

            1. Create a new property as 'id' at each of your tab ('panel') with string value of name of your tab (which will be same name/value you will use in your first tab drop down)

            2. Now replace below methods corresponding to each events under listener tab.

             

            loadcontent - function(){var newvalue=""; this.findParentByType('tabpanel').getComponent(this.getValue()).disable(this); if(this.getValue()=="first"){ newvalue="second";}else{newvalue="first";} box.findParentByType('tabpanel').getComponent(newvalue).enable(this); }

             

            selectionchanged - function(box,value){var newvalue=""; box.findParentByType('tabpanel').getComponent(value).disable(this); if(value=="first"){ newvalue="second";}else{newvalue="first";} box.findParentByType('tabpanel').getComponent(newvalue).enable(this); }

             

            Above example will take care of tabs (panel) 'first' and 'second' you can change it as per your requirement (considering you have created tabpanel and panel to create your component).

             

            I hope this much information will help you to complete your task. I face any issue let me know.

            • 3. Re: Disabling a tab in a dialog dynamically
              minisanu Level 1

              Hi  rush_pawan,


              I have three tabs dynamically created with the help of ur your suggestion given above. It works fine.

               

              I have another requirement. If i select one tab amongt the three, there is a drop down list with values and a multifield(textbox). If select a particular value in drop down list the multifield should be diasbled.

               

              It works well for a dialog of xtype dialog.

               

              function(box,value){var ans = box.findParentByType("dialog").form.findField("anstext"); disableAnsText(ans,value);}

              function disableAnsText(ans,value)

              {

                 if(value == "date") {

                                  alert("anstype value - "+value);

                            ans.setDisabled(true);

                  }

               

              }

               

              Now i have 3 tabs in a dialog of xtype tabpanel. How can i achieve the same with the tabpanel.

               

              Thanks. It would be of great help  if i get an answer for this.