Hi,
we are using smartclient 10d and I am trying to implement a basic color picker selector: http://screencast.com/t/ZnFfZvIW
The left one is implemented directly on the dynamic form, so I am defining 1 field like:
and then I am setting the datasource after the form has been created:
The above is working as expected.
However, I want to define a new class with it so that we can use it in different places. I am then doing:
and trying to use it in the form by defining a field like:
but the result is the right component which you can see in my short video... not working :\
Can I maybe get some tips on this?
Thanks in advance!
we are using smartclient 10d and I am trying to implement a basic color picker selector: http://screencast.com/t/ZnFfZvIW
The left one is implemented directly on the dynamic form, so I am defining 1 field like:
Code:
isc.addProperties({
editorType: 'SelectItem',
title: 'Color Picker',
name: 'color',
displayField: 'color',
changed: function (form, item, value) {
console.log(value);
this.addProperties(OB.Styles.OBSchedule.SimpleColorPicker[value]);
this.redraw();
return this.Super('change', arguments);
},
pickListFields: [{
name: 'colorName'
}, {
name: 'html',
showTitle: false
}],
}, OB.Styles.OBFormField.DefaultComboBox)Code:
var colorValueMap = [];
var colorDataSource = isc.DataSource.create({
clientOnly: true,
fields: [{
name: 'color',
primaryKey: true
}, {
name: 'html'
}, {
name: 'colorName'
}]
});
formPhone.getField('color').setOptionDataSource(colorDataSource);
for (var i = 0; i < OB.Styles.OBSchedule.SimpleColorPicker.length; i++) {
var color = 'color';
color = color + i;
var template = '<div class="' + OB.Styles.OBSchedule.SimpleColorPicker[color].textBoxStyle + '">';
template += '</div>';
var colorObject = {
'color': color,
'html': template,
'colorName': OB.Styles.OBSchedule.SimpleColorPicker[color].colorName,
'displayText': ''
}
colorValueMap.add(colorObject);
}
formPhone.getField('color').getOptionDataSource().setCacheData(colorValueMap);However, I want to define a new class with it so that we can use it in different places. I am then doing:
Code:
isc.defineClass('OBRE_BasicColorPicker', isc.SelectItem);
isc.OBRE_BasicColorPicker.addProperties({
displayField: 'color',
showOptionsFromDataSource: true,
filterLocally: false,
defaultToFirstOption: false,
pickListFields: [{
name: 'colorName'
}, {
name: 'html',
showTitle: false
}],
changed: function (form, item, value) {
console.log(value);
this.addProperties(OB.Styles.OBSchedule.SimpleColorPicker[value]);
this.redraw();
return this.Super('change', arguments);
},
init: function () {
this.Super('init', arguments);
var colorsDataSource = isc.DataSource.create({
clientOnly: true,
fields: [{
name: 'color',
primaryKey: true
}, {
name: 'html'
}, {
name: 'colorName'
}]
});
this.setOptionDataSource(colorsDataSource);
var colorValueMap = [];
for (var i = 0; i < OB.Styles.OBSchedule.SimpleColorPicker.length; i++) {
var color = 'color';
color = color + i;
var template = '<div class="' + OB.Styles.OBSchedule.SimpleColorPicker[color].textBoxStyle + '">';
template += '</div>';
var colorObject = {
'color': color,
'html': template,
'colorName': OB.Styles.OBSchedule.SimpleColorPicker[color].colorName,
'displayText': ''
}
colorValueMap.add(colorObject);
}
this.getOptionDataSource().setCacheData(colorValueMap);
}
}, OB.Styles.OBFormField.DefaultComboBox);Code:
{
name: 'color2',
type: 'OBRE_BasicColorPicker'
}Can I maybe get some tips on this?
Thanks in advance!