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

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

Ext.define('UCAN.reviewTemplateEditor.src.reviewTemplateEntry', {
  extend: 'Ext.dataview.Component',
  xtype: 'reviewTemplateEntry',

  itemsFocusable: false,
  disableSelection: true,

  defaultListenerScope: this,
  itemConfig: {
    xtype: 'container',
    cls: 'js-ucan-review-template-entries-container',
    layout: 'hbox',
    viewModel: true,
    items: [
      {
        xtype: 'textfield',
        required: true,
        cls: 'ucan-review-templates-field',
        flex: 2,
        bind: {
          value: '{record.name}',
          label: '{internalTranslator.name}',
          placeholder: '{internalTranslator.review_template_entry_new}'
        }
      },
      {
        xtype: 'spinnerfield',
        cls: 'ucan-review-templates-field',
        flex: 1,
        bind: {
          value: '{record.max}',
          label: '{internalTranslator.max}'
        },
        minValue: 1,
        maxValue: 10
      },
      {
        xtype: 'checkboxfield',
        alignSelf: 'center',
        cls: 'ucan-review-template-entry-checkboxfield',
        width: '70',
        bind: {
          checked: '{record.ko}'
        }
      },
      {
        xtype: 'button',
        ui: 'removeEntityButton',
        iconCls: 'x-fa fa-trash-alt',
        bind: {
          tooltip: '{translator.review_template_entry_remove_tooltip}'
        },
        handler: 'removeReviewTemplateEntry'
      }
    ]
  },

  items: [
    {
      xtype: 'button',
      iconCls: 'x-fa fa-plus',
      ui: 'addEntityButton',
      bind: {
        text: '{internalTranslator.review_template_entry_add}',
        tooltip: '{internalTranslator.review_template_entry_add_tooltip}'
      },
      handler: 'onAddReviewTemplateEntry'
    }
  ],

  onAddReviewTemplateEntry: function() {
    const newEntry = Ext.create('UCAN.util.src.GenericModel', {
      name: '',
      max: this.getParent().getDefaultMax(),
      ko: false
    });
    this.getStore().add(newEntry);
  },

  removeReviewTemplateEntry: function(button) {
    Ext.create('Ext.Dialog', {
      ownerCmp: button,
      html: this.getParent().getViewModel().get('internalTranslator.review_template_entry_remove_text'),
      maskTapHandler: 'onCloseDialog',
      buttons: {
        ok: {
          handler: 'onRemoveReviewTemplateEntry'
        },
        cancel: {
          bind: {
            text: '{internalTranslator.dialog_cancel}'
          },
          handler: function(comp) {
            comp.up('dialog').destroy();
          }
        }
      }
    }).show();
  },

  onRemoveReviewTemplateEntry: function(button) {
    const record = SinkUtil.upClassFromView(button, 'js-ucan-review-template-entries-container').getRecord();
    this.getStore().remove(record);
    button.up('dialog').destroy();
  },

  onCloseDialog: function(dialog) {
    Ext.destroy(dialog)
  }

});