0
219
ViewsExtjs 4.X Mover registros de una grilla ARRIBA/ABAJO con un botón
Esta publicación es la continuación de mi publicación anterior ( aquí ) para la cual no pude encontrar una solución funcional (todavía). En resumen: he creado una cuadrícula Extjs (4.X) que tiene registros de padres e hijos. Los registros están ordenados donde los hijos siempre aparecen justo debajo de sus padres, como se muestra aquí, donde 'P' designa un registro como padre mientras que 'C' designa un registro como hijo.
'May' es el padre de Peter, Odin es el padre de Thor y Loki, Bruce aún no tiene hijos marcados como Padre (entidad independiente)
violín: https://fiddle.sencha.com/#view/editor&fiddle/3jks
Deseo cambiar el orden de clasificación de los padres y al mismo tiempo traer a sus hijos cuando muevo los grupos hacia arriba o hacia abajo. Al principio, quería intentar arrastrar y soltar, pero no pude encontrar una solución que funcionara para eso (probé Gird DragAndDrop y TreeGrid, los violines están en mi publicación anterior).
Basado en una sugerencia en la publicación abierta anterior, intenté agrupar qué grupos son padres e hijos, pero perdí la capacidad de arrastrar y soltar todo el grupo. Para trabajar con el conocimiento que tengo, he creado botones en su lugar, para mover los grupos hacia arriba o hacia abajo según el clic del usuario. La agrupación se basa en la columna Rango, por lo que tan pronto como actualice el rango, los registros idealmente deberían saltar de grupo. Por alguna razón, cuando hago clic en el botón "ARRIBA" en el grupo Rango: 2, BRUCE cambia al Rango: 1 y May Parker cambia al Rango: 2, lo cual es correcto, pero Peter Parker aún permanece en el Rango: 1. Después de depurar el código, descubrí que, por alguna razón, la tienda eliminó los registros de Peter y los reemplazó con otra copia de May Parker (aunque la cuadrícula no lo muestra). He puesto mensajes de consola donde podemos observar esto. Cual podría ser el problema aquí? Los consejos y sugerencias son muy apreciados. También estoy abierto a cambiar toda la lógica si hay una mejor manera de mover estos registros según el rango.
1 answers
Answer question0
Aquí hay un violín de trabajo para arrastrar y soltar el encabezado del agrupador de cuadrícula.
Aquí hay más detalles y algo de ayuda para construir su ejemplo de botón arriba-abajo:
Está actualizando los registros varias veces.
Sugeriría que establezca el rango por recordId para asegurarse de que cada elemento se procese solo una vez. De lo contrario, graba los grupos de interruptores mientras trabaja en ellos.
// I am using onBeforeGroupClick to handle collapsing correctly onBeforeGridGroupClick: function (grid, node, dataIndex, e, eOpts) { const targetIsButton = e.getTarget().type === 'button'; console.log('[onBeforeGridGroupClick] targetIsButton', targetIsButton); if (targetIsButton) { this.updateRank(grid, node, dataIndex, e) } // return false will stop gridgroupclick from running return !targetIsButton; }, // here I am updating the rank updateRank: function (grid, node, group, e) { console.log('[updateRank] dataIndex', group); const store = grid.getStore(); // collect the group data for the clicked group const groups = store.getGroups(), currentGroupIndex = groups.findIndex('rank', group), currentGroup = groups.items[currentGroupIndex], // Ext.pluck gets the IDs from the current group currentRecordIds = Ext.pluck(currentGroup.items, 'id'); // collecting the group data for the group you want to switch with const isUp = e.getTarget().value === 'Up'; targetId = currentGroupIndex + (isUp ? 1 : -1) targetGroupIndex = groups.findIndex('rank', targetId), targetGroup = groups.items[targetGroupIndex], targetRecordIds = Ext.pluck(targetGroup.items, 'id'); // define out of range conditions if(targetGroupIndex < 0) return; // stop the grid from updating while you work on the store store.suspendEvents(true); // set the rank for the target and current records Ext.Array.each(targetRecordIds, function(id) { const record = store.findRecord('id', id); record.set('rank', currentGroupIndex); }) Ext.Array.each(currentRecordIds, function(id) { const record = store.findRecord('id', id); record.set('rank', targetGroupIndex); }) // update the grid from all suspended store events store.resumeEvents(); }