Question

这是用于通过javascript控制台进行测试。我有一个网格视图，我希望能够单击位于操作列中的图像。点击后，它应该从网格中删除记录。图像作为与其关联的项目ID。这是我对它的抨击：

var getGridImg = Ext.ComponentQuery.query('actioncolumn[itemId=actionColumnID]')[0];
getGridImg.fireEvent('click', getGridImg);

这似乎根本不起作用。有什么帮助？

我也尝试过这个，但重新加载网格后，记录仍在那里。

var getGridImg = Ext.ComponentQuery.query('actioncolumn[itemId=actionColumnID]')[0];
var store = getGridImg.getStore();
var record = getGridImg.store.getAt(0);   
store.remove(record);

这是我的定义：

                    xtype: 'actioncolumn',
                itemId: 'removeRecord',
                align: 'right',
                hidden: true,
                width: 35,
                items: [{
                    icon: 'img.png',
                    handler: 'onRemoveRecord'
                }]
            }],

Answer 1

在actioncolumn定义的item对象中使用处理程序：

{
    xtype:'actioncolumn',
    width:50,
    items: [{
        icon: 'path/to/your/image.png',  
        tooltip: 'A tooltip message',
        handler: function(grid, rowIndex, colIndex) {
           // your code goes here
        }
    }]
}

有关详细信息，请参阅官方documentation

Answer 2

我对所有动作列图标使用以下模式。看看这是否有帮助。我不确定我是否遵循您的JS控制台要求。希望这会有所帮助。

在您的视图中（例如，使用xtype：'yourgrid'的网格）：

 {
            xtype: 'actioncolumn',
            flex:1,
            items: [{
                iconCls: 'icon-add',
                // You will need a class icon-add in your css file
                handler: function (grid, rowIndex, colIndex) {
                    this.up('grid').fireEvent('buttonclick', grid, rowIndex, colIndex);
                }
            }
            ]
},

在此视图的控制器中：

init: function() {
    this.control({
        'yourgrid':{
            buttonclick : this.buttonclick
        }
    });
},
buttonclick: function (grid, rowIndex, colIndex) {
    var rec = grid.getStore().getAt(rowIndex), me = this;
    //delete from server
     grid.mask("Deleting..");
     rec.destroy({
            scope:this,
            callback : function(record, operation) {
                 if (operation.wasSuccessful()) {
                            grid.getStore().reload();
                 } else {
                      Ext.MessageBox.alert('Error','Error while deleting record\n'+operation.response.responseText);
                 }
                grid.unmask();
           }
    });
   //if you like to just remove it from the store you could use grid.getStore().removeAt(rowIndex);
},

在你的css文件中：

.icon-add {
     background-image: url(/images/add_icon.png) !important;
     background-size: 14px 14px;
     background-repeat: no-repeat; }

如何点击网格视图的操作列中的图像？

2 个答案: