CODEWITHSUNDEEP
javascriptextjsextjs4
Whisher
Whisher

Reputation: 32716

Extjs add event to a button in a grid form the controller

I've added a toolbar to my grid I'm not able to bind the event in the controller/controll It's boring have to right when the code explain itself :)

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

How can handler the click event form within the controller

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

Bye

Upvotes: 0

Views: 3128

Answers (3)

MBK
MBK

Reputation: 307

Just adding the action part will also work. 

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

Upvotes: 0

Krzysztof
Krzysztof

Reputation: 16140

Try userlist button[text=Delete]': { click: this.insertUser } or userlist button[itemId=delete]': { click: this.insertUser }.

This selectors are similiar to those from CSS, so usually you'll use container > child_subcontainer another_subcontainer element[property=value]. Underneath controller uses Ext.ComponentQuery, so you may want play with it to check what it can.

Upvotes: 1

Steven Hu
Steven Hu

Reputation: 184

maybe you can change it like this

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

Upvotes: 3

Related Questions