Problem with paging toolbar & XmlHttpRequest

[kathy_s]

Hi,
I'm trying to create a store that loads data in json format from a rest-webservice (written in egl).
When I create the XmlHttpRequest myself, the data is loaded into the grid, but the paging toolbar doesn't work. So now I'm trying to configure a proxy in my data store, but I can't get it working.
Can anybody show me how to create my XmlHttpRequest through a proxy? Or is their another way to solve this? I'm new to extjs so any tips are welcome!



var http = new XMLHttpRequest();
var data = '{"bindingName":"CleanUpFolderSrv","method":"getCleanUpFolders","params":[{"start":0,"limit":null,"SQLwhere":"' + getSearchCriteria() +'","sort":"FOLDERID","dir":"ASC"}]}';
var my_JSON_object = null;

http.open("POST", gs_url, false);
http = setRequestHeaders(http);
http.send(data);

if (http.readyState == 4 && http.status == 200){
my_JSON_object = Ext.decode(http.responseText);
}else{
//TODO
}

clFolderStore = Ext.create('Ext.data.Store', {
data: my_JSON_object.result.rows,
//totalProperty: my_JSON_object.result.results,
autoload: true,
fields: ['ACT', 'FOLDERID', 'OPERATINGSYSTEM', 'CONNECTION', 'CLEANUPFOLDER', 'DELETEFOLDER', 'CLEANUPSUBFOLDER', 'DELETESUBFOLDER', 'HOST', 'FOLDERPATH',
'FILEEXTENSIONS', 'FILEAGEINDAYS', 'DELETEFILESCANVALUE', 'INCUBATEFOLDER', 'COMMENTS' ]
});

//...

//in my datagrid:
bbar: Ext.create('Ext.toolbar.Paging', {
xtype: 'pagingtoolbar',
store: clFolderStore,
displayInfo: true,
pageSize: 25,
displayMsg: 'Displaying record(s) {0} - {1} of {2}',
emptyMsg: "No records to display",
plugins: [new Ext.ux.PageSizePlugin({editable:false, forceSelection:true})]
})

Thanks,
Kathy

[tobiu]

for a XmlHttpRequest, you should use:
http://docs.sencha.com/ext-js/4-0/#!/api/Ext.Ajax

for a store, you do not need it.
a store uses a proxy to load data directly and a reader to convert it.
look at:
http://docs.sencha.com/ext-js/4-0/#!/api/Ext.data.reader.Xml



Ext.define('User', {
extend: 'Ext.data.Model',
fields: ['id', 'name', 'email']
});

var store = Ext.create('Ext.data.Store', {
model: 'User',
proxy: {
type: 'ajax',
url : 'users.xml',
reader: {
type: 'xml',
record: 'user'
}
}
});

[kathy_s]

Thanks for the quick response!

I don't succeed in loading the data in my store with a proxy, so I am using now Ext.ajax.Request.

But how do I get the paging toolbar working?
With a local data store with dummy data , it works automatically.

I need to add the parameters start, limit, sort, dir to every request, but how do I get their values?
How do I map the totalProperty to my_JSON_object.result.results?

[tobiu]

I don't succeed in loading the data in my store with a proxy, so I am using now Ext.ajax.Request.


i really disagree with this approach :) you need to figure out what is not working correcty with loading the store. the chrome development tools are quite good for debugging.

[kathy_s]

Hi Tobias,

I managed to load the data in the store through a Proxy, but I had to extend the Ext.data.proxy object and override the buildurl method to format the jsonstring to the format that the egl webservice expects.
I don't know if this is a clean solution, but it works.

Regards,
Kathy

[skirtle]

Most servers use simple URLs that just need parameters adding on the end:


/user/getgroups?userid=73

If your server needs something more complicated with parameters inside the URL path:


/user/73/getgroups

then overriding buildUrl is the correct way to do it.