Интерфейс редактирования ссылок на список объектов, на примере Related Articles

В этом примере мы разберем создание интерфейса редактирования поля, содержащего ссылку на список объектов.

Возьмем готовый пример Articles из Demo-сборки и добавим дополнительное поле related Articles. Оно будет похоже на Related Topics, которые уже реализованы.

Добавим новое поле в интерфейсе управления ORM:

• Field name: related_articles;
• Field title: Related Articles;
• Field type: Link;
• Link Type: Objects list;
• Object: Articles.

Для выбора связанной статьи нам понадобится упрощенная панель, содержащая список статей и их статус. Создадим новый проект в дизайнере интерфейсов, расположим его в папке panels и назовем articles:

Интерфейс будет простой (Grid, Store, Search) и будет содержать таблицу-хранилище и поле для поиска. Рассмотрим порядок действий.

Создадим хранилище, назовем его dataStore.

Настройки Proxy:

Установим url источника данных.

Поскольку в системе уже есть необходимый нам Action,  просто укажем его следующим образом:

Установим свойства  Proxy Reader:

Настроим поля Хранилища.

Импортируем поля из объекта articles.

Установим в настройках объекта dataStore свойство autoLoad в true.

Добавим в интерфейс компонент Grid и назовем его  dataGrid, в основных настройках компонента укажем store: dataStore.

В интерфейсе управления колонками таблицы импортируем поля из dataStore и установим для них заголовки.

Для колонки Published укажем renderer: System/Publish.

Для колонки Title укажем свойство flex:1, align: center.

Закроем окно редактирования колонок и обновим вид (кнопка refresh View).

Поменяем колонки местами, поставив первой колонку Status (перетаскиванием) и уменьшим ее ширину (потянем за правый край колонки влево):

Добавим пагинацию:

В dataGrid->dockedItems  добавим компонеты:

• Toolba/Panel, назовем toolbar;
• Toolbar/Fill, назовем  fill;
• Components/Field/Searchfield, назовем search.

Компоненту search укажем настройки:

• local: false (фильтрация на стороне сервера);
• searchParam: search (такой параметр принимает Backend_Controller_Articles::listAction);
• store:dataStore.

Компоненту fieldName добавим поле title (поле, по которому будет происходить поиск и фильтрация):

Интерфейс готов, можно посмотреть код, который будет сгенерирован для dataGrid, нажав на кнопку showCode:

Поскольку мы делаем компонент для интерфейса, а не обычный интерфейс редактирования,  нам необходимо изменить настройки проекта. Изменим пространство имен компонента, чтобы он не пересекался с другими элементами интерфейса. Для этого зайдем в projectConfig и установим следующие значения:

• classes namespace: appArticlesClasses (пространство имен классов компонента);
• run namespace: appArticlesRun (пространство имен исполнения кода);
• Action JS File оставим без изменений (файл содержащий рукописный исполняемый код).

Осталось объявить dataGrid компонентом, для этого в свойствах выставляем ему isExtended: true (это означает, что компонент будет создан как класс наследник Ext.grid.Panel).

Проверим, как изменился исходный код компонента dataGrid, нажмем show Code:

Поскольку мы намереваемся использовать  наш компонент совместно с Related Items Grid, для платформы с версией до 0.9 необходимо сделать небольшой override (в dvelum 0.9.x этого делать не нужно).

Открываем редактор кода (нижняя панель) и вносим туда следующий код:

Ext.onReady(function(){ 
    Ext.override(appArticlesClasses.dataGrid ,{	
    	initComponent:function(){	 	
    		this.callOverridden();	
    		this.dataGrid = this;
    	}
    });
});

Этот override  необходим для того, чтобы компонент Related Items Grid подхватил ссылку на dataGrid нашего компонента, в dvelum c версии 0.9 и выше это делается автоматически.

Компонент готов, сохраняем и закрываем проект.

Добавим только что созданный компонент в интерфейс управления статьями. Откроем проект  articles.designer.dat  из корневой папки проектов, откроем Project Config и присоединим созданный проект компонента Related Articles к текущему проекту нажатием Add Project File.

Затем выберем /panels/articles.designer.dat и нажмем select, в проект добавится компонент:

Нажмем кнопку save.

В компонент editWindow добавим компонент components/field/Related Items Grid, назовем его  related_articles:

Выставим этому компоненту свойства:

• fieldName: related_articles;
• title: Related Articles.

Нажмем кнопку refresh View, выберем компонент editWindow, нажмем кнопку showWindow и проверим, появилась ли дополнительная вкладка в окне редактирования статьи:

Осталось установить событие добавления элемента для этого компонента.

Откроем редактор кода и дополним метод initComponent следующим кодом:

this.childObjects.related_articles.on('addItemCall',function(){
	var win = Ext.create('app.selectWindow',{
		width:700,
		height:600,
		title:"Select Article",
		dataPanel:Ext.create('appArticlesClasses.dataGrid',{}),
		listeners:{
			'itemSelected':{
				fn:function(record){
					this.childObjects.related_articles.addRecord(record);
				},
				scope:this
			}
			
		}
	}).show();	
},
this);

Этот код выполняет следующие действия:

• добавляет обработчик события ‘addItemCall’ (нажата кнопка «Добавить») для компонента related_articles;
• по этому событию создается окно типа app.selectWindow, которое в качестве панели со списком содержит наш компонент  dataPanel:Ext.create('appArticlesClasses.dataGrid',{});
• добавляется обработчик события 'itemSelected' (элемент выбран) для компонента app.selectWindow, в котором осуществляется добавление записи в компонент related_articles:

Сохраняем код и проект.

Переходим в интерфейс управления статьями:

Редактор появился и функционирует.