Hide and show components on user input!

Question

Hello,
I am building an application with APEX, using ExtJS and need to accomplish the following:
I need to hide few components when the page renders and leave only one, the first one.
Then, when user fills in the first component, I have to show the second one. The user should hit enter or tab to proceed to the next step.
If someone has experience with ExtJS or Java Script in general, please advise me how can I solve this task.
Thank you...
Edited by: Sloger on May 5, 2010 5:56 AM

Answer 1

In general: You could include your components (regions) into div tags and assign an id to each div.
Or search for your existing div and table ids, that include your regions.
Then include the following JavaScript in the footer or header of your page:
hideDiv("your_component_id","hide");
//and the function:
           function hideDiv(divId,action){
         var divElement;
         divElement = document.getElementById(divId);
         if(action == "show") {
           divElement.style.display="block";
         } else if (action == "hide"){
           divElement.style.display="none";
    }Then, in the header or external javascript file, create listeners and/or special key events that should include the following call to your function at the end of the event:
hideDiv("your_component_id","show");