CODEWITHSUNDEEP
extjsaem
Riju Mahna
Riju Mahna

Reputation: 6926

Fetch the value of a dropdown widget on dialog load in CQ5 using ExtJS

I have a dialog box with a dropdown (name="number", xtype="selection") widget in a tab. While loading the dialog, I need to fetch the value in this dropdown to display/hide another tab.

Both the tabs are in the same dialog (xtype="tabpanel")

I tried adding a ExtJS code as a 'listener' in the 2nd tab (which needs to be hidden/displayed) but it didn't work:

<listeners
                jcr:primaryType="nt:unstructured"
                render="function() {alert(this.findParentByType('tabpanel').getFieldValues('number')); }"/>

Upvotes: 1

Views: 5803

Answers (1)

Johan
Johan

Reputation: 61

If you take a look at the OOB list component, it has the functionality you are after. It implements two listeners for a drop-down selection that contains the different choices for which tab to show:

listeners

loadcontent -> 

function(){
    this.findParentByType('tabpanel').manageTabs(this.getValue(),true);
}

selectionchanged -> 

function(box,value){
    box.findParentByType('tabpanel').manageTabs(value);
}

Whenever the selection changes it will manage the tab with the selected value, also it will do this when the content is loaded so you wont have to change the value all the time for the changes to take effect.

You will also see the actual tabs and that they are implementing a listener for rendering:

render -> 

function() { 
    //The different panels will have to have the index corresponsing to their order in the node structure
    this.findParentByType('tabpanel').hideTabStripItem( 'the index for the tab' ); 
}

Finally for this to work, the main tabpanel needs to have the function "manageTabs" defined as a property:

function(tab,noSwitch){
    //Here you will have to specify the different node names for the panels
    var tabs=['tab1','tab2','tab3',....,'tab n']; 
    var index=tabs.indexOf(tab);
    if(index==-1) return;
    for(var i=1;i<tabs.length;i++){
        if(index==i){
            this.unhideTabStripItem(i);
        }else{
            this.hideTabStripItem(i);
        }
    }
    this.doLayout();if(!noSwitch)this.activate(index);
}

So this would be possible to just modify a little for your example to work :) Hope it helps

/Johan

Upvotes: 3

Related Questions