PDA

View Full Version : Problem with paging toolbar & XmlHttpRequest



kathy_s
6 Dec 2011, 5:03 AM
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
6 Dec 2011, 5:08 AM
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
6 Dec 2011, 6:34 AM
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
6 Dec 2011, 1:46 PM
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
16 Dec 2011, 1:57 AM
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
16 Dec 2011, 8:34 AM
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.