javascript - ExtJS 5 : Accessing bound store in component

Question

我真的很难理解如何访问组件上的实际绑定(bind)存储实例，例如 ComboBox 或 Grid。看起来当您使用他们的 getStore 方法时，它会返回一个不同的实例。

在我的example ，我有一个自定义网格类，在它的 initComponent 中，我想添加一个负载监听器。不幸的是，加载监听器永远不会被命中，但绑定(bind)存储的加载监听器会。您可以看到监听器是在加载商店之前设置的，所以这不是问题。看起来 initComponent 中的 store 实例是一个内存存储，所以此时绑定(bind)的 store 实例没有同步到组件。

我知道我可以在绑定(bind)存储上有一个加载监听器，但这是一个自定义网格类，对于任何自定义网格类，我希望设置一个监听器...所以我不想必须在我的代码中的所有位置执行此操作...我只想在一个类中使用它，因为它们都将执行相同的逻辑。

有人可以向我解释为什么我的自定义网格类的加载监听器没有受到影响，我该怎么做才能解决这个问题？我能以某种方式访问​​绑定(bind)的商店实例吗？

Ext.application({
  name: 'Fiddle',

  launch: function() {
    Ext.define('MyGrid', {
      extend: 'Ext.grid.Panel',
      xtype: 'myGrid',
      initComponent: function() {
        alert('initComponent')
        this.callParent();
        this.getStore().on('load', this.onLoad, this);
      },
      onLoad: function() {
        alert('grid store loaded');
      }
    });
    Ext.define('MyViewController', {
      extend: 'Ext.app.ViewController',
      alias: 'controller.myview',
      onLoadBoundStore: function() {
        alert('loaded bound');
      }
    })
    Ext.define('MyViewModel', {
      extend: 'Ext.app.ViewModel',
      alias: 'viewmodel.myview',
      stores: {
        myStore: {
          fields: ['name', 'value'],
          autoLoad: true,
          proxy: {
            type: 'ajax',
            url: 'data1.json',
            reader: {
              type: 'json'
            }
          },
          listeners: {
            load: 'onLoadBoundStore'
          }
        }
      }
    });
    Ext.define('MyView', {
      extend: 'Ext.form.Panel',
      renderTo: Ext.getBody(),
      controller: 'myview',
      viewModel: {
        type: 'myview'
      },
      items: [{
        title: 'blah',
        xtype: 'myGrid',
        reference: 'myComboBox',
        bind: {
          store: '{myStore}'
        },
        columns: [{
          text: 'Name',
          dataIndex: 'name'
        }, {
          text: 'Value',
          dataIndex: 'value'
        }]
      }]
    });
    Ext.create('MyView')
  }
});

Answer 1

Can someone explain to me why my custom grid class's load listener is not getting hit, and what can I do to fix this?

您最初没有向您的网格提供任何存储(顺便说一下，store 配置选项是必需的)。因此，网格正在创建自己的空存储，编码为 here。 :

store = me.store = Ext.data.StoreManager.lookup(me.store || 'ext-empty-store');

那个空的商店是让你的 onLoad 听众附加的那个。它没有受到攻击，因为商店从未加载过。

Can I somehow access the bound store instance?

是的，使用这个:

this.lookupViewModel().getStore('myStore')

您可以将您的监听器附加到绑定(bind)的商店而不是空的商店，然后看看区别。网格的空存储最终会被绑定(bind)的存储替换(毕竟这就是您在网格中看到数据的原因)，但这发生在 initComponent 执行后。您可以通过覆盖 setStore 方法来跟踪将绑定(bind)存储设置到网格的时刻。

I know I can have a load listener on the bound store, but this is a custom grid class, and for any custom grid class, I want there to be a listener set up... so I don't want to have to do this all over the place in my code... I just want it in one class, as they're all going to have the same logic carried out.

由于您使用的是 MVVC，因此建议坚持该模式并保持 View 仅声明 View 方面。监听器应该在 Controller 中声明和处理(甚至不像你的例子那样在 View 模型中)。否则，如果您继续坚持 Ext JS 5 之前的风格并在 View 中放置动态内容(即您的情况下的网格)，那么使用 MVVC 就没有意义。