1 самая простая сетка
Панель сетки является одной из основных частей EXTJ, и данные могут отображаться, отсортировать, сгруппировать и отредактировать через панель сетки. Модель и хранилище являются ядром данных обработки сетки, и каждая панель сетки должна настроить модель и хранить. Чтобы создать сетку, вы должны сначала определить модель. Модель включает в себя все поля, которые необходимо отобразить панель сетки, что эквивалентно сбору полей таблицы в базе данных. Магазин можно рассматривать как сбору сведения данных или набор экземпляров моделей. Каждый магазин содержит один или несколько экземпляров модели, а данные, отображаемые панелью сетки, хранятся в магазине. Панель сетки получает данные через хранилище и отображает его, в то время как хранилище считывает и сохраняет данные через прокси.
Ниже приведена панель сетки для отображения основной информации пользователя, включая имя пользователя, электронную почту, номер мобильного телефона (имя, электронная почта, телефон) и сначала создайте пользовательскую модель (пользовательская модель).
Ext.define ('user', {extend: 'ext.data.model', fields: ['name', 'email', 'phone']});Затем создайте магазин, который является коллекцией пользователей, включая несколько экземпляров пользователей.
var userstore = ext.create ('ext.data.store', {model: «Пользователь», // Пользовательская модель. {name: «Гомер», электронная почта: '[email protected]', телефон: '555-222-1244'}, {name: 'marge', email: '[email protected]', телефон: '555-222-1254'}]});После создания как модели, так и магазина вы можете создать панель сетки.
Ext.create ('ext.grid.panel', {renderto: ext.getbody (), store: userstore, // scind the store width: 400, высота: 200, заголовок: «Пользователи приложений», столбцы: [{text: «Имя», ширина: 100, сортируем: ложный, скрытый: false, dataindex: «Имя». Model}, {Text: 'Адрес электронной почты', ширина: 150, dataIndex: 'email', hidden: true}, {text: 'номер телефона', flex: 1, datainDex: 'phone'}]});Последняя панель сетки пользователя показана на рисунке.
2 Группа данных панели сетки (группировка)
Пока свойство Groupfield установлено в магазине, данные, отображаемые панелью сетки, могут быть сгруппированы. Предположим, что у компании есть много сотрудников и необходимо группировать сотрудников компании по департаменту в сетке. Во -первых, установите недвижимость Groupfield в отдел в магазине.
Ext.create ('ext.data.store', {model: 'employee', data: ..., groupfield: 'Департамент' // Установить данные, сгруппированные по департаменту});Затем добавьте функцию группировки на панель сетки для достижения эффекта отображения группировки.
Ext.create ('ext.grid.panel', {... функции: [{ftype: 'Grouping'}]});Эффект отображения группы показан на рисунке ниже. Нажмите здесь, чтобы просмотреть официальный код отображения группы.
3 Сетчатая панельная личная дисплей
Когда есть больше данных и больше страниц для отображения, данные должны быть отображены. Панель сетки может реализовать отображение страниц двумя методами: панель инструментов подрыва и прокручиваемость подкисления. Панель инструментов Paging имеет предыдущую страницу/кнопки следующей страницы. Прокрутка Paging Scroller Динамически загружает данные, когда панель сетки прокручивается внизу.
Чтобы реализовать дисплей на странице, вы должны сначала установить магазин для поддержки страниц. Установите PageSize в магазине. Размеры по умолчанию составляет 25. Установите общее количество данных в общей проперте читателя, а также плагины Paging Plugin в соответствии с PageSize и TotalProperty. Следующий код устанавливается на 4, и общая пропертиза получен из возвращенных данных JSON.
Ext.create ('ext.data.store', {model: «Пользователь», AutoLoad: True, PageSize: 4, // Установить количество данных, отображаемых на Page Proxy: {Type: 'Ajax', URL: 'Data/users.json', Reader: {type: 'json', root: 'users', // укажите свойство JSON, чтобы получить данные, а не получить. Связанный атрибут JSON: 'Total' // Общее количество данных}}});Предположим, что формат данных JSON выглядит следующим образом
{«Успех»: True, «Total»: 12, «пользователи»: [{«name»: «lisa», «электронная почта»: «[email protected]», «Телефон»: «555-111-1224»}, {«Имя»: «bart», «электронная почта»: «[email protected]», «телефон»: «555-22221211», «wome», «phone»: «name», «wome», «wome», «wome», «[email protected]»: «55-22222111». "Home", "Email": "[email protected]", "Телефон": "555-222-1244"}, {"name": "marge", "email": "[email protected]", "Телефон": "555-222-1254"}}}}}}}}}}}}}}}}}}}}}}}}}}Пейджинг магазина был настроен. Функция подкидки на панели инструментов подключена на панели сетки.
Ext.create ('ext.grid.panel', {Store: Userstore, Columns: ..., DockedItems: [{xtype: 'Pagingtoolbar', // Добавить магазин панели инструментов: Userstore, // Установите хранилище панели инструментов на то же самое, что и хранилище панели сетки: «Внизу», DISTORE: TRUE});Эффект пейджинга на панели инструментов подкачки показан на рисунке ниже. Нажмите здесь, чтобы просмотреть официальный код функции подключения панели инструментов.
Реализация пейджинг -спирлера относительно проста. Просто установите следующий код на панели сетки. Нажмите здесь, чтобы просмотреть официальный код функции пейджингера.
Ext.create ('ext.grid.panel', {// Использовать плагин с подвижным свинцом VerticalScroller: 'paginggridscroller', // не сбросить прокручивание, когда представление обновляется InvalidatescrolleronResh: false, // Infinite Scolling не поддерживает выборочное выбросы: истин / /... at; at; at; at; at; at; at; at; at; at; at; at);4 панель сетки добавить флажок
Просто установите свойство Selmodel панели Grid на ext.selection.checkboxmodel, нажмите здесь, чтобы просмотреть официальный пример кода.
Ext.create ('ext.grid.panel', {selmodel: ext.create ('ext.selection.checkboxmodel'), // Установить режим выбора панели сетки на флажок Store: Userstore, столбцы: ...});5 Комплексных примеров
var grid = new Ext.Grid.GridPanel ({Store // Источник данных CM //ext.grid.columnModel Columns // Функции такие же, как и ext.grid.columnmodel. Просто есть один с CM Autowidth: True Width Title Gorder: Falselines: true, renderto // Отображение ID tag animcollAps Эффект анимации (по умолчанию верно, когда доступен Class Ext.FX). DisplayInfo: true, // источник документа DisplayInfo: true, // documentationmsg: «Показать записи от {0} до {1}, в общей сложности {2}», emptymsg: «Нет записи»}), tbar: [{text: 'Query', icon: '/trade/delete.gif', cls: 'x-x-text- Handler: function () {win.show ();}}}) // ********************************* • Ext.grid.rownumberer (), {Header: «Id Customer Id», ширина: 50, сортируемый: true, datainDex: «memid '}, {Header:« Имя клиента », ширина: 75, сортировка: true, dataIndex:' memname '}, {Header:' Секрет № ', width: 50, dataindex:', alignable: 'alegable:' true nectable: ', alicable:' trueable: ', alecrable:' trueable: ', alegable:', alegabiab renderer: function (v) {return (v == '1')? DataInDex: 'kd_time'}]); /*********************************************************************** • // var modified = storeDit.modified.slice (0); // ext.each (modified, function (m) {alert (m.data.id); // Данные в M.Data, а ID - имя поля}) // Получить данные сетки var selmodel = grid.getSelectionModel (); Получить режим выбора VAR Record; if (! selmodel.hasselection ()) {ext.msg.alert ('Warning', ', пожалуйста, выберите строку для изменения!'); возвращаться; } selmodel.getSelections (). Length; // количество выбранных строк record = selmodel.getSelected (); // Получить данные выбранных строк(1) Получить данные:
Одиночная линия
id = record.get ('id');или
id = record.data.id;
Несколько строк
Запись [i] .get ('ddd')(2) Удалить данные:
var obj = grid.getSelectionModel (). getSelected (); Store.remove (obj); grid.getView (). refresh ();
(3) запрос
store.baseparams ['memid'] = fb.form.findfield ('memid'). getValue (); store.baseparams ['start'] = 0; store.load ();(4) Добавить ряд:
Ext приносит плагин
Требуется файл rowexpander.js
var expand = new ext.ux.grid.rowexpander ({tpl: new ext.template ('<p> {адрес} </p>')});Добавить расширение в столбцы сетки,
И добавить плагины: развернуть атрибут сетки