ExtJS red flag: Can I work around it, and if so how?

Question

In an earlier question, Why is my ExtJS datagrid populating as empty? , I made what was intended to be a "first try" implementation based on Jesus Garcia's ExtJS in Action (five stars on Amazon). When that didn't work, I went to reimplement the example I was trying to follow (pp. 159-161). I corrected a bug where in nameRecord a column is called 'name' and in colModel it is called 'fullName', but otherwise this page implements the example code identically barring whitespace:

<!DOCTYPE html> 
<html> 
    <head> 
        <link rel="stylesheet" href="/extjs/resources/css/ext-all.css" /> 
        <script type="text/javascript"
          src="/extjs/adapter/ext/ext-base-debug.js"> 
        </script> 
        <script type="text/javascript" src="/extjs/ext-all-debug.js"></script> 
    </head> 
    <body> 
        <script type="text/javascript"> 

            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: 'fullName', mapping: 1},
              {name: 'state', mapping: 2}
              ]);

            var arrayReader = new Ext.data.ArrayReader({}, nameRecord);

            var memoryProxy = new Ext.data.MemoryProxy(arrayData);

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

            var colModel = new Ext.grid.ColumnModel([
                  {
                  header: 'Full Name',
                  sortable: true,
                  dataIndex: 'fullName'
                  },
                  {
                  header: 'State',
                  dataIndex: 'state'
                  }
              ]);

            var gridView = new Ext.grid.GridView();

            var selModel = new Ext.grid.RowSelectionModel({
              singleSelect: true
              });

            var grid = new Ext.grid.GridPanel({
              title: 'Our first grid',
              renderTo: Ext.getBody(),
              autoHeight: true,
              width: 250,
              store: store,
              view: gridView,
              colModel: colModel,
              selModel: selModel
              });

            </script> 
    </body> 
</html>

And this fails in the same way as my earlier question ( Why is my ExtJS datagrid populating as empty? ): it displays the headers but no rows of data.

So I have two questions:

First, what can I learn from this? Is this just what happens when you try to follow this specific title on how to use ExtJS? Is there another book I should be working from instead?

Second, where (if anywhere) can I find simple, working ExtJS datagrid demos that I can get working and then begin to adapt to my purposes?

Answer 1

Change your record creation to

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

and your store creation to

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

Regarding your second question: try the examples page on sencha.com .

ExtJS red flag: Can I work around it, and if so how?

Question

1 answers

solution1
0 ACCPTED 2011-04-05 14:01:14

ExtJS red flag: Can I work around it, and if so how?

Question

1 answers

solution1 0 ACCPTED 2011-04-05 14:01:14

solution1
0 ACCPTED 2011-04-05 14:01:14