javascript - 在 ExtJS 菜单项中添加按钮

Question

是否可以使用 ExtJS 4.2 在 menuitem 中添加 buttons？

我需要实现以下目标:

(在每个 menuitem 的 checkbox 旁边有一个 edit 和 delete 按钮。这些将有自己的处理程序，并在单击它们时打开新面板)

---

我试图通过为每个 employee 创建一个 container 来实现它，并在其中添加所需的 buttons 加上 menuitem 但它无法正常工作，因为我无法再单击 自定义 menuitem 并且设计看起来一点也不好。

---

但是，我在以下 StackOverflow 答案中发现了一个可能的“提示”:

https://stackoverflow.com/a/11213707/1178686

(但这并不完全是我所期望的，因为我不仅需要一个图标，我还需要一个带有自己的处理程序的按钮 另外我不知道与 DOM 交互是否是一个好的方法)

---

这是到目前为止我得到的结果以及我在哪里进行测试:

现场演示:

http://jsfiddle.net/oscarj24/hmqjqtqs/

ExtJS 代码:

Ext.define('Namespace.view.Panel', {
    extend: 'Ext.panel.Panel',

    title: 'Panel',

    frame: true,
    floating: true,
    draggable: true,
    resizable: false,
    closable: true, 

    employees: null, 

    layout: {
        type: 'vbox',
        align: 'stretch'
    },

    constructor: function(cfg) {
        Ext.apply(this, cfg || {});

        this.items = [{
            xtype: 'container', 
            border: false,
            items: this.createItems()
        }];

        this.callParent(arguments);
    }, 

    createItems: function() {
        var items = [];

        items.push({
            xtype: 'button', 
            text: 'Employees', 
            menu: {
                xtype: 'menu', 
                items: this.createMenuItems()
            }
        });

        return items;
    }, 

    createMenuItems: function() {
        var employees = this.employees || [], 
            items = [];

        for (var i = 0; i < employees.length; ++i) {
            var employee = employees[i];
            if (employee) {
                items.push({
                    xtype: 'menucheckitem', 
                    text: Ext.String.format('{0} {1}', employee.name, employee.lastname), 
                    employeeId: employee.id, 
                    listeners: {
                        scope: this, 
                        checkchange: this.onMenuItemCheckChange
                    }
                });
            }
        }

        items.push({
            xtype: 'menuitem', 
            iconCls: 'add', 
            text: 'Add'
        });

        return items;
    }, 

    onMenuItemCheckChange: function(item, checked, eOpts) {
        console.log('Employee Id: %o was checked: %o', item.employeeId, checked);
    }, 

    destroy: function() {
        delete this.employees;

        this.callParent(arguments);
    }

});

Ext.onReady(function() {
    Ext.create('Namespace.view.Panel', {
        employees: [
            {id: 1, name: 'Oscar', lastname: 'Jara'}, 
            {id: 2, name: 'Foo', lastname: 'Bar'}
        ]
    }).show();
});

CSS:

.add {
    background-image: url('http://icons.iconarchive.com/icons/awicons/vista-artistic/16/add-icon.png') !important; width: 16px; height: 16px; display: block;
}

.edit {
    background-image: url('http://icons.iconarchive.com/icons/designcontest/outline/16/Pencil-icon.png') !important; width: 16px; height: 16px; display: block;
}

.delete {
    background-image: url('http://icons.iconarchive.com/icons/oxygen-icons.org/oxygen/16/Actions-edit-delete-icon.png') !important; width: 16px; height: 16px; display: block;
}

---

如果有人知道实现此目的的“正确”方法，请告诉我，因为我不确定 API< 中是否指定了其中一个配置/em> 这个组件可能会有帮助，但我无法在互联网上找到一个好的例子:

http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.menu.CheckItem

---

提前致谢。

Answer 1

我可能会选择使用 container 的方式并尝试让它工作。我意识到样式可能不如框架提供的那样好，但是通过足够的微调，您可以实现它...只需使用 Sencha CMD、scss 文件及其预定义的 CSS 变量。

在这个例子中，我快速取消了按钮的样式，因此它们可以是可点击的图标/区域，我将员工记录放在按钮本身上……这不是最好的方法，但它有效。如果您不喜欢每个单独组件上的监听器，您可以让父容器拥有监听器，并且在该函数中您将检查目标的 CSS 类……但这不是重点。工作 example :

Ext.application({
  name: 'Fiddle',

  launch: function() {
    Ext.define('MyPanel', {
      extend: 'Ext.panel.Panel',
      title: 'My Panel',
      renderTo: Ext.getBody(),
      employees: [{
        id: 1,
        name: 'Oscar',
        lastname: 'Jara'
      }, {
        id: 2,
        name: 'Foo',
        lastname: 'Bar'
      }],
      initComponent: function() {
        this.createMenuItems();
        this.callParent();
      },
      createMenuItems: function() {
        var items = [];
        var employees = this.employees;
        if (employees) {
          for (var i = 0; i < employees.length; i++) {
            var employee = employees[i];
            var containerItems = [];
            var checkboxCmp = Ext.create('Ext.form.field.Checkbox', {
              width: 20
            });
            containerItems.push(checkboxCmp);
            containerItems.push({
              xtype: 'button',
              cls: 'my-custom-button',
              employee: employee,
              width: 22,
              text: '',
              iconCls: 'edit',
              listeners: {
                click: this.onClickEditButton
              }
            });
            containerItems.push({
              xtype: 'button',
              cls: 'my-custom-button',
              employee: employee,
              width: 22,
              text: '',
              iconCls: 'delete',
              listeners: {
                click: this.onClickDeleteButton
              }
            });
            containerItems.push({
              xtype: 'component',
              html: '<div style="border-left:1px solid #000;height:100%; display: inline-block;"></div>'
            });
            containerItems.push({
              xtype: 'button',
              cls: 'my-custom-button',
              textAlign: 'left',
              checkboxCmp: checkboxCmp,
              employee: employee,
              flex: 1,
              text: employee.name + ' ' + employee.lastname,
              listeners: {
                click: this.onClickEmployee
              }
            });
            items.push({
              xtype: 'container',
              layout: {
                type: 'hbox',
                align: 'stretch'
              },
              overCls: 'over-item-cls',
              items: containerItems
            });
          }
        }
        this.tools = [{
          xtype: 'button',
          text: 'Employees',
          menu: {
            xtype: 'menu',
            items: items,
            plain: true
          }
        }];
      },
      onClickDeleteButton: function(button, event, eOpts) {
        alert('clicked delete, check console for employee');
        console.log('delete', button.employee);
      },
      onClickEditButton: function(button, event, eOpts) {
        alert('clicked edit, check console for employee');
        console.log('edit', button.employee);
      },
      onClickEmployee: function(button, event, eOpts) {
        alert('employee checkbox changed, check console for employee');
        console.log('employee', button.employee);
        var checkboxCmp = button.checkboxCmp;
        if (checkboxCmp) {
          checkboxCmp.setValue(!checkboxCmp.getValue());
        }

      }
    });
    Ext.create('MyPanel');
  }
});

CSS

.add {
    background-image: url('http://icons.iconarchive.com/icons/awicons/vista-artistic/16/add-icon.png') !important; width: 16px; height: 16px; display: block;
}

.edit {
    opacity: 0.4;
    background-image: url('http://icons.iconarchive.com/icons/designcontest/outline/16/Pencil-icon.png') !important; width: 16px; height: 16px; display: block;
}

.edit:hover,
.delete:hover {
    opacity: 1.0;
}

.delete {
    opacity: 0.4;
    background-image: url('http://icons.iconarchive.com/icons/oxygen-icons.org/oxygen/16/Actions-edit-delete-icon.png') !important; width: 16px; height: 16px; display: block;
}

.over-item-cls {
    background-color: lightblue;
}

a.my-custom-button.x-btn-default-small {
    background: none;
    border: none;
}

a.my-custom-button.x-btn-default-small span {
    color: #ababab;
}

a.my-custom-button.x-btn-default-small:hover span {
    color: black;
}