Введение в функции таблиц в extjs
Таблица определяется классом ext.grid.gridpanel, унаследованной от ext.panel, а xtype is сетка
Информация о столбце таблицы определяется ext.grid.columnmodel
Хранение данных таблицы определяется ext.data.store. Согласно различным аналитическим данным, хранилище данных можно разделить на следующие типы:
Jsonstore, Simplestore, Groupingstore…
Основной процесс написания таблицы:
1. Создать модель столбца таблицы
var cm = new ext.grid.columnmodel ({{header: 'role', dataindex: 'role'}, {heder: 'level', dataindex: 'grade'}, {заголовок: 'create date', dataindex: 'createdate', type: 'date', renderer: ext. данные});2. Создайте массив данных
VAR DATA = [['Soldier', '7', '2011-07-2412: 34: 56'], ['General', '10', '2011-07-2412: 34: 56'],];
3. Создайте хранилище объекта хранилища данных, которое содержит две части: прокси, способ получить данные; Читатель, путь к анализу данных
Картирование ArrayReader используется для установки порядка столбцов
var store = new ext.data.store ({proxy: new ext.data.memoryproxy (data), reader: new ext.data.arrayreader ({}, [{name: 'Роль', картирование: 1}, {name: 'grade', mapping: 0} {name: 'constretate', mapp DateFormat: 'YM-DH: I: S'} // Создать столбец даты и формат отображения])}); store.load ();4. Создайте GridPanel, собирайте ColumnModel и магазин
var grid = new Ext.Grid.GridPanel ({renderto: 'Grid', Store: Store, CM: CM});Кроме того, вы можете использовать ScriptTagProxy для получения удаленных данных, как показано ниже
var store = new Ext.Data.Store ({proxy: new Ext.Data.ScriptTagProxy ({url: 'http: // ...'}), читатель: new ext.data.arrayreader ({}, [{name: 'Роль', MAPPIN «Роль», направление: «ASC»} // Установить последовательность сортировки по умолчанию, ASC/DESC});Общие свойства таблиц
var grid = new Ext.Grid.gridPanel ({ensableColumnMove: false, // столбцы перетаскивания запрещены для включения в EnabledColumnResize: false, // Отключить к изменению ширины колонны Стрипейки: true, // zebra receming эффект эффекта нагрузки: true, // mask и оперативная функция при чтении данных: 'grid' grid 'grid' grid 'grid' grid 'grid' grid 'grid' grid 'grid' grid 'grid' grid 'grid' grid 'grid' grid 'grid' grid 'grid') var cm = new ext.grid.columnmodel ({{header: 'role', dataindex: 'Роль', ширина: 90, сортировка: true}, // ширина ширины столбца, по умолчанию - 100px, сортируют функцию сортировки {id: 'Grade', Header: ', DatainDex:' Grade ', width: width: width: width: width: width: width: width: width: width: width: width: width: width: width: width: width: width: width: width: width: width: width: width: width: width: width: Ext.grid.gridpanel ({renderto: 'Grid', Store: Store, cm: cm viewconfig: {// Пусть каждый столбец автоматически заполняет форму ForceFit: true} AutoExpandColumn: 'Grade' // Автоматически расширять столбец, идентификатор столбца определяется в ColumnModel});Рендеринг таблиц и установить специальные стили для таблиц
Просто добавьте атрибут рендеринга в CM и добавьте пользовательскую функцию, чтобы отобразить стиль параметров, передаваемых (автоматически передаваемым EXT), то есть собрать соответствующие события ответа HTML, CSS или JS до возврата значения.
function rendersex (value) {if (value == 'male') {return "<span style = 'color: blue;'> male </span> <img src = 'images/icon_male.png'/>"; } else {return "<span style = 'color: red;'> ken </span> <img src = 'image/icon_female.png'/>"; }} var cm = new ext.grid.columnmodel ([{header: 'id', dataindex: 'id'}, {heder: 'name', dataindex: 'name'}, {healer: 'sex', dataindex: 'sex', renderer: rendersex},]); ['2', 'kate', 'nember']]]; var store = new ext.data.store ({proxy: new ext.data.memoryproxy (data), reader: new ext.data.arrayreader ({}, [{name: 'id'}, {name: 'name'}, {name: '}; = new Ext.Grid.GridPanel ({AutoHeight: True, renderto: 'Grid', Store: Store, CM: CM});Автоматически отображать номера строк, просто создайте Rownumberer при создании CM
var cm = new ext.grid.columnmodel ([new ext.grid.rownumberer (), // Показать номера строк {heder: 'id', dataindex: 'id'}, {heder: 'name', dataindex: 'name'}, {header: 'sex', dataindex: 'sex', renderer: renders},];Удалить столбцы
Store.remove (store.getat (i));
Обновить стол
grid.view.refresh ();
Добавить флажок для таблицы
Необходимо использовать флажок SelectionModel
SelectionModel SM должен быть помещен в CM и таблицу при использовании
var sm = new ext.grid.checkboxselectionmodel (); var cm = new ext.grid.columnmodel ([new ext.grid.rownumberer (), sm, {Header: 'number', dataindex: 'id'}, {Header: 'name', dataindex: 'name'}]; ['2', 'name2']]]; var store = new ext.data.store ({proxy: new ext.data.memoryproxy (data), reader: new ext.data.arrayreader ({}, [{name: 'id'}, {name: 'name'}]); Ext.grid.gridpanel ({AutoHeight: True, renderto: 'Grid', Store: Store, CM: CM, SM: SM});Только одна строка выбирается через настройку RoweLectionModel:
var grid = new Ext.Grid.GridPanel ({AutoHeight: True, renderto: 'Grid', Store: Store, CM: CM, SM: New Ext.Grid.RowsEletectionModel ({SingleSelect: true})});Используйте модель SELECT, чтобы получить данные
grid.on ('click', function () {var selections = grid.getSelectionModel (). getSelection (); for (var i = 0; i <selections.length; i ++) {var record = selections [i]; ext.msg.alert (record.get ("id"));}});Взгляд таблицы
Из идеи MVC управление таблицами:
* Ext.Data.Store можно рассматривать как модель
* Ext.grid.gridpanel можно рассматривать как контроллер
* Ext.grid.gridview можно просматривать как представление
* Как правило, GridView автоматически генерируется GridPanel. Если вы хотите установить свойства Gridview, вы можете получить экземпляр просмотра через getView () ext.grid.gridpanel.
Ext.get ('button1'). On ('click', function () {grid.getView (). Scrolltotop (); grid.getView (). Focuscell (0, 0); var cell = grid.getView (). GetCell (0, 0); cell.Style.backgroundcolor = 'red';});Используйте GridPanel ViewConfig, чтобы установить параметры инициализации GridView при создании таблицы
var grid = new Ext.grid.gridPanel ({height: 100, ширина: 400, renderto: 'Grid', Store: new Ext.Data.Store ({AutoLoad: True, Proxy: New Ext.Data.MemoryProxy (Data), Reader: New Ext.Data.ArrayRead ({}, Meta), Velectcom: MetaSconcecon:},}), MetaSfoNcecon: MetaSfconcecon: wiefer: metaSfoNcecon. {columnstext: 'Show Column', // Установите раскрывающееся меню «Спроверка Scolloffset: 30», // Установите зарезервированную ширину прокрутки на правом Sortasctext: 'asctext', // Установить раскрывающееся меню Текст.Добавить панель инструментов подкупа в таблицу
* Вы можете использовать свойство BBAR GridPanel и создать объект подключения к петге ext.pagingtoolbar
* Обратите внимание, что если настройка панели инструментов Paging, store.load () должен быть выполнен после построения таблицы.
var grid = new Ext.grid.gridPanel ({renderto: 'Grid', AutoHeight: True, Store: Store, CM: CM, BBAR: New Ext.PagingToolbar ({PageSize: 10, // 10 элементы данных отображаются в соответствии с Stage Store: Shore, DisplayInfo: true, // Показать данные Data Data: {2} ', emptyMsg: "Нет записи" // Информация, отображаемая, когда нет данных})}); store.load ();Получить данные о странике из фонового сценария
Используйте httpproxy для передачи запроса, получения данных JSON сервера и передайте его JSonreader для анализа
var cm = new ext.grid.columnmodel ([{header: 'number', dataindex: 'id'}, {heder: 'name', dataindex: 'name'}]); var store = new ext.data.store ({proxy: new ext.data.httpproxy ({url: 'page. Ext.data.jsonreader ({totalProperty: 'totalProperty', root: 'root'}, [{name: 'id'}, {name: 'name'}])}); var grid = new Ext.grid.gridpanel ({renderto: 'Grid', Autoheight: True: True: True: True Shore Shore Shore Shore Shore Shore Shore Shore Shore Shore, так что вы высоте. Store, CM: CM, BBAR: New Ext.PagingToolbar ({PageSize: 10, Store: Store, DisplayInfo: True, DisplayMsg: «Покажите {0} to {1} Records/total {2} ', umptmSg:" no chorck "})}); store.load ({params: {start: 0, limit: 10}});Если вы хотите, чтобы панель инструментов странификации отображалась в верхней части таблицы, вы можете добавить панель инструментов, используя настройки свойства GridPanel TBAR.
Пусть ExtJs наносят на первую очередь возвращенные данные
* Вам нужно представить файл PagingmemoryProxy.js в каталоге примеров/локализации в странице
* Используйте PagingMemoryProxy для настройки прокси
var store = new ext.data.store ({proxy: new ext.data.pagingmemoryproxy (data), reader: new ext.data.arrayreader ({}, [{name: 'id'}, {name: 'name'}, {name: 'descn'}])}); // call Call store.load ({params: {start: 0, limit: 3}});Использование EditorGrid с помощью управления редактируемым таблицей
Шаги, чтобы сделать простой редактор:
1. Определите столбец ColumnModel и добавьте атрибут редактора в него
var cm = new ext.grid.columnmodel ([{header: 'number', dataindex: 'id', editor: new ext.grid.grideditor (new ext.form.textfield ({Allowblank: false // Не вход в Textfield не разрешено})}, {header: 'name', dataItainDex: 'nelect ext ext.grid. Ext.form.textfield ({AllowBlank: false})}]);2. Подготовьте массив
var data = [['1', 'jason'], ['2', 'jay']];
3. Create Ext.Data.Store, установите прокси памяти и установите ArrayReader на массивы разбора
var store = new ext.data.store ({proxy: new ext.data.memoryproxy (data), reader: new ext.data.arrayreader ({}, [{name: 'id'}, {name: 'name'}])});4. Загрузите данные и создайте EditorGridPanel
store.load (); var grid = new ext.grid.editorgridpanel ({AutoHeight: True, renderto: 'Grid', Store: Store, CM: CM});Добавить и удалить данные для редактируемых таблиц
1. Создайте набор записей, используя метод создания записи myrecord. Myrecord эквивалентна классу
var myrecord = ext.data.record.create ([{name: 'id', type: 'string'}, {name: 'name', type: 'string'}]); store.load ();2. Создайте панель EditorGridPanel и создайте ext.Toolbar в свойстве TBAR
var grid = new Ext.Grid.editorGridPanel ({AutoHeight: True, renderto: 'Grid', Store: Store, CM: CM, TBAR: new Ext.Toolbar (['-', {//- MEND MENUTATOR TEXT: 'Добавить ряд', Handler: function () {var p = var p = var p = var p = var p = var p = var p = var p = var p = var p = new myrecord: ','): '). Grid.stopediting (); Удалить? '-'])});Сохранить модифицированные результаты для редактируемых таблиц
На основании примера выше, добавьте кнопку Сохранить
Текст: 'save', handler: function () {var m = store.modified.slice (0); // Получить модифицированные данные в хранилище для (var i = 0; i <m.length; i ++) {// проверить, является ли информация о таблице правильной и содержит ли она пространства var record = m [i]; var fields = record.fields.keys; for (var j = 0; j <fields.length; j ++) {var name = fields [j]; var value = record.data [name]; var colindex = cm.findcolumnidex (имя); var rowindex = store.indexofid (record.id); var editor = cm.getCelleditor (colindex) .field; if (! editor.validatevalue (value)) {ext.msg.alert ('tip', 'пожалуйста, проверьте ли введенные данные правильными!', function () {grid.startediting (rowindex, colindex);}); возвращаться; }}} var jsonarray = []; Ext.each (m, function (item) {jsonarray.push (item.data); // Поместить модифицированные данные в jsonarray}); Ext.lib.ajax.request (// Использование запроса ajax для отправки на фоне «post», 'save_data.jsp', {success: function (response) {// return ext.msg.alert ('information', response.responsetext, function () {store.reload ();};}, wails. «Сервер сохранил ошибку данных!»);Кроме того, магазин может установить собственность PrunemodifiedRecords: True. Таким образом, магазин автоматически очистит модифицированный тег каждый раз, когда он удаляет или загружает операции, что может избежать явления для предоставления всей модифицированной информации в следующий раз, когда она будет представлена.
Ограничьте тип данных ввода таблицы
Номер поля
{Header: 'id', dataIndex: 'id', редактор: new ext.grid.grideditor (new ext.form.numberfield ({// Ограничения номеров, которые могут быть введены только числа Allowblank: false, allownegative: false, // не может войти в минус.Combobox
var combodata = [['0', 'java'], ['1', 'android']]; {heder: 'combobox', dataindex: 'combo', редактор: new ext.grid.gridytor (new ext.form.combobox ({store: new ext.data.simplestor EmptyText: «Пожалуйста, выберите», режим: «локальный», триггерность: «все», valuefield: «value», displayfield: 'text', readonly: true})), renderer: function (value) {return combodata [value] [1]; }}Датфилд
{Header: 'Date', DataInDex: 'Date', редактор: new Ext.Grid.GrideTitor (new Ext.Form.Datefield ({Format: 'YM-D', MinValue: '2011-07-24', DisabledDays: [0, 6], DisabledDaystex value.format ("ymd"); }}Использование PropertyGrid
Это более умный компонент расширенной формы, разработанный на основе EditorGrid
var grid = new Ext.Grid.PropertyGrid ({title: 'PropertyGrid', AutoHeight: True, Width: 400, Renderto: «Grid ', ViewConfig: {ForceFit: True}, источник: {" String ":" String "," Date ": новая дата (date.parse ('07/24/2011')," boolean ":. }});Как отключить функцию редактирования PropertyGrid
grid.on ('передедит', function (e) {e.cancel = true; return false;});Получите значение в соответствии с названием таблицы
grid.store.getbyid ('Jason'). get (value);Внедрить вложенные таблицы в ExtJs
Давайте сначала посмотрим на эффект:
Код заключается в следующем:
<! Doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> html> content = "text/html; charset = utf-8"/> <title> test </title> <script type = "text/javascript"> </script> <link rel = "stylesheet" type = "text/css" hRef = "lib/extjs/2_2/resources/css/ext-all.css"/> <script/extJs/2_2/csss/ext-all.css "/> <script =" javascript/javscript "/2_2/csss/ext-all.css"/> " src = "lib/extjs/2_2/adapter/ext/ext-base.js"> </script> <script type = "text/javascript" src = "lib/extjs/2_2/ext-debug.js"> </script> <script type = "text/javascript" src = "lib/extjs/2_2/source/locale/ext-lang-zh_cn.js"> </script> <script type = "text/javascript" src = "lib/extjs/plus/rowexpander.js"> </script> <script type = "javascript"> ext.on.nready (function () [«Lugreen», «Male», 26, [[«Math», 100], [«китайский», 150]]], [«lisi», «мужчина», 25, [[«математика», 100], [«китайский», 150]]], [«Чжангсан», «Мужчина», 27, [математика », 120], [китайский язык», 158] Ext.data.simplestore ({fields: ["name", "sex", "age", "grade"], data: testdata}); var expander = new ext.grid.rowexpander ({tpl: new ext.xtemplate ('<div>', ',' </div>) }); expander.on ("expland", function (expander, r, body, rowindex) {// Найти windows windo.testele = body; //alert(body.id); if (ext.domquery.select ("div.x-panel-bwrap", body) .length == 0) {// alert ("a"); Ext.data.simplestore ({Fields: ["class", "degrain"], data: data}); «Разделение», ширина: 130, Скрытая: ложь, сортируемое: false, что -то, решаемое: true}]); Autowidth: True, AutoHeight: True}); «Пол», DataInDex: «Пол», ширина: 130, Hideable: False, сортируется: false, рецибичен: True}]); плагины: [expender]});}); </script> <style type = "text/css">#div2 h2 {font-weight: 200; Font-Size: 12px;}. C1 H2 {font-weight: 200;} </style> </head> <body> <div id = "grid1"> </div> <div id = "grid2"> </div> </body> </html>Используемый «rowexpander.js» построен в официальном примере ExtJS.
При внедрении этой вложенной таблицы есть два совета:
1. Источник данных, предоставленные для хранилища данных в внешней таблице, представляет данные в области подробной информации в виде вложенного массива, как показано в жирном сайте ниже.
var TestData = [["Lugreen", "Male", 26, [["Math", 100], ["китайский", 150]]], ["lisi", "мужчина", 25, [«Математика», 100], [«Китайский», 150]]], [«Чжангсан», «Мужской», 27, [«Математика», 120], [китайский языки «158»]];
Используйте атрибут JSON объекта Record в массиве, чтобы получить данные подробно
VAR DATA = R.JSON [3];
2. Добавьте вложенные таблицы в событие расширения Rowexpander.