PDA

View Full Version : filling grid / tree with selfmade functions



q_no
29 Mar 2007, 4:05 AM
Hi all,

I'm new to yui-ext and wondering how to set up own functions that for example fill a grid with new data. I've seen the examples with "new Ext.data.ScriptTagProxy" as proxy, but I haven't found any informations on how to set up a "custom proxy".

My goal is to combine yui-ext with the xajax framework and my idea is to make a JS function that calls xajax on serverside and returns an Array/Object to another function that fills my grid.
The way the examples work with one php script that returns JSON data are pretty simple, but not very usefull for my purposes.

Can anyone paste some lines of code to show how is could be done? The first steps are always the most diffecult ones ;)

Animal
29 Mar 2007, 6:07 AM
You'll be wantnig an HttpProxy to pull data in from a remote server.

If the data returned from the server is in a strange format, then you might want a custom reader, but if it's just an javascript Array that you've encoded on the server in javascript object notation, then an ArrayReader will do.

See the examples and the Wiki for more guidance.

q_no
29 Mar 2007, 6:45 AM
Thanks, that's what I already suppossed.... but, maybe I am totally blind - where can I find an example that shows how to write a new Proxy?

q_no
29 Mar 2007, 10:10 AM
ok, I found an example in another thread that gave me a little advise how to set up a proxy

here is my progress so far




Ext.data.XajaxProxy = function(xajax_function){
Ext.data.XajaxProxy.superclass.constructor.call(this);
};

Ext.extend(Ext.data.XajaxProxy, Ext.data.DataProxy, {

load : function(params, reader, callback, scope, arg){

if(this.fireEvent("beforeload", this, params) !== false){
var response = xajax.call('testfunction', {parameters:[params],mode:'synchronous'});
callback.call(scope, response, arg, true);
}else{
callback.call(scope||this, null, arg, false);
}
},

update : function(dataSet){

},

updateResponse : function(dataSet){

}
});


So, the call var response = xajax.call('testfunction', {parameters:[params],mode:'synchronous'}); returns a JSON encoded array containing the data, but it doesn't really work.
Firebug tells me that the xajax request is fired 5 times and then FireFox stops with an error


[Exception... "'[object Object]' when calling method: [nsIDOMEventListener::handleEvent]" nsresult: "0x8057001c (NS_ERROR_XPC_JS_THREW_JS_OBJECT)" location: "<unknown>" data: no]


Can someone tell me what is wrong with my class?

tryanDLS
29 Mar 2007, 10:41 AM
What is xajax? Is it a global var you instantiated someplace? Before even trying to build a clas to wrap it, does it work by itself?
If so, you should be able to just write


var xajax = ....

var response = xajax.call('testfunction', {parameters:['a','b','c'],mode:'synchronous'});
alert (response);

q_no
29 Mar 2007, 10:43 AM
xajax is the xajax class and as I wrote above, the requests are working, but fired 5times.

tryanDLS
29 Mar 2007, 10:57 AM
Well if that's all the code you post, the only suggestion is start setting BPs in Firebug. Did you actually go thru load and your callback 5 times? How is your class making a synchronous call and preventing execution of the callback until it's done?

q_no
30 Mar 2007, 3:58 AM
Well if that's all the code you post, the only suggestion is start setting BPs in Firebug. Did you actually go thru load and your callback 5 times? How is your class making a synchronous call and preventing execution of the callback until it's done?

xajax can call serverscripts synchronous and asynchronous - asynchronous is the default value. Unfortunately the current version of xajax is still beta and the synchronous calls don't really work in FireFox - that caused my function to load 5times in a row.

my current script looks like this:



Ext.data.XajaxProxy = function(xajax_function){
Ext.data.XajaxProxy.superclass.constructor.call(this);
};

