如何在Sencha Ext JS中不使用autosync和autoLoad:true手动加载API数据？

首先先修正你Store代码里的几个问题：

1. Store内部没有launch生命周期方法，这个方法属于Ext.app.Application，不能放在Store定义里
2. 如果已经配置了model，Store里不需要重复声明fields（Model已经定义了字段结构）
3. jsonplaceholder的/users接口直接返回数组，不需要设置rootProperty: 'data'（该配置适用于API返回{data: [...]}格式的场景）

修正后的Store代码：

Ext.define('EmpMgmt.store.Personnel', {
    extend: 'Ext.data.Store',
    alias: 'store.personnel',
    model: 'EmpMgmt.model.Personnel',
    proxy: {
        type: 'rest',
        url: 'https://jsonplaceholder.typicode.com/users',
        reader: {
            type: 'json'
        }
    }
});

接下来是几种手动加载数据的实现方式：

方式1：在应用启动时加载 #

在app.js的launch方法中调用Store的load方法：

Ext.application({
    name: 'EmpMgmt',
    stores: ['Personnel'],
    launch: function() {
        // 通过别名获取Store实例
        const personnelStore = Ext.getStore('personnel');
        // 手动触发加载
        personnelStore.load();
    }
});

方式2：通过用户交互触发（比如按钮点击） #

在UI组件的事件处理器中调用load，适合需要用户主动触发加载的场景：

{
    xtype: 'button',
    text: '加载人员数据',
    handler: function() {
        const store = Ext.getStore('personnel');
        // 加载时可配置额外参数和回调
        store.load({
            // 传递给API的查询参数（如果API支持）
            params: {
                // example: name: 'Alice'
            },
            // 加载完成后的回调
            callback: function(records, operation, success) {
                if (success) {
                    console.log('数据加载成功，共', records.length, '条记录');
                } else {
                    console.error('加载失败:', operation.getError());
                }
            }
        });
    }
}

方式3：在控制器中加载 #

在控制器的init或其他生命周期方法中加载数据，适合业务逻辑集中管理的场景：

Ext.define('EmpMgmt.controller.Main', {
    extend: 'Ext.app.Controller',
    init: function() {
        const personnelStore = Ext.getStore('personnel');
        personnelStore.load({
            scope: this,
            callback: function(records) {
                // 这里可以处理加载完成后的业务逻辑
                this.processLoadedData(records);
            }
        });
    },
    processLoadedData: function(records) {
        // 自定义数据处理逻辑
        console.log('处理加载的数据:', records);
    }
});

关键注意点 #

• Store的autoLoad默认值为false，所以不需要额外配置，默认就是不自动加载
• load方法支持多种配置项，比如params传递请求参数、callback处理加载结果、scope指定回调函数的作用域
• 确保Store已经被实例化（比如在app.js的stores数组中声明，或者通过Ext.create手动实例化），否则Ext.getStore会返回null

内容的提问来源于stack exchange，提问作者Mohit Wayde