Durante el proceso de práctica de proyecto, encontramos el requisito de que los datos en la red se agrupen de acuerdo con un cierto campo. Por supuesto, esta función está disponible en la API, y se enumera aquí para que todos encuentren:
Dos cosas a tener en cuenta:
1. Al crear una tienda, debe establecer el valor del atributo Groupfield, es decir, el valor que debe agruparse.
Por ejemplo:
Código JavaScript
Ext.define ('persona', {extender: 'ext.data.model', campos: ['nombre', 'sexo']});En este modelo de datos, necesitamos agrupar por género (sexo), así que consulte la tienda a continuación
Código JavaScript
var personsstore = ext.create ('ext.data.store', {storeId: 'PersonStore', Model: 'Person', Groupfield: 'Sex', Data: [{name: 'HongMei Li', sexo: 'femenino'}, {nombre: 'San Zhang', sexo: 'masculino'}, {name: 'jim green', sexo: 'masculino'},}, {{{sexo: ',', ',', {name: ', {name:', {name: ', {sexo:', ',', {name: ', {sexo:', ', {sexo:', ',', ', {sexo:', {sexo: '. 'femenino'}, {nombre: 'Lucy', sexo: 'femenino'}]});A continuación, necesitamos definir el TPL que se muestra en el grupo
Código JavaScript
var groupingFeature = ext.create ('ext.grid.feature.grouping', {groufeadertpl: 'sex: {name} ({rows.length} item {[valuas.rows.length> 1? "S": ""]})'}); // Tenga en cuenta que {name} es el valor correspondiente a la columna de sexo en la columna de la tienda en la tienda en la tienda en la tiendaEn GridPanel, el código es el siguiente: Configurar características para agrupar la información definida anteriormente
Código JavaScript
var grid = ext.create ('ext.grid.panel', {rendererto: ext.getBody (), store: personstore, ancho: 600, altura: 400, título: 'Persona', características: [GroupingFeature], Columns: [{Text: 'Nombre', Flex: 1, Dataindex: 'Nombre'}, {Texto: 'Sex', Flex: 1, Data ',' Sexo ' });Las representaciones son las siguientes:
Por supuesto, después de implementar la agrupación, la columna de sexo en GridPanel no necesita mostrarse.
Cabe señalar que si los datos en el almacén cambian, ¿se pueden mostrar la agrupación normalmente?
Ahora agregue un evento de elementos a la cuadrícula, el código es el siguiente:
Código JavaScript
oyentes: {itemClick: function (thisView, registro) {Personstore. <span style = "color:#ff0000;"> add </span> ([{name: "li", sexo: "masculino"}, {nombre: "zhang", sexo: "femenino"}]); }}El efecto es el siguiente
Se puede ver que la interfaz no es lo que queremos, entonces, ¿cómo resolverla? (La estúpida solución al principio fue que eliminé y destruí esta parrilla, recargé) Hice algunas transformaciones del código que escuchó el evento escuchando a los oyentes
Código JavaScript
oyentes: {itemClick: function (thisView, registro) {PersonStore.LoadData ([{name: "li", sexo: "masculino"}, {nombre: "zhang", sexo: "femenino"}], true); }}Mire el efecto nuevamente:
Este es el efecto que queremos. Cuando cambia dinámicamente los datos en el almacén, la agrupación también debe implementarse, en lugar de agregar los datos al final de la gridpanel. En correspondencia con la distinción entre estas dos piezas de código, lo principal es el método para agregar datos en el almacén. El primero es add (registro) y el último es loadData (registros, [adjunto])
Al principio no podía entender por qué la tienda agregó datos, pero el efecto fue diferente. Leí la explicación del documento oficial, add (), las nuevas instancias de modelo se agregarán al final de la colección existente. (Agregue datos al final de la recopilación) De repente me di cuenta de que LoadData carga los datos de acuerdo con las reglas del almacén.
Además, cómo eliminar la línea más antigua del grupo, la revisé yo mismo y se ha implementado el documento. Lo compartiré contigo aquí:
// Modificar el evento de escucha de oyentes anterior de la siguiente manera:
Tenga en cuenta que el primer método ([grupo booleano]), si no se pasa el parámetro, se obtienen los primeros datos en el almacén. Cuando el parámetro es verdadero, el retorno es un grupo de almacenamiento con la clave de nombre del grupo y los primeros datos en el grupo son valor. PersonStorStore.First (True). Female obtiene los primeros datos en el grupo femenino. Si desea obtener el hombre, puede usar PersonStorstore. Primero (True) .male
Código JavaScript
oyentes: {itemClick: function (thisView, registro) {PersonStore.LoadData ([{name: "li", sexo: "masculino"}, {nombre: "zhang", sexo: "femenino"}], true); alert (PersonStore.first (True) .Female.get ('Nombre')); console.log (PersonStore.first (verdadero) .Female); PersonStorStore.remove (PersonStore.First (True) .Female); // console.log (PersonStore.getat (0));}}Para evitar la ocupación de memoria de los recordos eliminados, se realizó un procesamiento adicional. La función se puede implementar, pero el método es un poco estúpido. Todos tienen una buena manera de comunicarse.
Mira el código:
oyentes: {itemClick: function (thisView, registro) {PersonStore.LoadData ([{name: "li", sexo: "masculino"}, {nombre: "zhang", sexo: "femenino"}], true); alert (PersonStore.first (True) .Female.get ('Nombre')); console.log (PersonStore.first (True)); PersonStorStore.remove (PersonStore.First (True) .Female); var recs = PersonStore.getRange (); console.log (recs); //Personstore.removeall(true) ;//anything se puede hacer con esta oración Personstore.LoadRecords (recs); // Recargar los datos, y la memoria eliminada en la memoria se va a no console.log (Personstore); alerta (PersonStore.getRemovedRecords.length); // Este resultado de alerta de oración es 0 // console.log (PersonStorStore.getat (0)); }}