Вопрос
Как создать свой элемент управления?
Ответ
Для создания пользовательского элемента управления необходимо:
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.
