Question

我在网格中添加了一个工具栏我无法在控制器/控件中绑定事件当代码解释自己时，这很无聊：）

Ext.define('SA.view.user.List' ,{
  extend: 'Ext.grid.Panel',
  alias : 'widget.userlist',
  title : 'All Users',
  store: 'Users',
  initComponent: function() {

    this.columns = [
      {
      header: 'Id',
      sortable: true,
      dataIndex: 'id',
      flex: 1,
      field: {
        type: 'textfield'
      }
    },
    {
      header: 'Name',
      sortable: true,
      dataIndex: 'uname',
      flex: 1,
      field: {
        type: 'textfield'
      }
    },
    {
      header: 'Email',
      sortable: true,
      dataIndex: 'email',
      flex: 1,
      field: {
        type: 'textfield'
      }
    }
    ];

    this.callParent(arguments);
  },

  dockedItems: [
    {
    xtype: 'toolbar',
    items: [{
      iconCls: 'icon-add',
      text: 'Add',
      scope: this

    }, {
      iconCls: 'icon-delete',
      text: 'Delete',
      disabled: true,
      itemId: 'delete',
      scope: this

    }]
  },
  {
    xtype: 'pagingtoolbar',
    store: 'Users',   // same store GridPanel is using
    dock: 'bottom',
    displayInfo: true
  }
  ]
});

如何处理控制器中的click事件表单

init: function() {
    this.control({
        'userlist': {
            itemdblclick: this.editUser
        },
        'userlist > toolbar/*my attempt but it doesnt work :( */': {
            click: this.insertUser
        },
        'useredit button[action=save]': {
            click: this.updateUser
        }
    });
},

再见

Answer 1

也许你可以像这样改变它

dockedItems: [
    {
    xtype: 'toolbar',
    items: [{
      iconCls: 'icon-add',
      text: 'Add',
      action: 'add',
      scope: this

    }, {
      iconCls: 'icon-delete',
      text: 'Delete',
      action: 'delete',
      disabled: true,
      itemId: 'delete',
      scope: this

    }]
  },


init: function() {
    this.control({
        'userlist': {
            itemdblclick: this.editUser
        },
        'userlist button[action=add]': {
            click: this.insertUser
        },
        'useredit button[action=save]': {
            click: this.updateUser
        }
    });
},

Answer 2

尝试userlist button[text=Delete]': { click: this.insertUser }或userlist button[itemId=delete]': { click: this.insertUser }。

此选择器与CSS中的选择器类似，因此通常您将使用container > child_subcontainer another_subcontainer element[property=value]。控制器下方使用Ext.ComponentQuery，因此您可能希望使用它来检查它可以做什么。

Answer 3

只需添加动作部分也可以。

init: function() {
    this.control({
        'userlist': {
            itemdblclick: this.editUser
        },
        'userlist > toolbar > button[action=add]': {
            click: this.insertUser
        },
        'useredit button[action=save]': {
            click: this.updateUser
        }
    });
},

Extjs将事件添加到控制器的网格形式的按钮中

3 个答案: