How can I fill a custom ComboBoxEdit component (generated view ) with data
I created a module that I used to generate a custom comboBoxEdit view (lookup/dropdown) , then I used that module in another page (load the component) , and the view created successfully but without data.
To be more clear:
1- Code of my Custom Module
define("UsrDropDownGenerator", ["ext-base", "terrasoft", "sandbox"], function (Ext, Terrasoft, sandbox) {
Ext.define("Terrasoft.configuration.UsrDropDownGenerator", {
alternateClassName: "Terrasoft.UsrDropDownGenerator",
extend: "Terrasoft.BaseModule",
Ext: null,
sandbox: null,
Terrasoft: null,
viewModel: null,
view: null,
init: function () {
debugger;
this.callParent(arguments);
this.initViewModel();
},
initViewModel: function () {
debugger;
var self = this;
this.viewModel = Ext.create("Terrasoft.BaseViewModel", {
values: {
booleanValueColumnList: Ext.create("Terrasoft.Collection")
},
columns: {
booleanValueColumnList: {
type: Terrasoft.ViewModelColumnType.VIRTUAL_COLUMN,
name: "booleanValueColumnList",
isCollection: true,
}
},
methods: {
getColumnList: function (filters, list) {
debugger;
if (list === null) {
return;
}
list.clear();
var columns = {};
for (var x = 0; x < 4; x++)
{
var value1 = {
displayValue: "qq",
value:"1"
};
columns[x] = value1;
}
list.loadAll(columns);
},
simpleFilterColumnChange :function(args){
debugger;
}
}
});
},
render: function (renderTo) {
// This is executed on the module initialization, right after the init method.
this.view = this.Ext.create("Terrasoft.Container", {
items: [
Ext.create("Terrasoft.Container", {
renderTo: renderTo,
items: [
{
width: "300px",
markerValue: "testMarker",
rightIconClasses: ["combobox-edit-right-icon"],
className: "Terrasoft.ComboBoxEdit",
list: {
bindTo: "booleanValueColumnList"
},
prepareList: {
bindTo: "getColumnList"
},
change: {
bindTo: "simpleFilterColumnChange"
}
}
]
})
]
});
this.view.bind(this.viewModel);
return this.view;
},
destroy: function () {
this.view.destroy();
this.viewModel.destroy();
}
});
debugger;
return Terrasoft.UsrDropDownGenerator;
});
2- Code of my page
......
methods: {
onEntityInitialized:function(){
this.callParent(arguments);
var configObj = {
data : [{label : "Name" , description:"hh"},{label:"Age" , description : "10"},{label:"Job" , description : "bb"}]
};
this.sandbox.loadModule("UsrDropDownGenerator", {
renderTo: "centerPanel", //name of the container where visual module view will be displayed
keepAlive: true
});
},
},
The dropdown was created successfully and appeared in the page , but it does not contains any data.
When I click the dropdown , the getColumnList() function executed and the data are saved in the list , but no data appear in UI .
Why the data are not filled in the dropdown , where is the problem in my code?
Like
Hello,
Unfortunately, it`s hard to tell why exactly this code is not applying.
I can recommend you another, easier way to achieve it . If I understood you right, the task is to create dropdown with some values.
To achieve it you can simply create new object that will store all the data, and add the new lookup field to the page via section wizard.
Also, you can create some custom styles for this field, more about styles can be found here: https://community.bpmonline.com/questions/how-add-custom-style-control-… and here https://community.bpmonline.com/articles/how-add-or-edit-css-style
Best regards,
Alex