Scott Penrose

ExtJSCore Tutorial

Scott is an expert software developer with over 30 years experience, specialising in education, automation and remote data.

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:

#!JavaScript
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:

#!JavaScript
// 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:

#!HTML
<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>