Описание структуры карточки
- каждый файл должен находиться в соответствующей директории. Например указанный выше файл расположен в папке view.CS_Adapter и уже в ней расположен файл CS_Adapter-DetailView.js
- объект должен является наследником IServ.UI.Classic.DetailViewPanel
- xtype должен быть таким же ка и наименование файла, но в нижнем регистре
- domainType: string — Не обязательный параметр. Предназначен для указания базового имени объекта для текущего view. Например текущее view имеет имя cs_adapter_listview, а базовое имя будет cs_adapter
- config — директория для настройки
- store:string — наименование хранилища
- title:string — заголовок записи
- comment:string — описание записи
- toolbarConfig — настройки панели управления
- editable:boolean — разрешен режим редактирования
- deletable:boolean — разрешено удаление
- creatable:boolean — разрешено создание объекта
- paging:boolean — вывести постраничный просмотр
- refresh:boolean — вывести кнопку с обновлениями
- cancel:boolean — вывести кнопку отмена
- createDetailViewName:string — имя представления для создания записи
- listViewName:string — имя представления для просмотра списка
- items — объект для хранения разметки
Правила создания полей
Для правильной обработки результатов, поля в карточке должны формироваться определенным образом
"xtype": "textfield", "name": "C_Name", "fieldLabel": "Наименование", bind: { value: '{C_Name}', readOnly: '{readOnly}' }
,где
- bind — объект для описания «биндинга»
- value — значение (привязывается специфическим образом)
- readOnly — нужен для перехода с одного режима просмотра на другой
Для полей чей xtype:displayfield требуется указать submitValue:true
{ xtype: 'displayfield', name: 'id', fieldLabel: '', bind: { value: '{id}', readOnly: '{readOnly}' }, submitValue: true, allowBlank: false }
Создание редактируемого, связанного поля
{ xtype: 'combobox', name: 'user_id', fieldLabel: 'Пользователь', bind: { value: '{user_id}', rawValue: '{user_id___name}', // таким образом указывается, что нужно "раскрыть" данное поле и вывести name readOnly: '{readOnly}' }, store: { type: 'users' }, displayField: 'name', valueField: 'id', queryMode: 'remote', pageSize: 25 }
Пример:
/** * Пользователи * @class Core.view.users.users-DetailView */ Ext.define('Core.view.users.users-DetailView', { extend: 'IServ.UI.Classic.DetailViewPanel', xtype: 'users-detailview', domainType: 'users', // можно не указывать requires: [ /** * обязательно загружаем */ 'Core.store.users' ], config: { /** * ссылка на хранилище */ store: 'Core.store.users', /** * заголовки для карточки */ title: 'Пользователи', comment: 'Пользователи', toolbarConfig: { editable: true, deletable: true, creatable: true, paging: true, refresh: true }, /** * имя представления для создания записи */ createDetailViewName: 'users-DetailView', /** * имя представления для просмотра списка */ listViewName: 'users-ListView' }, header: false, items:[ { xtype: 'form', itemId: 'formpanel', header: false, defaults: { width: '100%', labelAlign: 'top', readOnly: true }, items: [ /** * */ { xtype: 'displayfield', name: 'id', fieldLabel: '', bind: { value: '{id}', readOnly: '{readOnly}' } , submitValue: true , allowBlank: false }, /** * Имя пользователя */ { xtype: 'textfield', name: 'name', fieldLabel: 'Имя пользователя', bind: { value: '{name}', readOnly: '{readOnly}' } }, /** * Логин */ { xtype: 'textfield', name: 'login', fieldLabel: 'Логин', bind: { value: '{login}', readOnly: '{readOnly}' } , allowBlank: false }, /** * Пароль */ { xtype: 'textfield', name: 'password', fieldLabel: 'Пароль', bind: { value: '{password}', readOnly: '{readOnly}' } , allowBlank: false }, /** * Дата создания */ { xtype: 'datefield', name: 'created', fieldLabel: 'Дата создания', bind: { value: '{created}', readOnly: '{readOnly}' } , submitFormat: 'Y-m-d H:i:sO', format: 'd.m.Y H:i:s' , allowBlank: false } ] }, { // вложенные grid'ы (см. тут) xtype: 'tabcollection', items:[ { xtype: 'accesses_users-collection' }, { xtype: 'userinroles_users-collection' } ] } ] });