[SOLUCIONADO] Recargar 2 Grid con extjs

CesarHC · #1 (**permalink**) 04/12/2013, 18:49

Buenas, vengo trabajando recientemente con extjs y e logrado que mediante un grid y un par de botones guarde elimine y modifique, hasta hay todo bien.

Ahora he hecho 2 tablas una alumno y una curso al hacer clic en el alumno se deberia mostrar los cursos en los que esta inscrito, he logrado mandar los datos al segundo grid pero el problema es que no lo recarga y por lo tanto los datos no se muestran(poniendo el id del alumno en la consulta si los carga).

Mi pregunta es como puedo hacer para refrescar los 2 grid automáticamente al ejecutar.

Selecciono el boton ver cursos y si una fila esta selecionada me manda los el id del curso y eso lo meto en una consulta.

Aqui ven como los datos llegan pero no recarga el grid.

Tengo este que me muestra los alumnos.

Código Javascript:

Ver originalExt.onReady(function(){
  Ext.QuickTips.init();
  var grid = 0;
  // create the data store
  var campos = Ext.data.Record.create([
       {name: 'id'},
       {name: 'nombre', type: 'string'},
       {name: 'edad', type: 'number'},
       {name: 'telefono', type: 'number'}
  ]);    
  var reader = new Ext.data.JsonReader({         
         root: 'estudiantes2', 
         totalProperty: 'total',
      },         
      campos
  ); 
  var store = new Ext.data.GroupingStore({ 
      proxy: new Ext.data.HttpProxy({
          url: 'estudiantes2.php', 
          method: 'POST',
          id: 'id'
      }),   
      baseParams:{
        task: "showdata",
        start: 0,
        limit: 5,
        idprueba: 1
      },
      reader: reader
  });
  store.load();
  var agregarEstudianteForm = new Ext.form.FormPanel({
    id:'agregarEstudianteForm',
    url: 'agregarEstudiante.php',      
    items: [
      {
        xtype: 'textfield',      // Ext.form.TextField    Componente que acepta datos alfanumericos
        fieldLabel: 'Nombre',
        hiddenName: 'nombre',
        name:'nombre',        
        blankText: 'Nombre completo',
        allowBlank: false
      },
      {
        xtype: 'textfield',      // Ext.form.TextField    Componente que acepta datos alfanumericos
        fieldLabel: 'Edad',
        hiddenName:'edad',
        name:'edad',
        allowBlank: false
      },
      {
        xtype: 'textfield',      // Ext.form.TextField    Componente que acepta datos alfanumericos
        fieldLabel: 'Telefono',
        hiddenName:'telefono',
        name:'telefono'
      }
    ]
   });
 
  var agregarEstudianteWin = new Ext.Window({
    title: 'Nuevo estudiante',
    width: 400,
    height:300,
    modal: true,
    closable:false,
    bodyStyle:'padding:5px;',
    buttonAlign:'center',
    items: agregarEstudianteForm,
    buttons: [
      {
        text: 'Guardar',
        handler: function(){
          if (agregarEstudianteForm.getForm().isValid()) {
            agregarEstudianteForm.getForm().submit({
              method: 'POST',
              waitTitle: 'Validando datos',
              waitMsg: 'Enviando datos..',
              success: function(form, action){
                var data = Ext.util.JSON.decode(action.response.responseText);
                alert(data.message.reason);
                agregarEstudianteForm.getForm().reset();
                store.reload();
              },
              failure: function(form, action){
                var data = Ext.util.JSON.decode(action.response.responseText);
                alert('Error\n' + data.errors.reason);
              }
            });
            agregarEstudianteWin.hide();
          }
        }
      },
      {
        text: 'Cancelar',
        handler: function(){ agregarEstudianteWin.hide(); }
      }
    ]
  });
  function mostrarCurso() {
    var seleccionados = grid.selModel.selections.keys;         
    if(seleccionados.length > 0 ){
      if (confirm('Se cargaran los cursos')){
        var ids = Ext.encode(seleccionados);
        Ext.Ajax.request( 
        {   
          waitMsg: 'Cargando ...',
          url: 'cursos2.php',
          params: {
             task: "Show", 
             ids: ids,
             key: 'ids'
          },
          callback: function (options, success, response) {
            if (success) {                    
              var json = Ext.util.JSON.decode(response.responseText);
              alert(json.del_count + ' curso(s) cargado(s)');
            } else{
              alert('Error inesperado \n'+ response.responseText);
            }
          },
 
          failure:function(response,options){
             alert('Error ...');
          },
          success:function(response,options){
            store.removeAll();
            store.reload();
          }
        });
      }
    } else {
      alert('Seleccione al menos un registro para mostrar');
    }
  }
  function eliminarEstudiante() {
    var seleccionados = grid.selModel.selections.keys;         
    if(seleccionados.length > 0 ){
      if (confirm('Realmente quiere eliminar los registros selecionados?')){
        var ids = Ext.encode(seleccionados);
        Ext.Ajax.request( 
        {   
          waitMsg: 'Eliminando ...',
          url: 'eliminarEstudiante.php',
          params: {
             task: "delete", 
             ids: ids,
             key: 'id'
          },
          callback: function (options, success, response) {
            if (success) {                    
              var json = Ext.util.JSON.decode(response.responseText);
              alert(json.del_count + ' registro(s) eliminado(s)');
            } else{
              alert('Error inesperado \n'+ response.responseText);
            }
          },
 
          failure:function(response,options){
             alert('Error ...');
          },
          success:function(response,options){
            store.removeAll();
            store.reload();
          }
        });
      }
    } else {
      alert('Seleccione al menos un registro para eliminar');
    }
  }
  function editarEstudiante(grid) {
    Ext.Ajax.request({
      waitMsg: 'Guardando...',
      url: 'editarEstudiante.php',
      method: 'POST',
      params: {
        task: "update",
        key: 'id',
        keyID: grid.record.data.id,
        data: Ext.encode(grid.record.data),//the column name
        field: grid.field,
        value: grid.value
      },
      failure:function(response,options){
        alert('Error ...');
      },
      success:function(response,options){
        store.reload();
      }
    });
  }; 
 
  // create the Grid    
  grid = new Ext.grid.EditorGridPanel({
    store: store,
    columns: [
      {
        id       :'nombre',
        header   : 'Nombre', 
        dataIndex: 'nombre',
        editor: new Ext.form.TextField({
          allowBlank: false
        })
      },
      {
        header   : 'Edad', 
        dataIndex: 'edad',
        editor: new Ext.form.TextField({
          allowBlank: false
        })
      },
      {
        header   : 'Telefono',
        dataIndex: 'telefono',
        editor: new Ext.form.TextField({
          allowBlank: false
        })
      }
    ],
    stripeRows: true,
    autoExpandColumn: 'nombre',
    height: 350,
    width: 300,
    title: 'Estudiantes',
    tbar:[
     {
        text: 'Nuevo',
        tooltip: 'Nuevo estudiante',
        handler: function(){agregarEstudianteWin.show()},
        icon: 'add.png',
        iconAlign: 'top'
     },
     {
        text: 'Eliminar',
        tooltip: 'Eliminar registro',
        handler: eliminarEstudiante,
        icon: 'delete.png',
        iconAlign: 'top'
     },
     {
        text: 'Ver Cursos',
        tooltip: 'Ver Cursos',
        handler: mostrarCurso,
        icon: 'lupa.jpg',
        iconAlign: 'top'
     }
    ],
    bbar: new Ext.PagingToolbar({
       pageSize: 5,
       store: store,
       displayInfo: true
    }),
    listeners:{'afteredit':editarEstudiante},
    selModel: new Ext.grid.RowSelectionModel({singleSelect:true})
  });
 
  // render the grid to the specified div in the page
  grid.render('gridn');
  
});

El otro js es parecido solo que me muesta los cursos.

Y asi los visualizo

Código HTML:

Ver original<html>
<head>
    <title>Ejemplo GRID</title>
    <link rel="stylesheet" 
          type="text/css" 
          href="ext34/resources/css/ext-all.css" />
 
    <script src="ext34/adapter/ext/ext-base.js"></script>
    <script src="ext34/ext-all.js"></script>
    <script src="cursos2.js"></script>
    <script src="estudiantes2.js"></script>
    <style> 
    .izquierda { 
    float:left; 
    } 
    .derecha { 
    float:left; 
    width:320px; 
    } 
</style> 
</head>
<body>
   <div id="gridn" class="derecha"></div>
    <div id="gridc" class="derecha"></div>
</body>
</html>

Espero que me puedan orientar un poco.

Saludos.

CesarHC · #2 (**permalink**) 08/12/2013, 21:39

Me habia olvidado de este post, por si alguien busca algo parecido puede revisar el libro.

ext js cookbook.