ucan-ext-js-kitchen-sink/app/desktop/src/view/componentDetail/examples/detailView/textfieldLikeChipview.js

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

Ext.define('UCANSink.view.componentDetail.examples.detailView.textfieldLikeChipview', {
  extend: 'Ext.container.Container',
  alias: 'widget.textfieldLikeChipview',

  config: {
    availableStore: [],
    selectedStore: [],
    editable: true,
    addButtonText: ''
  },
  twoWayBindable: {
    availableStore: true,
    selectedStore: true,
    editable: true,
    addButtonText: true
  },
  layout: 'vbox',
  scrollable: true,
  defaultListenerScope: this,
  items: [
    {
      xtype: 'chipview',
      cls: 'js-ucan-textfield-like-chipview ucan-detail-view-textfield-like-chipview',
      displayField: 'asString',
      valueField: 'id',
      closeHandler: 'onRemoveSelectedRecord'
    },
    {
      layout: 'hbox',
      cls: 'js-ucan-textfield-like-chip-view-container-add',
      items: [
        {
          xtype: 'combobox',
          cls: 'js-ucan-textfield-like-chip-view-combobox-available-store',
          displayField: 'asString',
          valueField: 'id'
        },
        {
          xtype: 'button',
          cls: 'js-ucan-textfield-like-chip-view-button-add',
          handler: 'onAddSelectedRecord'
        }
      ]
    }
  ],

  onAddSelectedRecord: function(button) {
    let record = this.getAvailableStore().findRecord('id', button.up('[cls~=js-ucan-textfield-like-chip-view-container-add]')
      .down('[cls~=js-ucan-textfield-like-chip-view-combobox-available-store]').getValue());
    this.getSelectedStore().add(record);
  },

  onRemoveSelectedRecord: function(chipView, location) {
    this.getSelectedStore().remove(location.record);
    return false;
  },

  updateAvailableStore: function(config) {
    this.down('[cls~=js-ucan-textfield-like-chip-view-combobox-available-store]').setStore(config);
  },

  updateSelectedStore: function(config) {
    this.down('[cls~=js-ucan-textfield-like-chipview]').setStore(config);
  },

  updateEditable: function(config) {
    this.down('[cls~=js-ucan-textfield-like-chipview]').setClosable(config);
    this.down('[cls~=js-ucan-textfield-like-chip-view-container-add]').setHidden(!config);
  },

  updateAddButtonText: function(config) {
    this.down('[cls~=js-ucan-textfield-like-chip-view-button-add]').setText(config);
  }
});