อย่างแรกที่จะลืมไม่ได้เลย
    Ext.onReady( function(){
    ...
    } );
เพราะมันเป็น function ที่จะใช้ในการแสดงผลของ ext
ซึ่งจะเหมื่อนกับ windows.onload ของ js ธรรมดา

โดยจะเขียนโค้ดลงบริเวณ ...

ข้อมูลสามารถดึงมาจาก array และ xml
(อธิบายแบบ array ก่อนเพราะมัน basic สุด *-*)
dummyData = [
    ['3m Co',  71.72, 0.02, 0.03, '9/1 12:00am',  'Manufacturing'],
    ['Alcoa Inc', 29.01, 0.42, 1.47, '9/1 12:00am',  'Manufacturing'],
    ['Altria Group Inc', 83.81, 0.28, 0.34, '9/1 12:00am',  'Manufacturing'],
    ['American Express Company', 52.55, 0.01, 0.02, '9/1 12:00am',  'Finance'],
    ['American International Group,  Inc.', 64.13, 0.31, 0.49, '9/1 12:00am',  'Services'],
    ['AT&T Inc.', 31.61, -0.48, -1.54, '9/1 12:00am',  'Services'],
    ['Boeing Co.', 75.43, 0.53, 0.71, '9/1 12:00am',  'Manufacturing'],
    ['Caterpillar Inc.', 67.27, 0.92, 1.39, '9/1 12:00am',  'Services'],
    ['Citigroup,  Inc.', 49.37, 0.02, 0.04, '9/1 12:00am',  'Finance'],
    ['E.I. du Pont de Nemours and Company', 40.48, 0.51, 1.28, '9/1 12:00am',  'Manufacturing'],
    ['Exxon Mobil Corp', 68.1, -0.43, -0.64, '9/1 12:00am',  'Manufacturing'],
    ['General Electric Company', 34.14, -0.08, -0.23, '9/1 12:00am',  'Manufacturing'],
    ['General Motors Corporation', 30.27, 1.09, 3.74, '9/1 12:00am',  'Automotive'],
    ['Hewlett-Packard Co.', 36.53, -0.03, -0.08, '9/1 12:00am',  'Computer'],
    ['Honeywell Intl Inc', 38.77, 0.05, 0.13, '9/1 12:00am',  'Manufacturing'],
    ['Intel Corporation', 19.88, 0.31, 1.58, '9/1 12:00am',  'Computer'],
    ['International Business Machines', 81.41, 0.44, 0.54, '9/1 12:00am',  'Computer'],
    ['Johnson & Johnson', 64.72, 0.06, 0.09, '9/1 12:00am',  'Medical'],
    ['JP Morgan & Chase & Co', 45.73, 0.07, 0.15, '9/1 12:00am',  'Finance'],
    ['McDonald\'s Corporation', 36.76, 0.86, 2.40, '9/1 12:00am',  'Food'],
    ['Merck & Co.,  Inc.', 40.96, 0.41, 1.01, '9/1 12:00am',  'Medical'],
    ['Microsoft Corporation', 25.84, 0.14, 0.54, '9/1 12:00am',  'Computer'],
    ['Pfizer Inc', 27.96, 0.4, 1.45, '9/1 12:00am',  'Services',  'Medical'],
    ['The Coca-Cola Company', 45.07, 0.26, 0.58, '9/1 12:00am',  'Food'],
    ['The Home Depot,  Inc.', 34.64, 0.35, 1.02, '9/1 12:00am',  'Retail'],
    ['The Procter & Gamble Company', 61.91, 0.01, 0.02, '9/1 12:00am',  'Manufacturing'],
    ['United Technologies Corporation', 63.26, 0.55, 0.88, '9/1 12:00am',  'Computer'],
    ['Verizon Communications', 35.57, 0.39, 1.11, '9/1 12:00am',  'Services'],
    ['Wal-Mart Stores,  Inc.', 45.45, 0.73, 1.63, '9/1 12:00am',  'Retail'],
    ['Walt Disney Company (The) (Holding Company)', 29.89, 0.24, 0.81, '9/1 12:00am',  'Services']
];
ตัวอย่างใน ext จะ define เป็น Ext.grid.dummyData ซึ่งได้ผลลัพท์เหมือนกัน

สร้าง arrayReader* ไม่ค่อยเข้าใจเหมือนกันว่ามันคืออะไร
    var arrayReader = new Ext.data.ArrayReader({}, [
       {name: 'company'},
       {name: 'price', type: 'float'},
       {name: 'change', type: 'float'},
       {name: 'pctChange', type: 'float'},
       {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'},
       {name: 'industry'},
       {name: 'desc'}
    ]);

ทีนี้ก็สร้าง Grid
    ซึ่งจำเป็นจะต้อง config : store หรือ ds(dataStore*), cm(ColumnModel*)
    var grid2 = new Ext.grid.GridPanel({
            store: new Ext.data.Store({
                reader: arrayReader,
                data: dummyData
            }),
            cm: new Ext.grid.ColumnModel([
                {id:'company', header: "Company", width: 200, sortable: true, dataIndex: 'company'},
                {header: "Price", width: 120, sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
                {header: "Change", width: 120, sortable: true, dataIndex: 'change'},
                {header: "% Change", width: 120, sortable: true, dataIndex: 'pctChange'},
                {header: "Last Updated", width: 135, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
            ]),
    width: 750,
    height: 300,   
    frame: true,
    title: 'Framed with Checkbox Selection and Horizontal Scrolling',
    iconCls: 'icon-grid', // เรียก css เพื่อใช้ในการแสดง icon
    renderTo: 'table-data' // สร้างใน element id=table-data
    });

-------
Ext.data.ArrayReader*
Data reader class to create an Array of Ext.data.Record objects from an Array. Each element of that Array represents a row of data fields. The fields are pulled into a Record object using as a subscript, the mapping property of the field definition if it exists, or the field's ordinal position in the definition.
-------
Ext.data.Store*
The Store class encapsulates a client side cache of Ext.data.Record objects which provide input data for widgets such as the Ext.grid.Grid, or the Ext.form.ComboBox.
A Store object uses an implementation of Ext.data.DataProxy to access a data object unless you call loadData() directly and pass in your data. The Store object has no knowledge of the format of the data returned by the Proxy.
A Store object uses its configured implementation of Ext.data.DataReader to create Ext.data.Record instances from the data object. These records are cached and made available through accessor functions.
-------
Ext.grid.ColumnModel*
This is the default implementation of a ColumnModel used by the Grid. This class is initialized with an Array of column config objects.
An individual column's config object defines the header string, the Ext.data.Record field the column draws its data from, an otional rendering function to provide customized data formatting, and the ability to apply a CSS class to all cells in a column through its id config option.

ปล. พื้นที่ของ textarea แม่งเล็กมากน่าจะปรับได้แบบ drupal