Jsonstore is cache problem - Developers Notebook - xn ::
[Archive] [SOLVED] Problems with JsonStore/JsonReader (typical? localhost/gas/ html/app.htmlPragmano-cacheCache-Controlno-cache. Response sent by backend:
http://xn--7stq33aova165h.com/ydct/jsonstore-is-cache-problem.htmlHOME |
Hello,
I´m trying to view a php-mysql backend data into a ExtJS 2.0 gridPanel.
The code that generates de grid:
Ext.namespace('Ext.gas');
Ext.gas.CAppGrid = function()
{
// Propiedades privadas:
// Metodos privados:
// Decodificación de Datos JSON:
function DecJSON(stringData) {
try {
return(Ext.util.JSON.decode(stringData));
}
catch (err) {
Ext.MessageBox.alert('ERROR', 'Imposible decodificar ' + stringData);
}
};
// Codificación de Datos JSON:
function EncJSON(obj) {
try {
return(Ext.util.JSON.encode(obj));
}
catch(e) {
Ext.MessageBox.alert('ERROR', 'Imposible codificar ' + obj);
}
};
// Metodos privilegiados:
return {
// Propiedades privilegiads:
js: null, // JSonstore.
cm: null, // Column Model.
gridLog: null, // Datagrid visualización Log.
// Metodos privilegiados:
CreateGridLog : function() {
this.js = new Ext.data.JsonStore({
url: '../php/app/gridLog.php',
reader: new Ext.data.JsonReader({
root: "log",
id: "codigo"
},[
{name: 'tipo', type: 'string', mapping: 'tipo'},
{name: 'fecha', type: 'date', mapping: 'fecha'},
{name: 'cod_usr', type: 'integer', mapping: 'cod_usr'},
{name: 'nom_usr', type: 'string', mapping: 'nom_usr'},
{name: 'lit', type: 'string', mapping: 'lit'}
])
});
this.js.load();
this.cm = new Ext.grid.ColumnModel([{
id: 'id_CMLog_Tipo',
header: "Tipo",
dataIndex: 'tipo',
width: 75
},{
id: 'id_CMLog_Fecha',
header: "Fecha",
dataIndex: 'fecha',
width: 75
},{
id: 'id_CMLog_CodUsr',
header: "Código Usuario",
dataIndex: 'cod_usr',
width: 100
},{
id: 'id_CMLog_NomUsr',
header: "Nombre Usuario",
dataIndex: 'nom_usr',
width: 100
},{
id: 'id_CMLog_Lit',
header: "Descripción",
dataIndex: 'lit',
width: 400
}]);
// Creamos el gridPanel:
this.gridLog = new Ext.grid.GridPanel({
store: this.js,
cm: this.cm,
Martial Arts | Career Management | Home Business | Remodeling ::
Ok we have had this problem for a little while and are looking for an answer. .. For small-medium size boards upgrade goes without any problem,
http://mercialleasing.com/HOME |
height: 400
});
this.gridLog.render('id_DivCenter');
},
CreateEditGrid: function() {
},
Init: function () {
try {
this.CreateGridLog();
}
catch(e) {
alert('Error: "' + e.message + '" en linea: ' + e.lineNumber);
};
}
}
}();
Ext.onReady(Ext.gas.CAppGrid.Init, Ext.gas.CAppGrid, true);
Concepts:
- The logGrid.php exists.
-
That´s the question. I don´t know what the error is. I´ll try to find it.
I set "Break on all errors" and the script stops in line 13360 of ext-all-debug.js
Little advance .... ???
Changed {codigo mapping from integer to string} and extjs fires load event instead of loadexception. Still cannot view ANY data...
The connection between ColumnModel and JsonStore is the ColumnModel's dataIndex.
That references a field by its name property.
Hi,
I changed the JsonStore for a store component, and still can´t view any data.
The code:
Ext.gas.CAppGrid = function()
{
[SOLVED] Problems with JsonStore/JsonReader (typical??) - Ext JS ::
[SOLVED] Problems with JsonStore/JsonReader (typical??) Ext: Help.
http://extjs.com/forum/showthread.php?t=17102HOME |
// Propiedades privadas:
var ds; // Datastore del grid.
var cm; // Modelo de columna.
var grid; // Componente donde se cargan todos los elementos.
// Metodos privados:
// Decodificación de Datos JSON:
function DecJSON(stringData) {
try {
return(Ext.util.JSON.decode(stringData));
}
catch (err) {
Ext.MessageBox.alert('ERROR', 'Imposible decodificar ' + stringData);
}
};
// Codificación de Datos JSON:
function EncJSON(obj) {
try {
return(Ext.util.JSON.encode(obj));
}
catch(e) {
Ext.MessageBox.alert('ERROR', 'Imposible codificar ' + obj);
}
};
// Creación del datastore:
function SetupDataSource() {
// Creamos el datastore para el grid:
ds = new Ext.data.Store({
// Creamos el http proxy (Enlace al doc php):
//autoload: true,
proxy: new Ext.data.HttpProxy({
url: '../php/app/gridLog.php'
}),
reader: new Ext.data.JsonReader({
root: 'log',
//totalProperty: 'total',
id: 'codigo'
}, [
{name: 'codigo', type: 'integer', mapping: 'codigo'},
{name: 'tipo', type: 'string', mapping: 'tipo'}
//{name: 'fecha', type: 'date', mapping: 'fecha'},
//{name: 'cod_usr', type: 'integer', mapping: 'cod_usr'},
//{name: 'nom_usr', type: 'string', mapping: 'nom_usr'},
//{name: 'lit', type: 'string', mapping: 'lit'}
]),
listeners: {
'load': function () { console.log("load"); }
}
});
}
// Creación del columnModel:
function SetupColumnModel() {
cm = new Ext.grid.ColumnModel([{
id: 'id_CMLog_Codigo',
header: "Código Log",
dataIndex: 'codigo',
width: 50
}, {
id: 'id_CMLog_Tipo',
header: "Tipo",
dataIndex: 'tipo',
width: 75
//},{
//id: 'id_CMLog_Fecha',
// header: "Fecha",
// dataIndex: 'fecha',
// width: 75
//},{
// id: 'id_CMLog_CodUsr',
// header: "Código Usuario",
Plugins and xtype's for the Ext.data package - Ext JS Forums::
JsonReader. So you could listen for metachange either in your grid or store and then .. But what if I used JsonStore in some places, and still want that
http://yui-ext.com/forum/showthread.php?t=56020HOME |
// dataIndex: 'cod_usr',
// width: 100
//},{
// id: 'id_CMLog_NomUsr',
// header: "Nombre Usuario",
// dataIndex: 'nom_usr',
// width: 100
//},{
// id: 'id_CMLog_Lit',
// header: "Descripción",
// dataIndex: 'lit',
// width: 400
}]);
return cm;
}
// Creación del grid:
function CreateGrid() {
var grid = new Ext.grid.GridPanel({
ds: ds,
cm: SetupColumnModel()
//renderTo: 'id_DivCenter'
});
grid.render('id_DivCenter');
// Cargamos los datastores:
ds.load();
}
// Metodos privilegiados:
return {
// Propiedades privilegiads:
// Metodos privilegiados:
Init: function () {
SetupDataSource();
CreateGrid();
}
}
}();
I cannot even see anything in console log.
headers sent by backend (php):
Response Headers
DateSun, 04 Nov 2007 14:59:09 GMTServerApache/2.2.0 (Win32) DAV/2 mod_ssl/2.2.0 OpenSSL/0.9.8a mod_autoindex_color PHP/5.1.1X-Powered-ByPHP/5.1.1Content-Length374Keep-Alivetimeout=5, max=97ConnectionKeep-AliveContent-Typetext/htmlRequest Headers
HostlocalhostUser-AgentMozilla/5.0 (Windows; U; Windows NT 5.1; es-ES; rv:1.8.1.9) Gecko/20071025 Firefox/2.0.0.9Accepttext/xml,application/xml,application/xhtml+xml,text/html;q=0.9,text/plain;q=0.8,image/png,*/*;q=0.5Accept-Languagees-es,es;q=0.8,en-us;q=0.5,en;q=0.3Accept-Encodinggzip,deflateAccept-CharsetISO-8859-1,utf-8;q=0.7,*;q=0.7Keep-Alive300Connectionkeep-aliveX-Requested-WithXMLHttpRequestRefererhttp://localhost/gas/html/app.htmlPragmano-cacheCache-Controlno-cache
Response sent by backend:
{"log":[{"codigo":"1","tipo":"DEBUG"},{"codigo":"2","tipo":"DEBUG"},{"codigo":"3","tipo":"DEBUG"},{"codigo":"4","tipo":"DEBUG"},{"codigo":"5","tipo":"DEBUG"},{"codigo":"6","tipo":"DEBUG"},{"codigo":"7","tipo":"DEBUG"},{"codigo":"8","tipo":"DEBUG"},{"codigo":"9","tipo":"DEBUG"},{"codigo":"10","tipo":"DEBUG"},{"codigo":"11","tipo":"DEBUG"},{"codigo":"12","tipo":"DEBUG"}]}
How can I fire de 'load' or loadexception' event ???
I don´t know why I can´t view data, knowing that is there.
I´m stuck!!!!
"Newbie forever!"
That's correct, the dataIndex is used as an index into the Record to get data for the Column.
So, is it working? How many Records are in the Store.
Why use an ArrayReader on an object which is not an Array? read the docs!
I reproduced it:
["onloadexception", [Object events=Object conn=Object useAjax=true, Object params=Object request=Object reader=Object, Object tId=0 status=200 statusText=OK, 1 more...]]
regards
"Newbie forever"
Hi Animal,
Total number of records 12.
i changed the code and introduced listeners into JsonStore:
this.js = new Ext.data.JsonStore({
url: '../php/app/gridLog.php',
reader: new Ext.data.JsonReader({
root: "log",
id: "codigo"
},[
{name: 'tipo', type: 'string', mapping: 'tipo'}
//{name: 'fecha', type: 'date', mapping: 'fecha'},
//{name: 'cod_usr', type: 'integer', mapping: 'cod_usr'},
//{name: 'nom_usr', type: 'string', mapping: 'nom_usr'},
//{name: 'lit', type: 'string', mapping: 'lit'}
]),
listeners: {
'load': function () {console.log('js.getTotalCount() = '+ this.js.getTotalCount());},
'loadexception': function () {console.log(['loadexception',arguments]);},
'beforeload': function () {console.log("BeforeLoad");}
},
});
I think I have a problem with 'load' and 'loadException' events. They do print nothing into console.log ('beforeload' events prints correctly).
Regars
"Newbie forever"
Firebug stops in line 11360 of ext-all-debug.js.
I send a screenshot to show the point that firefox stopped.
Regards.
"Newbie Forever"
Hi Animal,
New try (forget jsonStore-JSonReader).
I´m using store and Arrayreader Right now. I create an Ext.Ajax.Request first so I can get data into an array.
The code is:
JSON decodification:
function DecJSON(stringData) {
try {
return(Ext.util.JSON.decode(stringData));
}
catch (err) {
Ext.MessageBox.alert('ERROR', 'Imposible decodificar ' + stringData);
}
};
Init: function () {
var arrLog = new Array();
Ext.Ajax.request({
url: '../php/app/gridLog.php',
method: 'POST',
success: function(result, request) {
alert("Resultado obtenido:" +result.responseText);
arrLog = DecJSON(result.responseText);
if (arrLog["log"][0]["codigo"]==-2)
{
// Session timeout: Go to login.html
document.location = '../html/'+arrLog["log"][0]["lit"];
}
else
{
// Do Painting:
//SetupDataSource();
// Creamos el column model:
var cm = new Ext.grid.ColumnModel([{
id: 'id_CMLog_Codigo',
header: "Código Log",
dataIndex: 'codigo',
width: 100
}, {
//id: 'id_CMLog_Tipo',
header: "Tipo",
dataIndex: 'tipo',
width: 75
},{
//id: 'id_CMLog_Lit',
header: "Descripción",
dataIndex: 'lit',
width: 400
}]);
var reader = new Ext.data.ArrayReader({id : 'codigo'}, [
{name: 'codigo', mapping: 'codigo', type: 'int'},
{name: 'tipo', mapping: 'tipo', type: 'string'},
{name: 'lit', mapping: 'lit', type: 'string'}
]);
// Creamos el datastore para el grid:
var ds = new Ext.data.Store({
proxy: new Ext.data.MemoryProxy(arrLog),
reader: reader,
listeners: {
'load': function () { console.log("load"); }, 'loadexception':function(){console.log(['onloadexception',arguments]);}
}
});
//CreateGrid();
var grid = new Ext.grid.GridPanel({
id: 'id_Grid',
ds: ds,
cm: cm,
heigth: 400,
width: 575,
renderTo: 'id_DivCenter'
});
//grid.render('id_DivCenter');
// Cargamos los datastores:
ds.load();
// Found some message about int into forums.
alert("Done");
}
},
failure: function() {
Ext.MessageBox.alert('Failed', result.responseText);
}
});
The result (in JSON notation) looks like:
{"log":[{"codigo":"1","tipo":"CRITICAL","lit":"Prueba 1"},{"codigo":"2","tipo":"DEBUG","lit":"Usuario logueado"},{"codigo":"3","tipo":"DEBUG","lit":"Usuario logueado"},{"codigo":"4","tipo":"DEBUG","lit":"Usuario logueado"},{"codigo":"5","tipo":"DEBUG","lit":"Usuario logueado"},{"codigo":"6","tipo":"DEBUG","lit":"Usuario logueado"},{"codigo":"7","tipo":"DEBUG","lit":"Usuario logueado"},{"codigo":"8","tipo":"DEBUG","lit":"Usuario logueado"},{"codigo":"9","tipo":"DEBUG","lit":"Usuario logueado"},{"codigo":"10","tipo":"DEBUG","lit":"Usuario logueado"},{"codigo":"11","tipo":"DEBUG","lit":"Usuario logueado"},{"codigo":"12","tipo":"DEBUG","lit":"Usuario logueado"},{"codigo":"13","tipo":"DEBUG","lit":"Usuario logueado"},{"codigo":"14","tipo":"DEBUG","lit":"Usuario logueado"},{"codigo":"15","tipo":"DEBUG","lit":"Usuario logueado"},{"codigo":"16","tipo":"DEBUG","lit":"Usuario logueado"},{"codigo":"17","tipo":"DEBUG","lit":"Usuario logueado"},{"codigo":"18","tipo":"DEBUG","lit":"Usuario logueado"},{"codigo":"19","tipo":"DEBUG","lit":"Usuario logueado"},{"codigo":"20","tipo":"DEBUG","lit":"Usuario logueado"},{"codigo":"21","tipo":"DEBUG","lit":"Usuario logueado"},{"codigo":"22","tipo":"DEBUG","lit":"Usuario logueado"}]}
I set "break on all errors" into firebug, but the code continues normally (no stop).
I think that I have a problem with the type of array that I ceate:
arrLog[log][0]['codigo'] = 1
[0]['tipo'] = "DEBUG"
[0]['lit'] = "Prueba 1"
[1]['codigo'] = 2
[1]['tipo'] = "DEBUG"
[1]['lit'] = "Prueba 2"
....
All arrayReader examples that i´ve seen don´t have the "root" element "log".
How can I solve that problem???
Newbie Forever
Solved. At last.
Json info coming from php has to be DECODED before passing it to a jsonreader.
OBJECT != JSON string
thanks Animal
Right. Now see what the problem is.
You are loading the Store before creating the Grid.
The Grid reacts to the Store's events that it fires when it changes. Load it after creating the Grid.
Hi Animal,
You´re correct. I can´t use an ArrayReader to parse an object.
So I tried a mixed solution to see how it results:
Ext.Ajax.Request and obtained json into a jsonreader.
The code is:
var grid, ds, cm, reader2;
Ext.onReady(function() {
var cm = new Ext.grid.ColumnModel([{
id: 'id_CMLog',
header: "Código Log",
dataIndex: 'codigo',
width: 100
}, {
header: "Tipo",
dataIndex: 'tipo',
width: 75
},{
header: "Descripción",
dataIndex: 'lit',
width: 400
}]);
reader2 = new Ext.data.JsonReader({totalProperty: "cont", root: "log",id: "codigo"}, [
{name: 'codigo', type: 'int', mapping: 'codigo'},
{name: 'tipo', type: 'string', mapping: 'tipo'},
{name: 'lit', type: 'string', mapping: 'lit'}
]);
Ext.Ajax.request({
url: '../php/app/test.php',
method: 'POST',
text: 'Obteniendo datos...',
success: function(result, request) {
datos2 = result.responseText;
ds = new Ext.data.Store({
proxy: new Ext.data.MemoryProxy(datos2),
reader: reader2,
nocache: true
});
// Create grid
grid = new Ext.grid.GridPanel({
id: 'id_Grid',
ds: ds,
cm: cm,
heigth: 400,
width: 575,
title: 'Visualizador Log',
renderTo: document.body
});
ds.load();
alert('OK');
},
failure: function(result, request) {
Ext.MessageBox.alert('Failed', result.responseText);
}
});
});
The string that I obtain via responseText (from php backend looks like):
{"cont":1, "log":[{"codigo":"33", "tipo":"DEBUG", "lit":"Prueba1"}]}
This string is encoded in JSON notation so, I used a JsonReader to read it.
I set firebug in "break on all errors" and the code stops in ext-all-debug.js line 11292:
root=this.getRoot(o), c=root.length, totalrecords=c, success=true
At that moment the vars are defines in watch view as:
Var Name value
-------------- ------------
o Same as responseText with nrn attached in the final part.
root Undefined.
c Undefined.
success Undefined.
this.ef Contains 3 array [0] [1] [2] each one defined as function().
When I try to continue debugging (F11 in the above line) The debugger goes to line 11050
result=reader.readRecords(this.data);, and after that enters into de catch(e) part and fires loadException.
I think that the problem is with the root var ("log").
I don´t know how to solve that.
"Newbie forever"
You've got to see what the error is. It's throwing an exception somewhere. Set "Break on all errors" in Firebug.
Hi Animal,
Last one without error (changed type='integer' to 'string' in store. With that change script goes correctly and fires "load" listener (still doesn´t visualize any data).
In the previous one, i think the error was:
function loadResponse(11116) --> ext-all-debug.js
responseText(test=OK 200 ......)
onloadexception ....... [1 more ...]
looks exceptional, but i can´t reproduce the exception ???
dead road?
It stops there? With what error? What's f? If defined, what's f.name?
Hi Animal,
I checked your posts and i changed my code:
Ext.namespace('Ext.gas');
Ext.gas.CAppGrid = function()
{
// Propiedades privadas:
// Metodos privados:
// Decodificación de Datos JSON:
function DecJSON(stringData) {
try {
return(Ext.util.JSON.decode(stringData));
}
catch (err) {
Ext.MessageBox.alert('ERROR', 'Imposible decodificar ' + stringData);
}
};
// Codificación de Datos JSON:
function EncJSON(obj) {
try {
return(Ext.util.JSON.encode(obj));
}
catch(e) {
Ext.MessageBox.alert('ERROR', 'Imposible codificar ' + obj);
}
};
// Metodos privilegiados:
return {
// Propiedades privilegiads:
js: null, // JSonstore.
cm: null, // Column Model.
gridLog: null, // Datagrid visualización Log.
// Metodos privilegiados:
CreateGridLog : function() {
this.js = new Ext.data.JsonStore({
url: '../php/app/gridLog.php',
reader: new Ext.data.JsonReader({
root: "log",
id: "codigo"
},[
{name: 'tipo', type: 'string', mapping: 'tipo'},
{name: 'fecha', type: 'date', mapping: 'fecha'},
{name: 'cod_usr', type: 'integer', mapping: 'cod_usr'},
{name: 'nom_usr', type: 'string', mapping: 'nom_usr'},
{name: 'lit', type: 'string', mapping: 'lit'}
])
});
this.cm = new Ext.grid.ColumnModel([{
id: 'id_CMLog_Tipo',
header: "Tipo",
dataIndex: 'tipo',
width: 75
},{
id: 'id_CMLog_Fecha',
header: "Fecha",
dataIndex: 'fecha',
width: 75
},{
id: 'id_CMLog_CodUsr',
header: "Código Usuario",
dataIndex: 'cod_usr',
width: 100
},{
id: 'id_CMLog_NomUsr',
header: "Nombre Usuario",
dataIndex: 'nom_usr',
width: 100
},{
id: 'id_CMLog_Lit',
header: "Descripción",
dataIndex: 'lit',
width: 400
}]);
// Creamos el gridPanel:
this.gridLog = new Ext.grid.GridPanel({
store: this.js,
cm: this.cm,
height: 400
});
this.gridLog.render('id_DivCenter');
this.js.load();
// Check js:
js.on('load', function(store, records, options){
alert('js.getTotalCount() = '+ js.getTotalCount());
});
},
CreateEditGrid: function() {
},
Init: function () {
try {
this.CreateGridLog();
}
catch(e) {
alert('Error: "' + e.message + '" en linea: ' + e.lineNumber);
};
}
}
}();
Ext.onReady(Ext.gas.CAppGrid.Init, Ext.gas.CAppGrid, true);
- Alert tells me: 12.
- In my case, cm.dataindex == ds.name. (Thats what your second post means?)
Regards
"Newbie Forever"
 Nortel Unveils Vision, Strategy for Israeli High-Performance Net
 Busy Friday Leads to Strong Close for Net Stocks |
PRINT
Add to favorites