This is my draft of some content for an ExtJS 3 Core tutorial for web developers.

This is a workpad document for now, allowing me to work on the Javascript and content for the training.

Tabs

The example for Ext3 Core tabs is here: http://www.extjs.com/playpen/ext-core-latest/examples/tabs/

It is a terrible example for some of the following:

• It is over brief / obfuscated. It shows off how brief you can be in Ext instead of how elegant (and I am a Perl programmer...)
• It fails to work at all if Javascript is disabled (accessibility)
• The HTML is non hierarchical
  • Tab names are in a div, then each content is in a div
  • There should be one DIV per tab entry, including title & content
• It requires the user to enter "ids"
  • A user may be producing a page, that is then incorporated on a larger page.
  • It should be simple mater of adding the javascript to turn on a feature

This can be fixed...

• Rewrite the code long form to be easier to understand
• Hide the tabs post javascript loading (this has its own issues to be considered)
  • This means that if you disable CSS or Javascrip tor both it works
• Reorganise HTML - use a span for title, and div for content or similar
• Generate IDs as part of the code creation

The original:

Ext.onReady(function(){
   Ext.select('.tab-buttons-panel').on('click', function(e, t) {
       Ext.fly(t).radioClass('tab-show');
       Ext.get('content' + t.id.slice(-1)).radioClass('tab-content-show');
   }, null, {delegate: 'li'});
});

Basic help & expand:

// When the page has loaded
Ext.onReady(function(){
   // Find all elements with the class 'tab-buttons-panel
   // and add a 'click' handler
   Ext.select('.tab-buttons-panel').on('click', function(event, tab) {
       // Brief discussion on creating objects from elements - fly
       // radioClass ?
       Ext.fly(tab).radioClass('tab-show');
       Ext.get('content' + tab.id.slice(-1)).radioClass('tab-content-show');
   }, null, {delegate: 'li'});
});

Consider also as a comparison my Tab code from Zaltana - http://zaltana.org/documentation/Widget_Tabs

Example:

<div class="tabgroup">
	<section title="tab1">
		Add tab1 content here.
	</section>        
	<section title="tab2" class="selected">
		Add tab2 content here.
	</section>
	<section title="tab3" url="http://www.google.com">
	</section>        
</div>