extjs - 値のあるグリッドセルを選択

Question

私はextjs mvcを使用しており、レンダラーを持つ列があります

{
        text: __('Profiler.Personage.Settings.Active'),
        name: 'AdminDeny',

        renderer: function (value, metaData, record, row, col, store, gridView) {
            if (value == null || value == true) {
                return '<a class="Deactive"  href="javascript:void(0);"><img src="' + icon.Deactive + '" alt="Is Default" title="' + __('Profiler.Personage.PhoneGrid.IsDefault') + '" class="grid-icon" /></a>';
            } else {
                return '<a href="javascript:void(0);"><img src="' + icon.IsDefault + '" alt="Is Default" title="' + __('Profiler.Personage.PhoneGrid.IsDefault') + '" class="grid-icon" /></a>';
            }
        }

クリックするaと、コントローラーのセルの値を取得したい

Answer 1

簡単です。actioncolumnを使用する必要があります：

{
     text: 'Is active',
     xtype: 'actioncolumn',
     align: 'center',
     dataIndex: 'is_active',
     width: 70,
     renderer: function (value, metaData, record, row, col, store, gridView) {
         if (value == null || value == true) {
             return '<img action="disable" src="/path/to/image.png" title="Some title" class="grid-icon" />';
         } else {
             return '<img action="enable" src="/path/to/image.png" alt="Is Default" title="Some title" class="grid-icon" />';
         }
     }
}

そしてあなたのコントローラーで：

    init:function() {
        this.control({

            ...

            'panel[itemId=mygrid] actioncolumn': {
                click: function(grid, cell, row, col, e) {
                    var record = grid.getStore().getAt(row),
                        action = e.getTarget('.grid-icon', 3, true).getAttribute('action'),
                        message;

                    if(action == 'enable') {
                        message = 'Clicked "enable" for '+record.get('name');
                    }else if(action == 'disable') {
                        message = 'Clicked "disable" for '+record.get('name');
                    }
                    alert(message);
                }
            }

            ...

        });

        ...
    }

githubのライブ例を参照してください：http：//htmlpreview.github.com/？https： //github.com/werdender/ext4examples/blob/master/actioncolumns.html