ucan-ext-js-kitchen-sink/packages/local/reviewTemplateEditor/src/reviewTemplateEditor.js

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

Ext.define('UCAN.reviewTemplateEditor.src.reviewTemplateEditor', {
  extend: 'Ext.field.Panel',
  xtype: 'reviewTemplateEditor',

  config: {
    reviewTemplate: null,
    translator: null,
    defaultMax: 3
  },
  twoWayBindable: {
    reviewTemplate: true
  },
  viewModel: {
    data: {
      internalReviewTemplate: null
    },
    stores: {
      internalTranslation: {
        data: []
      },
      internalReviewTemplateEntries: {
        data: []
      }
    },
    formulas: {
      internalTranslator: function(get) {
        return get('translation.first');
      }
    }
  },
  border: true,
  cls: 'js-ucan-review-templates-container ucan-review-templates-container',
  defaultListenerScope: this,
  layout: 'hbox',
  items: [
    {
      xtype: 'toolbar',
      docked: 'top',
      shadow: false,
      border: true,
      cls: 'ucan-review-templates-toolbar',
      items: [
        {
          xtype: 'label',
          flex: 1,
          bind: {
            html: '{internalTranslator.review_template}'
          }
        },
        {
          xtype: 'label',
          cls: 'ucan-review-templates-label-margin-left',
          flex: 2,
          bind: {
            html: '{internalTranslator.review_template_entry}'
          }
        },
        {
          xtype: 'label',
          flex: 1,
          bind: {
            html: '{internalTranslator.review_template_entry_max}'
          }
        },
        {
          xtype: 'label',
          cls: 'ucan-review-templates-label-margin-right',
          bind: {
            html: '{internalTranslator.ko}'
          }
        }
      ]
    },
    {
      flex: 1,
      layout: 'vbox',
      items: [
        {
          xtype: 'textfield',
          required: true,
          cls: 'js-ucan-review-template-editor-textfield-name ucan-review-templates-field',
          bind: {
            label: '{internalTranslator.name}',
            placeholder: '{internalTranslator.review_template_new}',
            value: '{internalReviewTemplate.name}'
          }
        }
      ]
    },
    {
      flex: 3,
      xtype: 'reviewTemplateEntry',
      bind: {
        store: {
          data: '{internalReviewTemplate.reviewEntries}',
          model: 'UCAN.util.src.GenericModel',
          reviewTemplate: '{internalReviewTemplate}',
          listeners: {
            update: function() {
              this.reviewTemplate.set('reviewEntries', this.data.getRange().map(entry => entry.data));
            },
            remove: function() {
              this.reviewTemplate.set('reviewEntries', this.data.getRange().map(entry => entry.data));
            },
            add: function() {
              this.reviewTemplate.set('reviewEntries', this.data.getRange().map(entry => entry.data));
            }
          }
        }
      }
    }
  ],

  updateReviewTemplate: function(config) {
    this.getViewModel().set('internalReviewTemplate', config);
    if (!Ext.isEmpty(config)) {
      this.getViewModel().get('internalReviewTemplateEntries').loadRawData(config.get('reviewEntries'));
    }
  },

  updateTranslator: function(config) {
    this.getViewModel().get('internalTranslation').loadRawData(config);
  }
});