Introduciendo ExtJS (IV): llamadas Ajax
13/11/2008 por Javier Caride
ExtJS facilita una colección de objetos para manejar las llamadas Ajax. Su utilización es bastante sencilla y a todos aquellos desarrolladores que hayan utilizado jQuery, les sonará la sintaxis.
En el ejemplo podemos ver que a la llamada ajax se le pueden asignar dos funciones, una para cuando la llamada Ajax se ha ejecutado con éxito, y otra para cuando hubo algún error en la llamada.
Sobre los errores hay que realizar una pequeña aclaración. Una cosa son los errores de la llamada (un timeout en la llamada, un error 404, un error 500 en el servidor, etc.) de los errores que la lógica de nuestro programa quiera comunicar a la aplicación ExtJS.
Los primeros entrarán a traves de la función asignada a la propiedad failure, mientras que las llamadas que se han realizado correctamente (ya nos quieran comunicar un error o un éxito) a través de la función asignada al ‘success’, pues la llamada ha tenido éxito.
Lo mejor para entender como funcionan las llamadas Ajax en ExtJS es ver el siguiente ejemplo comentado:
Ext.onReady(function() {
/*
* Funcion que se ejecuta cuando hay un error al realizar la llamada Ajax
*/
var failureAjaxFn = function(response, request) {
// Nos quedamos con el divEjemplo
var objDiv = Ext.get('divEjemplo');
// Construimos el mensaje de error con datos de la petición y la respuesta
var errMessage = 'Error en la petición ' + request.url + ' '
+ ' status ' + response.status + ''
+ ' statusText ' + response.statusText + ''
+ ' responseText ' + response.responseText + '';
// Modificamos el contenido del div
objDiv.update(errMessage);
objDiv.replaceClass('backgroundYellow','backgroundRed');
}
/*
* Funcion que se ejecuta cuando la llamada Ajax se realiza correctamente
*/
var successAjaxFn = function(response, request) {
/*
* En response.responseText tenemos la respuesta del script, en este caso
* la salida del script PHP es JSON con lo que tenemos que decodificarlo
*/
var jsonData = Ext.util.JSON.decode(response.responseText);
// Nos quedamos con el divEjemplo
var objDiv = Ext.get('divEjemplo');
/*
* Al decodificar el JSON, tenemos un objeto javascript. En función del
* valor de la variable booleana 'success' (que nos indica si la acción
* que tenía que realizar el script ha tenido éxito o no) realizamos
* una u otra operación.
*/
if (true == jsonData.success) {
objDiv.update(jsonData.data.message + ' desde ' + request.url);
objDiv.replaceClass('backgroundYellow',jsonData.data.cssClass);
} else {
Ext.get('divEjemplo').update(jsonData.data.message + ' desde ' + request.url);
objDiv.replaceClass('backgroundYellow',jsonData.data.cssClass);
}
}
/*
* Handler del evento click realizado sobre el div
*/
var eventHandlerClick = function(event) {
// Mostramos mensaje de cargando
var objDiv = Ext.get('divEjemplo');
if (objDiv.hasClass('backgroundBlue'))
objDiv.replaceClass('backgroundBlue','backgroundYellow');
else if (objDiv.hasClass('backgroundRed'))
objDiv.replaceClass('backgroundRed','backgroundYellow');
else
objDiv.replaceClass('backgroundGreen','backgroundYellow');
Ext.get('divEjemplo').update('Realizando llamada Ajax... por favor espere');
// Petición básica
Ext.Ajax.request({
url: 'loadDataAjax.php',
method: 'POST',
success: successAjaxFn,
failure: failureAjaxFn,
timeout: 10000,
headers: {
'cabecera-propia': 'prueba'
},
params: {
operation: 'load'
}
});
};
/*
* Asignación del manejador de evento al DIV
*/
Ext.get('divEjemplo').on('click',eventHandlerClick);
});
El script PHP ‘loadDataAjax.php’, no hace gran cosa. Para que podáis ver los distintos estados de la aplicación con ExtJS, genera aleatoriamente respuestas con la propiedad ‘success’ a true, a false y fuerza el vencimiento del timeout de la llamada Ajax. Podéis verlo en funcionamiento aquí
Cojonudooooo ese ejemplo, una muestra del potencial de la libreria extjs y su facil combinacion con ajax
Excelente trabajo, los ejemplos son muy faciles de implantar, pero quiesiera que profundizaras un poco mas en el uso de Ajax con EXTjs, como por ejemplo mostrar datos de BD en un grid, y ademas te pregunto hay un contenedor o Frame con ext que se ajusta autoamticamente a la ventana, para asi agregar todos los componetes….
De todas formas un millon de gracias soy nuevo en utilizar EXTjs, pero tus ejemplos me han ayudado mucho….