ExtJS Paging Grid will not advance - extjs

I am trying to implement a grid with a paging toolbar in ExtJS 5. I get the first page of data, however when advancing the grid will not update new data.
It appears that data.asp page is not being updated with a new starting value to update the .AbsolutePosition property of my recordset. So the grid keeps displaying the 1st page of information.
My code is below...
var gridStore = Ext.create('Ext.data.JSonStore', {
autoLoad: false,
fields: [
{name: 'field1', type: 'int'},
{name: 'field2', type: 'int'}
],
pageSize: 25,
proxy: {
type: 'ajax',
url: 'Data.asp',
reader: {
type: 'json',
rootProperty: 'rows',
totalProperty: 'totalCount',
}
}
});
gridStore.load({
params: {
start: 0,
limit: 25
}
});
grid = Ext.create('Ext.grid.Panel', {
renderTo: 'grid-Spec',
store: gridStore,
columns: [
{text: 'Field 1', width: 10, sortable: true, dataIndex: 'field1'},
{text: 'Field 2', width: 10, sortable: true, dataIndex: 'field2'}
],
height: 100,
width: 20,
selModel: { mode: 'SINGLE' },
dockedItems: [{
xtype: 'pagingtoolbar',
store: gridStore,
dock: 'bottom',
displayInfo: true
}]
});

Your code has some typos, but in general it looks OK.
Problem may lay on server side - when using ajax proxy, you must implement paging on server side. If you have implemented paging on server side, use some developer tools (for example in Chrome) and see if page number is submitted correctly. You should see start/page number in address (eg: http://fiddle.jshell.net/echo/json/?_dc=1410854522824&page=2&start=5&limit=5).
I made fiddle: http://jsfiddle.net/seur2aLx/9/ you can compare your code to mine (note that Ext.ux.data.reader.Json is there only to fake some data for grid).

Related

Locally paging on Extjs 5 store of type ajax

I am working on an app where loading all data from the beginning is not really an inconvenient.
I am getting json data from a server through Ajax, and my store for doing that is pretty simple:
Ext.define('MODIFE.store.CentroBeneficio', {
extend : 'Ext.data.Store',
requires : [
'MODIFE.model.CentroBeneficio'
],
storeId : 'CentroBeneficio',
model : 'MODIFE.model.CentroBeneficio',
page-size: 10,
proxy :{
//type: 'memory',
type: 'ajax',
enablePaging: true,
url: 'http://'+MODIFE.Global.ip+'/CentroBeneficio/GetCentroBeneficios'
},
autoLoad: true
});
This is my model:
Ext.define('MODIFE.model.CentroBeneficio', {
extend: 'Ext.data.Model',
storeId: 'CentroBeneficio',
pageSize: 10,
fields: [
{name:'IdCentroBeneficio', type:'int'},
{name:'CompaniaCodigo', type:'int'},
{name:'codigo', type:'string'},
{name:'description', type:'string'},
{name:'complete_description', type:'string', convert : function(v, record) {return record.data.codigo+' - '+record.data.description;}},
{name:'status', type:'int', convert : function(v, record) {return (record.data.status == 1) ? 'Activo' : 'Inactivo';}},
{name:'name_compania', type:'string'},
{name:'pais', type:'string'},
{name:'IdPais', type:'int'}
]
});
What I would like to achieve is paging the already loaded data. I tried specifying the type to 'memory' which didn't load anything as well as 'pagingmemory', wich caused the browser to die (I don't know why).
I have already the paging bar set up on my view:
{
xtype: 'grid',
id: 'centroBeneficioGrid',
title: getLabelByKey('CentroBeneficio_SearchGridTitle_Listado'),
store: 'CentroBeneficio',
columns: [
{ text: getLabelByKey('CentroBeneficio_SearchColumnGrid_Pais'), dataIndex: 'pais', flex: 2},
{ text: getLabelByKey('CentroBeneficio_SearchColumnGrid_Company'), dataIndex: 'name_compania', flex: 3},
{ text: getLabelByKey('CentroBeneficio_SearchColumnGrid_CentroBeneficio'), dataIndex: 'codigo', flex: 2},
{ text: getLabelByKey('CentroBeneficio_SearchColumnGrid_Descripcion'), dataIndex: 'description', flex: 4},
{ text: getLabelByKey('CentroBeneficio_SearchColumnGrid_Estatus'), dataIndex: 'status', flex: 2}
],
listeners: {
itemdblclick: 'CBSelectedGrid'
},
dockedItems: [{
xtype: 'pagingtoolbar',
store: 'CentroBeneficio',
dock: 'bottom',
displayInfo: true
}],
}
It shows up correctly but it just loads all data on the first page. Thanks in advance.
Paging of already loaded data is achieved with Ext.data.proxy.Memory configured with enablePaging: true. So what you need is to use two stores:
"Remote" store to merely load data from the server side;
Local paging store configured with memory proxy. The data will be loaded from the remote store once it loads itself:
pagingStore.getProxy().setData(remoteStore.getRange());
pagingStore.load();
Full working example: https://fiddle.sencha.com/#fiddle/pim

