At least when running against ExtJS 2.2, the example from Listing 7.1 on page 159 of ExtJS in Action, (c) 2011, has a few careless errors. If you use the GridPanel source from Building_our_simple_gridpanel.html to finish things up, you need to make a number of changes. First, he's changed the mapping for the first column from 'name' on page 159 to 'fullName' (case is important) in the example code. That's not technically an error, but is an inconsistency that's surprising given the quality of most of the sample code, which is usually quite thorough down to its whitespace.

That said, there are a number of errors where the code in Listing 7.1 is misdescribed in the corresponding paragraphs. There are numbers that are supposed to match from text to code, and they often don't. So I'm guessing Listing 7.1 isn't up to snuff.

There are two serious, outright errors, afaict. The first is that the Ext.data.Store is never loaded. The second is in the nameRecord declaration. It's an oboe error with indices -- again, at least when used against 2.2 (the book assumes 3.1). He's got the first column at 1 and second at 2. That borks. You want 0 and 1.

Let's just cut to the chase and spit it all out here. Note that I also put in a hardcoded height, since I wasn't rendering to the body.

// Call createGrid from Ext.onReady() to render the simple grid
// to a div with id of 'divUiHook2'.
function createGrid()   {
        
        //==============================================
        // code from Listing 7.1
        //==============================================
        var arrayData = [
                ['Jay Garcia',    'MD'],
                ['Aaron Baker',   'VA'],
                ['Susan Smith',   'DC'],
                ['Mary Stein',    'DE'],
                ['Bryan Shanley', 'NJ'],
                ['Nyri Selgado',  'CA']
        ];


        var nameRecord = Ext.data.Record.create([
                { name:'name',mapping:0},
                { name:'state',mapping:1}
        ]);

        var memoryProxy = new Ext.data.MemoryProxy(arrayData);
        var arrayReader = new Ext.data.ArrayReader({ id:0 },nameRecord);

        var store = new Ext.data.Store({
                reader:arrayReader,
                proxy:memoryProxy
        });

        store.load();                   // this was missing -mfn
        console.log(store.getCount());  // this is what clued me in -mfn


        //==============================================
        // code from Building_our_simple_gridpanel.html
        //==============================================
        var cm = new Ext.grid.ColumnModel([                          // 1
                {
                        header    : 'Full Name',
                        sortable  : true,
                        
                        // changed this from fullName
                        dataIndex : 'name'         // 2
                },
                {
                        header    : 'State',
                        dataIndex : 'state'
                }
        ]);

        var gridView = new Ext.grid.GridView();                     // 3
        var selModel = new Ext.grid.RowSelectionModel({             // 4
                singleSelect : true
        });

        var dummyGrid = new Ext.grid.GridPanel({                         // 5
                renderTo   : 'divUiHook2',      // changed from getBody.
                //autoHeight : true,            // replace with constant
                height     : 200,               // constant height
                width      : 250,
                store      : store,                                    // 6
                view       : gridView,                                 // 7
                colModel   : cm,                                       // 8
                selModel   : selModel,

                title      : 'Our first grid'
        });
}       // eo fn createGrid


Voila. That works, providing you have a DIV with id name divUiHook2 in your file and that you call the createGrid function.

Labels: , , ,