Вопрос
Как создать свой элемент управления?
Ответ
Для создания пользовательского элемента управления необходимо:
1) Создать модуль - класс элемента управления:
Ext.ns("Terrasoft"); /** * @class Terrasoft.controls.UsrMyControl * Класс элемента управления для отображения */ 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; }, /** * Подписка на события элементов элемента управления */ initDomEvents: function() { this.callParent(arguments); var wrapEl = this.getWrapEl(); if (wrapEl) { wrapEl.on("click", this.onClick, this); } }, /** * Обработчик события click на основном элементе * @param event */ onClick: function(event) { event.stopEvent(); this.fireEvent("myMethod", this); }, /** * Возвращает конфигурацию привязки к модели. Реализует интерфейс миксина {@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); }, /** * Устанавливает значение флага только для чтения * @param {Boolean} readonly Значение флага только для чтения. Если true - элемент управления устанавливается в * режим только для чтения, false - рабочий режим элемента управления */ setReadonly: function(readonly) { if (this.readonly === readonly) { return; } this.readonly = readonly; if (this.allowRerender()) { this.reRender(); } } });
2) Создать модуль - генератор элемента управления:
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) Добавить пользовательский элемент управления в схему в секцию diff:
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: {} }; });
В зависимостях схемы обязательно указать модули UsrMyControl и UsrMyControlGenerator.
Показать все комментарии
Войдите или зарегистрируйтесь, что бы комментировать