Question

我使用Ext JS 5.x和Sencha Touch，并尝试迁移到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）我有的是视图的初始化函数中没有商店，因此我无法在那里添加一个on listener。

2）既不在商店本身，也不在视图模型中，也不在控制器中我可以添加一个监听器。如果我覆盖store load方法并手动触发load事件，则所有侦听器都开始工作

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

现代工具包中是否尚未实现所有标准侦听器，或者我遗漏了什么？

3）我试图挂钩视图的afterRender方法，但商店在那里也不可用，甚至每个命名列表包括应该已经渲染的数据。

4）无论是否添加autoLoad：false或true，Store似乎都会自动加载。

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

请参阅Fiddle

Answer 1

如果商店是全局商店，您可以将其添加到应用程序的stores属性中，然后在实例化任何视图之前使其可用。
从源代码看，虚拟商店目前似乎没有触发load事件。不确定这是否是一个bug，你可能不得不问Sencha支持。既然你让我很好奇，请在这里报告答案。
afterRender，但只有在完成组件树的呈现后才绑定存储。如果您需要先前提供的商店，请参阅我对（1）的回答。
当存储由于分页而绑定到列表时，虚拟存储会执行“自动加载”。该列表知道需要哪个页面大小，并设置商店的页面大小，从而触发重新加载。您可以在自定义加载函数中添加console.trace()来自行查找;它将输出完整的堆栈跟踪调用。您必须询问Sencha支持是否有可能摆脱自动重新加载。

另一方面，选择每个load事件的第一条记录对于虚拟商店来说很奇怪。滚动时，虚拟存储会动态加载其他记录页面。如果仅仅加载新页面会导致选择更改，那么用户看起来会很奇怪。

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

1 个答案: