Scott Penrose

ExtJSCore Tutorial

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

Difference between revision 3 and current revision

No diff available.

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.


The example for Ext3 Core tabs is here:

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(){'.tab-buttons-panel').on('click', function(e, t) {'tab-show');
       Ext.get('content' +'tab-content-show');
   }, null, {delegate: 'li'});

Basic help & expand:

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

Consider also as a comparison my Tab code from Zaltana -


<div class="tabgroup">
	<section title="tab1">
		Add tab1 content here.
	<section title="tab2" class="selected">
		Add tab2 content here.
	<section title="tab3" url="">