Foro

Recargar automaticamente una grilla al insertar un registro

0
Hola amigos... Por favor si pueden ayudarme con los siguiente, cuando inserto un nuevo registro en la base de datos utilizando php quisiera que este registro se actualizara automaticamente en una grilla donde se muestran todos los registros. para ser mas explicito yo tengo una grilla donde muestro varios registros y tengo un boton adicionar donde me despliega un formulario para ingresar los datos, al enviar estos datos quisiera que automaticamente aparezca en la grilla sin necesidad de dar click en el boton actualizar de la correspondiente grilla. Muchas gracias a quienes puedan ayudarme.

4 Respuestas

Mejores votos Por fecha Solución
0
para eso debes volver a cargar el store del grid, eso lo debes hacer en la función success de la conexión que haces para guardar el registro!! de manera general algo como: 
Ext.Ajax.request({
					url: '',
					waitMsg: 'guardando',
					
						
					success: function(fp, o) {
                                                 //aca vuelves a cargar el store
						Ext.getCmp('idGrid').getStore().load();	}
					}
				});
0
Amigo gracias por responder... pero a que hace referencia el idGrid???? y disculpa mi ignorancia aqui te muestro mi codigo y no tengo id en el grid y no se donde ubicarlo... muchas gracias por tu colaboracion.. 
var store = new Ext.data.JsonStore({
			url: 'pagroles.php',
			root: 'data',
			totalProperty: 'total',
			fields: ['Codigo','Rol'],
			baseParams: {x:10,y:20}
		});
		store.load({params:{z:30,start:0,limit:8}}); //limit:6 limita la cantidad de registros a mostrar
		
		var pager = new Ext.PagingToolbar({
			store: store, // <--grid and PagingToolbar using same store
			displayInfo: true,
			displayMsg: '{0} - {1} of {2} Rows',
			emptyMsg: 'No cities to display',
			pageSize: 8 //con limit:6 limita la cantidad de registros a mostrar
		});
	
		pager.on('beforechange',function(bar,params){
			params.z = 30;
		});
		
		var grid = new Ext.grid.GridPanel({
			store: store, // <--grid and PagingToolbar using same store
			columns: [
				new Ext.grid.RowNumberer(),
				{header:'Codigo', dataIndex:'Codigo',width:60,sortable: true},
				{header:'Rol', dataIndex:'Rol', width:180,sortable: true}
			],
			bbar: pager, // <--adding the pagingtoolbar to the grid
			border: false,
			stripeRows: true
		});
0
En realidad lo que recargas es el Store. Por Ejemplo si tu codigo tiene esto: 
var store = new Ext.data.JsonStore({
         url: 'pagroles.php',
         root: 'data',
         totalProperty: 'total',
         fields: ['Codigo','Rol'],
         baseParams: {x:10,y:20}
      });
      store.load({params:{z:30,start:0,limit:8}}); //limit:6 limita la cantidad de registros a mostrar
En la funcion success pones esto: 
success: function(form,action){	
      store.reload();
},
Depende de como hallas nombrado tu Store en tu codigo, solamente usas la propiedad {reload()}
0
mira, lo primero que debes tener en cuenta es que el grid responde a los cambios que hayan en el store, si quitas un record del store, el grid automáticamente lo dejará de mostrar, igual si agregas un record al store o simplemente lo recargas. teniendo en cuenta lo de arriba, tu código podría quedar algo así (solo coloco lo de modificar) 
var grid = new Ext.grid.GridPanel({
         store: store, // <--grid and PagingToolbar using same store
         columns: [
            new Ext.grid.RowNumberer(),
            {header:'Codigo', dataIndex:'Codigo',width:60,sortable: true},
            {header:'Rol', dataIndex:'Rol', width:180,sortable: true}
         ],
         bbar: pager, // <--adding the pagingtoolbar to the grid
         border: false,
         stripeRows: true,
         id: 'idGrid' //<-- agregas el ID al grid
      });
y luego de agregar el nuevo registro, solo debes volver a cargar el store: 1) esta forma si tienes el formulario en el mismo archivo .js 
 store.load({params:{z:30,start:0,limit:8}}); //limit:6 limita la cantidad de registros a mostrar
2) esta forma si tienes el formulario en un archivo .js y el grid en otro: 
Ext.getCmp('idGrid').getStore().load({params:{z:30,start:0,limit:8}});
Espero que te sirva!! salu2

¿Conoces a alguien que pueda responder esta pregunta? Comparte el link en Twitter o Facebook

Es necesario registrarse para poder participar en el foro! Si ya tienes una cuenta puedes entrar y comentar en este foro.

Tags

Ext JS 3