Я использовал 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) У меня есть то, что хранилище недоступно в функции инициализации представления, поэтому я не могу добавить туда прослушиватель.
2) Ни в самом магазине, ни в viewmodel, ни в контроллере я не могу добавить слушателя. Если я переопределяю метод загрузки хранилищ и вручную запускаю событие загрузки, все слушатели начинают работать
// Fiddle.store.Users.load
load: function() {
this.callParent(arguments);
this.fireEvent('load');
}
Все эти стандартные слушатели еще не реализованы в современном наборе инструментов или я что-то упустил?
3) Я пытался подключиться к методу afterRender представления, но хранилище там также недоступно, даже если имя файла, включая данные, уже должно было отображаться.
4) Кажется, что магазин постоянно загружается, независимо от того, добавляю я автозагрузку: false или true.
У меня никогда не было проблем с предыдущими версиями, современный инструментарий в его текущем состоянии просто глючит или я что-то не так делаю?
См. Скрипка