ExtJS分页功能失效且报Uncaught ReferenceError: store未定义错误求助

错误原因 #

• 你使用Ext.create('Ext.data.Store')创建实例时，没有将返回的实例赋值给名为store的变量，后续直接调用store.load()时JS找不到对应的变量定义，因此抛出该报错。
• 额外的冗余/不规范点：
  • 你已经给Store配置了autoLoad: true，实例创建后会自动加载数据，不需要手动调用load方法
  • Store定义的末尾多了多余的逗号，部分低版本浏览器会抛出语法错误
  • 分页工具栏不需要单独配置pageSize，会自动读取绑定Store的pageSize参数

修复方案 #

有两种修复方式可选：

方式1：给Store实例赋值变量 #

将创建Store的代码修改为赋值给store变量，后续就可以直接调用store.load()：

Ext.onReady(function() {
    var itemsPerPage = 6;
    
    // 把创建的Store实例赋值给store变量
    var store = 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: store, // 直接传变量比传storeId更稳妥
        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: store // 直接传变量
        }
    });

    // 如果你保留autoLoad: true，下面这行可以直接删掉
    // store.load({params:{start:0, limit:6}});
});

方式2：通过storeId获取已注册的Store实例 #

如果你不想用变量接收，可以通过ExtJS的StoreManager用storeId获取实例，将最后一行的调用改为：

Ext.data.StoreManager.lookup('mydata').load({params:{start:0, limit:6}});

同样建议优先删掉手动load的代码，因为已经开了autoLoad配置，重复加载没有必要。

内容的提问来源于stack exchange，提问作者Abhishek kumar