Question
How can I add a button in the Communication Panel?
Answer
1. Replace the "CommunicationPanel" module, where the new button will be described.
define("CommunicationPanel", ["terrasoft", "CommunicationPanelHelper"],
function(Terrasoft, CommunicationPanelHelper) {
return {
messages: {
"SelectCommunicationPanelItem": {
"mode": Terrasoft.MessageMode.PTP,
"direction": Terrasoft.MessageDirectionType.SUBSCRIBE
}
},
attributes: {
"UsrMyMenuActive": {
"dataValueType": Terrasoft.DataValueType.BOOLEAN,
"type": Terrasoft.ViewModelColumnType.VIRTUAL_COLUMN,
"value": false
},
"UsrMyMenuCounter": {
"dataValueType": Terrasoft.DataValueType.TEXT,
"type": Terrasoft.ViewModelColumnType.VIRTUAL_COLUMN,
"value": ""
},
"UsrMyMenuVisible": {
"dataValueType": Terrasoft.DataValueType.BOOLEAN,
"type": Terrasoft.ViewModelColumnType.VIRTUAL_COLUMN,
"value": true
}
},
methods: {
getPanelItemConfig: function(moduleName) {
var config = this.callParent(arguments);
if (moduleName !== "UsrMyMenuModule") {
return config;
}
return Ext.apply(config, {
keepAlive: false
});
},
selectItem: function(config) {
this.set("SelectedMenuItem", config.selectedItem);
},
getUsrMyMenuImageConfig: function(itemTag) {
return this.get("Resources.Images.VisaMenuIcon");
},
getUsrMyMenuCaption: function(itemTag) {
return "test";
}
},
diff: [
{
"operation": "insert",
"index": 0,
"parentName": "communicationPanelContent",
"propertyName": "items",
"name": "usrMyMenu",
"values": {
"tag": "UsrMyMenu",
"visible": {"bindTo": "UsrMyMenuVisible"},
"imageConfig": {"bindTo": "getUsrMyMenuImageConfig"},
"caption": {"bindTo": "getUsrMyMenuCaption"},
"generator": "CommunicationPanelHelper.generateMenuItem"
}
}
]
};
});
2. Create the panel module. The module should contain required messages, as in ESNFeedModule:
RerenderModule – subscription, address.
InitModuleViewModel – subscription, address.
Ext.define("Terrasoft.configuration.UsrMyMenuModule", {
extend: "Terrasoft.BaseSchemaModule",
alternateClassName: "Terrasoft.UsrMyMenuModule",
generateViewContainerId: false,
initSchemaName: function() {
this.schemaName = "UsrMyMenu";
},
initHistoryState: Terrasoft.emptyFn,
init: function() {
this.callParent(arguments);
this.initMessages();
},
initMessages: function() {
this.sandbox.subscribe("RerenderModule", function(config) {
if (this.viewModel) {
this.render(this.Ext.get(config.renderTo));
return true;
}
}, this, [this.sandbox.id]);
},
createViewModel: function() {
var viewModel = this.callParent(arguments);
return viewModel;
}
});
return Terrasoft.UsrMyMenuModule;
});
3. Create the page view schema
define("UsrMyMenu", [], function() {
return {
mixins: {
},
messages: {
},
attributes: {
},
methods: {
init: function(callback, scope) {
this.callParent([function() {
callback.call(scope);
}, this]);
},
onTestClick: function() {
alert(1);
}
},
diff: [
//MyMenu
{
"operation": "insert",
"name": "MyMenu",
"propertyName": "items",
"values": {
"generateId": false,
"itemType": Terrasoft.ViewItemType.CONTAINER,
"items": []
}
},
//ShowNewMessagesButton
{
"operation": "insert",
"name": "ShowNewMessagesButton",
"parentName": "MyMenu",
"propertyName": "items",
"values": {
"generateId": false,
"itemType": Terrasoft.ViewItemType.BUTTON,
"caption": "Test!",
"click": {bindTo: "onTestClick"}
}
}
]
};
});
