Во время процесса проектной практики мы сталкиваемся с требованием, чтобы данные в сетке были сгруппированы в соответствии с определенной областью. Конечно, эта функция доступна в API, и она указана здесь для всех, чтобы найти:
Две вещи, чтобы отметить:
1. При создании магазина вам необходимо установить значение атрибута Groupfield, то есть значение, которое необходимо сгруппировать.
например:
Код JavaScript
Ext.define ('person', {extend: 'ext.data.model', fields: ['name', 'sex']});В этой модели данных нам нужно группировать по полу (пол), поэтому, пожалуйста, смотрите магазин ниже
Код JavaScript
var personstore = ext.create ('ext.data.store', {storeId: «personStore», «Model»: «Человек», Groupfield: «Sex», Data: [{name: 'hongmei li', sex: 'женский «Женский»}, {name: 'lucy', sex: 'nember'}]});Далее нам нужно определить TPL, отображаемый в группе
Код JavaScript
var GroupingFeature = ext.create ('ext.grid.feature.grouping', {groupheadertpl: 'sex: {name} ({row.length} item {[values.row.length> 1?В GridPanel этот код выглядит следующим образом: настроить функции для группировки, определенных выше, определенных выше
Код JavaScript
var grid = ext.create ('ext.grid.panel', {renderto: ext.getbody (), Store: Personstore, ширина: 600, высота: 400, название: «человек», функции: [GroupingFeature], столбцы: [{Text: «Имя», Flex: 1, DataIndex: 'name'}, {{Text: ', Flex: 1, glex', 1, wlex: 1, wlex ', wlex: });Рендеринги следующие:
Конечно, после реализации группировки половая колонка в GridPanel не нужно отображать.
Следует отметить, что если данные в магазине изменяются, можно ли отображать группировку нормально?
Теперь добавьте событие ItemClick в сетку, код заключается в следующем:
Код JavaScript
СЛУШАЕТЕ: {itemClick: function (thisView, record) {personStore. <span style = "color:#ff0000;"> add </span> ([{name: "li", sex: "male"}, {name: "zhang", sex: "женский"}]); }}Эффект выглядит следующим образом
Видно, что интерфейс не то, что мы хотим, так как его решить? (Глупое решение в начале состояло в том, что я удалил и уничтожил эту сетку, перезагружена) Я сделал некоторые преобразования кода, который слушал событие, слушая слушателей
Код JavaScript
Слушатели: {itemClick: function (thisView, record) {personStore.loadData ([{name: "li", sex: "male"}, {name: "zhang", sex: "wember"}], true); }}Посмотрите на эффект снова:
Это эффект, который мы хотим. При динамическом изменении данных в магазине также необходимо реализовать группировку, а не добавлять данные к концу GridPanel. В соответствии с различием между этими двумя частями кода, главным является метод добавления данных в хранилище. Первый - добавить (запись), а последний - LoadData (записи, [Приложение])
Сначала я не мог понять, почему магазин добавил данные, но эффект был другим. Я прочитал объяснение официального документа, add (), новые модели экземпляры будут добавлены в конце существующей коллекции. (Добавьте данные в конце сбора) Я внезапно понял, что LoadData загружает данные в соответствии с правилами хранилища.
Кроме того, как удалить самую старую линию в группе, я сам проверил ее, и документ был реализован. Я поделюсь этим с вами здесь:
// Измените предыдущее событие прослушивания слушателей следующим образом:
Обратите внимание, что первый метод ([Boolean Group]), если параметр не передается, получены первые данные в магазине. Когда параметр правда, возврат - это группа хранилища с ключом имени группы, а первые данные в группе - это значение. PersonStore.first (True) .Female получает первые данные в женской группе. Если вы хотите получить мужчину, вы можете использовать Personstore.first (true) .male
Код JavaScript
Слушатели: {itemClick: function (thisView, record) {personStore.loadData ([{name: "li", sex: "male"}, {name: "zhang", sex: "wember"}], true); alert (personstore.first (true) .female.get ('name')); console.log (personstore.first (true) .female); Personstore.remove (personstore.first (true) .female); // console.log (personstore.getat (0));}}Чтобы избежать занятости памяти удаленных рекордов, была проведена дальнейшая обработка. Функция может быть реализована, но метод немного глуп. У каждого есть хороший способ общаться.
Посмотрите на код:
Слушатели: {itemClick: function (thisView, record) {personStore.loadData ([{name: "li", sex: "male"}, {name: "zhang", sex: "wember"}], true); alert (personstore.first (true) .female.get ('name')); console.log (personstore.first (true)); Personstore.remove (personstore.first (true) .female); var recs = personstore.getrange (); console.log (recs); //Personstore.removeall(true);//anything можно сделать с помощью этого предложения personstore.loadrecords (recs); // Перезагрузить данные, и удаленные в памяти исчезли console.log (personstore); Alert (PersonStore.getRemovedRecords.length); // Это результат предупреждения о предложении - 0 // console.log (personstore.getat (0)); }}