I have a tab panel that contains a panel that was designed with a border layout. The border layout was chosen because it fits in nicely with my use case: Two horizontally-aligned panels separated by a vertical split bar.

The layout works well when deferredRender is false, but now I need to optimize because I'm taking too much time loading everything up front. This is where the problems begin. My subpanels' creation relies on DOM elements that won't exist until after the activate handler calls panel.load. For this reason, I would like to create the subpanels in a callback. Not so fast! BorderLayout is fixed at render time so it's not happy when I try to dynamically create and add the subpanels.

The way I see it I have two options:

  1. Use a layout that supports dynamically added subpanels (TableLayout for instance)
  2. Pre-create dummy subpanels and properly populate them in the activate event handler

The problem with the first option is that I have no experience adding a split bar to a group of panels with a TableLayout and the samples are silent with regard to that scenario. The BasicLayoutAdapter documentation implies that this is supported:
Generally used for table based layouts.
So I'm pretty sure it's feasible, but it will likely involve a great deal of experimentation and debugging on my part.

The second option seems straight forward, but frankly these panels' initialization is somewhat complex and tearing them apart and rebuilding them will also involve lots of debugging.

Either way, this task is going to be time-consuming, so I'd like to solicit opinions before investing time in the "wrong" approach. What, in your informed opinions, would be the best practice for building a dynamically loaded panel consisting of two panels aligned horizontally in a single row with a vertical splitbar between them?