Hide/Show CheckBoxGroup in Dialog

Hi 

I am trying to Hide/Show checkbox group when dialog's loadContent called, but not able to do so. Below is my code :

function(dialog) { var compPath = dialog.path; console.log("compPath ::: "+compPath); var sliderPath = compPath.replace("/par/slider/par/slide", "/par/slider"); console.log("Slider Path "+sliderPath); var data = CQ.Util.eval(CQ.HTTP.get(sliderPath+".json")); console.log("data ::: "+data); var value = data['selectiontype']; console.log("selectiontype ==== "+value); //test if(value == 'test') { var pan1 = dialog.findById("layout2"); pan1.hide(); console.log("pan1 ::: "+pan1); } }

Here pan1 coming null. Below is the dialog file:

<items jcr:primaryType="cq:Widget" xtype="tabpanel"> <items jcr:primaryType="cq:WidgetCollection"> <panel1 jcr:primaryType="cq:Panel" title="Slide"> <items jcr:primaryType="cq:WidgetCollection"> <one jcr:primaryType="cq:Widget" fieldLabel="one" itemId="layout2" name="./one" type="checkboxgroup" xtype="selection"> <options jcr:primaryType="cq:WidgetCollection"> </options> </one> <two jcr:primaryType="cq:Widget" fieldLabel="two" itemId="layout1" name="./two" type="checkboxgroup" xtype="selection"> <options jcr:primaryType="cq:WidgetCollection"> </options> </two> </items> </panel1> </items>