我真的很难理解如何访问组件上的实际绑定(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')
  }
});

最佳答案



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

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

那个空的商店是让你的 onLoad 监听器附加的商店。它不会被击中,因为商店从未加载过。



是的,使用这个:
this.lookupViewModel().getStore('myStore')

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



由于您使用的是 MVVC,因此建议坚持该模式并保留仅声明 View 方面的 View 。监听器应该在 Controller 中声明和处理(甚至不是在你的例子中的 View 模型中)。否则,如果您继续坚持使用 Ext JS 5 之前的样式并将动态内容放入 View (即您的案例中的网格),则使用 MVVC 毫无意义。

关于javascript - ExtJS 5 : Accessing bound store in component,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/32214907/

10-16 19:50
查看更多