Учебник: Grid PHP SQL Часть 3

Создание в Ext таблицы (Grid)

Отлично... Время отобразить наши результаты в прекрасной ext таблице... До этого ознакомимся с двумя вещами DataStores и ColumnModels.
Давайте начнем писать на файл mainscript.js :

var PresidentsDataStore;         // это будет наш datastore
var PresidentsColumnModel;       // это будет columnmodel
var PresidentListingEditorGrid;
var PresidentListingWindow;

Ext.onReady(function(){
  Ext.QuickTips.init();

DataStores
DataStore это массивы в которых хранятся данные (как вы уже наверное и сами догадались). Их назначение в том, чтобы получать данные из разных типов источников - от статических XML массивов до... динамических JSON источников!! Таблица (Grid) должна быть связана с DataStore. Если вы хотите изменить содержимое таблицы, вам в общем случае нужно изменить содержимое DataStore, а затем вызвать метод refresh().
Нам нужен DataStore которое будет подключяться к нашему файлу database.php, посылать задачу 'LISTING' и затем считывать результаты. Мы затем дадим соответствующие имена, которые сохранены в массие. Вот как мы построим простой DataStore:

  PresidentsDataStore = new Ext.data.Store({
      id: 'PresidentsDataStore',
      proxy: new Ext.data.HttpProxy({
                url: 'database.php',      // File to connect to
                method: 'POST'
            }),
            baseParams:{task: "LISTING"}, // this parameter asks for listing
      reader: new Ext.data.JsonReader({   // we tell the datastore where to get his data from
        root: 'results',
        totalProperty: 'total',
        id: 'id'
      },[ 
        {name: 'IDpresident', type: 'int', mapping: 'IDpresident'},
        {name: 'FirstName', type: 'string', mapping: 'firstname'},
        {name: 'LastName', type: 'string', mapping: 'lastname'},
        {name: 'IDparty', type: 'int', mapping: 'IDparty'},
        {name: 'PartyName', type: 'string', mapping: 'name'},
        {name: 'TookOffice', type: 'date', mapping: 'tookoffice'},
        {name: 'LeftOffice', type: 'date', mapping: 'leftoffice'},
        {name: 'Income', type: 'float', mapping: 'income'}
      ]),
      sortInfo:{field: 'IDpresident', direction: "ASC"}
    });

Ок, не так уж и сложно?

ColumnModels
Теперь нам нужно определить ColumnModel для нашей таблицы. Проще говоря, модель колонок указывает Ext то, как мы опеределили колонки таблицы. Будем мы отображать числа? Строки? Хотим ли мы сделать их редактируемыми? По факту, ColumnModel может делать гораздо больше чем мы обсудим в учебнике.

Теперь, мы просто отобразим основные колонки, как вы видите в следующем коде:

  PresidentsColumnModel = new Ext.grid.ColumnModel(
    [{
        header: '#',
        readOnly: true,
        dataIndex: 'IDpresident', // this is where the mapped name is important!
        width: 50,
        hidden: false
      },{
        header: 'First Name',
        dataIndex: 'FirstName',
        width: 150,
        editor: new Ext.form.TextField({  // rules about editing
            allowBlank: false,
            maxLength: 20,
            maskRe: /([a-zA-Z0-9\s]+)$/   // alphanumeric + spaces allowed
          })
      },{
        header: 'Last Name',
        dataIndex: 'LastName',
        width: 150,
        editor: new Ext.form.TextField({
          allowBlank: false,
          maxLength: 20,
          maskRe: /([a-zA-Z0-9\s]+)$/
          })
      },{
        header: 'ID party',
        readOnly: true,
        dataIndex: 'IDparty',
        width: 50,
        hidden: true                      // we don't necessarily want to see this...
      },{
        header: 'Party',
        dataIndex: 'PartyName',
        width: 150,
        readOnly: true
      },{
        header: "Income",
        dataIndex: 'Income',
        width: 150,
        renderer: function(v){ return '$ ' + v; },   // we tell Ext how to display the number
        editor: new Ext.form.NumberField({
          allowBlank: false,
          decimalSeparator : ',',
          allowDecimals: true,
          allowNegative: false,
          blankText: '0',
          maxLength: 11
          })
      }]
    );
    PresidentsColumnModel.defaultSortable= true;

Часть, которую вы очень долго ждали.
Ок! Теперь, когда мы установили источник данных для чтения и настроили способ для отображения данных в таблице мы готовы создать саму таблицу!! Следующая часть кода - просто как кусок пирожного. Убедитесь, что не забыли вызвать load() в DataStore (load() запросит наш файл database.php):

  PresidentListingEditorGrid =  new Ext.grid.EditorGridPanel({
      id: 'PresidentListingEditorGrid',
      store: PresidentsDataStore,     // the datastore is defined here
      cm: PresidentsColumnModel,      // the columnmodel is defined here
      enableColLock:false,
      clicksToEdit:1,
      selModel: new Ext.grid.RowSelectionModel({singleSelect:false})
    });
    
  PresidentListingWindow = new Ext.Window({
      id: 'PresidentListingWindow',
      title: 'The Presidents of the USA',
      closable:true,
      width:700,
      height:350,
      plain:true,
      layout: 'fit',
      items: PresidentListingEditorGrid  // We'll just put the grid in for now...
    });
  
  PresidentsDataStore.load();      // Load the data
  PresidentListingWindow.show();   // Display our window
  
});

Что надо запомнить из этой части:
* Таблица должна иметь как datastore так и columnmodel для корректного отображения данных
* datastore необходимо перезагружать если в базе данных были сделаны изменения.

Материалы этой части можно скачать здесь

Источник: http://extjs.com/learn/Tutorial:Grid_PHP_SQL_Part3