javascript - Extjs 4 actioncolumn问题

This question already has an answer here:

ExtJS grid: handling action column's click event in the controller

                                    （1个答案）


                                3年前关闭。


我有一个Ext.grid.Panel与此项目：

items:[
                   {
                           xtype:'actioncolumn',
                           width:20,
                           align:'center',
                           items: [
                                   {
                                       icon:'resources/images/icons/table_edit.png',
                                       tooltip: 'Edita Registro',
                                       action:'edit'
                                   },
                           ]
                   },
                   {header:'<span style="color:blue;">Estado</span>', dataIndex:'testado', width:90},
                   {header:'<span style="color:blue;">Cliente</span>', dataIndex:'tcliente', width:110, sortable: true},
                   {header:'<span style="color:blue;">N&#176; Expediente</span>', dataIndex:'Expediente', width:100},
                   {header:'<span style="color:blue;">Organismo</span>', dataIndex:'torganismo', width:255, sortable: true},
                   {header:'<span style="color:blue;">Convocatoria</span>', dataIndex:'F_Convocatoria', width:80, sortable: true},
                   {header:'<span style="color:blue;">Presentacion</span>', dataIndex:'F_Presentacion', width:80, sortable: true},
                   {header:'<span style="color:blue;">Aviso</span>', dataIndex:'F_Aviso', width:80, sortable: true},
                   {header:'<span style="color:blue;">Importe sin IVA</span>', dataIndex:'Total_Licitacion_sIVA', width:105, sortable: true},
                   {header:'<span style="color:blue;">Responsable</span>', dataIndex:'tresponsable', width:140, sortable: true},
            ]

在我的控制器中，当用户单击actioncolumn的按钮时，我想移交。我有以下代码：

this.control({
    'viewGridRECO actioncolumn':{
        click:this.onPulsarEditar
    }
});

使用控制器中的先前代码，当用户单击操作列的单元格中的任何位置时，onPulsarEditar函数将执行，但是我希望仅在单击按钮时才执行，而不是在操作列的单元格中的所有位置执行。

我试图将action:'edit'属性放在按钮和控制器中：

this.control({
    'viewGridRECO actioncolumn button[action=edit]':{
        click:this.onPulsarEditar
    }
});

什么也没发生。

最佳答案

正如@Abdul Rehman Yawar Khan提到查看this帖子一样，更新我的代码后，它是：

在视图中，column items：

items:[
                   {
                           xtype:'actioncolumn',
                           width:20,
                           align:'center',
                           items: [
                                   {
                                       icon:'resources/images/icons/table_edit.png',
                                       tooltip: 'Edita Registro',
                                       handler: function(view, rowIndex, colIndex, item, e, record, row) {
                                            this.fireEvent('itemClick', view, rowIndex, colIndex, item, e, record, row, 'edit');
                                       }
                                   }
                           ]
                   },
                   {header:'<span style="color:blue;">Estado</span>', dataIndex:'testado', width:90},
                   {header:'<span style="color:blue;">Cliente</span>', dataIndex:'tcliente', width:110, sortable: true},
                   {header:'<span style="color:blue;">N&#176; Expediente</span>', dataIndex:'Expediente', width:100},
                   {header:'<span style="color:blue;">Organismo</span>', dataIndex:'torganismo', width:255, sortable: true},
                   {header:'<span style="color:blue;">Convocatoria</span>', dataIndex:'F_Convocatoria', width:80, sortable: true},
                   {header:'<span style="color:blue;">Presentacion</span>', dataIndex:'F_Presentacion', width:80, sortable: true},
                   {header:'<span style="color:blue;">Aviso</span>', dataIndex:'F_Aviso', width:80, sortable: true},
                   {header:'<span style="color:blue;">Importe sin IVA</span>', dataIndex:'Total_Licitacion_sIVA', width:105, sortable: true},
                   {header:'<span style="color:blue;">Responsable</span>', dataIndex:'tresponsable', width:140, sortable: true},
            ]

在控制器中：

this.control({
    'actioncolumn':{
        itemClick:this.onPulsarEditar
});

请注意，控制器中actioncolumn的itemClick的编写方式与视图处理程序事件中的编写方式相同。

在控制器的功能onPulsarEdit中，您可以根据需要添加执行该功能所需的所有代码。

Actioncolumn

javascript - Extjs 4 actioncolumn问题