Extjs 未触发现代工具包存储加载事件

我将ExtJS5.x与SenchaTouch结合使用，并尝试按照Sencha的建议迁移到通用的现代应用程序。然而，感觉有几件事改变了，并没有按预期的那样工作

我使用虚拟存储通过AJAX将数据加载到一个简单的列表中。现在，我想在加载列表时选择第一个（或具有不同记录的条件）

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

Ext.define('Fiddle.view.ListController', {
  extend: 'Ext.app.ViewController',
  alias: 'controller.test-list',
  listen: {
    store: {
        'test-users': {
            beforeload: function() {
                //Doesn't work
                console.log('before')
            }
        }
    }
},
onListItemTap: function(list, record) {
    this.fireEvent('select', this);
    console.log('selected');
}
});

Ext.define('Fiddle.store.Users', {
  extend: 'Ext.data.virtual.Store',
  alias: 'store.test-users',
  model: 'Fiddle.model.User',
  pageSize: 125,
  leadingBufferZone: 125,
  proxy: {
    type: 'ajax',
    url: 'data1.json',
    reader: {
        rootProperty: 'result.users',
        successProperty: 'result.success',
        totalProperty: 'result.total'
    }
  },
  listeners: {
    load: function(){
        // Doesn't trigger
        console.log('loaded');


    },
    scope: this
  }
});
Ext.define('Fiddle.view.List', {
  extend: 'Ext.List',
  xtype: 'test-list',
  controller: 'test-list',
  viewModel: {
    stores: {
        users: {
            type: 'test-users',
            listeners: {
                load: function(){
                    // Doesn't trigger
                    console.log('loaded');
                },
                scope: this
            }
        }
    }
        },
  bind: {
    store: '{users}'
  },
  itemTpl: '{name}. {email}',
  infinite: true,
  listeners: {
    select: 'onListItemTap'
  },
  initialize: function(){
    var me = this;
    this.callParent(arguments);

    /*Doesn't work as store seems to be not bound yet
    this.select(0)
    this.store.on('load', function(){
       console.log('loaded');
       this.select(0);
    });
    */

    //Does work, but dirty
    Ext.defer(function () {
        //this.select(0);
        //console.log(me.getStore());
    }, 500, me);
  },
  afterRender: function() {
    this.callParent()
    // Doesn't work, shouldn't the store be available/loaded after its 
  rendered?
    console.log(this.getStore()); //null
  }
})
Ext.application({
  name: 'Fiddle',

  launch: function () {
    Ext.Viewport.add({
        xtype: 'test-list'
    })
  }
})

问题： 1） 我必须指出的是，该存储在视图的initialize函数中不可用，因此我无法在那里添加侦听器

2） 无论是在存储本身中，还是在viewmodel中，还是在控制器中，我都不能添加侦听器。如果我重写stores load方法并手动触发load事件，那么所有侦听器都将开始工作

// Fiddle.store.Users.load
load: function() {
  this.callParent(arguments);
  this.fireEvent('load');
}

所有这些标准侦听器都没有在现代工具包中实现，还是我遗漏了什么

3） 我试图连接到视图的

afterRender

方法中，但是那里的存储也不可用，甚至包括数据在内的列表应该已经呈现了

4） 商店似乎得到自动加载所有的时间，无论我添加自动加载：假或真

我以前的版本从来没有遇到过任何问题，现代工具包的当前状态是有问题还是我做错了什么

看

如果该存储是全局存储，则可以将其添加到应用程序的属性中，然后在实例化任何视图之前使其可用

从源代码来看，虚拟存储当前似乎没有触发

load

事件。不确定这是否是一个bug，您可能需要请求Sencha支持。既然你让我好奇，请在这里报告答案

afterRender

在呈现列表后调用，但仅在组件树的呈现完成后绑定存储。如果您需要提前提供商店，请参阅我对（1）的回答

由于分页，当存储绑定到列表时，虚拟存储执行“自动加载”。该列表知道所需的页面大小，并设置存储区的页面大小，从而触发重新加载。通过在自定义加载函数中添加

console.trace（）

，您可以自己找到答案；它将输出调用的完整堆栈跟踪。您必须询问Sencha支持部门是否有可能取消自动重新加载

---

另一方面，对于虚拟存储来说，在每个

load

事件上选择第一条记录是很奇怪的。当您滚动时，虚拟存储动态加载其他记录页。如果仅仅加载一个新页面就导致选择更改，用户会觉得这很奇怪。

谢谢您的回复。同意您的侧节点-我希望在初始列表的第一次加载/后渲染时使用它，但除非我推迟选择，否则这不起作用，这就是为什么我要寻找某种类型的事件来捕获。遗憾的是，目前整个商店的装订工作似乎都不正常。我不想让这家店“全球化”。只是视图永远不知道何时加载存储，并且therfor无法选择记录。对于虚拟存储或dataview.list（例如show），有一半的事件未触发。画作是可行的，但同样的记录是不可选择的。总的来说，很难相信这是一个如此混乱的局面。呈现一个列表并选择第一条记录应该没有什么大不了的。我只是不想使用一些难看的延迟方法，但当数据可用且用户可见时。@gulty如果只是呈现一个列表并选择第一条记录，为什么要使用虚拟存储，而不是普通的

Ext.data.store

？因为我有一个无限的列表，其中包含由api发送的大量ajax记录。当选择其中一个时，我会在右侧打开一个面板来编辑数据。另外，如果我不能在正确的时间正确执行函数，我会在不同的地方遇到同样的问题。@gulty不知道为什么这意味着你不能使用存储。我使用了几十家商店，将商店的记录加载到表单中，编辑并保存它们，一切都像一个魔咒。我不使用虚拟商店，但是。。。