A Cookbook.

When I want to separate similar parts of my application, I love to use “notebooks”, or tab panels. The users instantly notices that all of the tabs belong to one section of the application, but represent different areas of functionality. TabPanels in ExtJS additionaly have the nice behaviour to load their tab content on demand. Today I integrated this widget into Apotomo.

The setup is a Panel, containing a TabPanel. The first tab contains a TreePanel itself.

app/apotomo/apotomo_widget_tree.rb

1
2
3
4
5
6
7
8

w << apnl = ext_panel('apotomo_panel', :title => "Apotomo rocks!", :width => 320)
  apnl << tbpanel = ext_tab_panel('my_tabpanel', :height => 90)
 
    tbpanel << tab1 = ext_tab('my_tab1', :title => "Wow!")
    tbpanel << tab2 = ext_tab('my_tab2', :title => "Give me some Panel")
 
      tab1 << tpanel = ext_tree_panel('an_ext_tree', :width => 200)
      tab2 << ext_panel('small_panel', :title => "Panel in Tab", :width => 180)

We just add one child, a Panel, to tab2 (line 8). Any number of widgets could be added here, e.g. a form widget, a news feed widget, or whatever you like.

When clicking on the second tab, ExtJS loads the content via AJAX by asking Apotomo for it.

The Tab widget isn’t directly mapped to an ExtJS widget, it was introduced for a better modularity and abstraction in Apotomo.