How to create a custom control element

Question

How can I create my own control element?

Answer

To create a custom control element:

1. Create a module - class of the control element:

Ext.ns("Terrasoft");
/** * @class Terrasoft.controls.UsrMyControl * Control element class for display */
Ext.define("Terrasoft.controls.UsrMyControl", {
	extend: "Terrasoft.Component",
	alternateClassName: "Terrasoft.UsrMyControl",
	mixins: {
	},
	myParam: "",
	/** * @inheritdoc Terrasoft.Component#tpl * @protected * @overridden */
	tpl: [
		/*jshint white:false */
		"<div id='{id}-usr-my-control' class='{wrapClass}'>",
		"{myParam} test-test-test",
		"</div>"
		/*jshint white:true */
	],
	getTplData: function() {
		var tplData = this.callParent(arguments);
		tplData.myParam = this.myParam;
		this.updateSelectors(tplData);
		return tplData;
	},
	/** * @inheritDoc Terrasoft.Component#init * @protected * @overridden */
	init: function() {
		this.callParent(arguments);
		this.addEvents(
			"myMethod"
		);
	},
	/** * @inheritDoc Terrasoft.Component#constructor * @overridden */
	constructor: function() {
		this.callParent(arguments);
	},
 
	updateSelectors: function(tplData) {
		var id = tplData.id;
		var baseIdSuffix = "-usr-my-control";
		var selectors = this.selectors = {};
		selectors.wrapEl = "#" + id + baseIdSuffix;
		return selectors;
	},
	/** * Subscription to element events of the control element */
	initDomEvents: function() {
		this.callParent(arguments);
		var wrapEl = this.getWrapEl();
		if (wrapEl) {
			wrapEl.on("click", this.onClick, this);
		}
	},
	/** * "click" event handler on the ptimary element * @param event */
	onClick: function(event) {
		event.stopEvent();
		this.fireEvent("myMethod", this);
	},
	/** * Returns configuration of connection to the model. Implements the mixin interface {@link Terrasoft.Bindable}. * @overridden */
	getBindConfig: function() {
		var parentBindConfig = this.callParent(arguments);
		var bindConfig = {
			myParam: {
				changeMethod: "setMyParam"
			}
		};
		Ext.apply(bindConfig, parentBindConfig);
		return bindConfig;
	},
 
	setMyParam: function(val) {
		this.myParam = val || this.myParam;
		if (this.allowRerender()) {
			this.reRender();
		}
	},
	/** * @overridden * @inheritdoc Terrasoft.Component#destroy */
	onDestroy: function() {
		var wrapEl = this.getWrapEl();
		if (wrapEl) {
			wrapEl.un("myMethod", this.onClick, this);
		}
		this.callParent(arguments);
	},
	/** * Sets the flag value to "read only" * @param {Boolean} readonly The flag value "read only". If true - the control element is set to *  "read only" mode, if false - the operating mode of the control element */
	setReadonly: function(readonly) {
		if (this.readonly === readonly) {
			return;
		}
		this.readonly = readonly;
		if (this.allowRerender()) {
			this.reRender();
		}
	}
});

2. Create a generator module of the control element:

define("UsrMyControlGenerator", ["UsrMyControlGeneratorResources", "terrasoft", "ext-base", "UsrMyControl"],
		function(resources) {
	var UsrMyControlGenerator = Ext.define("Terrasoft.configuration.UsrMyControlGenerator", {
		extend: "Terrasoft.ViewGenerator",
		alternateClassName: "Terrasoft.UsrMyControlGenerator",
		generateUsrMyControl: function(config) {
			var usrMyControl = {
				className: "Terrasoft.UsrMyControl",
				id: config.name + "UsrMyControl",
				selectors: {wrapEl: "#" + config.name + "UsrMyControl"},
				myParam: {bindTo: config.getMyParam},
				myMethod: {bindTo: config.myMethod}
			};
			if (!Ext.isEmpty(config.wrapClassName)) {
				usrMyControl.classes = {
					wrapClassName: config.wrapClassName
				};
			}
			return usrMyControl;
		}
	});
	return Ext.create(UsrMyControlGenerator);
});

3. Add the custom control element to the diff property of the schema:

define("CasePage", ["CasePageResources", "terrasoft", "UsrMyControlGenerator", "UsrMyControl"],
	function(resources, Terrasoft) {
	return {
		entitySchemaName: "Case",
		details: /**SCHEMA_DETAILS*/{}/**SCHEMA_DETAILS*/,
		attributes: {
			"Test": {
				"dataValueType": Terrasoft.DataValueType.TEXT,
				"type": Terrasoft.ViewModelColumnType.VIRTUAL_COLUMN,
				"value": "123"
			}
		},
		diff: /**SCHEMA_DIFF*/[
			{
				"operation": "insert",
				"parentName": "SolutionTab_gridLayout",
				"name": "UsrTest",
				"propertyName": "items",
				"values": {
					"className": "Terrasoft.UsrMyControl",
					"layout": { "colSpan": 24, "rowSpan": 1, "column": 0, "row": 4 },
					"generator": "UsrMyControlGenerator.generateUsrMyControl",
					"visible": true,
					"getMyParam": "getMyParam",
					"myMethod": "myMethod"
				}
			}
		]/**SCHEMA_DIFF*/,
		methods: {
			onEntityInitialized: function() {
				this.callParent(arguments);
				// just for debug:
				document.scope = this;
			},
			getMyParam: function() {
				return this.get("Test");
			},
			myMethod: function() {
				var oldTest = this.get("Test");
				this.set("Test", oldTest + "!");
			}
		},
		rules: {}
	};
});

Soecify UsrMyControl and UsrMyControlGenerator modules in schema dependancies.