¿Cómo puedo persistir ocultando/mostrando/moviendo/redimensionando la columna de cuadrícula de datos ExtJS?

Question

Me gustaría hacer que los cambios del usuario en una columna de cuadrícula de datos ExtJS (ocultar, mostrar, mover, redimensionar) sean persistentes y estén almacenados en el servidor. Hay una gran cantidad de eventos para escuchar, pero registrar manejadores en la misma cuadrícula no parecen dar lugar a alertas siendo llamados: (. Mi enfoque básico puede o no ser óptima)

grid.on('hide', function(event) 
     { 
     alert('Save column order: column hidden.'); 
     }); 
    grid.on('move', function(event) 
     { 
     alert('Save column order: column moved.'); 
     }); 
    grid.on('resize', function(event) 
     { 
     alert('Save column sizes: column resized.'); 
     }); 
    grid.on('show', function(event) 
     { 
     alert('Save colum order: column shown.'); 
     }); 

¿Qué debo hacer concretamente para escuchar estos eventos? Puedo ocultar, mostrar, mover y cambiar el tamaño de las columnas sin activar una alerta.

Answer 1

Primero, necesita configurar un state provider.
CookieProvider es el único que viene incorporado con ExtJS

Ext.state.Manager.setProvider(new Ext.state.CookieProvider()); 

Segunda, marcar yourGridPanel.stateful como true

Tercer, mirar si necesita cambiar el valor predeterminado para GridPanel. stateEvents
Esto es básicamente "Una serie de eventos que, cuando se dispara, deben dar lugar a este componente para guardar su estado"

Cuarta, HttpStateProvider no viene incorporado con ExtJS pero Saki tiene un ux (user extension) for it .

Quinta, si desea guardar los estados de múltiples componentes que deben tener ya sea id o stateId establecida explícitamente.

Un buen enfoque sería hacer que esto funcione como se esperaba con el built in CookieProvider y luego cambiar a Http Provider.

Answer 2

La cuadrícula debe tener una propiedad llamada "stateful". Ponga esto a TRUE y la red debe recordar los anchos de columna, etc.

Answer 3

Configurar la rejilla con stateful: true y establecer su stateId (opcional Si la rejilla tiene un ID que no va a cambiar). También inicializar el Ext.state.Manager:

var thirtyDays = new Date(new Date().getTime()+(1000*60*60*24*30)); 
Ext.state.Manager.setProvider(new Ext.state.CookieProvider({expires: thirtyDays})); 

Aunque no se incluyó en el Ext 3, se puede encontrar en línea un proveedor de estado que utiliza HTML5 de localStorage en lugar de galletas.