带有 ExtJS 的浮动操作按钮（FAB）

Question

我无法找到在 Extjs 中添加 FAB 的示例并提出 FAB mixin。 希望，这会为处理相同问题的人节省时间。

FAB mixin 是一个可重用的组件，可将浮动操作按钮 (FAB) 添加到视图中。它可以与任何 ExtJS 视图结合使用，例如面板或表单，以添加一个浮动在视图内容上方的按钮。

要使用这个 mixin，只需将它包含在视图的

mixins

配置中，并将

fab

配置设置为指向 FAB 按钮的处理程序方法的字符串或函数，或包含任何按钮配置选项的对象.

FAB mixin 是高度可定制的，具有设置 FAB 位置、样式、图标等的选项

总的来说，FAB mixin 是一个有用的组件，用于向任何 ExtJS 视图添加浮动操作按钮， 并且可以轻松定制以满足您的项目需求。

例子：

1. 添加 FAB 到点击时调用

   onFab

   方法的视图：

  mixins: [ "MyApp.mixin.FloatingActionButton"],
  controller: {
    onFab: function() {
      Ext.Msg.alert("FAB", "FAB clicked");
    }
  },
  fab: 'onFab',

2. 添加 FAB 到点击时调用内联处理函数的视图：

  mixins: [ "MyApp.mixin.FloatingActionButton"],
  fab: function() {
    Ext.Msg.alert("FAB", "FAB clicked");
  },

3. 使用自定义按钮配置选项（例如绑定徽章文本）将 FAB 添加到视图中：

  mixins: [ "MyApp.mixin.FloatingActionButton"],
  fab: {
    bind: {
      badgeText: "{badgeText}",
    },
    handler: function() {
      Ext.Msg.alert("FAB", "FAB clicked");
    }
  },

FAB 混合：

Ext.define("DigTix.mixin.FloatingActionButton", {
  extend: "Ext.Mixin",

  mixinConfig: {
    configs: true,
    on: {
      show: "showFab",
    },
    after: {
      destroy: "destroyFab",
      hide: "hideFab",
    },
  },

  config: {
    // String, Function or Object config
    fab: null,
  },

  updateFab: function (fab) {
    this.destroyFab();
    
    var config = ['string', 'function'].includes(typeof fab)
      ? { handler: fab }
      : fab;

    if(config.handler) {
      config.handler = typeof config.handler === 'function' 
        ? config.handler 
        : this.getController()[config.handler]
    }

    Ext.applyIf(config, {
      viewModel: {
        parent: this.getViewModel(),
      },
      xtype: "button",
      ui: "primary",
      floated: true,
      text: "Save",
      iconCls: "x-fa fa-save",
      right: 20,
      bottom: 20,
      shadow: true,
      border: false
    });

    this._FAB = Ext.create(config);
  },

  showFab: function () {
    this._FAB && this._FAB.show();
  },

  hideFab: function () {
    this._FAB && this._FAB.hide();
  },

  destroyFab: function () {
    this._FAB && this._FAB.destroy();
    delete this._FAB;
  },
});