Infinite Grid only 1 column Issues

Here is the JS fiddle where I just copy pasted the sample example given by ExtJS and Kept only 1 column and that too locked. In this scenario we have 2 errors :
Its making continuous calls to backend till it gets last result. We
can check in fiddler that the calls are getting posted to backend
continously till the last page.
I am not able to scroll(vertical) in grid
Is it bug from ExtJS 4.2.1 Infinite Grid ? is there a solution ?
If we add 1 more column unlocked then its working fine (It will make only 1 request to backend and on scroll it will make next request depending on the scroller position)
Below is the same code :
Ext.onReady(function () {
Ext.define('ForumThread', {
extend: 'Ext.data.Model',
fields: [
'title', 'forumtitle', 'forumid', 'username', {
name: 'replycount',
type: 'int'
}, {
name: 'lastpost',
mapping: 'lastpost',
type: 'date',
dateFormat: 'timestamp'
},
'lastposter', ' ', 'threadid']
});
// create the Data Store
var store = Ext.create('Ext.data.Store', {
id: 'store',
model: 'ForumThread',
//remoteGroup: true,
// allow the grid to interact with the paging scroller by buffering
buffered: true,
leadingBufferZone: 300,
pageSize: 50,
proxy: {
// load using script tags for cross domain, if the data in on the same domain as
// this page, an Ajax proxy would be better
type: 'jsonp',
url: 'http://www.sencha.com/forum/remote_topics/index.php',
reader: {
root: 'topics',
totalProperty: 'totalCount'
}
},
autoLoad: true,
listeners: {
// This particular service cannot sort on more than one field, so if grouped, disable sorting
beforeprefetch: function (store, operation) {}
}
});
var grid = Ext.create('Ext.grid.Panel', {
width: 700,
height: 500,
collapsible: true,
title: 'ExtJS.com - Browse Forums',
store: store,
loadMask: true,
// grid columns
columns: [{
id: 'last',
text: "Last Post",
locked: true,
dataIndex: 'lastpost',
width: 130,
renderer: Ext.util.Format.dateRenderer('n/j/Y g:i A'),
sortable: true,
groupable: false
}],
renderTo: Ext.getBody()
});
});

A million of rows in ExtJS infinite grid (strange effect)

I've made an application with ExtJS infinite grid like this example.
My application receives data from a database.
It worked perfectly with the small amounts of rows (by 100000).
But now a database contains one million of rows. And I observed a strange effect: data are not loaded completely. Each time the grid shows different number of rows (maximum 859176). But I need to load all rows from a database.
Does anybody know how to solve this problem?
My code:
Ext.require ([
'Ext.grid.*',
'Ext.data.*',
'Ext.util.*',
'Ext.grid.plugin.BufferedRenderer'
]);
Ext.onReady(function () {
Ext.define('DoctorsList', {
extend: 'Ext.data.Model',
fields: [
'id', 'fio', 'specialization', 'photo'
],
idProperty: 'id'
});
var store = Ext.create('Ext.data.Store', {
id: 'store',
model: 'DoctorsList',
buffered: true,
pageSize: 100,
proxy: {
type: 'ajax',
url: 'get_doctors.jsp',
reader: {
root: 'data',
totalProperty: 'total'
}
},
autoLoad: true
});
Ext.create('Ext.grid.Panel', {
height: 600,
title: 'Doctor\'s list',
collapsible: true,
store: store,
columns: [
{
text: 'ID',
dataIndex: 'id',
width: 50,
sortable: true
},
{
text: 'Full name',
dataIndex: 'fio',
width: 300,
sortable: true
},
{
text: 'Specialization',
dataIndex: 'specialization',
width: 150,
sortable: true
},
{
text: 'Photo',
dataIndex: 'photo',
width: 100,
sortable: false,
renderer: function(value) {
return '<img width="100" src="images/' + value + '" />';
}
}
],
renderTo: 'doctors-list'
});
});
ADDITION:
Here you can see last request and response to get_doctors.jsp. You can notice there that the field 'total' has number 1005000 but last row has ID 423165. And here is the screen of MS SQL database selection. You can see there that used table has 1005000 rows totally.
ADDITION 2:
This bug appears in Firefox and IE8, but it does not appear in Opera, Google Chrome and Safari.
Thanks!

