Начал писать продолжение статьи и с ужасом понял, что я всё забыл 8).
Приходится всё по новой вспоминать и понимать.
Заранее прошу не судить строго, я с javascript дела раньше не имел, в основном пишу на C#. Код родился в процессе изучения ExtJS и javascript.
Создаем пустую модель
Model = Ext.define('Table', {
extend : 'Ext.data.Model'
});
Модель (Ext.data.Model) необходима для описания формата полей, так сказать структуры нашей таблицы. В нашем случае она пустая, вся структура будет задаваться динамически, при загрузке файлов dbf. Нами только присвоено имя для модели “Table”
Создаем Store (хранилище данных). Store отвечает за извлечение и сохранение данных, по формату привязанной к нему модели.
store = Ext.create('Ext.data.Store', {
model : Model, //наша модель
pageSize : 20,
proxy : {
type : 'ajax',
url : 'get_data.php',
extraParams : {
filename : filename_
},
reader : {
type : 'json',
root : 'records',
totalProperty : 'total'
}
}
});
Прогнозируем на будущее, что загружаемые таблицы будут иметь слишком много строк, чтобы показать все на одной странице. Grid Panel поддерживает метод подгрузки(дозагрузки) с помощью панели инструментов, которая загружает данные постранично с помощью спец кнопок предыдущая/следующая. Эта возможность называется Paging. Для настройки Paging необходимо у Store прописать pageSize и настроить reader c totalProperty.
Разберем поподробней:
pageSize : 20 — размер страницы, именно по 20 записей будет выдавать наш store
proxy определяет откуда Store будет получать данные:
proxy : {
type : 'ajax',
url : 'get_data.php',
extraParams : {
filename : filename_
}
В нашем случае это ajax запрос с адресом ‘get_data.php’, c указанием дополнительного параметра: filename – имя текущего фала. Вот как выглядит запрос в режиме Инструменты разработчика в Google Chrome:
В нашем случае наш сервер возвращает JSON, поэтому мы создали Json reader чтобы прочитать ответ:
reader : {
type : 'json',
root : 'records',
totalProperty : 'total'
} totalProperty указывает reader-у, где можно получить в ответ общее число строк в JSON.
Переходим к созданию Grid:
grid = Ext.create('Ext.grid.Panel', {
store : store,
invalidateScrollerOnRefresh : false,
disableSelection : true, //Запретим выделять
forceFit : false,
dockedItems : [{
xtype : 'pagingtoolbar', //Компонент Paging
store : store, //наш Store
dock : 'bottom', //Располагаться будет внизу
displayMsg : 'Показано {0} - {1} of {2}', //Формат отображения
emptyMsg : 'Нечего отображать',
displayInfo : true, //Показывать ил информацию
listeners:{
beforechange : function() {
store.getProxy().extraParams.filename = filename_;
}
}
}],
columns : [{}], //пустое описание колонок
height : 210 //высота
});
Указали откуда Grid будет брать данные – из нашего store. Пристыковываем компонент Paging к нашему гриду. Дополнительно обрабатываем событие beforechange у paging:
listeners:{
beforechange : function() {
store.getProxy().extraParams.filename = filename_;
}
Этот «костыль» сделан для того чтобы в запросе от paging передавалось имя файла.
В следующий раз создадим наше главное окно и загрузим данные.
P.S. Мало времени, поэтому разбил на маленькие статьи (
P.S.S. в следующей части будут полные исходники