I am trying to find out the totalcount to disable button based on this.
First time i am trying out with ext.js,Let me know if i am going wrong.
Just i need is to get the totalcount ofdata
Here is my code
Ext.define('MyTeckno.view.Users', {
extend : 'Ext.grid.Panel',
initComponent : function() {
var me = this;
me.store = Ext.create('Ext.data.Store',{
callback : me,
proxy : {
type: 'ajax',
url : 'users.json',
pageSize: 25,
reader: {
type: 'json',
root: 'results.records',
totalProperty: 'totalCount',
successProperty: 'success'
}
},
fields : [
'userid', 'name', 'email', 'phone'
],
tools: [
{
xtype: 'checkbox',
itemId: 'showAllCheckbox',
boxLabel: 'Show All',
listeners: {
change: {
fn: me.onShowAllChange,
scope: me
}
}
}
],
listeners : {
beforeload : {
fn : me.onUserStoreBeforeLoad,
scope : me
}
}
});
columns: [
{ text: 'Name', dataIndex: 'name' },
{ text: 'Email', dataIndex: 'email', flex: 1 },
{ text: 'Phone', dataIndex: 'phone' }
];
dockedItems: [{
xtype: 'pagingtoolbar',
store: me.store, // same store GridPanel is using
dock: 'bottom',
displayInfo: true
}];
me.callParent(arguments);
me.store.load();
},
onUserStoreBeforeLoad: function(store, operation, options) {
var me = this;
//If showall is checked set the totalcount if not set the default 25
// Assumption is that you are getting the totalCount as for the firstload
var isShowAll = me.down('#showAllCheckbox').getValue();
if(isShowAll) {
store.pageSize = store.totalCount;
}
else {
store.pageSize = 25;
}
},
//Change event on showall checkbox, just call the store.load() to reload the store
onShowAllChange: function() {
var me = this;
me.store.load();
}
});
Assume that another call to your server to get the totalCount and set it to the pageSize
Can any one help me on this please
Yes, the store.totalCount property has the total of records returned on the last request. But I believe this is not the right approach. Here's what doc says about pagingtoolbar:
As the number of records increases, the time required for the browser to render them increases. Paging is used to reduce the amount of data exchanged with the client. Note: if there are more records/rows than can be viewed in the available screen area, vertical scrollbars will be added.
Paging is typically handled on the server side (see exception below). The client sends parameters to the server side, which the server needs to interpret and then respond with the appropriate data.
Ext.toolbar.Paging is a specialized toolbar that is bound to a Ext.data.Store and provides automatic paging control. This Component loads blocks of data into the store by passing parameters used for paging criteria.
Knowing this, do you agree that it does not make much sense to change the pageSize with the amount of data coming in the last request? This amount may be out of date if changes have occurred since the last request.
It would be more interesting to adapt the serverside, returning all the data when the checkbox is checked, or following the pagination (parameters start and limit).
I created this fiddle to exemplify: Extjs Grid Pagination.
Also take a look at the file Data/users.json.
Here's what doc says about store.pageSize property:
The number of records considered to form a 'page'. This is used to power the built-in paging using the nextPage and previousPage functions when the grid is paged using a Ext.toolbar.Paging Defaults to 25.
To disable paging, set the pageSize to 0.
The proxy.setExtraParam adds the parameter to the proxy. This causes the parameter to be sent wherever the store loads.
Extjs code:
var store = Ext.create('Ext.data.Store',{
pageSize: 10,
//pageSizeDefault avoid a hardcode below (line 49)
pageSizeDefault: 10,
proxy : {
type: 'ajax',
url : 'users.json',
reader: {
type: 'json',
rootProperty: 'root',
totalProperty: 'totalCount', //<= This should be returned from the backend
successProperty: 'success'
}
},
fields : [
'userid', 'name', 'email', 'phone'
],
listeners: {
load: function(store){
console.log('totalCount => ', store.getTotalCount());
}
}
});
var grid = Ext.create('Ext.grid.Panel', {
store: store,
title: 'Teste',
autoLoad: true,
tools: [
{
xtype: 'checkbox',
itemId: 'showAllCheckbox',
boxLabel: 'Show All',
listeners: {
change: {
fn: function(field, newValue, oldValue, eOpts) {
var store = field.up('grid').getStore();
//If showall is checked set the totalcount if not set the default 25
// Assumption is that you are getting the totalCount as for the firstload
if(newValue) {
store.setPageSize(0);
store.getProxy().setExtraParam('limit', 0);
}else {
store.setPageSize(store.pageSizeDefault);
store.getProxy().setExtraParam('limit', store.pageSizeDefault);
}
store.reload();
}
}
}
}
],
columns: [
{ text: 'Name', dataIndex: 'name', flex: 3},
{ text: 'Email', dataIndex: 'email', flex: 1 },
{ text: 'Phone', dataIndex: 'phone' }
],
dockedItems: [{
xtype: 'pagingtoolbar',
store: store, // same store GridPanel is using
dock: 'bottom',
displayInfo: true,
items:[
{
xtype: 'button',
handler: function(){
alert('click');
}
}
]
}]
});
var wnd = Ext.create('Ext.window.Window',{
layout:'fit',
maximized: true,
title: 'Example of pagination'
}).show();
wnd.add(grid);
Backend code example:
var data = [
{userid: "1", name: "user1", email: "[email protected]", phone: "+55999999991"},
{userid: "2", name: "user2", email: "[email protected]", phone: "+55999999992"},
{userid: "3", name: "user3", email: "[email protected]", phone: "+55999999993"},
{userid: "4", name: "user4", email: "[email protected]", phone: "+55999999994"},
{userid: "5", name: "user5", email: "[email protected]", phone: "+55999999995"},
{userid: "6", name: "user6", email: "[email protected]", phone: "+55999999996"},
{userid: "7", name: "user7", email: "[email protected]", phone: "+55999999997"},
{userid: "8", name: "user8", email: "[email protected]", phone: "+55999999998"},
{userid: "9", name: "user9", email: "[email protected]", phone: "+55999999999"},
{userid: "10", name: "user10", email: "[email protected]", phone: "+55999999910"},
{userid: "11", name: "user11", email: "[email protected]", phone: "+55999999911"},
{userid: "12", name: "user12", email: "[email protected]", phone: "+55999999912"},
{userid: "13", name: "user13", email: "[email protected]", phone: "+55999999913"},
{userid: "14", name: "user14", email: "[email protected]", phone: "+55999999914"},
{userid: "15", name: "user15", email: "[email protected]", phone: "+55999999915"},
{userid: "16", name: "user16", email: "[email protected]", phone: "+55999999916"},
{userid: "17", name: "user17", email: "[email protected]", phone: "+55999999917"},
{userid: "18", name: "user18", email: "[email protected]", phone: "+55999999918"},
{userid: "19", name: "user19", email: "[email protected]", phone: "+55999999919"},
{userid: "20", name: "user20", email: "[email protected]", phone: "+55999999920"}
];
var totalCount = data.length;
if(params.limit > 0){
data = data.slice(params.start, params.start + params.limit);
}
return {success: true, root: data, totalCount: totalCount};
To conclude, I would like to mention some observations that I think are important. I know you are starting with Extjs so please understand as a positive review:
store.pageSize property however, I used store.getPageSize() method instead of directly accessing the property. The same goes for store.getTotalCount().pagingtoolbar is precisely to reduce the amount of information carried, consequently reducing the time and computational consumption?onUserStoreBeforeLoad method, a property of the store is changed according to the value of the checkbox. It's interesting to analyze which component depends more on the other to know where to put the code. In this case, the checkbox changes the behavior of the store. This snippet could be inside the checkbox change method. In the current form, you would still need to remove the onUserStoreBeforeLoad method but, as suggested, deleting this component would not affect the code. It was clear?Hope this helps.