Hola,
estoy empezando con extjs, voy poco a poco me va costando, pero bueno...; tengo una duda puede que alguien lo tenga resuelto por eso lo consulto. Creo un gridPanel que relleno con un GeoJson que he generado a partir de una consulta en PHP. Ese grid lo quiero cargar en la pagina principal del proyecto, para lo que primeramente para que no me lo cargue con los datos del fichero generado comento la propiedad autoLoad. Una vez cargado vacio en la pagina principal, mediante un form hago una seleccion de un elemento y vuelvo a escribir el GeoJson, ahora si lo quiero cargar pero no quiero que se recarge toda la pagina, quiero que solo se rellene el grid y se cargue en el mapa. como hacerlo?. por otro lado, si en el submit ejecuto la consulta y abro una ventana con un mainPanel con el mapPanel y el gridPanel me rellena el grid con datos, en este caso ceros pq la informacion que obtengo esta vacia, si lo hago en el viewPort el grid no me lo rellena, si interactuan las filas con el vecLayer pero en el grid no aparecen los ceros como en la otra opcion, ¿a que puede ser debido?.
Grid:

Código: Seleccionar todo

    store = new GeoExt.data.FeatureStore({
      layer: vecLayer,
        fields: [
            {name: 'name', type: 'string'},
            {name: 'elevation', type: 'float'}
        ],
        proxy: new GeoExt.data.ProtocolProxy({
            protocol: new OpenLayers.Protocol.HTTP({
                url: "data/especie.json",
                format: new OpenLayers.Format.GeoJSON()
            })
        }),
       // autoLoad: true
    });
 
gridPanel = new Ext.grid.GridPanel({
    title: "Información de Capturas",
   region: "south",
   border: true,
   collapsible: true,
   collapsed:true,
   collapseMode: "mini",
    store: store,
   height:400,
   boxMinHeight: 450,
   autoScroll: true,
   split:true,
    columns: [{
            header: "Hora Lance",
            width: 180,
         sortable: true,
            dataIndex: "shooting_latitude"
        }, {
            header: "Recogida Lance",
            width: 120,
         sortable: true,
            dataIndex: "shooting_longitude"
        }],
      stripeRows: true,
        sm: new GeoExt.grid.FeatureSelectionModel()
});

consulta PHP que genera el GeoJson:

Código: Seleccionar todo

<?php
/*conexion a la base de datos */
$conexion = pg_connect("host=*** port=*** dbname=*** user=postgres password=***");
   if (!$conexion){
      echo "<center>La conexi&oacute;n con la base de datos no se ha realizado.</center>";
      exit;
      }
$query = 'select id, id_haul, id_catch, ST_AsGeoJSON(the_geom, 4) AS geojson from "Haul_geo_new" natural inner join catch where a_code = \'EJB\' and shooting_time between \'-infinity\' and \'now\'';

$result = pg_query($query) or die('Query failed: ' . pg_last_error());
?>
<?php
$geojson = array(
   'type' => 'FeatureCollection',
   'features' => array()
);
/*while ($line = pg_fetch_array($result, null, PGSQL_ASSOC)) {*/
$i = 0;
while ($line = pg_fetch_assoc($result)) {
/*echo $line["geojson"]."<BR>";*/

   $feature = array(
      'geometry' => json_decode($line['geojson'], true),
      /*'properties' => $data[]=$line;*/
      'id' => $i++
      );
array_push($geojson['features'], $feature);
}
$especie = json_encode($geojson);
$archivo = fopen("/var/www/html/data/especie.json", "w");
fwrite($archivo, $especie);
fclose($archivo);
?>

La idea es seleccionar en un form en la pagina principal y al hacer el submit ejecutar la consulta, y consultar los datos en el grid y asi para cada elemento del form.
un saludo.

la parte en que no se rellenaba el grid, estaba yo cometiendo un error en la deficion de los campos.. apufff cuestion de fijarse. En fin, la otra duda que no se como resolver es como recargar el grid cuando ejecuto el form. mediante javascript estoy haciendo que no se me recargue la pagina cuando ejecuto la consulta php, pero claro, no se recarga el grid. Lo he adaptado mas o menos y lo pongo por si le sirve a alguien.

Código: Seleccionar todo

