Skip to content

Instantly share code, notes, and snippets.

@rattanchauhan
Created June 22, 2023 13:37
Show Gist options
  • Save rattanchauhan/35be74bbdf806f7754f7a46e4cb0b2c4 to your computer and use it in GitHub Desktop.
Save rattanchauhan/35be74bbdf806f7754f7a46e4cb0b2c4 to your computer and use it in GitHub Desktop.
Grid Pagination using in memory store - Extjs 7.6 Modern
// https://fiddle.sencha.com/#view/editor&fiddle/3oce
Ext.application({
name: 'Fiddle',
launch: function () {
var controller = Ext.create('Ext.app.ViewController', {
init: function () {
this.populateStore();
},
populateStore: function () {
var data = [{
'fname': 'Barry',
'lname': 'Allen',
'talent': 'Speedster'
}, {
'fname': 'Oliver',
'lname': 'Queen',
'talent': 'Archery'
}, {
'fname': 'Oliver2',
'lname': 'Queen',
'talent': 'Archery'
}, {
'fname': 'Kara3',
'lname': 'Zor-El',
'talent': 'All'
}, {
'fname': 'Helena4',
'lname': 'Bertinelli',
'talent': 'Weapons Expert'
}, {
'fname': 'Hal5',
'lname': 'Jordan',
'talent': 'Willpower'
}, {
'fname': 'Barry6',
'lname': 'Allen',
'talent': 'Speedster'
}, {
'fname': 'Oliver7',
'lname': 'Queen',
'talent': 'Archery'
}, {
'fname': 'Kara8',
'lname': 'Zor-El',
'talent': 'All'
}, {
'fname': 'Helen9',
'lname': 'Bertinelli',
'talent': 'Weapons Expert'
}, {
'fname': 'Hal10',
'lname': 'Jordan',
'talent': 'Willpower'
}, {
'fname': 'Barry11',
'lname': 'Allen',
'talent': 'Speedster'
}, {
'fname': 'Oliver12',
'lname': 'Queen',
'talent': 'Archery'
}, {
'fname': 'Kara13',
'lname': 'Zor-El',
'talent': 'All'
}, {
'fname': 'Helena14',
'lname': 'Bertinelli',
'talent': 'Weapons Expert'
}, {
'fname': 'Hal15',
'lname': 'Jordan',
'talent': 'Willpower'
}, {
'fname': 'Barry16',
'lname': 'Allen',
'talent': 'Speedster'
}, {
'fname': 'Oliver17',
'lname': 'Queen',
'talent': 'Archery'
}, {
'fname': 'Kara18',
'lname': 'Zor-El',
'talent': 'All'
}, {
'fname': 'Helena19',
'lname': 'Bertinelli',
'talent': 'Weapons Expert'
}, {
'fname': 'Hal20',
'lname': 'Jordan',
'talent': 'Willpower'
}];
var pagingStore = this.getViewModel().getStore('userStore')
pagingStore.getProxy().setData(data);
pagingStore.load();
}
});
var viewModel = Ext.create('Ext.app.ViewModel', {
stores: {
userStore: Ext.create('Ext.data.Store', {
fields: ['fname', 'lname', 'talent'],
pageSize: 3,
proxy: {
type: 'memory',
enablePaging: true,
reader: {
type: 'json'
}
}
})
}
})
Ext.create('Ext.grid.Grid', {
requires: [
'Ext.toolbar.Paging'
],
plugins: {
pagingtoolbar: true
},
title: 'DC Personnel',
viewModel: viewModel,
controller: controller,
bind: {
store: '{userStore}'
},
columns: [{
text: 'First Name',
dataIndex: 'fname',
flex: 1
}, {
text: 'Last Name',
dataIndex: 'lname',
flex: 1
}, {
text: 'Talent',
dataIndex: 'talent',
flex: 1
}],
height: 230,
layout: 'fit',
fullscreen: true
});
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment