PDA

View Full Version : Help Creating Dynamic TabPanels



erineg1
21 Nov 2011, 4:45 PM
I seem to be stuck on a very simple problem, and apologize in advance if I'm missing something obvious.

I need to create multiple (N) tabPanels on a page after dynamic content has been rendered from the server. The server renders the following html code:


<div id="tab_panel_x" class="classes_i_am_accessing">
<div id="sub1_x" class="x-hide-display">
Left tab content.
</div>
<div id="sub1_y" class="x-hide-display">
Right tab content.
</div>
</div>
<div id="tab_panel_y" class="classes_i_am_accessing">
<div id="sub2_x" class="x-hide-display">
Left tab content.
</div>
<div id="sub2_y" class="x-hide-display">
Right tab content.
</div>
</div>

I'm getting the elements correctly through this:


Ext.select('.classes_i_am_accessing')

Should I be creating a child of type 'tabPanel'? If so, can anyone share an example where I may pass my element to this child?

I've done similar things through event handling and it has worked well:


Ext.select('.food_program_directory_map').addListener('click', showMap.createDelegate(this), {single: true});

It's been a long day, but I did think that there may be an event for load and I could go this route.

Any suggestions would be much appreciated.

mitchellsimoens
22 Nov 2011, 8:49 AM
So you iterate through the elements and create different tabs for them? How do you include the html?

erineg1
22 Nov 2011, 9:30 AM
Mitchell--

The goal is to iterate through the elements, and reference the existing html from the server. Thinking, ideally, I could do the following:

1. Get list of elements through a Ext.Select
2. Iterate through them
3. Instantiate a new tabPanel for each that will reference the html through a contentEl (assuming I have access to the element details I'm iterating through)

Again, I may be missing something but I think that may work?

erineg1
22 Nov 2011, 11:11 AM
Mitchell--

I was able to find a solution this morning:



Ext.select('.food_details_tab').each(function(element) {
createProgramDetailsTab(element);
});


I just created the tabs and rendered them appropriately. Thanks for the help. Sometimes a good night's sleep is what's necessary.