Перевод статьи http://www.sencha.com/learn/the-grid-component/
Продолжение.
Модель выделения
В основном Grid используется для отображения данных, но бывает необходимость редактирования, обновления данных. Grid имеет несколько моделей выделения данных. Два основных типа это: 1. Выделение всей строки (всех ячеек); 2. Выделение ячейки в строке.
Ext.create('Ext.grid.Panel', { selType: 'cellmodel', store: ... });
При выделении только ячеек (Cell Selection) перемещение с клавиатуры будет происходить от ячейки к ячейке, а не от строки к строке. Cell selection используется в основном для редактирования прямо в ячейке.
Редактирование
Есть две возможности редактирования: редактирование строки и редактирование в ячейке
Редактирование ячеек
Редактирование в ячейке позволяет изменять данные в Grid Panel только в одной ячейке единовременно. Для реализации редактирования ячейки необходимо настроить редактор для всех столбцов в Grid Panel, которые должны быть доступны для редактирования. Это делается с помощью редактора конфигурации.Проще всего указать xtype поля, которое мы хотим редактировать:
Ext.create('Ext.grid.Panel', { ... columns: [ { text: 'Email Address', dataIndex: 'email', editor: 'textfield' } ] });
Если необходимо иметь больше контроля над вводимыми данными, то можно указать дополнительные параметры конфигурации редактирования (editor). Например ниже, для ячейка не принимает пустые значения, необходимо, что либо ввести:
columns: [ { text: 'Birth Date', dataIndex: 'birthDate', editor: 'datefield' } ]
По умолчанию все столбы в GridPanel только для чтения и не будут доступны для редактирования.
Теперь когда мы определили редактируемые колонки и параметры редактирования, мы должны определить модель выделения (Model Selection). Давайте используем выделение ячеек (Cell selection)
Ext.create('Ext.grid.Panel', { ... selType: 'cellmodel' });
Наконец, чтобы разрешить редактирование нам нужно настроить объявить использование плагина.
Ext.create('Ext.grid.Panel', { ... selType: 'cellmodel', plugins: [ Ext.create('Ext.grid.plugin.CellEditing', { clicksToEdit: 1 }) ] });
Редактирование строки
Редактирование строки позволяет редактировать всю строку за раз. Редактирование строки настраивается точно также как и редактирование ячейки, только необходимо поменять используемый плагин на Ext.grid.plugin.RowEditing и установить selType в rowModel.
Paging
Иногда набор данных слишком велик, чтобы показать все на одной странице. Grid Panel поддерживает два различных метода подгрузки(дозагрузки) с помощью панели инструментов, которая загружает данные постранично с помощью спец кнопок предыдущая / следующая.
Сначала необходимо настроить Store для поддержки Paging. В приведенном ниже примере мы добавляем PageSize в Store, и настраиваем reader с totalProperty:
Ext.create('Ext.data.Store', { model: 'User', autoLoad: true, pageSize: 4, proxy: { type: 'ajax', url : 'data/users.json', reader: { type: 'json', root: 'users', totalProperty: 'total' } } }); });
TotalProperty указывает reader-у, где можно получить в ответ общее число результато в JSON. Этот Store настроен на получение данных в JSON, который выглядит примерно так:
{ "success": true, "total": 12, "users": [ { "name": "Lisa", "email": "lisa@simpsons.com", "phone": "555-111-1224" }, { "name": "Bart", "email": "bart@simpsons.com", "phone": "555-222-1234" }, { "name": "Homer", "email": "home@simpsons.com", "phone": "555-222-1244" }, { "name": "Marge", "email": "marge@simpsons.com", "phone": "555-222-1254" } ] }
Панель инструментов Paging
Теперь, когда мы настроили наш Store для поддержки дозагрузки(подкачки), все, что осталось, это настроить панель инструментов Paging. Вы можете поместить эту панель в любом месте вашего приложения, но обычно он пристыкован к Grid Panel:
Ext.create('Ext.grid.Panel', { store: userStore, columns: ..., dockedItems: [{ xtype: 'pagingtoolbar', store: userStore, // same store GridPanel is using dock: 'bottom', displayInfo: true }] });
Paging Scroller
Grid поддерживает бесконечную прокрутку в качестве альтернативы использования панели инструментов Paging. Ваши пользователи могут прокручивать тысячи записей без снижения производительности рендеринга всех записей на экране одновременно.
Ext.create('Ext.grid.Panel', { // Use a PagingGridScroller (this is interchangeable with a PagingToolbar) verticalScrollerType: 'paginggridscroller', // do not reset the scrollbar when the view refreshs invalidateScrollerOnRefresh: false, // infinite scrolling does not support selection disableSelection: true, // ... });
Добрый день, помогите, пожалуйста, у меня выводится табличка с подгрузкой json и нижней панелькой для перехода по страничкам таблицы. Панелька при нажатии на стрелки меняется, а сам переход в таблице не происходит, как были первые 6 записей и прокрутка, так и остается. Какой необходимо добавить параметр, чтобы табличка листалась на следующие например 10 записей, pageSize задан, Jason с total, как задать limit и page как в jquery
С уважением, Майя
Я давно не занимался с ExtJs позабывал уже всё. Единственный вариант, если вышлите мне исходник на gerztrue_mail.ru, а я уже попробую в нем поразбираться. Или как вариант посмотрите на реализацию онлайн просмотра dbf, там тоже пагинация http://jobtools.ru/2012/12/prosmotr-dbf-fajlov-onlajn-na-extjs-chast-3-kli
Спасибо большое, вы мне очень помогли, я нашла свою ошибку!