Using ExtJS 4.2 - I have an AJAX call populating the store with the entire set of results in JSON format (using loadRawData). I now need to limit the number of results being shown on the grid at a time. End goal is to implement client-side paging. I've tried using pagingmemoryproxy with not much luck.
Ext.define('TestApp.view.TestGrid' , {
extend: 'Ext.grid.Panel',
alias: 'widget.testgrid',
requires:[
'TestApp.store.TestStore'
],
initComponent: function() {
var me = this;
this.store = Ext.create('Ext.data.Store', {
model: 'TestApp.model.TestModel',
proxy: {
type: 'memory',
reader: {
type: 'json'
},
},
pageSize: 20
});
// set the maxRows parameter based on the store's page size
this.maxRows = this.store.pageSize;
this.columns = this.buildColumns();
this.bbar = Ext.create('Ext.PagingToolbar', {
itemId: 'pagingToolbar',
store: this.store,
dock: 'bottom',
displayInfo: true
});
this.callParent();
}
My controller uses the following AJAX call
Ext.Ajax.request({
url: '/testing/test',
method: "POST",
jsonData : requestParams,
timeout: 120000,
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
success: function(response) {
var resp = Ext.decode(response.responseText);
var testStore = testGrid.getStore();
var numResults = response.getAllResponseHeaders().resultlength;
// this successfully loads results into store and populates grid
// with pagingtoolbar displaying page 0 of 0
testStore.loadRawData(resp);
//testStore.loadPage(1);
},
You need to add the pagingtoolbar to the grid.
Basically there are three things you need to do:
1) Add paging toolbar to the grid
2) The store used by the grid should be given the 'pageSize' attribute
3) If using loadrawdata, you need to update the toolbar using after you load it. use the loadPage function for that.
The following topic will get you started: How to manage PagingToolbar in Ext-js 4.2 correctly?
Related
I am creating a dynamic grid (should be paginated) using the data from a POST rest request to server (code below). I am passing the pageid and pagesize to the server during the first request (on load) and it responds back with the appropriate data. I have docked a paging toolbar to grid and now I want to enable pagination on click of next, last etc of the pager. How do I POST a request to server and get back the appropriate data back to reconfigure the grid with the next page's data?
var screenResults = {};
screenResults.pageid =1;
screenResults.pagesize = 10;
screenResults = Ext.JSON.encode(screenResults);
Ext.Ajax.request({
url : 'http://localhost/service/getGridData',
method : 'POST',
timeout: 5000000,
scope: this,
dataType: 'json',
jsonData: screenResults,
success: function(response){
var grid = Ext.getCmp("idSearchResultsGrid");
var gridData = Ext.decode(response.responseText);
var fields = gridData.data.fields;
var newColumns = gridData.data.columns;
var arr = gridData.data.data;
var data = [];
for(var i=0;i<arr.length;i++){
var obj = arr[i].resultsMap;
data.push(obj);
}
var newStore = Ext.create('Ext.data.Store', {
storeId: 'DynamicGridStore',
pageSize:10,
fields: fields,
data: data
/*
proxy: {
type: 'ajax',
url : 'http://localhost/service/getGridData',
method : 'POST',
timeout: 5000000,
jsonData: screenResults,
actionMethods: {
read : 'POST'
}
}
*/
});
//debugger;
/*
globalStore = newStore.load({
params: {
start: 0,
limit: 10
}
});
*/
var pagingBar = Ext.create('Ext.PagingToolbar', {
pageSize: 10,
store: newStore,
dock: 'bottom',
displayInfo: true
});
grid.removeDocked(grid.getDockedItems()[1]);
grid.addDocked(pagingBar);
grid.reconfigure(newStore, newColumns);
},
failure: function(response){
console.log(response);
}
});
},
First of all, you don't need to explicitly do AJAX calls like that. They will be done for you behind the scenes by the store's proxy — provided that the proxy is properly configured (yours is commented out at the moment).
Your task is very trivial and covered by multiple examples. Have a look at this one. Click on Details on the right hand side to see the code.
Also see Ext.toolbar.Paging documentation.
I have a combobox declared inside my grid
header: '<b>Reasons</b>',
width : 150,
editor:
{
xtype: 'combobox',
store: 'reasonstore',
displayField: 'displayText',
valueField: 'value',
queryMode: 'local',
}
and my store is
var reasonstore = Ext.create('Ext.data.Store', {
fields: ['displayText', 'value'],
id : 'resonstoreid'
});
I have done a rest call and got my jsondata in controller
successCallback:function(json){
var mydata = json.reason;
Ext.getCmp('resonstoreid').getStore().loadData(json.reason);
but i m getting Ext.getCmp('resonstoreid') is undefined.
my view is only loading first then the controller.
so how to load this json data from controller to view.
You should use Ext.getStore("xxx") to get a reference to your store! This should solve your problem.
var store = Ext.getStore("resonstoreid");
store.loadData(json.reason);
An other advice
Instead of making a AJAX call, and fill the store with loadData(xxx) use load() function of the store. See here: Ext.data.Store.load
Do to that, your store config should look like this
//create File store/Reasons.js
Ext.define('XYZ.store.Reasons', { //XYZ ... you namespace
extend: 'Ext.data.Store',
fields: ['displayText', 'value'],
id : 'Reasons',
autoLoad: true,
proxy: {
type: 'ajax',
actionMethods: {create: 'POST', read: 'GET', update: 'POST', destroy: 'POST'},
url: 'xxx',
method: 'POST',
reader: {
type: 'json',
root: 'data'
}
}
});
After that, you can do this:
var store = Ext.getStore("Reasons");
store.load(
params: {
group: 3,
type: 'user'
},
callback: function(records, operation, success) {
// do something after the load finishes
},
scope: this
});
The advantage would be a better app structure and that load does the ajax request for you. This is exactly what extjs is great for: Split up the code in many small files which are easy to maintain (code reuse, etc...).
I use EXTJS 4.2.1.
Here is my DATA STORE.
Ext.define("user",{
extend:"Ext.data.Model",
fields:[
{name:'mobile',type:'string',sortable:true},
{name:'name',type:'string',sortable:true},
{name:'month',type:'string',sortable:true},
{name:'city',type:'string',sortable:true},
{name:'mail_number',type:'string',sortable:true}
]
});
var user = Ext.create("user",{});
var ds = Ext.create("Ext.data.Store",{
model:'user',
storeId:'s_user',
pageSize: 20,
proxy:{
type:'ajax',
timeout: 40000,
url:'JSONServlet',
reader:{
type:'json',
root:'rows'
},
writer:{
type:'json'
}
},
autoLoad:false
});
And i add some params where ds loads.
ds.load({
params:{start:0, limit:20,
'type': Ext.getCmp('type').value,
'city': Ext.getCmp('city').value,
'date': Ext.getCmp('date').value,
'date1': Ext.getCmp('date1').value
}
})
I put a pagingtoolbar on the bottom of the grid.
var grid = Ext.create("Ext.grid.Panel",{
...
dockedItems :[{
xtype:'pagingtoolbar',
store:Ext.data.StoreManager.lookup('s_user'),
dock:'bottom',
displayInfo:true
}],
...
store : Ext.data.StoreManager.lookup('s_user')
}
On the first page everything is OK, but when NEXT page is clicked, ds pramas don't POST to server.
I look into the source. I find code like this.
case "next":
ds.load({params:{start: this.cursor+this.pageSize, limit: this.pageSize}});
break;
how to make PAGE NEXT work as i want, I hope someone give me a hint.
If you need that parameters will be included on every request, you can set them in your proxy configuration with extraParams config.
proxy:{
// ...
extraParams: {
'type': Ext.getCmp('type').value,
'city': Ext.getCmp('city').value,
'date': Ext.getCmp('date').value,
'date1': Ext.getCmp('date1').value
}
// ...
},
If value of extra parameters can be changed between request you can set them in listener for store beforeload event by proxy setExtraParam method:
ds.on('beforeload', function() {
var proxy = ds.getProxy();
proxy.setExtraParam('type', Ext.getCmp('type').value);
proxy.setExtraParam('city', Ext.getCmp('city').value);
proxy.setExtraParam('date', Ext.getCmp('date').value);
proxy.setExtraParam('date1', Ext.getCmp('date1').value);
})
Any parameters that will be included on every request should be set on the store's proxy.
What proxy are you using? The ajax proxy has an property "extraParams". Give it a try.
proxy: {
type: 'ajax',
url: '...',
extraParams: {type: '...',city: '...',date: '...',date1: '...'},
...
}
I have a grid panel and i want to get data that i embed in store
My json look like (embed is my embed data)
({"total":"20","results":[{...}], "embed": [{...}] })
How to get embed data in my load function. Thanks
var store = Ext.create('Ext.data.Store', {
model: 'MyDataObject',
autoLoad: true,
pageSize:10,
proxy: {
type: 'ajax',
url: 'data.php',
reader: {
type: 'json',
totalProperty: 'total', // total data
root: 'results'
}
}
,listeners: {
load: function( store, records, successful, eOpts ){
if (successful) {
alert(store.embed) // ?? how to get it
}
}
}
});
The proxy keeps a reference to the rawData property for the most recent load.
console.log(store.getProxy().getReader().rawData.embed);
The below is my MyStore.js:
Ext.define('MyApp.store.MyStore', {
extend: 'Ext.data.Store',
model: 'MyApp.model.Note',
autoLoad: true,
proxy: {
type: 'ajax',
api: {
/* I want to change the following two filepaths */
read: 'data/notesMar2013.json',
update: 'data/notesMar2013.json'
},
reader: {
type: 'json',
root: 'data',
successProperty: 'success'
}
}
});
I am trying to change the read and update values in api of MyStore through controller as follows:
var notesStore = Ext.getStore('MyStore');
notesStore.on('load',function(notesStore){
var proxy = notesStore.getProxy();
Ext.apply(proxy.api,{
/* Changing the file paths here */
read: 'data/notesApr2013.json',
update: 'data/notesApr2013.json'
})
notesStore.load();
},this,{single:false});
//
console.log(notesStore);
By using the above function, I am trying to update MyStore but it is not happening. When I checked in chrome console the values are changed successfully but not updating or overriding the store even I used notesStore.load(). What could be the problem?
I referred the below links
link1
link2
Answer: The code was working fine. Let me explain my problem: I was showing the contents from the store on a container and initially, the container was filled with some content and the height was fixed. If I even add any content to the container then it will become hidden as the container is with fixed height. Till now, the content was being appended to the default content instead of removing the default content and then adding. That was the actual problem.
That should work without any problem, hence you have a error at any other point. Please take a look at the console in this JSFiddle. In here's the test-code I used
Ext.define('MyApp.model.Note',{extend:'Ext.data.Model'});
Ext.define('MyApp.store.MyStore', {
extend: 'Ext.data.Store',
model: 'MyApp.model.Note',
proxy: {
type: 'ajax',
getUrl: function(request) {
console.log('fetched request url');
console.log(this.api[request.action]);
return request.url || this.api[request.action] || this.url;
},
api: {
/* I want to change the following two filepaths */
read: 'data/notesMar2013.json',
update: 'data/notesMar2013.json'
},
reader: {
type: 'json',
root: 'data',
successProperty: 'success'
}
}
});
var store = Ext.create('MyApp.store.MyStore');
console.log('The origin API');
console.log(store.getProxy().api);
store.load();
var proxy = store.getProxy();
var newApi = {read: 'data/2013.json', update: 'data/2013.json' };
Ext.apply(proxy.api,newApi);
console.log('The changed API');
console.log(store.getProxy().api);
store.load();