Просмотр DBF файлов онлайн на ExtJS. Часть 2. Клиент

Начал писать продолжение статьи и с ужасом понял, что я всё забыл 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. в следующей части будут полные исходники

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *