Article
How to create and popualte a drop-down list (ComboBox) by developer means?
11:32 Jul 26, 2018
Question
How can I create a ComboBox and populate it with values by developer means?
Answer
Example of a code:
define("CasePage", ["CasePageResources", "terrasoft"],
function(resources, Terrasoft) {
return {
entitySchemaName: "Case",
details: /**SCHEMA_DETAILS*/{}/**SCHEMA_DETAILS*/,
attributes: {
"myEnum": {
"dataValueType": Terrasoft.DataValueType.ENUM,
"type": Terrasoft.ViewModelColumnType.VIRTUAL_COLUMN,
"caption": "myEnum"
},
"myList": {
"dataValueType": Terrasoft.DataValueType.ENUM,
"type": Terrasoft.ViewModelColumnType.VIRTUAL_COLUMN,
"isCollection": true
}
},
diff: /**SCHEMA_DIFF*/[
{
"operation": "insert",
"name": "myEnum",
"values": {
"caption": "myEnum",
"dataValueType": this.Terrasoft.DataValueType.ENUM,
"bindTo": "myEnum",
"layout": { "colSpan": 24, "rowSpan": 1, "column": 0, "row": 4 },
"controlConfig": {
"className": "Terrasoft.ComboBoxEdit",
"list": {
"bindTo": "myList"
},
"change": {
"bindTo": "onMyValueChange"
},
"prepareList": {
"bindTo": "prepareMyList"
}
}
},
"parentName": "SolutionTab_gridLayout",
"propertyName": "items",
"index": 1
}
]/**SCHEMA_DIFF*/,
methods: {
onPageInitialized: function(callback, scope) {
if (!this.get("myList")) {
this.set("myList", this.Ext.create("Terrasoft.Collection"));
}
if (callback) {
callback.call(scope || this);
}
},
onEntityInitialized: function() {
this.callParent(arguments);
// and just for debug:
document.scope = this;
},
prepareMyList: function(filter, list) {
if (list === null) {
return;
}
list.clear();
var columns = {};
var value1 = {
displayValue: "a123",
value: "1"
};
var value2 = {
displayValue: "b234",
value: "2"
};
var value3 = {
displayValue: "c345",
value: "3"
};
columns[1] = value1;
columns[2] = value2;
columns[3] = value3;
list.loadAll(columns);
},
onMyValueChange: function(val) {
if (val && val.displayValue) {
console.log("you pick: ", val.displayValue);
}
}
},
rules: {}
};
});