Pagination is not working and my console is showing "Uncaught ReferenceError: store is not defined", I don't know where I am doing wrong.
I'm using eclipse for the development.
Below is my code please guide me I am new in ExtJS.
js_ext.js
Ext.onReady(function() {
var itemsPerPage = 6;
Ext.create('Ext.data.Store', {
storeId: 'mydata',
fields:[ 'title', 'desc', 'year', 'lang', 'name', 'rate', 'special'],
pageSize: itemsPerPage,
autoLoad: true,
proxy:{
type:'ajax',
url: 'mystoredata.js',
enablePaging: true,
reader: {
type: 'json',
rootProperty: 'items'
}
},
});
Ext.create('Ext.grid.Panel', {
title: 'Movie Grid',
store: 'mydata',
columns: [
{ text: 'Title', dataIndex: 'title', flex: .2 },
{ text: 'Description', dataIndex: 'desc', flex: 1 },
{ text: 'Release Year', dataIndex: 'year' },
{ text: 'Language', dataIndex: 'lang' },
{ text: 'Director', dataIndex: 'name' },
{ text: 'Rating', dataIndex: 'rate' },
{ text: 'Special Features', dataIndex: 'special', flex: .14}
],
height: 330,
fullscreen: true,
renderTo: 'mygrid',
selModel: {
selType: 'checkboxmodel'
},
tbar: {
xtype: 'pagingtoolbar',
displayInfo: true,
store: 'mydata',
pageSize: itemsPerPage
}
});
store.load({params:{start:0, limit:6}});
});
When I'm trying to use store.load function it throws the error store is not defined.
You have to assign the created store instance to a variable and then assign this variable to both your grid and paging toolbar:
var myStore = Ext.create('Ext.data.Store', { ...
...
store: myStore, // both in grid an paging toolbar
...
With autoLoad: true as you use you don't need to call load on the store.
You don't have to worry about setting start and limit, ExtJS will automatically add these as pageSize is set.