Я пытаюсь создать базовое тестовое приложение, в котором я использую сетку с редактированием строк и позволяю пользователю изменять значение поля из поля со списком. Очень распространенный вариант использования (по крайней мере, для меня), много раз применявшийся в ExtJS 4.2 и более ранних версиях. Однако я пытаюсь добиться этого с меньшим количеством кода, используя новую привязку данных и ассоциации ExtJS 5.
Я использую две модели (человек и язык), и у каждого человека должен быть один предпочтительный язык. Человек - это просто идентификатор, имя, идентификатор языка, а язык - это идентификатор, имя языка.
Ext.define('MyApp.model.Person', {
extend: 'Ext.data.Model',
alias: 'model.person',
fields: [
{
type: 'int',
name: 'id'
},
{
name: 'name'
},
{
name: 'languageid',
reference: 'MyApp.model.Language'
}
]
});
Ext.define('MyApp.model.Language', {
extend: 'Ext.data.Model',
alias: 'model.language',
fields: [
{
type: 'int',
name: 'id'
},
{
name: 'languagename'
}
]
});
ViewModel:
Ext.define('MyApp.view.PersonsViewModel', {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.persons',
stores: {
persons: {
model: 'MyApp.model.Person',
autoLoad:true
},
languages: {
model: 'MyApp.model.Langugage',
autoLoad:true
}
}
});
Grid (Part of larger View)
{
xtype: 'gridpanel',
reference: 'grid',
bind: {
store: '{kamper}'
},
columns: [
{
xtype: 'numbercolumn',
width: 35,
dataIndex: 'id',
text: 'Id'
},
{
xtype: 'gridcolumn',
width: 150,
dataIndex: 'langugageid',
text: 'Language',
editor: {
xtype: 'combobox',
lastQuery: '',
displayField: 'languagename',
valueField: 'id',
bind: {
selection: '{grid.selection.SomeRefToAssocStore.languagename}', /* 5.0.1 feature*/
value: '{grid.selection.profil}', /*should we even bind, since value is set from roweditor? */
store: '{languages}' /*directly to languages store or through grid store field association? */
}
}
}
],
listeners: {
select: 'select'
},
features: [
{
ftype: 'grouping',
groupHeaderTpl: [
'Avdeling: {name}'
]
}
],
dockedItems: [
{
xtype: 'pagingtoolbar',
dock: 'bottom',
width: 360,
displayInfo: true,
bind: {
store: '{kamper}'
}
}
],
plugins: [
{
ptype: 'rowediting'
}
]
}
У меня есть некоторые вопросы в коде, но подведем итог:
Каков наилучший подход к настройке такого графического интерфейса?
Как мне установить привязку поля со списком?
Индекс данных столбца - это поле идентификатора, но я хочу отобразить значение имени языка, является ли средство визуализации столбца лучшим подходом?
Должен ли быть загружен комбинированный магазин, или я могу ожидать, что ассоциация позаботится об этом (остальный прокси-сервер удален из образца)
Должно ли комбинированное хранилище быть связано с хранилищем языков или как какое-то подхранилище ассоциации полей?
Мне не удалось найти какие-либо полные примеры с этим (сочетание rowedit, combo и привязки)
Любые указатели на «новую» передовую практику?