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!
Comment