Доброго времени суток!
Подскажите, пожалуйста, способ обновления значения 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(); } }; });