Question

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

我需要实现以下目标：

（要在每个edit的{{1}}旁边设置delete和checkbox按钮。这些按钮将有自己的处理程序，并会在以后打开新的面板点击它们）

我试图通过为每个menuitem创建一个container来实现它，并在其中添加所需的employee加上buttons但是因为我不能正常工作在做完之后不能menuitem自定义click并且设计看起来不太好。

但是，我在以下 StackOverflow 答案中找到了可能的“提示”：

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

（但这不完全是我所期望的，因为我不需要menuitem，我需要icon有自己的button加上我不知道与handler进行交互是否是一个很好的方法

这是我到目前为止所做的以及我正在进行测试的地方：

现场演示：

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

ExtJS代码：

DOM

CSS：

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();
});

如果有人知道“正确”的方式来实现这一目标，请告诉我，因为我不确定 API中指定的其中一个配置 / em>对于这个组件可能有所帮助，我无法在互联网上找到一个好的例子：

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

提前致谢。

Answer 1

我不确定您是否有兴趣在菜单项中使用tpl：如果您愿意，我可以在下面改进此代码。而小提琴：https://fiddle.sencha.com/#fiddle/tt3

        Ext.define('Image', {
        extend: 'Ext.data.Model',
        fields: [
            { name:'buttonText1', type:'string' },
            { name:'buttonText2', type:'string' },
            { name:'menuText',    type:'string' }
        ]
    });

    Ext.create('Ext.data.Store', {
        id:'imagesStore',
        model: 'Image',
        data: [
            { buttonText1:'edit', buttonText2: 'add', menuText:'Drawing', id: '1' },
            { buttonText1:'edit', buttonText2: 'add', menuText:'Advanced', id: '2' },
        ]
    });

    var imageTpl = new Ext.XTemplate(
            '<tpl for="."><table>',
            '<div class="menu-row">',
            '<input type="checkbox" id="check{id}">',
            '<button class="{buttonText1}">{buttonText1}</button>',
            '<button class="{buttonText2}" >{buttonText2}</button> {menuText}',
            '</div>',
            '<table></tpl>'
    );

    var dataview = Ext.create('Ext.view.View', {
            itemId: 'idDataView',
            store: Ext.data.StoreManager.lookup('imagesStore'),
            tpl: imageTpl,
            itemSelector: 'div.menu-row',
            listeners: {
                itemclick: function(dataview, record,items) {
                    Ext.each(items.children, function(item) {
                        if (item.id == 'check'+ record.get('id')) {
                            item.checked == false ? item.checked = true : item.checked = false;
                        }
                    });

                }
            }
    });

    var button = Ext.create('Ext.button.Split', {
                text: 'menuButton',
                margin: '100 100 100 100',
                menu: {
                    //plain: true,
                    items: [dataview],

                    listeners: {
                        afterrender: function(menu) {
                            var task = new Ext.util.DelayedTask(function(){
                                Ext.each(menu.down('#idDataView').getEl().dom.children, function(nodes) {
                                    Ext.each(nodes.children, function(node) {
                                        if (node.className == 'edit') {
                                            node.addEventListener('click', function() {
                                               alert('edited'); 
                                            });
                                        } else if (node.className == 'add') {
                                            node.addEventListener('click', function() {
                                               alert('added'); 
                                            });
                                        }
                                    })

                                });
                             });
                            task.delay(100);  
                        }
                    },
                },
        renderTo: Ext.getBody()

    });

Answer 2

我可能会选择使用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;
}

在ExtJS菜单项中添加按钮

2 个答案: