如何在ExtJS中实现浮动操作按钮（FAB）？附Mixin实现方案

找不到ExtJS中添加浮动操作按钮（FAB）的现成示例，于是开发了这款可复用Mixin，能快速给任意ExtJS视图（面板、表单等）添加悬浮在内容上方的FAB，希望帮遇到同样问题的开发者节省时间。

该Mixin支持高度定制，可配置FAB的位置、样式、图标等参数，只需在视图的mixins配置中引入，再通过fab配置项定义按钮行为即可。

使用方式 #

引入Mixin后，fab配置项支持三种形式：

• 字符串：指向控制器中已定义的处理方法名
• 函数：直接传入内联的点击处理函数
• 对象：包含完整的按钮配置参数，可覆盖默认样式、实现数据绑定等自定义逻辑

示例代码 #

1. 绑定控制器方法的FAB #

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");
  }
},

Mixin源码（ExtJS 7 现代工具包） #

Ext.define("MyApp.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;
  },
});

内容的提问来源于stack exchange，提问作者A.Pokidin