PDA

View Full Version : JsonRenderer



mdissel
29 Jul 2008, 1:12 AM
I'm developing an application that mainly communicates with the backend using json. I've created this JsonRenderer that i'm using as default renderer in all the Ext.Panel instances..

if the responseheader contains json it assumes the result is a xtype based json string that will be loaded into the container. If not json it will just call the default el.update(..)


Ext.namespace('Ext.ux');
Ext.ux.JsonRenderer = function(){};
Ext.ux.JsonRenderer.prototype = {
/**
* This is called when the transaction is completed and it's time to update the element - The JsonRenderer
* tries to encode the responseText and call pnl.add(..), if an error occurs at assume the responseText is html
* @param {Ext.Element} el The element being rendered
* @param {Object} response The XMLHttpRequest object
* @param {Updater} updateManager The calling update manager
* @param {Function} callback A callback that will need to be called if loadScripts is true on the Updater
*/
render: function(el, response, updateManager, callback) {
var responseText = response.responseText;
responseText = responseText.trim();
if (response.getResponseHeader['Content-Type'].indexOf('json') > -1) {
// response is JSON
// clear loading text
el.dom.innerHTML = '';
var data = Ext.util.JSON.decode(responseText);
var pnl = response.argument.options.container || response.argument.scope;
if (pnl.add) {
pnl.add(data);
pnl.doLayout();
}
if (callback) {
callback(data);
}
} else {
// response is HTML, call regular update
el.update(response.responseText, updateManager.loadScripts, callback);
}
}
}
Ext.ux.JsonRenderer.instance = new Ext.ux.JsonRenderer();

stranieroinpatria
4 Jun 2010, 3:37 AM
Thank's mdissel for your help.I think It can be extremely useful but as seen in others posts I'm not the only one that haven't understood how implement the render that you've written.
This is my "experiment": :D



Ext.namespace('Ext.ux');
Ext.ux.JsonRenderer = function(){};
Ext.ux.JsonRenderer.prototype = {
/**
* This is called when the transaction is completed and it's time to update the element - The JsonRenderer
* tries to encode the responseText and call pnl.add(..), if an error occurs at assume the responseText is html
* @param {Ext.Element} el The element being rendered
* @param {Object} response The XMLHttpRequest object
* @param {Updater} updateManager The calling update manager
* @param {Function} callback A callback that will need to be called if loadScripts is true on the Updater
*/
render: function(el, response, updateManager, callback) {
alert('Funzione render');
var responseText = response.responseText;
responseText = responseText.trim();
if (response.getResponseHeader['Content-Type'].indexOf('json') > -1) {
// response is JSON
// clear loading text
el.dom.innerHTML = '';
var data = Ext.util.JSON.decode(responseText);
var pnl = response.argument.options.container || response.argument.scope;
if (pnl.add) {
pnl.add(data);
pnl.doLayout();
}
if (callback) {
callback(data);
}
} else {
// response is HTML, call regular update
el.update(response.responseText, updateManager.loadScripts, callback);
}
}
}
Ext.ux.JsonRenderer.instance = new Ext.ux.JsonRenderer();


function buildPanel(json){

var panel = new Ext.Panel({
renderTo: Ext.getBody(),
autoLoad: json.panel,
render: Ext.ux.JsonRenderer
});
panel.show();
panel.doLayout();
};

Ext.Ajax.request({
url: '/ws/autoloadV2',
success: function(r) {

var jsonData = Ext.decode(r.responseText);
buildPanel(jsonData);
}
});


And this is the json in r.responseText(with firebug):



{panel:[{
title: 'My Panel',
width: 463,
autoHeight: true,
renderTo: Ext.getBody(),
items : [
{
xtype: 'tabpanel',
activeTab: 0,
height: 290,
items: [
{
xtype: 'panel',
title: 'Tab 1'
},
{
xtype: 'panel',
title: 'Tab 2'
},
{
xtype: 'panel',
title: 'Tab 3'
}
]
}, {
xtype: 'progress',
value: 0.4,

},
]
}]}



It is an extremely simple example but I know that it doesn't work because the alert that I've inserted in the render is not displayed,so the function is not called.
How can I correctly implement your version?Thank's for your help!!

stranieroinpatria
4 Jun 2010, 5:31 AM
This thread is linked to this one:
http://www.extjs.com/forum/showthread.php?42562-JsonRenderer

Thank's mdissel for your help.I think It can be extremely useful but as seen in others posts I'm not the only one that haven't understood how implement the render that you've written.
This is my "experiment"::D
Here the render:


Ext.namespace('Ext.ux');
Ext.ux.JsonRenderer = function(){};
Ext.ux.JsonRenderer.prototype = {
/**
* This is called when the transaction is completed and it's time to update the element - The JsonRenderer
* tries to encode the responseText and call pnl.add(..), if an error occurs at assume the responseText is html
* @param {Ext.Element} el The element being rendered
* @param {Object} response The XMLHttpRequest object
* @param {Updater} updateManager The calling update manager
* @param {Function} callback A callback that will need to be called if loadScripts is true on the Updater
*/
render: function(el, response, updateManager, callback) {
alert('Funzione render');
var responseText = response.responseText;
responseText = responseText.trim();
if (response.getResponseHeader['Content-Type'].indexOf('json') > -1) {
// response is JSON
// clear loading text
el.dom.innerHTML = '';
var data = Ext.util.JSON.decode(responseText);
var pnl = response.argument.options.container || response.argument.scope;
if (pnl.add) {
pnl.add(data);
pnl.doLayout();
}
if (callback) {
callback(data);
}
} else {
// response is HTML, call regular update
el.update(response.responseText, updateManager.loadScripts, callback);
}
}
}
Ext.ux.JsonRenderer.instance = new Ext.ux.JsonRenderer();

});
Then I request the json to the server and build the panel(how about the use of the render?)



function buildPanel(json){

var panel = new Ext.Panel({
renderTo: Ext.getBody(),
autoLoad: json.panel,
render: Ext.ux.JsonRenderer
});
panel.show();
panel.doLayout();
};

Ext.Ajax.request({
url: '/ws/autoloadV2',
success: function(r) {

var jsonData = Ext.decode(r.responseText);
buildPanel(jsonData);
}
});
And this is the json in r.responseText(with firebug):




{panel:[{
title: 'My Panel',
width: 463,
autoHeight: true,
renderTo: Ext.getBody(),
items : [
{
xtype: 'tabpanel',
activeTab: 0,
height: 290,
items: [
{
xtype: 'panel',
title: 'Tab 1'
},
{
xtype: 'panel',
title: 'Tab 2'
},
{
xtype: 'panel',
title: 'Tab 3'
}
]
}, {
xtype: 'progress',
value: 0.4,

},
]
}]}


It is an extremely simple example but I know that it doesn't work because the alert that I've inserted in the render is not displayed,so the function is not called.
How can I correctly implement this version?Thank's for your help!!

mdissel
5 Jun 2010, 5:38 AM
You're using the renderer in the wrong way.. Just specify an url for the autoLoad property and the result of the url is the json containing the child components. The panel component will automatically start an ajax request, the result is parsed by the JsonRenderer resulting and added to the panel..


function buildPanel(){

var panel = new Ext.Panel({
renderTo: Ext.getBody(),
autoLoad: '/ws/autoloadV2',
render: Ext.ux.JsonRenderer
});
panel.show();
};
buildPanel()