0

私はこのgridPanelを持っています:

Ext.define('BM.view.test.MacroList', {
extend: 'BM.view.GridPanel',
alias:'widget.macro-test-list',

store: 'Tests',

initComponent: function() {

    this.columns = [
        {
            xtype:'actioncolumn',
            width:50,
            items: [
            {
                icon: 'images/start.png',
                tooltip: 'Start Test',
                handler: function(grid, rowIndex, colIndex) {
                    this.application.fireEvent('testStart', grid.getStore().getAt(rowIndex)); 
                // application not defined here because 'this' is the button.
                }]
     }]
}
}

stratTestはアプリ内のいろいろなところから使える機能なので、アプリ全体のイベントとして使ってほしいのですが、コントローラーからしか使えないようです。このボタン内のハンドラーから
呼び出すにはどうすればよいですか?.application.fireEvent('testStart'...)

私はこの質問をイベントや Sencha ドキュメントへの絶え間ない参照として使用していますが、答えが見つかりませんでした。

4

3 に答える 3

6

You get this.application within a controller scope.

Given you are clearly using MVC here, I'd say it's best to stick to MVC concepts; that is, for reusability sake, a component shouldn't know what controller uses it, but rather a controller should know what components it is using.

So you should really listen to the event in the controller, and fire an application event from there.

The problem is that there's no access to the actioncolumn handler from the controller (it is called internally in Ext.grid.column.Action processEvent()).

So your best shot is to fire a new event in the view:

this.columns = [
    {
        xtype:'actioncolumn',
        ...
        items: [
        {
            ...
            handler: function( aGrid, aRowIndex, aColIndex, aItem, aEvent, aRecord ) {
                this.fireEvent( 'columnaction', aGrid, aRowIndex, aColIndex, aItem, aEvent, aRecord); }
        }]
 }]

Notice also that you can define a global handler for the column, like so:

this.columns = [
    {
        xtype:'actioncolumn',

        handler: function( aGrid, aRowIndex, aColIndex, aItem, aEvent, aRecord ) {
            this.fireEvent( 'columnaction', aGrid, aRowIndex, aColIndex, aItem, aEvent, aRecord); }

        ...
        items: [
        {
            ...
        }]
 }]

And then catch this event in the controller.

init: function() {
    this.control({
        'macro-test-list actioncolumn':{
            columnaction: this.onAction
        }
    });
},

onAction: function( aGrid, aRowIndex, aColIndex, aItem, aEvent, aRecord ) {
    this.application.fireEvent( 'testStart', aGrid.getStore().getAt( aRowIndex ) );
}

Notice, by the way, that given what you are trying to do, a cleaner code would be:

onAction: function( aGrid, aRowIndex, aColIndex, aItem, aEvent, aRecord ) {
    this.application.fireEvent( 'testStart', aRecord );
}
于 2012-09-02T10:32:12.193 に答える