ucan-ext-js-kitchen-sink/packages/local/reviewPanel/src/reviewEntry.js

my-ext-gen-app description for Ext JS app MyExtGenApp

Ext.define('UCAN.reviewPanel.src.reviewEntry', {
  extend: 'Ext.field.RadioGroup',
  xtype: 'ucanreviewentry',

  config: {
    entry: null
  },
  twoWayBindable: {
    entry: true
  },
  listeners: {
    change: function(component, newValue) {
      this.getEntry().set('rating', newValue);
      this.up('ucanreviewpanel').setOneChecked(true);
      this.up('ucanreviewpanel').setAllChecked(
          !this.up('ucanreviewpanel').getViewItems().flatMap(container => container.down('ucanreview').getViewItems()).map(
              container => container.down('ucanreviewentry').getValue()).includes(undefined));
      let oneTemplateChecked = this.up('ucanreviewpanel').getOneTemplateChecked();
      if (!oneTemplateChecked) {
        const checked = this.up('ucanreview').getViewItems().map(container => container.down('ucanreviewentry').getValue());
        this.up('ucanreviewpanel').setOneTemplateChecked(!checked.some(el => el === null || el === undefined));
      }
    }
  },

  updateEntry: function(config) {
    this.getItems().items.forEach(radioButton => radioButton.setChecked(false));
    this.setItems([]);
    const colorSchema = this.up('ucanreviewpanel').getSchema().getRange().map(schema => schema.data);
    for (let i = 1; i <= config.get('max'); i++) {
      this.add({
        value: i,
        style: 'background-color:' + colorSchema[i - 1] + ';',
        checked: config.get('rating') === i,
        disabled: this.getDisabled()
      });
    }
  },

  updateDisabled: function(config) {
    this.getItems().items.forEach(radio => radio.setDisabled(config));
  }
});