PDA

View Full Version : load sore and grid with data returned from ajax request



mohaskuar
23 Jan 2014, 1:15 AM
Ext.Ajax.request({
url: 'data/report/QueryPr.php',
method: 'POST',
params: {
query:query,sdate: sdate,stime:stime,edate:edate,etime:etime,link:link
},
jsonData: arr,
success:function(response,opts){
var jsonData = Ext.decode(response.responseText);
if(jsonData.failureMessage){
Ext.Msg.show({
title: 'STOP',
msg: jsonData.failureMessage,
icon: Ext.Msg.INFO,
minWidth: 200,
buttons: Ext.Msg.OK
});
}
else{



if(childTab==null){


var newTab= Ext.widget('3002');
glob.tabPanel.add(newTab);
childTab = glob.tabPanel.child( '3002');


}
else{
//doNuthing,the tab is already theire
}

var store=glob.reportThis.getReportProtocolQueryFillStore();

store.loadRawData(response.responseText, true);
glob.tabPanel.setActiveTab(childTab);

}


},
failure: function(failur,opts) {
console.log('woops');
}
});



data is returned from server correctly from the ajax request


response.responseText
also have data nu i cant load it to the store... my new tab will be opened but the grid is not filled with data. to do that i have tried so many choices.....or can i send ... jasonData directly to the store if that is the case..i would have tried some thing like this..



var store=glob.reportThis.getReportProtocolQueryFillStore();
//store.proxy.extraParams.searchId = arr;
store.load({
/*params: {
searchId: arr
},*/
jsonData: arr,
callback: function (records,opration,success) {
console.log("worked");
}
});







please any help is appriciated as always

Farish
23 Jan 2014, 1:28 AM
you can decode the response using Ext.decode() and then use loadData method of the store to load data into it. e.g. if your response has the following structure:


{'failure': '', data: [{}, {}]} // data contains the records which you want to load into your store.

var data = Ext.decode(response.responseText).data;
store.loadData(data);

mohaskuar
23 Jan 2014, 3:58 AM
1. get the data from ajax request.... done.
2.check if tabpanel is opened
3.if tabpanel is not opened
3.1.open tabpanel
3.2.load the store with data @ step 1
3.2 refresh the grid...to desplay data.
4. if tabpanel is opened
4.1 just load the store and refresh the gird
5. finally setActive item the tabpenl.

--I hav tried to decode the data before i load it to the store but still the grid is empity

Farish
23 Jan 2014, 4:00 AM
after loading data into your grid, do:


console.log(store.getRange());

This should display all data in your store. Could it be that there is a problem in mapping (field names) etc? post code of your store, model and grid and also the response which you get.

mohaskuar
23 Jan 2014, 4:20 AM
i have loaded the store.like

var data = Ext.decode(response.responseText).data;
store.loadRawData(data, true);
and

console.log(store.getRange());
display
[]

Farish
23 Jan 2014, 4:35 AM
use loadData not loadRawData! See the documentation (http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.data.Store-method-loadRawData)for the difference.

mohaskuar
23 Jan 2014, 4:58 AM
finally with all your help I managed to load the grid...but how could i do the pagination...the grid desplays all the data with out pagination here is my store


Ext.define('AM.store.report.ProtocolQueryFill', {
extend: 'Ext.data.Store',
model:'AM.model.report.ProtocolQueryFill',
// autoLoad: true,
loadMask: true,
pageSize: 10,
proxy: {

type: 'ajax',
reader: {
type: 'json',
root: 'results',
totalProperty: 'total',
successProperty: 'success'
},
actionMethods:'POST'
},
jsonData: true




});



and the grid


