Управление свойствами элементов/полей напрямую, без привязки к методу или атрибуту.
Если Вам необходимо управлять доступностью (enabled) или видимостью (visible) вы биндите их на атрибут (который предварительно создаете) и в последующем меняя значение атрибута - управляете соответствующим значением.
И все таки... (ради спортивного интереса, и для более углубленно понимания системы и применяемых в ней механизмов)
Каким образом в коде можно подступиться до элемента/поля и воздействовать на его свойства ?
(Это же компоненты Ext.JS насколько я понимаю)
Ну естественно я говорю не о том чтобы получить DOM-объект по имени компонента или по CSS-селектору (Ext.get() / Ext.getCmp()) и применить к нему стили инлайново.
Я про то как доступиться до конфига, изменить и инициализировать изменения ?
PS: Есть где ни будь кстати материал по разработке и внедрению кастомных элементов ? (быстрое гугление по форуму не помогло, хотя возможно я некорректно формулировал поисковый запрос :))
Нравится
Здравствуйте, Илья.
Помимо ExtJs в bpm'online также используется библиотека BackboneJs. Если на момент построение модели в ViewModel генераторе не были определены биндинги - изменить значение какого-либо свойства в рантайме Вы уже не сможете. Разве что писать свой пользовательский генератор.
Документации по написанию пользовательских контролов на данный момент нет. Только по аналогии с уже существующими или же наследуясь от них.
Вопрос:
Как создать свой контрол?
Ответ:
контрол:
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(); } } });
генератор:
define("UsrMyControlGenerator", ["UsrMyControlGeneratorV2Resources", "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); });
схема:
define("CasePage", ["CasePageResources", "terrasoft", "UsrMyControlGeneratorV2", "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: {} }; });