Ext.extend(Ext.data.XajaxProxy, Ext.data.DataProxy, {


load : function(params, reader, callback, scope, arg){

if(this.fireEvent("beforeload", this, params) !== false){
xajax.call('testfunction', {responseProcessor: this.xajaxResponse, myEventParameter:{params:params, callback:callback, scope:scope, arg:arg,reader:reader},parameters:[params]});
}else{
callback.call(scope||this, null, arg, false);
}
},

xajaxResponse: function (oRequest)
{
var result = oRequest.request.responseText;;
xajax.completeResponse(oRequest);
oRequest.myEventParameter.callback.call(oRequest.myEventParameter.scope, result, oRequest.myEventParameter.arg, true);

},

doneLoading: function(new_response) {
response = new_newsponse;
},

update : function(dataSet){
},

updateResponse : function(dataSet){

}
});


So, the xajax call itself works fine, but now (I guess it is the reader) I get an error message that says:



r has no properties
[Break on this error] Ext.data.Store=function(_1){this.data=new Ext.util.MixedCollection(false);this.d...


My response is a string containg the results from http://www.yui-ext.com/forum2/topics-remote.php (for testing purposes).

My reader is the one from the according example script:


reader: new Ext.data.JsonReader({
root: 'topics',
totalProperty: 'totalCount',
id: 'topic_id'
}, [
{name: 'title', mapping: 'topic_title'},
{name: 'author', mapping: 'username'},
{name: 'totalPosts', mapping: 'topic_replies', type: 'int'},
{name: 'lastPost', mapping: 'post_time', type: 'date', dateFormat: 'timestamp'},
{name: 'lastPoster', mapping: 'user2'},
{name: 'excerpt', mapping: 'post_text'}
]),


So, when I retrieve my server response and call "callback.call" with my response values - what kind of data is Ext.data.JsonReader expecting? A string containing an JSON encoded object, or the object itself?

Animal
30 Mar 2007, 4:33 AM
You appear to be duplicating the HttpProxy. Why don't you use the HttpProxy?

q_no
30 Mar 2007, 4:59 AM
You appear to be duplicating the HttpProxy. Why don't you use the HttpProxy?

I've got already a running application that uses xajax. With HTTPproxy I would need to set up new PHP scripts that return the requested data.

My current approach for this proxy is still very experimental. I'm just trying to understand how a proxy should work ;)

Xajax offers alot of functions to modify any HTML elements/attributes, call js functions and so on. My idea is to keep the orignal xajax behaviour (at the moment I'm using a custom response processor that behaves like the original HTTPproxy but doesn't execute any xajax functions) so that you can still execute any xajax-functions AND assign new values to a grid / tree.

I hope you understand what I mean - if not, tell me :) And I'll try to explain a bit more what I am expecting from an xajax proxy ;)


PS: Atm my script is working and the grid gets filled :) So I only have to find out how to keep the original xajax behavior.

Animal
30 Mar 2007, 6:04 AM
Why would you need new PHP scripts?

The data is processed by the Reader class. The HttpProxy does nothing but make an XMLHttpRequest, and pass the response to the Reader. You appear to be reinventing the wheel.

q_no
30 Mar 2007, 6:22 AM
Why would you need new PHP scripts?

The data is processed by the Reader class. The HttpProxy does nothing but make an XMLHttpRequest, and pass the response to the Reader. You appear to be reinventing the wheel.

I mean the php script that returns the data for the XMLHttpRequest - I don't like to create new scripts that do nothing more than returning data for one purpose.

Tell me if I'm wrong, but from my point of view the HTTPproxy starts a XMLHttpRequest to the server - that could be a static XML file or any serverside script like PHP.
In my case, I need some values from my database. I could create a php script that does nothing more than returning the requested data back to the proxy -> reader or I could:

- assign new contents to other HTML elements
- call some JS functions
- load other xajax function that do something
- query database, return the values to the reader
- open a dialog that tells the user about any changes on the server
- check if the session is still valid (if not, throw error and open login dialog)

....with only one single XMLHttpRequest - that's the main difference between the existing proxy and the one I'm trying to make.

Animal
30 Mar 2007, 7:18 AM
OK, is Xajax some kind of RPC, where you can call a method directly and receive marshalled parameters back?

If so, then you do need a custom Proxy.