Доброго времени суток!
Подскажите, пожалуйста, способ обновления значения label при нажатии на кнопку. В всплывающем окне переменная счетчика нажатий отображается корректно. В тексте label же информация не обновляется.
https://community.terrasoft.ru/questions/izmenenie-soderzimogo-label - в этом решении не особо понятно, как это сделать.
Спасибо!
Нравится
возможно кому-то будет полезно
define("UsrVisualModule", [],
function () {
var btnCount = 0;
var lbl;
var btn;
var lblCaptionText = "Количество нажатий: " + btnCount;
return {
diff: /**SCHEMA_DIFF*/[
{
//...
//...
}
]/**SCHEMA_DIFF*/,
config:{},
myView:{},
viewModel:{},
init: function () {
this.initViewModel();
},
initViewModel: function () {
this.viewModel = Ext.create("Terrasoft.BaseViewModel", {
values: {
lblCaption: lblCaptionText,
btnCaption: "Нажми"
},
methods: {
onBtnClick: function () {
btnCount++;
//window.alert("Кнопка была нажата! btnCount = " + btnCount);
lblCaptionText = "Количество нажатий: " + btnCount;
this.set("lblCaption", lblCaptionText);
return this.myView;
}
},
});
},
render: function (renderTo) {
lbl = Ext.create("Terrasoft.Label", {
caption:
{
bindTo: "lblCaption"
},
});
btn = Ext.create("Terrasoft.Button", {
id: "click-btn",
className: "Terrasoft.Button",
caption:
{
bindTo: "btnCaption"
},
style: Terrasoft.controls.ButtonEnums.style.RED,
click: {
bindTo: "onBtnClick"
},
});
this.myView = Ext.create("Terrasoft.Container", {
id: "myContainer",
items: [lbl, btn],
renderTo: renderTo
});
this.myView.bind(this.viewModel);
return this.myView;
},
destroy: function () {
this.myView.destroy();
this.viewModel.destroy();
}
};
});
Евгений, а что именно не заработало при таком способе? Можете показать код?
Похожий подход используется, например, в CommentsWithFilesModulesHelper:
items: [
{
id: 'comments-button-' + UId,
selectors: {
wrapEl: '#comments-button-' + UId
},
className: 'Terrasoft.Button',
style: Terrasoft.controls.ButtonEnums.style.TRANSPARENT,
iconAlign: Terrasoft.controls.ButtonEnums.iconAlign.LEFT,
imageConfig: {
bindTo: 'getCommentsIconConfig'
},
tag: UId,
caption: {
bindTo: 'CommentsCountCaption'
},
click: {
bindTo: 'onCommentViewChanged'
}
},И заполнение этого атрибута результатом выборки:
setCommentsCount: function(needSelect, recordId) {
var commentsCount = this.get('CommentsCount');
if (!commentsCount || needSelect) {
var select = this.getCommentSelect.call(this, recordId);
select.getEntityCollection(this.setCommentsCountValue, this);
}
},
setCommentsCountValue: function(response) {
if (!this.isInstance) {
return;
}
var count = 0;
if ((response.success && response.collection &&
response.collection.collection.items.length > 0)) {
count = response.collection.collection.items[0].get('KnowledgeBaseCount');
} else if (response.rowsAffected > 0) {
count = response.rows[0].KnowledgeBaseCount;
}
this.set('CommentsCount', count);
var commentCaption = '';
if (count > 0) {
commentCaption = count;
}
this.set('CommentsCountCaption', commentCaption);
},Либо есть более низкоуровневый подход, где вместо атрибута к элементу подвязывают сразу функцию в свойство changeMethod, как описано тут. Для Caption его применяют в ContentBuilderElement:
/**
* Setter for this.caption property.
* @protected
* @param {String} value New value.
*/
setCaption: function(value) {
if (this.caption === value) {
return;
}
this.caption = value;
if (this.rendered) {
this.reRender();
}
},
...
caption: {
changeMethod: "setCaption"
},Но его обычно используют для более сложных случаев, чем смена заголовка.
А изначальный способ ещё используют в PageDesignerUtilities для headerCaption:
headerContainer.add([{
className: "Terrasoft.Label",
id: "caption-label",
selectors: {wrapEl: "#caption-label"},
caption: {bindTo: "headerCaption"}
}, {
...
headerCaption: {
type: Terrasoft.ViewModelColumnType.ATTRIBUTE,
dataValueType: Terrasoft.DataValueType.TEXT
},
...
if (!config.isNew) {
setViewModelValues(config, viewModel);
viewModel.set("headerCaption", localizableStrings.Column);
} else {
...
viewModel.set("headerCaption", localizableStrings.NewColumnWindowHeaderCaption);
}
возможно кому-то будет полезно
define("UsrVisualModule", [],
function () {
var btnCount = 0;
var lbl;
var btn;
var lblCaptionText = "Количество нажатий: " + btnCount;
return {
diff: /**SCHEMA_DIFF*/[
{
//...
//...
}
]/**SCHEMA_DIFF*/,
config:{},
myView:{},
viewModel:{},
init: function () {
this.initViewModel();
},
initViewModel: function () {
this.viewModel = Ext.create("Terrasoft.BaseViewModel", {
values: {
lblCaption: lblCaptionText,
btnCaption: "Нажми"
},
methods: {
onBtnClick: function () {
btnCount++;
//window.alert("Кнопка была нажата! btnCount = " + btnCount);
lblCaptionText = "Количество нажатий: " + btnCount;
this.set("lblCaption", lblCaptionText);
return this.myView;
}
},
});
},
render: function (renderTo) {
lbl = Ext.create("Terrasoft.Label", {
caption:
{
bindTo: "lblCaption"
},
});
btn = Ext.create("Terrasoft.Button", {
id: "click-btn",
className: "Terrasoft.Button",
caption:
{
bindTo: "btnCaption"
},
style: Terrasoft.controls.ButtonEnums.style.RED,
click: {
bindTo: "onBtnClick"
},
});
this.myView = Ext.create("Terrasoft.Container", {
id: "myContainer",
items: [lbl, btn],
renderTo: renderTo
});
this.myView.bind(this.viewModel);
return this.myView;
},
destroy: function () {
this.myView.destroy();
this.viewModel.destroy();
}
};
});