Learning ExtJS Book Bugs
This post exists strictly for the purpose of having a place to report errors/bug found in the Learning ExtJS book and code samples. You can also email me with anything you find via the contact form on this site, however posting them here will cut down on duplicate reports of errors.
Anyone interested in the most up to date code samples to accompany the book is welcome to check out a copy from SVN - http://code.google.com/p/learning-extjs-book-samples/
The list of current errata can be found on the publishers site as well - http://www.packtpub.com/support/book/learning-ext-js
26 Comments
→
Here are the two found so far:
1) Reference to non existent ColumnSelectionModel on page 92
2) ‘note’ about Ajax loaded HTML not being parsed on page 129 is incorrect. Paragraph above states correctly.
Page 46. Second field should presumably state hideLabel:true (description following code appears correct).
Hi,
Thanks for great book. I really learned a lot from it!
Bugs I found so far:
page 16, screenshot doesn’t reflect outcome of code.
page 126, xtype: ‘gridpanel’ -> must be ‘grid’
Suggestions:
- prevent mixed use of document.body and Ext.getBody()
- page 48, explain why you use Ext.data.Store instead of Ext.data.JsonStore
- include a list of available xtypes. As you indicate their naming is sometimes inconsistent and a source of mistakes.
Page 283 where it’s explaining about DomQuery selectors.
The example selector is ‘a.iconLink[@href*="cutterscrossing"]:first’
And in the bulleted list which explains each element of the selector it has
a: Is an anchor element
.selectNode: Is a class of selectNode
I think the colon after the element is potentially confusing, and may be assumed to be part of the selector element, see “:first:”
The “selectNode” string is the name of the method of DomQuery being called.
The bullet point should read
.iconLink Is the CSS class name to match.
@Luc – Thanks, glad you enjoyed it. And thanks for reporting what you found.
The reason for using Ext.data.Store throughout the book instead of the pre-configured Ext.data.JsonStore is to drive the point in that the data storage and data format are not related to each other, that there is a detachment built in to ExtJS. It also helps to keep the code more consistent as the reader progresses from one task to another.
I can’t believe you guys didn’t get Animal to write something….he he he. Maybe you could have another list for topic requests on your next version? I was a bit surprised there wasn’t much on Templates. I think the API and current examples in the wiki etc. are lacking. I see the book had like one reference to templates but it was ancillary at best. I’m surprised it wasn’t included also because I think Colin may already have some work done towards this.
Did you guys ever considering making a subscription based web site with tutorials and screencasts etc? Maybe something like $10 per year might be cheap enough to get many to jump in? Just seems like a website might be better with such a fast changing topic like this.
Page 26, the example usage of Ext.onReady passes the RESULT of a function call into OnReady.
This is how beginners try to do it anyway, and is the cause of a lot of noise on the forums, so having it “officially” recommended to do that is a bit of a pain!
I agree about usage of Ext.data.Store. Those “convenience” classes mask the operation of the real classes. And anyway, they’re badly named. “JsonStore”? JSON is STRING data. Javascript does not store “JSON”. It stores OBJECTs. And SimpleStore has been renamed to ArrayStore in the tip, so stick to Ext.data.Store every time!
I should have caught that one – thanks. So on page 26, the code should read:
Ext.onReady(stapler);
Instead of:
Ext.onReady(stapler());
Someone beat me to the onReady misprint! That was the only really good one I had.
Page 2:
database-driven combo-box’es
Page 26:
The buttons record [ should be object or argument instead of record ] can also specify the text to display on the button…
Page 27:
This can be done by adding a style for the icon, and modifying the config to have an icon record along with a buttons record.
Again, not sure if the use of the term “record” here was on purpose or not, as in the rest of what I’ve read “argument” is used.
@David – The term ‘record’ has a fairly broad usage, and in those cases its being used to refer to a single name/value pair. In the typically way we think about it (and this is why those paragraphs are confusing) a ‘record’ would contain more than one value pair, but I don’t think that always needs to be the case.
WRT the term “record”. I would say that can mean almost anything you want in broad terms.
I have a habit of capitalizing anything that is a class name. So if I mean an Ext.data.Record. I refer to it as a “Record”.
All the documentation I add uses this principle, so “Component” always means an instance of Ext.Component wheras “component” may just refer to a constituent part of an application.
Page 44/45 (custom vtype) has a vtype to validate Director’s name. The error message is “In-valid Director name”, this should really be “Invalid Director name”.
Page 76:
The code example is broken because the reader constructor (new Ext.data.ArrayReader ) isn’t closed.
Just an update for everyone who posted their bug/error findings – today the list was compiled and sent to the publisher, so these fixes should materialize shortly in the eBook version.
Thanks to all for your contributions, and I hope everyone is having a great x-mass or other preferential non-ethnic-religious-culture-specific holiday time of year! (hows that for a hyphenated PC word!)
Just a few minor items I noted not real bugs but as a newbie.
Page 44 – Custom vtypes – maybe just a bit more detail in how the regular expression works, left me with more questions than answers.
Page 83 render lookup, points back to a store that was defined 40 pages before, page number reference would be nice.
also the .itemAt(0).data.genre needs a bit more, took me a minute to get the idea.
Page 86:
var colmodel = grid.getColumnModel();
colmodel.getColumnById(‘tagline’).sortable = true;
getColumnById accepts a string but seems to only work if you pass it an integer. I can’t find a getColumnByDataIndex-like
method so this was the only code I could come up with to make the example work by passing it the dataIndex
value:
colmodel.getColumnById( colmodel.getColumnId( colmodel.findColumnIndex( ‘tagline’ ) ) ).sortable =
true;
Same thing applies to the next example using getColumnById on that page.
@ David – it sounds to me like you forgot to give your column (in the column model) an id.
Like I forgot to or like you forgot to?
Here’s the column model that code I pasted is supposed to operate on, which is on page 79:
{header: “Title”, dataIndex: ‘title’},
So you can then pass id parameters to those column objects! Awesome! I think it would be a good idea to explain that when you correct the code sample above.
{header: “Title”, dataIndex: ‘title’, id: ‘title’},
On page 96 you use another function, still operating on the same column model which is missing the id parameters, getIndexById, which will also be broken with the incomplete column model it’s expected to be used with from the book.
I think it might be a good idea to have someone on your team actually go through and test all of the code samples and then update the PDF ASAP. Thanks.
@ David – I swear that was in there, but its not now – between review, editing and revision process, these things can get lost.
As for page 79, that is not actually what needs to change. The introduction to modifying the column models properties is on page 86.
The code samples were tested, and the problem you ran into does not exist in the code samples download, only in the text of the book.
I would love it if I had a “team” to do these kinds of things, but im guessing the picture in your head about how books are produced is much grander than how it actually happens.
Here’s a small one – page 32 reads: “We are defining this so that the function will check to see if the value entered into our prompt dialog is equal to ‘the office’ and then write this text to a DIV in our page if it is, and a default text of ‘Dull Work’ if it does not”
However, the code shows that “Dull Work” is entered into the DIV if “the office” is entered in and the custom text is entered into the DIV if anything else is entered into the prompt.
@patorjk – Thanks for noticing that, it seems either the code or the sentence were transposed.
The funny thing that I didn’t notice till just now is that the publisher changed the phrase from “Work Sucks” – the actual tag line for the movie – to “Dull Work” during the editing process.
Page 44: Custom validation – create your own vtype
Code in book reads:
Ext.form.VTypes['nameVal'] = /^[A-Z][A-Za-z\-]+[A-Z][A-Za-z\-]+$/;
Ext.form.VTypes['nameMask'] = /[A-Za-z\- ]/;
Ext.form.VTypes['nameText'] = ‘In-valid Director Name.’;
Ext.form.VTypes['name'] = function(v){
return Ext.form.VTypes['nameVal'].test(v);
}
but it doesn’t work once I tried it.
However, I downloaded the code samples and tried using the one in “4_forms_custom_vtype_validation.php,” which is:
Ext.form.VTypes.nameVal = /^([A-Z]{1})[A-Za-z\-]+ ([A-Z]{1})[A-Za-z\-]+/;
Ext.form.VTypes.nameMask = /[A-Za-z\- ]/;
Ext.form.VTypes.nameText = ‘In-valid Director Name.’;
Ext.form.VTypes.name = function(v){
return Ext.form.VTypes.nameVal.test(v);
};
and that one worked.
Page 50: TextArea and HTMLEditor
Text reads:
“This is the first Ext component we have used that requires the QuickTips component to be initialized before we can use it.”
However, I tried commenting out Ext.QuickTips.init(); and it still worked, albeit without the descriptive tooltips.
So, perhaps, it should say that the descriptive tooltips for the buttons (bold, italics, etc.) won’t appear if QuickTips is not initialized. Or the sentence could just be removed.
Page 44: This is a case of unfortunate line wrapping in the book. The line with the regex got wrapped right at a space.
Ext.form.VTypes['nameVal'] = /^[A-Z][A-Za-z\-]+ [A-Z][A-Za-z\-]+$/;
Notice the space in the regex after the ‘]+’.
Page 50: This was a requirement with version 2.1, but a later release fixed the need to initialize tooltips to use the htmleditor.
Thanks for finding these things.
Page 113
e.commit() is not a function
e.reject() is not a function
Both should refer to e.record.commit() and e.record.reject()
Page 114:
Deleting data from server
conn.request({
url: ‘movie-update.php’,
params: {
action: ‘delete’,
id: e.record.id
},
Error : e.record.id is undefined.
Replace it by sel.data.id and it will work !