如何通过单击网格 ExtJS 6 中的一个单元格来 select 一条记录

Question

我有一个 grid，我想 select 通过单击一个特定的单元格来查看整个记录。问题是我不能使用 checkboxmodel seltype，因为我想在每个单元格上显示自定义图标。那么有没有办法让它成为可能呢？

Answer 1

嗨，我认为您需要有单元格点击事件。请找到我的例子希望它有帮助

Ext.create('Ext.data.Store', {
    storeId: 'simpsonsStore',
    fields:[ 'name', 'email', 'phone'],
    data: [
        { name: 'Lisa', email: 'lisa@simpsons.com', phone: '555-111-1224' },
        { name: 'Bart', email: 'bart@simpsons.com', phone: '555-222-1234' },
        { name: 'Homer', email: 'homer@simpsons.com', phone: '555-222-1244' },
        { name: 'Marge', email: 'marge@simpsons.com', phone: '555-222-1254' }
    ]
});

Ext.create('Ext.grid.Panel', {
    title: 'Simpsons',
    store: Ext.data.StoreManager.lookup('simpsonsStore'),
    columns: [
        { text: 'Name', dataIndex: 'name' },
        { text: 'Email', dataIndex: 'email', flex: 1 },
        { text: 'Phone', dataIndex: 'phone' }
    ],
    listeners: {
        cellclick: function( grid, td, cellIndex, record, tr, rowIndex, e, eOpts )  {
            grid.getSelectionModel().selection(record);

        }
    },
    height: 200,
    width: 400,
    renderTo: Ext.getBody()
});

Answer 2

我解决了 beforecellclick 事件的问题。现在看起来像这样：

beforecellclick:function(grid,record,index){
                        if(index != 0){
                            return false
                        }
               }

并且我在 colIndex 0 上有一个操作列：

xtype: 'actioncolumn',
        tooltip:'löschen',
        width: 30,
        icon: '../../../../../../resources/images/16/delete_2.png',
        handler:function(grid, rowIndex, colIndex){
            var record = grid.getStore().getAt(rowIndex);
            if( grid.getSelectionModel().isSelected(record) == false){
                grid.getSelectionModel().select(record, true)
            }else{
                grid.getSelectionModel().deselect(record)
            }      
        }

如何通过单击网格 ExtJS 6 中的一个单元格来 select 一条记录

How to select a record by clicking one cell in a grid ExtJS 6

grid

extjs

selection

extjs6-classic