В общем, унифицированной универсальной формы не получилось. Получилось некое её подобие.
Дело в том, что мне вставка новой записи нужна именно через Store, иначе событие write, которое показывает всплывающие toast-сообщения, не отрабатывает. А к Store, который может быть любым, неизвестно каким образом вообще обращаться из этой формы.
То, что `record.save()` не связано с обновлением хранилища писали еще тут:
Вызов record.save() не обновляет pagingtoolbar и не меняет фантомный id на реальный
Вот такая форма:
Ext.define('MyApp.view.helpers.Baseform', {
extend: 'Ext.form.Panel',
xtype: 'baseform',
controller: 'baseform',
bind: {
title: '{editformTitle}'
},
layout: {
type: 'vbox',
align: 'stretch'
},
bodyPadding: 10,
border: false,
width: 400,
modal: true,
closable: true,
closeToolText: 'Закрыть',
floating: true,
reference: 'form',
buttons: [
{
formBind: true,
disabled: true,
text:'Сохранить',
handler:'save'
},
{
text: 'Отменить',
handler: function(){
this.up('form').close();
}
}
]
});
Ее контроллер. Тут я проверяю id на целое число. Если целое, то у нас редактирование, если нет, то это новая запись. Также я сам record передаю при вызове события:
Ext.define('MyApp.view.helpers.BaseformController', {
extend: 'Ext.app.ViewController',
alias: 'controller.baseform',
save: function() {
var me = this,
form = this.view,
record = form.getRecord();
// console.log(record);
if (form.isValid()) {
var id = record.getId();
var values = form.getValues();
// console.log(values);
//check if edit
if (Ext.isNumber(id)) {
record.beginEdit();
record.set(values);
record.endEdit();
} else {
record.set(values);
form.fireEvent('insertNew', record);
}
form.close();
}
}
});
Обработчики добавления, редактирования и создания формы:
onAdd: function() {
console.log('onAdd');
var record = Ext.create('MyApp.model.dictionaries.positions.Positions');
console.log(record);
this.createForm(record, true);
},
onEdit: function(view, cell, rowIndex, colIndex, e, rec, row) {
this.createForm(rec, false);
},
createForm: function(record, stateNew) {
// console.log(record);
var form = new MyApp.view.dictionaries.positions.PositionsForm({
viewModel: {
data: {
editformTitle: stateNew ? 'Добавление' : 'Редактирование'
}
}
});
// console.log(form);
form.loadRecord(record);
form.on('insertNew', this.formInsertNew, this);
form.show();
},
А вот обработчик события вставки:
formInsertNew: function(record) {
console.log('NEW RECORD!!!!');
console.log(record);
var store = this.getView().getStore();
store.insert(0, record);
}
Обновляю я store в событии `write`, там же вывожу toast-сообщение.
Да, есть неудобный костыль с обращением к store, но пока иного решения не нашел.
Буду признателен, если кто-нибудь из форумчан даст ответы на эти вопросы:
- Каким образом можно передать Store или ссылку на него при создании формы и обращаться к нему уже в её контроллере?
- Можно ли записать вот эту конструкцию иначе?
record.beginEdit();
record.set(values);
record.endEdit();
- Каким образом при extend'е формы добавить поля во вложенный(!) component с xtype: form? Я хочу основу сделать на Window, а форма будет уже внутри него.