How to add Paging on Grid Extjs
I am using grid to show data which is working perfectly but now i want to add paging on grid. I have attached screenshot of paging which i want to apply as it is.
I am unable to use paging on my Grid. Please help me to fix this issue. I have attached my full code below
<script type="text/javascript">
Ext.define('User', {
extend: 'Ext.data.Model',
fields: ['name', 'email', 'age']
});
Ext.define('UserStore', {
extend: "Ext.data.Store",
model: 'User',
data: [
{ name: 'Test1', email: 'a@simpsons.com', age: 19 },
{ name: 'Test2', email: 'b@simpsons.com', age: 23 },
{ name: 'Test3', email: 'c@simpsons.com', age: 45 },
{ name: 'Test4', email: 'd@simpsons.com', age: 32 },
{ name: 'Test5', email: 'e@gmail.com', age: 22 },
{ name: 'Test6', email: 'f@gmail.com', age: 23 },
{ name: 'Abh', email: 'g@gmail.com', age: 22 },
{ name: 'Test7', email: 'ashu@gmail.com', age: 29 },
{ name: 'Gt', email: 'Gt@gmail.com', age: 24 },
{ name: 'Mg', email: 'Mg@gmail.com', age: 24 },
]
});
var activityStore = Ext.create('UserStore');
activityStore.load()
Ext.onReady(function () {
Ext.create('Ext.Panel', {
renderTo: Ext.getBody(),
margin: 4,
padding: 4,
width: 400,
title: 'Sample',
buttons: [
{
text: 'Grid', handler: function () {
var model = new Ext.Window(
{
width: 600,
autoScroll: true,
modal: false,
minimizable: true,
maximizable: false,
title: 'Students',
listeners: {
"minimize": function (window, opts) {
window.collapse();
window.setWidth(150);
window.alignTo(Ext.getBody(), 'bl-bl')
}
},
tools: [{
type: 'restore',
handler: function (evt, toolEl, owner, tool) {
var window = owner.up('window');
window.setWidth(600);
window.expand('', false);
window.center();
}
}],
items: [{
xtype: "grid",
store: activityStore,
title: 'Application Users',
columns: [
{
text: 'Name',
width: 100,
align: "center",
sortable: false,
hideable: false,
dataIndex: 'name'
},
{
text: 'Email Address',
width: 150,
sortable: false,
align: "center",
hideable: false,
dataIndex: 'email',
},
{
text: 'Age',
flex: 1,
sortable: false,
hideable: false,
align: "center",
dataIndex: 'age'
}
]
}]
})
model.show();
}
},
]
});
});
</script>
My Output is -:
Solution
If you want paging in grid , we need to add pagination toolbar in grid by giving bbar property of grid.
bbar: Ext.create('Ext.PagingToolbar', {
store: activityStore,
displayInfo: true,
displayMsg: 'Displaying topics {0} - {1} of {2}',
emptyMsg: "No topics to display",
inputItemWidth: 35,
})
And we need to make a paging store as here you are using local data.We need to use PagingMemoryproxy.
Ext.define('UserStore', {
extend: "Ext.data.Store",
model: 'User',
pageSize: 5, // records per page
proxy: {
type: 'memory', // paging memory proxy
enablePaging: true,
data: [
{ name: 'Test1', email: 'a@simpsons.com', age: 19 },
{ name: 'Test2', email: 'b@simpsons.com', age: 23 },
{ name: 'Test3', email: 'c@simpsons.com', age: 45 },
{ name: 'Test4', email: 'd@simpsons.com', age: 32 },
{ name: 'Test5', email: 'e@gmail.com', age: 22 },
{ name: 'Test6', email: 'f@gmail.com', age: 23 },
{ name: 'Abh', email: 'g@gmail.com', age: 22 },
{ name: 'Test7', email: 'ashu@gmail.com', age: 29 },
{ name: 'Gt', email: 'Gt@gmail.com', age: 24 },
{ name: 'Mg', email: 'Mg@gmail.com', age: 24 },
],
}
});
var activityStore = Ext.create('UserStore');
activityStore.loadPage(1); // loading first page
Full Code:(Showing 5 records per page)
Ext.define('User', {
extend: 'Ext.data.Model',
fields: ['name', 'email', 'age']
});
Ext.define('UserStore', {
extend: "Ext.data.Store",
model: 'User',
pageSize: 5,
proxy: {
type: 'memory',
enablePaging: true,
data: [
{ name: 'Test1', email: 'a@simpsons.com', age: 19 },
{ name: 'Test2', email: 'b@simpsons.com', age: 23 },
{ name: 'Test3', email: 'c@simpsons.com', age: 45 },
{ name: 'Test4', email: 'd@simpsons.com', age: 32 },
{ name: 'Test5', email: 'e@gmail.com', age: 22 },
{ name: 'Test6', email: 'f@gmail.com', age: 23 },
{ name: 'Abh', email: 'g@gmail.com', age: 22 },
{ name: 'Test7', email: 'ashu@gmail.com', age: 29 },
{ name: 'Gt', email: 'Gt@gmail.com', age: 24 },
{ name: 'Mg', email: 'Mg@gmail.com', age: 24 },
],
}
});
var activityStore = Ext.create('UserStore');
activityStore.loadPage(1);
Ext.onReady(function () {
Ext.create('Ext.Panel', {
renderTo: Ext.getBody(),
margin: 4,
padding: 4,
width: 400,
title: 'Sample',
buttons: [
{
text: 'Grid', handler: function () {
var model = new Ext.Window(
{
width: 600,
autoScroll: true,
modal: false,
minimizable: true,
maximizable: false,
title: 'Students',
listeners: {
"minimize": function (window, opts) {
window.collapse();
window.setWidth(150);
window.alignTo(Ext.getBody(), 'bl-bl')
}
},
tools: [{
type: 'restore',
handler: function (evt, toolEl, owner, tool) {
var window = owner.up('window');
window.setWidth(600);
window.expand('', false);
window.center();
}
}],
items: [{
xtype: "grid",
store: activityStore,
title: 'Application Users',
columns: [
{
text: 'Name',
width: 100,
align: "center",
sortable: false,
hideable: false,
dataIndex: 'name'
},
{
text: 'Email Address',
width: 150,
sortable: false,
align: "center",
hideable: false,
dataIndex: 'email',
},
{
text: 'Age',
flex: 1,
sortable: false,
hideable: false,
align: "center",
dataIndex: 'age'
}
],
bbar: Ext.create('Ext.PagingToolbar', {
store: activityStore,
displayInfo: true,
displayMsg: 'Displaying topics {0} - {1} of {2}',
emptyMsg: "No topics to display",
inputItemWidth: 35,
}),
}]
})
model.show();
}
},
]
});
});
- ExtJS 6.2: Add afterLabelTextTpl Dynamically
- drag and drop functionality for extjs tab panel
- How to apply filter function to paging grid with local(memory) store in ExtJS6?
- PageSize not working on Grid in ExtJS
- How to add Paging on Grid Extjs
- this.proxy is undifened EXT JS paging
- Locally paging on Extjs 5 store of type AJAX
- Not able to implement paging in ExtJS 4 Grid
- Extjs 4.1 Paging bar (Ext.toolbar.Paging) overflow issue
- ExtJS paged combo with remote JSON store. Display selected value with paging
- Paging toolbar on custom component querying local data store
- Override next and previous button paging toolbar sencha extjs 4.1
- paging in grid extjs
- Custom Paging parameters in Extjs4
- ExtJS 4: Ext.grid.Panel Ext.PagingToolbar buttons (first, previous, next, last) not passing start and limit parameters
- Paging issue in ExtJS 4.1
- ExtJS paging grid filters only the first page
- ExtJs 4 Grid Paging
- Return to first page of Extjs 4 grid
- How do I disable tab switching animation?
- Gridpanel lost filter while paging
- Paging toolbar refresh equivalent
- ExtJS 4 - How to disable 'next' & 'last' icons in the paging toolbar when no records present in grid?
- Modify params(query) from Grid Paging next button
- ExtJS Grid Paging: next button is disabled!
- how to allow only positive numbers in numeric filter in grid in extjs
- EXTJS 6.2 Disabled Already Selected Tags in Tag Field
- ExtJS: store, pagingToolbar and PHP session expire
- How to pass additional parameters for paging
- How to add an empty item to ExtJS combobox?