Remote pagination problem

[Pietro]

Hi all,
i'm not able to get remote paging in my gwt application.
I have a php script that generates a json output. Here is a sample
json output:

{"totale":"15","root":
[{"id":"15","nome":"nome1","admin":"admin1","hosting":"0"},
{"id":"19","nome":"nome2","admin":"admin2","hosting":"0"}]}

The php script is on my pc and I have Apache 2.2.4

Here is my java code:

DataProxy dataProxy = new ScriptTagProxy("http://localhost:80/
myapplication/json.php");
JsonReader reader = new JsonReader(new JsonReaderConfig() {
{
setRoot("root");
setTotalProperty("totale");
setId("id");
}
}, new RecordDef(new FieldDef[] {
new StringFieldDef("nome","nome"),
new StringFieldDef("admin","admin"),
new StringFieldDef("hosting","hosting")
})
);
final Store store = new Store(dataProxy, reader, true);
store.setDefaultSort("nome","DESC");
store.load();
ColumnModel columnModel = new ColumnModel(new ColumnConfig[]{
new ColumnConfig() {
{
setId("idc");
setHeader("Nome");
setDataIndex("nome");
setWidth(420);
setRenderer(new Renderer() {
public String render(Object value,CellMetadata cellMetadata,
Record record, int rowIndex, int colNum, Store store) {
return Format.format("<b><i>{0}</i></b>", new String[]
{(String) value});
}}
);
setCss("white-space:normal;");
}
},
new ColumnConfig() {
{
setId("hg");
setHeader("Hosting");
setDataIndex("hosting");
setWidth(100);
setRenderer(new Renderer() {
public String render(Object value,CellMetadata cellMetadata,
Record record, int rowIndex, int colNum, Store store) {
return Format.format("<b><i>{0}</i></b>", new String[]
{(String) value});
}}
);
//setHidden(true);
}
}
});
columnModel.setDefaultSortable(true);
Grid grid = new Grid("topic-grid", "600px", "300px", store,
columnModel, new GridConfig() {
{
setEnableColLock(true);
setLoadMask(true);
}
});
grid.render();
ExtElement gridFoot = grid.getView().getFooterPanel(true);
PagingToolbar pagingToolbar = new PagingToolbar(gridFoot, store, new
PagingToolbarConfig() {
{
setPageSize(25);
setDisplayInfo(true);
setDisplayMsg("Displaying topics {0} - {1} of {2}");
setEmptyMsg("");
}
});
store.load(new StoreLoadConfig() {
{
setParams(new UrlParam[]{
new UrlParam("start", 0),
new UrlParam("limit", 25)
});
}
});

The grid is shown, but data don't appears.
Any help will be very appreciated.
Thanks in advance,
Pietro

[Sanjiv Jivan]

Is your php app on the same domain as your GWT app? If so you need to use HttpProxy instead of ScriptTagProxy. ScriptTagProxy is useful only when fetching data from another domain, and when this is required the returned Json  format needs to be slightly different (needs to be returned as a callback function).

The remote paging example in the showcase demo gets data from another domain and therefore uses ScriptTagProxy. If you examine the Json returned from the remote server, you'll see that the format includes a callback function.

Sanjiv

[Pietro]

Yes, php script is on the same domain as GWT app. But, when I use
HttpProxy, the situation is the same. The grid is shown but data
doesn't appear.
I've tried to upload php script on another domain and to use
ScriptTagProxy but I'm not able to obtain data shown.
Thanks,
Pietro

[Sanjiv Jivan]

Did you try to get a basic Json / Grid example working? The showcase demo has an example :

http://gwt-ext.googlecode.com/svn/trunk/site/samples/Showcase/Showcase.html#jsonGrid

Sanjiv

[Sanjiv Jivan]

Also make sure that the response type of your Json is text/json.

[Giovanni]

Got the same prob with same scenario using php to generate the json
data.

My humble conclusion is:
> both localhost - different ports - using HttpProxy -> Permission Denied
> both localhost - different ports - using ScriptTagProxy -> store.load() goes in timeout - can understand why/what happenz

im also not so sure about the text/json content-type tbh coz the
output of http://extjs.com/forum/topics-remote.php (Live search
example of combos) seems text/html to me.

