Extending SelectItem

[alino]

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:

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)

and then I am setting the datasource after the form has been created:

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);

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:

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);

and trying to use it in the form by defining a field like:

{
  name: 'color2',
  type: 'OBRE_BasicColorPicker'
}

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!

[Isomorphic]

Use "editorType" when specifying a specific class should be used for a form field. "type" as you currently have it is for specifying the data type, not the class name of the FormItem to use.

Another error: assign to pickListFields in init(), not at class definition time. As you have it, all instances of your custom FormItem would share the same pickListFields array, which is invalid.

[alino]

Thanks for the reply.
I understand both your points and fixed my code accordingly. But I still get the same behavior as mentioned in the first topic. :\

Any eventual further tips? I've spent some time trying to make this work but I really don't understand what I am missing.

Thanks in advance!

[Isomorphic]

There's a couple more odd things or outright bugs in your code:

1. you're implement changed but your Super() call is to change.

2. we don't know what the addProperties() / redraw() code in changed() is expected to accomplish, but that's definitely wrong. You can't call addProperties() on a live instance, use setters and other APIs instead.

3. for some reason you construct the DataSource then subsequently call setCacheData(), *after* you've provided the DataSource as the optionDataSource. This is given the SelectItem the opportunity to try a fetch and decide the DataSource is empty. Just provide the DataSource with cacheData as you create it