Вопрос

Изменение значения Label при нажатии кнопки

Доброго времени суток!

Подскажите, пожалуйста, способ обновления значения label при нажатии на кнопку. В всплывающем окне переменная счетчика нажатий отображается корректно. В тексте label же информация не обновляется.

https://community.terrasoft.ru/questions/izmenenie-soderzimogo-label - в этом решении не особо понятно, как это сделать.

Спасибо!

Изображение удалено.

Нравится

2 комментария
Лучший ответ

возможно кому-то будет полезно

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();
            }
        };
    });

 

Показать все комментарии