选择具有值的网格单元格

时间:2013-01-26 11:12:08

标签: extjs extjs-mvc

我使用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>';
            }
        }

enter image description here  点击a时我想获得控制器中单元格的值

1 个答案:

答案 0 :(得分: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