Extjs not paging correctly

I have incorporated paging into my code.. but my paging doesnt seem to be working correctly.
I am trying to display 3 result perpage.. but it showing all in one page and when you click next it repeating the same results.
Ext.require([
'Ext.data.*',
'Ext.grid.*'
]);
Ext.onReady(function(){
Ext.define('Book',{
extend: 'Ext.data.Model',
fields: [
// set up the fields mapping into the xml doc
// The first needs mapping, the others are very basic
{name: 'Author', mapping: 'ItemAttributes > Author'},
'Title', 'Manufacturer', 'ProductGroup'
]
});
// create the Data Store
var store = Ext.create('Ext.data.Store', {
pageSize: 3,
model: 'Book',
autoLoad: true,
proxy: {
// load using HTTP
type: 'ajax',
url: 'sheldon-2.xml',
// the return will be XML, so lets set up a reader
reader: {
type: 'xml',
// records will have an "Item" tag
record: 'Item',
idProperty: 'ASIN',
totalRecords: '#total'
}
}
});
// create the grid
var grid = Ext.create('Ext.grid.Panel', {
store: store,
columns: [
{text: "Author", flex: 1, dataIndex: 'Author', sortable: true},
{text: "Title", width: 180, dataIndex: 'Title', sortable: true},
{text: "Manufacturer", width: 115, dataIndex: 'Manufacturer', sortable: true},
{text: "Product Group", width: 100, dataIndex: 'ProductGroup', sortable: true}
],
renderTo:'example-grid-group-v3',
width: 540,
height: 200,
// paging bar on the bottom
bbar: Ext.create('Ext.PagingToolbar', {
store: store,
displayInfo: true,
displayMsg: 'Displaying topics {0} - {1} of {2}',
emptyMsg: "No topics to display"
})
});
});
The way it works is, you need to have a program (PHP or ASPX or some similar stuff) on the server that accepts paging information and sends out data in pages. In your case, it is a static XML file which will be returned in it's entirety when requested for. I am not sure if you can have all the data on the client side and still have ExtJS do the paging for you. You might want to do more research on different stores/proxies to find out if that is possible.
Buffered scrolling is another option for you if you want bring in all data from the server and render only the data that is shown currently.
Please move pageSize: 3 line into Ext.PagingToolbar object. Paging is handled on the server side.The client sends parameters to the server side, which the server needs to interpret and then respond with the approprate data. It seems sheldon-2.xml does not support paging and returns all records. See example in Ext.PagingToolbar documentation.

extjs paging not working

I am using extjs to create some rich interfaces but I am having difficulty adding paging to the code. can someone show me how to add paging correctly to this code
Ext.require([
'Ext.data.*',
'Ext.grid.*'
]);
Ext.onReady(function(){
Ext.define('Book',{
extend: 'Ext.data.Model',
fields: [
// set up the fields mapping into the xml doc
// The first needs mapping, the others are very basic
{name: 'Author', mapping: 'ItemAttributes > Author'},
'Title', 'Manufacturer', 'ProductGroup'
]
});
// create the Data Store
var store = Ext.create('Ext.data.Store', {
model: 'Book',
autoLoad: true,
proxy: {
// load using HTTP
type: 'ajax',
url: 'sheldon-2.xml',
// the return will be XML, so lets set up a reader
reader: {
type: 'xml',
// records will have an "Item" tag
record: 'Item',
idProperty: 'ASIN',
totalRecords: '#total'
}
}
});
// create the grid
var grid = Ext.create('Ext.grid.Panel', {
store: store,
columns: [
{text: "Author", flex: 1, dataIndex: 'Author', sortable: true},
{text: "Title", width: 180, dataIndex: 'Title', sortable: true},
{text: "Manufacturer", width: 115, dataIndex: 'Manufacturer', sortable: true},
{text: "Product Group", width: 100, dataIndex: 'ProductGroup', sortable: true}
],
renderTo:'example-grid-group-v3',
width: 540,
height: 200
});
});
You just need to add a paging toolbar to the bbar config of your gridpanel and hook it up to the same store your grid is using. See an example: http://dev.sencha.com/deploy/ext-4.0.7-gpl/examples/grid/paging.html
Something like:
bbar: Ext.create('Ext.toolbar.Paging', {
store: store,
displayInfo: true,
displayMsg: 'Displaying items {0} - {1} of {2}',
emptyMsg: "No items to display"
})

Resources