/still confused

Giovanni

On Nov 23, 3:52 am, "Sanjiv Jivan" <sanjiv.ji...@gmail.com> wrote:
> Also make sure that the response type of your Json is text/json.
>

> On Nov 22, 2007 6:20 PM, Sanjiv Jivan <sanjiv.ji...@gmail.com> wrote:
>
> > Did you try to get a basic Json / Grid example working? The showcase demo
> > has an example :
>

> >http://gwt-ext.googlecode.com/svn/trunk/site/samples/Showcase/Showcas...
>
> > Sanjiv

[Pietro]

I've tried example at http://gwt-ext.googlecode.com/svn/trunk/site/samples/Showcase/Showcase.html#jsonGrid
but it doesn't work.
Here is my code:

ScriptTagProxy dataProxy = new ScriptTagProxy("http://localhost/mypath/

json.php");
JsonReader reader = new JsonReader(new JsonReaderConfig() {
{

setRoot("data");
setTotalProperty("totale");

}
}, new RecordDef(new FieldDef[]{
new StringFieldDef("nome", "nome"),
new StringFieldDef("admin", "admin"),

new IntegerFieldDef("admin2", "admin2"),
}));

final Store store = new Store(dataProxy, reader, true);

store.load();

//setup column model

ColumnModel columnModel = new ColumnModel(new ColumnConfig[]{
new ColumnConfig() {
{

setHeader("Abbreviation");
setWidth(160);
setSortable(true);
setLocked(false);
setDataIndex("nome");
}
},
new ColumnConfig() {
{
setHeader("Country");
setWidth(75);
setSortable(true);
setDataIndex("admin");
}
},
new ColumnConfig() {
{
setHeader("Area");
setWidth(75);
setSortable(true);
setDataIndex("admin2");
}
}
});

//create and render grid
final Grid grid = new Grid("grid-example-json", "460px", "300px",
store, columnModel);
grid.render();

With HttpProxy seem that the json.php is never reached. When I've
tried with ScriptTagProxy, data doesn't displayed but the script work
(it generates a txt file).
I'm very confusing.
Thanks,
Pietro

[Rubens Inaba]

I might be wrong but try to put store.load();
after your grid.render() statement.
try also store.reload();

Thanks ,
Rubens

[Pietro]

Hi Rubens,
I tried your suggest but I don't had result.
Data grid continue to doesn't appear.
I tried with store.load( ) and store.reload( ).
But, is there anyone that have json grid and/or grid with remote
paging functioning?
Please, help me.

Thanks,
Pietro

[Sanjiv Jivan]

Pietro,
The Json Grid showcase demo has a working example of this. I'm not sure why its not working for you. If you can zip up and send me a simple test case along with the json data that your server is returning I can take a look to see what the problem is.

Sanjiv

[Pietro]

Sanjiv,
I sent you a simple gwt project with my code.
I hope that you'll help me.

Thanks,
Pietro

[Sanjiv Jivan]

Pietro,
I looked at you code. Here's whats happening. You have defined your JsonStore and RecordDef correctly and the Json data is also in the right format. The thing is that you are not requesting this Json data from your the same doamin. Had you been requesting the data from the same domain, you you could have just used HttpProxy pointing to a URL on the same domain that returns this Json data and everything would work fine. Infact I tried using your Json data and placed it under the "public" folder, and used HttpProxy pointing to it and the table displayed fine.

In your case you are retrieving data from another domain and so you need to use ScriptTagProxy. However when using ScriptTagProxy, the Json data returned much be wrapped in a callback function. I have updated the Javadocs of ScriptTagProxy that explains this in detail.

Here is the updated javadoc for ScriptTagProxy. Please read it closely and make the appropriate changes. Let me know if you're still having problems (I tried your sample after making the required changes locally and it works fine).

An implementation of Ext.data.DataProxy that reads a data object from a URL which may be in a domain other than the originating domain of the running page.

Note that if you are retrieving data from a page that is in a domain that is NOT the same as the originating domain of the running page, you must use this class, rather than HttpProxy.

The content passed back from a server resource requested by a ScriptTagProxy is executable JavaScript source code that is used as the source inside a <script> tag.

In order for the browser to process the returned data, the server must wrap the data object with a call to a callback function, the name of which is passed as a parameter by the ScriptTagProxy. Below is a Java example for a servlet which returns data for either a ScriptTagProxy, or an HttpProxy depending on whether the callback name was passed:

 

 boolean scriptTag = false;
 String cb = request.getParameter("callback");
 if (cb != null) {
     scriptTag = true;
     response.setContentType("text/javascript");

 } else {
     response.setContentType("application/x-json");
 }
 Writer out = response.getWriter();
 if (scriptTag) {
     out.write(cb + "(");
 }
 out.print(dataBlock.toJsonString
());
 if (scriptTag) {
   out.write(");");
 }

 
 

Consider the following code :

  RecordDef recordDef = new RecordDef(new FieldDef[]{
             new StringFieldDef("name", "name"), // "mapping" property not needed if it's the same as "name"

             new StringFieldDef("occupation")    // this field will use "occupation" as the mapping.

     });

  JsonReader reader = new JsonReader(new JsonReaderConfig() {
      {

          setTotalProperty("results"); // The property which contains the total dataset size (optional)

          setRoot("rows");             // The property which contains an Array of row objects
          setId("id");                 // The property within each row object that provides an ID for the record (optional)

      }}, recordDef);
 
 

If the data is being server from the same domain, then you don;t need to use ScriptTagProxy but instead need to use HttpProxy pointing to the URL that returns data in the following format :

{ 'results': 2, 'rows': [
     { 'id': 1, 'name': 'Bill', occupation: 'Gardener' },
     { 'id'
: 2, 'name': 'Ben', occupation: 'Horticulturalist' } ]
 }

However if this data is being read from another domain, a couple of things need to be done.
First, you need to use ScriptTagProxy pointing to the external url. For example

 
 ScriptTagProxy proxy = new ScriptTagProxy("http://externalurl:8023/foo/bar.php");
 
 

Now bar.php cannot return standard Json like the one above when using HttpProxy. Instead it needs to wrap the Json data in a callback. This is required when reading data from antoher domain. When the ScriptTagProxy tries for fetch data, it will issue an HTTP request to the specified URL passing the name of the callback function that it needs the results to be wrapped in. For example http://externalurl:8023/foo/bar.php?start=0&limit=25&sort=nome&dir=DESC&_dc=1196661274168& callback=stcCallback1002
Notice the request paramter "callback" has a value of "stcCallback1002" in the above example. This means that the request to http://externalurl:8023/foo/bar.php should return Json data wrapped in the callback funtion "stcCallback1002".

stcCallback1002({ 'results': 2, 'rows': [
     { 'id': 1, 'name': 'Bill', occupation: 'Gardener'
 },
     { 'id': 2, 'name': 'Ben', occupation: 'Horticulturalist' }]);
 }

So for ScriptTagProxy to work, the URL that it is reading data from is responsible to read the "callback" paramter, and wrap the Json data using the name of the passed callback function. By default the name of the callback request parameter is "callback" but you can specify a different one using the constructor ScriptTagProxy(String, int, String).

[Pietro]

Hi Sanjiv,
I've tried your suggest and now it works!!!!!
Thanks very much.

Pietro

[iapostolos]

Hi,

I'm new to ajax and I was wondering if you could give me an example of
the php code required to create such a callback function. I've looked
up several examples on he web and they aren't very thorough, they just
show the principles involved. I have the code to code to create the
Json object I am just unsure how to wrap it in the call back and how
to invoke it correctly.

Help is greatly appreciated.
Thanks. Iain

On Dec 3 2007, 1:25 am, "Sanjiv Jivan" <sanjiv.ji...@gmail.com> wrote:
> Pietro,
> I looked at you code. Here's whats happening. You have defined your
> JsonStore and RecordDef correctly and the Json data is also in the right
> format. The thing is that you are not requesting this Json data from your
> the same doamin. Had you been requesting the data from the same domain, you
> you could have just used HttpProxy pointing to a URL on the same domain that
> returns this Json data and everything would work fine. Infact I tried using
> your Json data and placed it under the "public" folder, and used HttpProxy
> pointing to it and the table displayed fine.
>
> In your case you are retrieving data from another domain and so you need to
> use ScriptTagProxy. However when using ScriptTagProxy, the Json data
> returned much be wrapped in a callback function. I have updated the Javadocs
> of ScriptTagProxy that explains this in detail.
>
> Here is the updated javadoc for ScriptTagProxy. Please read it closely and
> make the appropriate changes. Let me know if you're still having problems (I
> tried your sample after making the required changes locally and it works
> fine).
>
> An implementation of Ext.data.DataProxy that reads a data object from a URL
> which may be in a domain other than the originating domain of the running
> page.
>
> Note that if you are retrieving data from a page that is in a domain that is
> NOT the same as the originating domain of the running page, you must use
> this class, rather than

