Modern Toolkit Store加载事件未触发问题求助

我来帮你搞定这个从旧版本迁移过来后遇到的列表选中问题，结合你用虚拟Store通过AJAX加载数据的场景，给你一套适配现代版Ext JS的解决方案：

核心思路 #

因为AJAX加载是异步操作，必须等Store数据加载完成后再执行选中逻辑，所以核心是监听Store的load事件，在回调里处理选中操作。同时要注意现代版框架和旧版本的配置差异，比如选择模式的配置方式。

完整代码示例 #

1. 补全Model（你已经写了部分，这里保持一致） #

Ext.define('Fiddle.model.User', {
    extend: 'Ext.data.Model',
    fields: ['name', 'email']
});

2. 配置ViewModel与虚拟Store #

现代版更推荐用ViewModel管理Store，避免直接全局获取：

Ext.define('Fiddle.view.ListModel', {
    extend: 'Ext.app.ViewModel',
    alias: 'viewmodel.list',

    stores: {
        users: {
            model: 'Fiddle.model.User',
            autoLoad: true, // 自动触发AJAX加载
            proxy: {
                type: 'ajax',
                url: '你的数据接口地址', // 替换成实际的AJAX接口
                reader: {
                    type: 'json',
                    rootProperty: 'data' // 对应接口返回的数组字段名
                }
            }
            // 如果是虚拟缓冲Store，加上buffered: true等配置
        }
    }
});

3. 编写Controller处理选中逻辑 #

Ext.define('Fiddle.view.ListController', {
    extend: 'Ext.app.ViewController',
    alias: 'controller.list',

    init: function() {
        // 从ViewModel获取Store并监听load事件
        const userStore = this.getViewModel().getStore('users');
        userStore.on('load', this.handleStoreLoad, this);
    },

    handleStoreLoad: function(store, records, isSuccess) {
        if (!isSuccess || records.length === 0) return;

        const list = this.getView();
        // 方案1：选中第一条记录
        list.select(records[0]);

        // 方案2：选中符合特定条件的记录（比如name为"张三"）
        // const targetRecord = store.findRecord('name', '张三');
        // if (targetRecord) {
        //     list.select(targetRecord);
        // }
    }
});

4. 配置List组件（注意现代版的选择模式配置） #

Ext.define('Fiddle.view.UserList', {
    extend: 'Ext.dataview.List',
    xtype: 'userlist',
    controller: 'list',
    viewModel: 'list',

    config: {
        store: '{users}', // 绑定ViewModel中的Store
        itemTpl: '<div class="user-item">{name} - {email}</div>',
        // 现代版用selectable配置选择模式，替代旧版的selModel
        selectable: {
            mode: 'single', // 单选模式，可选'multi'等
            allowDeselect: false // 是否允许取消选中，按需设置
        }
    }
});

迁移注意事项 #

• 旧版的selModel配置在现代版中替换为selectable，一定要注意这个变更，否则选中功能会失效
• 如果是虚拟缓冲Store（buffered store），除了load事件，可能还需要监听datachanged或refresh事件，确保分段加载数据后也能正确处理选中
• 尽量通过ViewModel获取Store，避免直接使用Ext.getStore()这种全局方式，更符合现代版的MVVM架构

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