View Full Version : [2.0b1][CLOSED] Tutorial broken: "Application Layout for Beginners"

17 Oct 2007, 3:09 PM
The code in the following tutorial is broken:

http://extjs.com/learn/Tutorial:Application_Layout_for_Beginners (http://extjs.com/forum/../learn/Tutorial:Application_Layout_for_Beginners)

The bad behavior occurs at the point in the tutorial when the button is added to the page. The text of the button does not appear, i.e. the button face is blank. Also, clicking the button does not bring up the alerts as it should.

This tutorial WORKS under ext-1.1.1.
This tutorial DOES NOT work under ext-2.0-alpha1.
This tutorial DOES NOT work under ext-2.0-beta1.

I tried it in both Firefox and IE 6.0 (though I didn't try IE in all configurations) under Windows XP SP2.

I am brand new to ExtJS, so I'm certainly not qualified to judge, but I wonder if this is related to the button.setText() problem also in this forum.

Any help is appreciated.



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="../extjs/resources/css/ext-all.css">
<script type="text/javascript" src="../extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../extjs/ext-all-debug.js"></script>
<script type="text/javascript" src="applayout.js"></script>
<!-- A Localization Script File comes here -->
<script type="text/javascript">
Ext.onReady(myNameSpace.app.init, myNameSpace.app);
<title>Application Layout Tutorial</title>
<div id="btn1-ct"></div>

* Application Layout
* by Jozef Sakalos, aka Saki
* http://extjs.com/learn/Tutorial:Application_Layout_for_Beginners

// reference local blank image
Ext.BLANK_IMAGE_URL = '../extjs/resources/images/default/s.gif';

// create namespace

// create application
myNameSpace.app = function() {
// do NOT access DOM from here; elements don't exist yet

// private variables
var btn1;
var privVar1 = 11;

// private functions
var btn1Handler = function(button, event) {
alert('privVar1=' + privVar1);
alert('this.btn1Text=' + this.btn1Text);

// public space
return {
// public properties, e.g. strings to translate
btn1Text: 'Button 1',

// public methods
init: function() {
btn1 = new Ext.Button('btn1-ct', {
text: this.btn1Text,
handler: btn1Handler
}(); // end of app

// end of file

17 Oct 2007, 4:04 PM
Did you read the big blue box on the tutorial page?? Tutorials have not yet been updated for 2.0, this is not a "bug."

18 Oct 2007, 8:02 PM
Did you read the big blue box on the tutorial page?? Tutorials have not yet been updated for 2.0, this is not a "bug."

A few things:
If somebody broke backwards compatibility without very good cause indeed, it's a bug, regardless of whether or not the problem was reflected in a tutorial or in some other code. If the API does not perform as documented, as it appears that it fails to do here, it is a bug. Deal with it.
I am a consultant that just yesterday recommended ExtJS as a candidate framework to be considered by a large financial institution. This institution will purchase a commercial license if Ext is selected.
If you are, in fact, a core Ext developer, and if your rude and unhelpful response is indicative of what can be expected going forward, I need to withdraw my recommendation, particularly since my client is generally disposed to purchase support contracts, putting my reputation with them on the line if that money proves to be wasted (or worse).I'm hoping this was a fluke.

I'd welcome input from anybody in the ExtJS community about your experience with the framework and with the developers. Please respond privately to ck.ext@calderoncorp.com . Thanks.

18 Oct 2007, 8:36 PM

The reason why the tutorials won't work for the new codebase is because it's a major release version. It's a convention that major releases numbers (for example, 1.x -> 2.x) can and usually do contain breaking API changes. The tutorials are often user submitted, so they are not really "officially supported".

I don't really think the response was rude (a bit terse though ;)), he merely pointed out that the tutorial was for an older version.

You say that:

If the API does not perform as documented, as it appears that it fails to do here

However, in this case the API presented is for the 1.x branch of the code, which does perform as documented. As such, this is not a bug in Ext 2.0.

If you continue with your investigation and get a working solution, perhaps you could post a 2.0 version of this tutorial? The community would certainly appreciate it.


18 Oct 2007, 8:36 PM
Hi chazzz,

My reply was not intended as rude, so I apologize if it came across that way. Reading my reply again, it was a bit short (lack of sleep does not help). We are well aware that the tutorials need to be updated -- it's been discussed here in the forums, and I specifically updated that page in the interim while we work on it.

We have quite publicly discussed the breaking changes from 1.x to 2.0 for many months now, posting examples along the way as things changed. There are good reasons for these changes -- please refer to the 2.0 Overview (http://extjs.com/learn/Ext_2_Overview) for a better understanding of why that's the case. The tutorials needing to be updated does not really constitute a "bug" -- the bug thread is intended for bugs in the code, not tutorial/documentation type issues.

If you spend a bit more time on the forum, I hope that you'll see that I and others spend countless hours helping people out. I also do appreciate that you took the time to point out an issue -- sorry that I replied without taking the time to give you a better answer.