> HttpProxy<file:///C:/temp/com/gwtext/client/data/HttpProxy.html>.

> HttpProxy<file:///C:/temp/com/gwtext/client/data/HttpProxy.html>pointing

> to the URL that returns data in the following format :
>

> { *'results'*: 2, *'rows'*: [
> { *'id'*: 1, *'name'*: *'Bill'*, occupation: *'Gardener'* },
> { *'id'*: 2, *'name'*: *'Ben'*, occupation: *'Horticulturalist'* } ]

> }
>
> However if this data is being read from another domain, a couple of things
> need to be done.
> First, you need to use ScriptTagProxy pointing to the external url. For
> example
>
> ScriptTagProxy proxy = new
> ScriptTagProxy("http://externalurl:8023/foo/bar.php");
>
> Now bar.php cannot return standard Json like the one above when using
> HttpProxy. Instead it needs to wrap the Json data in a callback. This is
> required when reading data from antoher domain. When the ScriptTagProxy
> tries for fetch data, it will issue an HTTP request to the specified URL
> passing the name of the callback function that it needs the results to be

> wrapped in. For examplehttp://externalurl:8023/foo/bar.php?start=0&limit=25&sort=nome&dir=DE...
> *callback=stcCallback1002*

> Notice the request paramter "callback" has a value of "stcCallback1002" in

> the above example. This means that the request tohttp://externalurl:8023/foo/bar.phpshould return Json data wrapped in the
> callback funtion "stcCallback1002".
>
> *stcCallback1002(*{ *'results'*: 2, *'rows'*: [
> { *'id'*: 1, *'name'*: *'Bill'*, occupation: *'Gardener'* },
> { *'id'*: 2, *'name'*: *'Ben'*, occupation: *'Horticulturalist'* }]*);*

> }
>
> So for ScriptTagProxy to work, the URL that it is reading data from is
> responsible to read the "callback" paramter, and wrap the Json data using
> the name of the passed callback function. By default the name of the
> callback request parameter is "callback" but you can specify a different one
> using the constructor ScriptTagProxy(String, int,

> String)<file:///C:/temp/com/gwtext/client/data/ScriptTagProxy.html#ScriptTagProxy%28java.lang.String,%20int,%20java.lang.String%29>
> .