The Author Online Book Forums are Moving

The Author Online Book Forums will soon redirect to Manning's liveBook and liveVideo. All book forum content will migrate to liveBook's discussion forum and all video forum content will migrate to liveVideo. Log in to liveBook or liveVideo with your Manning credentials to join the discussion!

Thank you for your engagement in the AoF over the years! We look forward to offering you a more enhanced forum experience.

cerad (4) [Avatar] Offline
I have been going through the book chapter by chapter. It's a very helpful book though somewhat marred by typo's, grammar errors and a few incorrect examples. I took an in depth look at chapter 7 and came up with a list of possible issues. I generated a nice color coded file but this forum does not seem to allow file attachments. I pasted it in but the color coded formatting did not transfer and it is too much work to redo by hand.

I'll be glad to email the file if desired. I'm also willing to review other chapters in detail as well if requested.


Chapter 7 The venerable GridPanel

7.1.1 Looking under the hood

Incorrect wording
The GridView is the class is the Actual UI component of the Grid View.

They do this by means of a dataIndex poperty

displaying the data it obtains from field its mapped

Plurality is wrong, should be a set of
Lastly, the Selection Model is a supporting classes that work with a View

7.2 The DataStore at a glance

Change "where" to "while"
DataStore contains a list of records, where TreePanels require hierarchical data.

7.3.1 Setting up an Array DataStore

The mapping indexes are wrong
var nameRecord =
{ name : 'name', mapping : 1 }, // 0
{ name : 'state', mapping : 2 } // 1

Should be
var nameRecord =
{ name : 'personName', mapping : 0 },
{ name : 'state', mapping : 1 }

And consider changing name to personName for consistency.

Grammar issue
Just know that having am mixture of field configurations like this can make the code a bit hard to read.

General suggestion
Might want to point out that the full example requires a call to load() to actually load the data while the convience example does not. And maybe add a couple of lines to test the store. This is how I discovered the index mapping issue. Of courde this might be covered later in the book.

var record = store1.getAt(2);
console.log('Record 2 ' + record.get('personName') + ' ' + record.get('state'));

7.3.2 Completing our first GridPanel

Add the word header since hovering over the entire column does nothing
click the column menu icon, which appears whenever the mouse hovers over a particular column header.

7.4.1 What we’re building.

The above section header terminates in a ".", inconsistent. And "we're" should probably be "we are".

Insert the word "be"
The GridPanel we’re going to be constructing

Insert the word "to"
One of which will simply apply color to the ID column

Section 7.4.2 Creating the store using shortcuts

Delete the words in red
Ext uses this fields configuration array and use it to automatically create the data.Record that it will use to fill the store.

Figure 7.8 - dataRoot should be records?

7.4.3 Building a ColumnModel with custom renderers

Listing 7.3 Creating an ArrayStore

Need to specify a proxy for the JsonStore unless there is such a thing as an xtype for proxies?
proxy : new{
url : ''

Delete the word "for" and the comma
For instance, for the “ID” column, is hidden{1} and

Insert the word "we"
The “Address” column is a bit special because we disable sorting.

7.4.4 Configuring our advanced GridPanel

Insert the word "of"
will ensure that the Store receives bundles of 50

Change p to ???
The last configuration property, displayInfo, instructs the p to display

Might mention that column id does not have to be unique for the app
Lastly, we set the autoExpandColumn property to the string of ‘addressCol’, which is the ID of our Address Column

7.4.5 Configuring a Container for our GridPanel

This seems to imply that the example uses which it does not, be nice if it did
The xaction parameter is used by to instruct the controller on which action to execute, which in this case, happens to be the load action. The xaction parameter is sent with every request generated by stores and can safely be ignored if needed.

7.4.6 Applying event handlers for interaction

Delete "is"
which is configured to accept two of the parameters that the event is publishes.

Insert "the method", change "stop" to "stops"
This is why the method calls evtObj.stopEvent{4} as the first task. Calling stopEvent stops the native browser context menu from showing.

Insert "a"
We then test to see if thisGrid does not have a rowCtxMenu property,

Remove "not"
One key to effective development of UI interactions is not to only instantiate and only


Change data-feeding to data-fed, delete "the both" and "the"
started by constructing a local data-feeding data-fed GridPaneland learned about the both the supporting classes for both the data Store and GridPanel.

Insert "we"
While building our first GridPanel, we got to see how

Capitialize "we"
We learned more about the ColumnModel

General Comments
While they may not be required the Eclipse Galieo PDT IDE warns about missing semi-colons for:
var xxx = {}
This warning probably comes from the fact that I am using a php editor for javascript.
Or maybe not, same thing on a pure javascript file with a javascript editor

Also be aware that only the code in the pdf file was examined. Did not need to look at the examples at all for this chapter. Code from the pdf file was copied/pasted into .php files

Message was edited by:
jesus.garcia (463) [Avatar] Offline
Re: Chapter 7 - In depth editorial review
Please try to ignore the grammar issues and typos. The manning editing team will work on cleaning it up soon.

I will look at the technical issues with the examples.

cerad (4) [Avatar] Offline
Re: Chapter 7 - In depth editorial review
Made it through Chapter 8. Really fun stuff. Three issues:

Listing 8.4 Creating The PagingToolbar and EditorGridPanel
var grid = {
xtype : ‘editorgrid’, // Should be quotes, not apostrophes

Listing 8.7 Constructing our delete and new record methods
url : 'successTrue.js',
parameters : { // Should be params
rowToDelete :

Listing 8.9 Reconfiguring data Store to use Writer

dataDelete.php seems to be missing on the server - 404 not found

dataUpdate.php and dataCreate.php returning succes instead of success

Message was edited by:
marco.pancotti (1) [Avatar] Offline
Re: Chapter 7 - In depth editorial review
Hi Jesus
I do not know if you are already aware of that, but the URL does not work (the Grid remains empty), while in the downloadable example there is still the url that does not respond at all.

I completed the exercise using the url, and it worked. I suggest you to fix the problem, otherwise a beginner can be confused.

jesus.garcia (463) [Avatar] Offline
Re: Chapter 7 - In depth editorial review
Thanks marco. I'll go through the examples and fix accordingly.