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>