IDE: app.relatedGridPanel

A table of related objects is regularly used for editing ORM object fields of the multylink type and allows to edit the list of links to the related objects.

Basic settings:

fieldName string - field name (the same as for any form field), serves to transfer data when sending the form.

Basic methods:

• setData(data) - is used to set table data; an array of objects of the following structure is taken as a parameter:

[

 {name:'id' , type:'integer'},

 {name:'published' , type:'boolean'},

 {name:'deleted' , type:'boolean'},

 {name:'title' , type:'string'}

 ]

• addRecord(record) - record app.relatedGridModel  - is used to add a record to the table;
• collectData() - is used to get table data and returns an array of string identifiers.

An event is defined in the object:

addItemColl -  comes into action when clicking the ‘Add item’ button. An event listner is to be added to be in charge of processing.

There is a sample showing the way the component works in the ‘Articles’ section of the Demo distributive.

An extract from code (www/js/app/actions/articles.js):

this.childObjects.relatedTopics.on('addItemCall',function(){
	var win = Ext.create('app.SelectWindow',{
		width:700,
		height:600,
 		title:appLang.SELECT_TOPIC,
 		dataPanel:Ext.create('appTopicsClasses.topicsPanel',{
			canEdit:false,
			canDelete:false,
			selectMode:true
		}),
		listeners:{
			'itemSelected':{
				fn:function(record){
					this.childObjects.relatedTopics.addRecord(record);
				},
				scope:this
			}

		}
	}).show();   
}, this);

This code defines the handler of the addItemCall event for the  relatedTopics component, which is an object of   app.relatedGridPanel type. This component is used to add related topics to the article. The event creates an object of the app.SelectWindow type, which is also described in the relevant documentation chapter. The window contains the Topic Edit panel (it is defined in the related project), which above all allows for choosing a topic. The itemSelected event serving as an alert, returns the record as per the selection at launch. SelectWindow  in the given sample makes an adapter for app.relatedGridPanel and serves as a bridge to the Topic Edit Panel.  In other words,  clicking on the  AddItem in app.relatedGridPanel creates a window, which shows the Articles Editor in the “Read only’ mode. Selecting a certain record in the Topic Edit Panel sends the record data to the app.relatedGridPanel. See the below image for reference:

In the given sample articles are edited within the app.contentWindow type of window, which automatically detects whether there is a nested element app.relatedGridPanel and collects data from it into an array when sending the form. Meanwhile, the Backend_Orm_Controller standard controller can review and store data for the fields of  myltilink  ORM object without any additional settings.

Using this component considerably facilitates the work with the list of links to the objects, however, it requires additional time to learn its operation principles. Once understood, the mechanism will enable you to create an Editor of Related Objects List in a few minutes.