作为“目标” handler工具栏按钮，控制器的方法？

Question

你好！

我希望这个处理程序“handler：onEventControler（???）”从视图中删除（它不属于那里）

对于网格视图设置dockedItems这个cod：

        this.dockedItems = [{
        xtype: 'toolbar',
        items: [{
            xtype: 'newstation'
        },{
            id: 'add-persone-btn',
            xtype: 'button',
            itemId: 'add',
            text: 'Add',
            iconCls: 'icon-add',  
            handler: onEventControler(???)
        }, '-', {
            itemId: 'delete',
            text: 'Delete',
            iconCls: 'icon-delete',
            disabled: true,
            handler: function(){
                var selection = grid.getView().getSelectionModel().getSelection()[0];
                if (selection) {
                    store.remove(selection);
                }
            }
        }]
    }]

我也尝试实现一个 this.control，但我无法要求按钮选择器查询。

我如何正确尊重 mvc extJs4 架构？

谢谢。

Answer 1

您应该能够在此视图的控制器内执行类似的操作。

init: function () {
  this.control({
    'toolbar #add': {
      click: this.onAddStation
    }        
  });
}

处理程序：

onAddStation: function(button, e, eOpts){
  //Handle
}

或者，您可以在按钮上使用“操作”配置。

action: 'addstation'

然后你可以：

init: function () {
  this.control({
    'button[action=addstation]': {
      click: me.onAddStation
    }        
  });
}

http://docs .sencha.com/ext-js/4-0/#!/api/Ext.button.Button

Answer 2

这是视图 gridd 视图的方法“initComponent”：

initComponent: function () {
    this.plugins = [Ext.create('Ext.grid.plugin.RowEditing')];

    this.dockedItems = [{
        xtype: 'toolbar',
        items: [{
            xtype: 'button',
            itemId: 'add',
            text: 'Add',
            iconCls: 'icon-add',
            action: 'add-new-persone'
        }, '-', {
            itemId: 'delete',
            text: 'Delete',
            iconCls: 'icon-delete',
            action: 'delete-persone',
            disabled: true
        }, '-', {
            itemId: 'synch',
            text: 'Synchronization',
            iconCls: 'icon-synch',
            action: 'synch-persone'
        }]
    }];

    // paging bar on the bottom
    this.bbar = Ext.create('Ext.PagingToolbar', {
        store: this.store,
        displayInfo: true,
        displayMsg: 'Displaying topics {0} - {1} of {2}',
        emptyMsg: "No topics to display",
        items:[]
    });

    this._initColumns();
    this._initFilter();
    this.callParent(arguments);
},