Extjsコントローラーのグリッド内のボタンにイベントを追加する

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

はどのようにコントローラ内のクリックイベントのフォームハンドラ]できる

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

のようなGEそれは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 
     } 
    }); 
},