xtype:'gridpanel', title: 'Numerical Representation',
store : 'report.ProtocolQueryFill',
columns : [
{header: 'L', dataIndex: 'L', flex: 1},
{header: 'Pr', dataIndex: 'N', flex: 1},
{header: 'U', dataIndex: 'U', flex: 1},
{header: D', dataIndex: 'D', flex: 1},
].
......

var grid= this.items[0].items[0];
grid.dockedItems=[{
xtype: 'pagingtoolbar',
store: 'report.ProtocolQueryFill',
dock: 'bottom',
displayInfo: true,
displayMsg: 'Displaying topics {0} - {1} of {2}',
emptyMsg: "No topics to display" ,
//pageSize: 10,
}];



the bbar display but pagination is not working please help me

Farish
23 Jan 2014, 11:58 AM
pagination has to be implemented on your backend i.e. when you want to go to 2nd page (with, lets say, page size of 10), your server should send only records 11-20. When you use pagination in your grid and store, and the store sends request to load data, it sends start and limit parameters which you have to check at your backend and send a response accordingly (send only the requested records).

in your case, you are not loading data into the store. if you are loading the data yourself and then using loadData to put it into your store, you also have to send the paging information (start, limit) along with your read request.

mohaskuar
23 Jan 2014, 11:26 PM
how am I suppose to send start and limit to the store?
well for once i can set the extraparam value and load the store with loadData but next time when grid is refreshed or wanted to see next page...I have to POST start +pagesize and limit +pagesize again to the store ......this is not clear for me.

Farish
23 Jan 2014, 11:42 PM
you dont have to send these to the store. IF you were using the store to load data from your backend (which you arent), then the store will send these parameters in the read request itself and at the backend you have to check these and send the desired records.<br><br>In your case, you load data from the backend yourself (not your store and then you use loadData()).<br><br>It would be best if you look at the documentation. you will probably find some example of paging there. that will clear up your confusions.

mohaskuar
26 Jan 2014, 11:46 PM
I cant come up with a good solution for my problem even if i read the documentation.I thought paginMemoryProxy would solve my problem but it didnt happen still......
i have included this in my index.html


<script type="text/javascript" src="../extjs/ux/data/PagingMemoryProxy.js"></script>

and store modified like this

Ext.define('AM.store.report.ProtocolQueryFill', {
extend: 'Ext.data.Store',
model:'AM.model.report.ProtocolQueryFill',
// autoLoad: true,
loadMask: true,
pageSize: 10,
proxy: {

type: 'pagingmemory', enablePaging: true,
reader: {
type: 'json',
root: 'results',
totalProperty: 'total',
successProperty: 'success'
},
//actionMethods:'POST'
},
jsonData: true,


});

@this time am hopless.I dnt knw wht to do.

Farish
26 Jan 2014, 11:56 PM
you do not need to change your type of proxy. you can use an ajax proxy with paging also. what is going wrong? what do you see? do you get an error? it would be best if you can create a working example on jsfiddle.net and then post the link here. also post the response (JSON) you send back from your backend.

mohaskuar
27 Jan 2014, 12:05 AM
I dnt get any errors the data is displayed in the grid but since am using
store.LoadData();
...the pagination is not working thats my problem.

Farish
27 Jan 2014, 12:09 AM
I already told you that it wont work this way. it will only work if the store is loading data directly but you are loading data from your backend separately and then using loadData() to put it into the store.

When you use only the store to fetch data from your backend, the store send start and limit parameters depending on the page number and page size. you have to read these on your backend and only send the records which fall inside this range.

When you load data directly (e.g. using an ajax request and not directly from the store), then you MUST send these parameters yourself by checking the current page number and page size.

mohaskuar
28 Jan 2014, 6:28 AM
1.ajax request to the server using default start and limit in my case start=1 and limit=10;
2. in my server side I make 2 sql query.
1.for getting the total number of rows//using procedure
2. for gettig the data using start and limit parameters from ajax request.//using procedure
3.server respond with Total number of rows and data
4.then decod and load it to store

var data = Ext.decode(response.responseText);
store.loadRawData(data);//loadData() also possible.
5.add beforload listner to the store


beforeload : function(store, operation, eOpts){
var start=1;
var page=1;
var offset=10;
if(operation.page){
page = operation.page;
limit = page * operation.limit;
start =limit-offset;


}
else{
operation.page=page;
operation.limit=offset;
this.load(1)
}
if(operation.page==1){

getPagination(page,offset);

}
else{
getPagination(start,limit);
}
}
6.getPagination () function will do once again an ajax request to the server using the new start and limit value..
....what i dont like about this solution is that in evry page request i have to make an ajax request to the server and load back to the store....
anyways I hope I will find reasonable solution... but am happy to solve and share my findings also....thanks for very one

Farish
28 Jan 2014, 6:36 AM
glad that you got it working. if you look in the examples, you might find some alternatives to paging like buffered rendering etc. but I havent used them.

Please mark the thread as "Answered"