<script type="text/javascript">
function enviarDatos(){
   var formulario = document.getElementById('formulario');
   var datos = new FormData(formulario);
   xhr(datos);
}
var xmlhttp;
function xhr(datos){ //funcion para crear las peticiones de XMLHttpResquest
// Generalmente sacada de páginas que usan un método para IE6 o anteriores,
// IE 7, FF, Opera, Google Chrome, u otros.
      if (window.XMLHttpRequest)
           {// code for IE7+, Firefox, Chrome, Opera, Safari
              xmlhttp=new XMLHttpRequest();
           }
      else
           {// code for IE6, IE5
              xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
      xmlhttp.onreadystatechange = procesarRespuesta; //Ojo sin parentesis
      xmlhttp.open("POST", "consulta2.php", true);
      xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
      xmlhttp.send(datos);
      }
   function procesarRespuesta(){
      if(xmlhttp.readyState == 4) {
            if(xmlhttp.status == 200) {
            //document.getElement.innerHTML = xmlhttp.responseText;
         alert(xmlhttp.responseText);
            }
       }
}
</script>

Efectivamente esto me ejecuta la consulta sin recargar la pagina pero no me hace la parte en que recarga el fichero GeoJson para meter en el vecLayer del Grid.

Hola, si lo que quieres es actualizar el grid, basta con hacer lo siguiente, no es necesario que hagas el codigo ajax a pie, ya que para eso es el framework, para ahorrarte todo ese trabajo. Con el framework puedes hacer que nunca se te recargue la pagina, xq todo son peticiones asicronas.

Te dejo un ejemplo de como puedes recargar la grilla, lo mismo es para los form y para ajax.request (que es una peticion ajax que puedes realizar en cualquier momento para obtener datos del servidor).

Código: Seleccionar todo

grid.getStore().load({
   params: {
      id : this.id_recepcion
         }
});


Para el form es lo mismo solo que es form.load. En params pasas todos los parametros o filtros que desees enviar al servidor, tambien puedes añadir success o failure que son funciones que se llaman cuando la operación que haces en el servidor es correcta o falla por alguna razon. Este código no es sincrono, las funciones success y failure se ejecutan en el momento en que la peticion esta completa y toma si mal no recuerdo el valor 201.

Te dejo un ejemplo de como se hace con form.

Código: Seleccionar todo

form.getForm().load({
            url:'models/compras/guardar.php',
            params:{
               id: id_recepcion
            },
            success: function() {
               grid.getStore().reload();            
            },
            failure: function(form, action) {
               Ext.Msg.show({
                  title : 'ERROR',
                  msg : 'Modificación de datos fallida!',
                  icon : Ext.MessageBox.ERROR,
                  buttons: Ext.Msg.OK
               });
            }
         });


Espero te sea de ayuda.

Gracias "desarro3"!! el problema es que no utilizo el framework para el form. Lo que hago es meter un form con html y php dentro de un panel. Y la solucion ¡¡q funciona perfectamente!! la he encontrado metiendo en el fichero javascript donde hago el POST y abro la consulta PHP, una linea despues del POST diciendo que haga el load del Store ¡¡solo eso!!. Cargo la pagina con el grid vacio, ejecuto la consulta y rellena el grid, ¡PERFECTO!. Pongo la solucion por si le interesa a alguien. GRACIAS DE NUEVO desarro3. un saludo.

Código: Seleccionar todo

<script type="text/javascript">
function enviarDatos(){
   var formulario = document.getElementById('formulario');
   var datos = new FormData(formulario);
   xhr(datos);
}
var xmlhttp;
function xhr(datos){ //funcion para crear las peticiones de XMLHttpResquest
// Generalmente sacada de páginas que usan un método para IE6 o anteriores,
// IE 7, FF, Opera, Google Chrome, u otros.
      if (window.XMLHttpRequest)
           {// code for IE7+, Firefox, Chrome, Opera, Safari
              xmlhttp=new XMLHttpRequest();
           }
      else
           {// code for IE6, IE5
              xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
      xmlhttp.onreadystatechange = procesarRespuesta; //Ojo sin parentesis
      xmlhttp.open("POST", "consulta2.php", true);
      xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
      xmlhttp.send(datos);

//***** recargar despues de actualizar json ******
                store.load();
//****************************************

      }
   function procesarRespuesta(){
      if(xmlhttp.readyState == 4) {
            if(xmlhttp.status == 200) {
            //document.getElement.innerHTML = xmlhttp.responseText;
         alert(xmlhttp.responseText);
            }
       }
}
</script>